Happy Monday and welcome to part 3 in my tutorial series on YSlow optimization. Today I am going to go over a few trouble areas and provide a means to fix them for your site. In the last installment we focused on a few server side tweaks and some coding issues, today will be quite similar with a mix of server implemented changes and a few code based things as well.
Avoid CSS Expressions
If you are like 90% of people I know you will be saying “what the heck are CSS expressions?” I will start of with a brief explanation; CSS expressions are a very powerful means to manipulate CSS properties dynamically and they can be used to conditionally alter CSS based upon certain variables such as setting a different header to show each hour, having a different background on holidays or to change your font color daily, the options are virtually endless. While some of these things may sound really cool they are a terrible idea to use on any site as the drawbacks greatly outweigh the benefits of using them, in my opinion anyhow.
The negative aspect of using CSS expressions comes from how they are handled by the browser, most people would think they should only be evaluated once per page load but unfortunately that is not the case. CSS expressions can be evaluated any time you move the window, scroll the page, click on anything or even when you move your mouse over the page. It’s quite likely that a single css expression may be evaluated 10,000 times in a matter of minutes, and that can lead to a serious degradation of your sites performance. Long story short, unless you really really need them don’t use them.
Make JavaScript and CSS External
The next rule deals with javascript and CSS files again, this time focusing on where or more so how they should be included in your page. There are two ways to include them, inline with your page content or as an external file. I’m not going to get into the fine print here so I will just say that for most cases having your CSS files and javascripts as external files will be beneficial and improve your sites performance. Having these files external will allow browsers to cache them so they don’t need to be downloaded each time the page is loaded in comparison to having them inline which reduces your http requests but makes them uncacheable.
Reduce DNS Lookups
DNS can best be explained by comparing it to a phone book, you know who you want to call (the websites url) but you don’t know the number (sites IP address) so in order for your computer to take you to the site, it will look for the IP address and then save that IP address so it won’t have to look it up again for a period of time that is specified by your browser. Each hostname that serves content to your site will require one DNS lookup so reducing the number of different hostnames (www.domain.com, images.domain.com, stuff.domain.com etc) as well as remote sites like twitter and flikr can be very beneficial to your sites overall performance. The main factor to consider with this is to find a good balance for your particular site, having your content spread out on different hostnames will allow more parallel downloads of things like images and scripts but having too many will require too many DNS lookups, typically it is recommended to not use more than 4 separate hostnames on your site.
Remove Duplicate JavaScript and CSS
This section pretty much speaks for itself, don’t use duplicate CSS or javaScripts. This typically isn’t something that needs a lot of attention, just make sure you aren’t including the same CSS multiple times and that your scripts aren’t included more than once in your pages.
Configure ETags
ETags or Entity Tags are used to check if the component that you have on your computer matches the one located on the server, its al alternate means of doing so and is quite prone to errors. Unless you want to take the time and effort to ensure that your ETags are properly configured I recommend just removing them. You can very easily remove them by adding the following line to your Apache configuration file (most likely httpd.conf) or If you do not have the ability to access your servers configuration directly you can also disable ETags using your sites root directory .htaccess file by including this code there instead.
[php]Header unset ETag
File ETag none[/php]
Again, as with everything else you will want to make these determinations based upon your own needs and not just because someone tells you to, these recommendations are what I use on this site but they may not be what is best for yours. If you have any questions please don’t hesitate to post them here. Also, make sure to stop by on Wednesday, July 29th for the 4th and final installment in this series where I will cover the remaining elements that are analyzed by YSlow. Please feel free to subscribe to my RSS Feed to get notified when I make the next post right in your inbox.