Speed analysis and deconstruction of Ferrari.com
Ferrari is a famous car producer as it’s cars are one of the most expensive, fastest and stylish. Yet, it seems it’s not the same case with their web site, which loads extremely slowly. By using the plug in Yslow in FireFox, we could see that it takes 17,22sec to completely load the web site on an average internet connection. This lag is due to many neglected points in the web site optimization.
The web site is updated few times a week, so the grade it gets on Yslow might vary from day to day. But, when we were testing it was grade F – respectively – 39 points.
Grade F on Make fewer HTTP requests
Grade F on Use of Content Delivery Network (CDN)
Even if we set the cdn on Yslow to be cdn.ferrari.com we still get grade F, as there are 21 static components which are not on that cdn. Some of those components are from google analytics and yahoo.
Grade F on Avoid empty src or href
There are many useless and empty lines of code in the html file. It’s not a single case of <span> tags without any content wrapped inside. The same is the case with some <div> tags. What give grade F in that section is three images without set source address. Its just amazing that such a popular web site is coded so bad.
Grade F on Add Expires headers
Yslow says that there are 53 files without far future set expire headers. That’s a plenty of files and pointless bandwidth. Expire headers are used for not so often changed files (css, js). When there is set an expire header, it loads the files in the browser cache instead of downloading them each time the user pays another visit.
Grade F on Compress components with gzip
Gzip is used for compressing files and than transferring them to the user and decompressing again on the browser side. This is done in order to save bandwidth and for faster load time. Anyway, gzip is not used at Ferrari.com, when there are 23 files that can be shrunken by it.
Grade B on Put CSS at top
Here the situation is much better than on the previous sections. There is just one single css file that is not in the header section of the web site. It’s proved that keeping the css on the bottom of the page or somewhere else, but not on the top makes the users feel as it takes much more time, to load.
Grade C on Reduce DNS lookups
The web site is distributed on more than 4 domains. Some of them are google analytics and google ad services. In any way, the domains should be max 4. It takes extra time for each extra domain, to load the page.
The components that can be minified on Ferrari.com are 11. Minifying is removal of white spaces from the filesas well as comments. In web development, each extra 1kb matters, as we consider how many visitors a web site can have per day, per week, per month.
Grade F on Configure entity tags (ETags)
There are 7 components with misconfigured Etags. That problem comes from the many domains the web site is hosted on.
2. Possible improvements
Improving that web site is an easy task due to the huge misconfigurations pointed by now..
I’m going to compare the web site after being improved on local server and without server. With WAMP installed and set up, we got grade B and 82 points. While, without server it gets C and 76 points. That’s because there are few settings as CDN and gzip to be set on a server.
Make fewer HTTP requests
Grade D on Use a Content Delivery Network (CDN)
When we set the cdn as localhost there are only 4 left components that are not on it. Again, those are components from google.
Grade A on Avoid empty src or href
By searching for src=”” and href=”” we found all empty tags of that type and deleted them. After that there were no visible differences in the design. It’s obvious that such peaces of code confuse the server or the browser.
Grade F on Add Expires headers
We couldn’t downloaded all files from the site with the html page. That leads to misleading information on some sections like on the expire headers. We’ve set dates for all files on the server, but as some are missing, they appear as files without set expire headers.
Yet, the way we set expire headers is by starting expires_module and defining default setting for all files in the httpd.conf file. Another way to set expire headers is by using a meta tag.
<meta http-equiv=”expires” content=”Fri, 05 Dec 2008 01:00:00 GMT”/>
Grade A on Compress components with gzip
We activated gzip by starting deflate_module and headers_module and putting a small piece of code in the httpd.conf file. Now gzip is compressing all html, php, js, css files.
Grade A on Put CSS at top
Grade A on Reduce DNS lookups
As we download the website on a computer, there is no need for many domains to make plenty of DNS lookups. Otherwise, we would just keep the web site on 1 to 4 domains, but not more.
Grade A on Configure entity tags (ETags)
Grade F on Avoid HTTP 404 (Not Found) error
This is A on Ferrari.com but again, because we don’t have all files downloaded, we have the 404 error on some links.
In general, I really enjoyed this project, as we learned a lot and it appeared to be quite easy improving front-end performance. We were studying from High Performance Web sites, a book from O’Reilly as well as the documentation from Yslow.