Website: Speed is in the details

I have spent the last two years of my life dedicated to web development and feel I have really only truly begun to scratch the surface of what makes a good website.  The aesthetics are great, content is important and search engine optimization to draw in the right kind of people is important as well.  While these things will always keep you busy what about the little things you can do to make your website better,faster.

Using google analytics I have begun tracking load times of users that are visiting the site.  I track the average load time.  Based upon several articles I have read on the topic of load times I have seen the expected load times on a website is 2-4 seconds.  Since you are unable to predict what sort of internet connection your consumer has as well as what other potential things that could be slowing down the web response time, the general idea would be to make the web page load as fast as possible.  In order to provide the fastest web response possible from the sites I work on there are several tools that I use.

YSlow (Firefox,Chrome,Opera, Safari - Addon) -  YSlow is an add on that you can install into your Mozilla Firefox browser.  When you run this add on against your website you are able to get a letter score.  This letter score tells you how well your website is optimized to return a page to the user.  This addon will give you your score on a page by page basis and will also change your score based upon a cleared cache load versus a cached page load.  You can do a clear cached load in most browsers by doing a Ctrl+F5 to refresh with a clear cache.  It is generally best to test a page like the home page with a cleared cache as it will give you a score that most new users will see.  (New users will be your hardest market to keep interested as they have not yet decided if your page has the content that they are looking for.)  For pages that will be traveled to from the home page you can test with a clear cache however it is not as important unless they are pages that you expect to be accessed through search results. YSlow gives you results that are detailed to tell you what you should be doing to make your website better.  Your overall score will be determined by your score from smaller categories.  Currently these categories consist of:

• Make fewer HTTP requests
• Use a Content Delivery Netword(CDN)
• Avoid empty src or href
• Add Expires headers
• Compress components with gzip
• Put CSS at top
• Put JavaScript at bottom
• Avoid CSS expressions
• Make JavaScript and CSS external
• Reduce DNS Lookups
• Minify JavaScript and CSS
• Avoid URL redirects
• Remove duplicate JavaScript and CSS
• Configure entity tags(ETags)
• Make AJAX cacheable
• Use GET for AJAX requests
• Reduce the number of DOM elements
• Avoid HTTP 404(Not Found) error
• Reduce cookie size
• Use cookie-free domains
• Avoid AlphaImageLoader filter
• Do not scale images in HTML
• Make favicon small and cacheable

Some of the elements that YSlow tests your website on such as content delivery networks or making JavaScript and CSS external are not things that average websites would need to be concerned about. Using CDNs, making JS and CSS external would be helpful in improving heavy load or widespread use websites more accessible. The number of http requests however is something any website can manage and can quickly get out of hand if not used correctly. The reason http requests can cause your website to take longer to load is because of the way browsers currently load each request. Most browsers by default limit to run at most two requests at a time. Due to this limitation the more http requests you have the longer it will take to load. One idea to keep in mind when developing a website is to try and make it so that you only use one cascading stylesheet and if possible combine all of your JavaScript into one js file. Background-images in my experience can get out of hand quickly as well. The best way to reduce the number of background-images you use is to put all of the images into one image called a sprite. Using sprites will make it so your only loading one image instead of an image for every single background-image.

SpriteMe (sprite generating web application) - I found this application on the web and have found it to be a very useful tool in generating Sprites. It will take every image on your website that is not already a sprite and display them for you to choose to combine or create your own sprite. You will notice that the sprite image that is created will indeed be larger however it will be far less images. It also allow you to export the new css that will correctly generate your new background-images using the sprite image it creates. SpriteMe is easy to install by just simply bookmarking the link that is included on the SpriteMe Website and then on your own website simply click the bookmark and it will generate your sprites and css on the same page by using JavaScript.

There is much more that goes into a website that you can use to improve your website speed. Most of these tools are not something that normal websites would have to be concerned with but it never hurts to know what is out there to better yourself towards making websites.