Load time is one of the biggest factors in site usability, so it is important that your web site can load quickly and perform well. There are a number of things you can do to improve your site’s performance. Making improvements to the front-end makes sense and leads to much greater user satisfaction, since that is where they spend 80% of their time. In this article, I will discuss how to reduce the number of components that are loading in your page as well as reduce the number of requests made to your server to improve response time. These techniques can be used while still providing a rich web site experience.
1. Optimize Your Images
File size in your images matters and most people do not take the time to learn about the differences in file types and sizes for images so they can best use them on the web. Most image editing tools include a “Save for the web” feature that can reduce the load on the server when requesting them. Online image optimizers are also available and serve the same purpose.
Learn about different image file types that are acceptable for us on your site. JPEG/JPG is a good format for photos and digital images with lots of colors, GIFs are useful for flipbook style animations and images that have large areas of the same color. PNGs support transparency, animations and thousands of colors.
2. Clean Up Your CSS
A messy or poorly written CSS file can slow down the load time on your page since the browser has to take more time to read it in than a well-written file. Use a CSS cleaner tool like CleanCSS which will merge similar selectors, remove useless properties and reduce the amount of whitespace in your code for faster loading.
3. Add in a Slash
Adding a slash to the end of your URLs in HTML can reduce the amount of time it takes the browser to interpret that it is a directory page since it doesn’t have to look it up. This is as easy as changing http://www.learncomputer.com to http://www.learncomputer.com/. Adding the slash removes the ambiguity for the browser and doesn’t require it to find out what kind of page it is before it is served.
4. Add Height and Width Tags
It is easy to forget to add the height and width attributes of an image, especially if the image has already been sized in an editing program to the correct dimensions. However, if you do not add in this information the browser must go find it before it can render the page, which slows down the load time considerably while it goes to look it up. This can also cause page flickering or flashing while loading due to elements moving around to accommodate the image.
5. Add an Expires Header
Adding an Expires or Cache-Control header in your server will allow the browser the liberty to cache elements of the page, thus reducing the amount of round-trips or requests for elements from the server. Browsers can use the cache to help web pages load faster since many elements on a page do not change from visit-to-visit. Since most visitors are repeats, you can speed up their load times 75-85% after their first visit.
6. Add Stylesheets to the Top
Adding your stylesheet link to thesection of the document gives the appearance that your page is loading faster since it can take advantage of progressive loading. This allows the user to begin using the page before all elements have been loaded in, thus improving the user experience. Stylesheets that are linked in at the bottom of the page do not get the benefits of progressive loading and the user may be staring at a white page while waiting for the page to load.
7. Put Scripts on Bottom
The HTTP specification states that browsers should download no more than two components in parallel per hostname. This effectively blocks other elements such as images from loading if a script is currently being loaded in. The browser will not start any other downloads until it is finished. Moving your scripts to the bottom of the page allows the page to finish loading the graphical elements before the scripts begin their download.
9. Reduce the Number of DOM Elements
The more complex your web site the more likely you have multiple DOM elements. A high number of DOM elements can be a sign that improvements could be made to you page such as the removal of extra
<div> tags, nested tables and other HTML elements used for layout. Move towards making some changes to your markup and remove extra tags in favor of CSS. The number of DOM elements is easy to test, just type in Firebug’s console:
Compare your number to other well-written pages of the same complexity. How does your site measure up?
10. Minimize Cookies
Cookies can be a useful tool for reasons such as authentication or personalization but when your cookies get out of hand it can have a serious impact on your page. It is important to think about the size of your cookies so they do not begin to interfere with the load time of your page.Think about how you could eliminate some cookies or reduce their size. Set an expiration date appropriately so the cookie will naturally drop off at a reasonable time.
Performance issues will continue to be important to users regardless of the fact they can load pages much faster now than in the past. Developers have taken this as a license to write bigger and more complex pages in return.The key to faster pages is a reduction in things that make your site slow: downloading too many large components, images, stylesheets, scripts, Flash, etc…and lowering the number of requests made to your server. I have shown you several ways you can speed up your existing site or maybe just become more proficient at writing web pages that are ready for the web.