Optimizing Ferrari.com with YSlow

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.

Picture of Ferrary

Grade F on Make fewer HTTP requests

Ferrari’s home page has 20 external javascript files attached, 13 cascading style sheets and 14 external background images. This simply brings a huge load of requests of files to the server, for each user.

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 E on Put JavaScript at bottom

The rule for javascript is different than for css. JavaScript should be on the bottom of the page, as it doesn’t posses that visual power and importance as css. There are 9 js files that are on the wrong place and make grade E in that section.

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.

Grade F on Minify JavaScript and CSS

grade B on minify JavaScriptThe 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

All css files were merged into one, javascripts as much as we can. Yet, from somewhere appeared 15 external background images, which still keep grade F in that section. As designers we understand that it’s impossible for any web site to have that many background images, on top of that as external files. If we knew exactly where are applied those backgrounds, we could turn them into css sprite images and save 14 additional 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 Put JavaScript at bottom
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 B on Minify JavaScript and CSS
We used JS Minifier to minify the css and javascript code. Some of the javascript on the html page couldn’t be minified more, that’s why the grade is B, not A.
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.Screenshot of YSlow

Leave a Reply

Your email address will not be published. Required fields are marked *