Posted by Tom Walker in Search Engine Optimisation (SEO) | 0 comments
Website Optimisation – Part 2
I recently wrote a post on website optimisation that covered some useful tools that could help you identify areas of you site that are having a negative effect on page load times and performance. I wanted to elaborate on that topic some more and delve into some slightly more technical but very effective methods of optimisation. Many of the issues I will be addressing will have been identified by the tools recommended in the previous instalment but those tools generally do not show you how to go about solving the issues they raise.
Reduce the Number of HTTP Requests
80-90% of end-user response time is spent on the front-end (page-layout, graphics, text, scripts, stylesheets, Flash etc.) and most of this time is spent downloading the components that go into making up the page. If you can minimise the number of components you can in turn reduce the number of HTTP requests needed to render the page.
You can reduce the number of components quite easily by simplifying your page design but do you really have to compromise on appearance to gain faster response times? Well, here are a couple of techniques that mean you shouldn’t have to.
Combining Files is a great way to cut the number of HTTP requests. If you have numerous scripts then why not combine them into one single file, you can do this with CSS too to create one single stylesheet.
CSS Sprites is the preferred method of reducing the number of image requests although whether it will be beneficial to you will depend on how your site is built. You can combine your background images into one single image and use the background-image and background-position properties to show the required image segment.
Minimising the number of HTTP requests in your page is definitely the place to start your optimisation efforts, it is the most important factor in improving performance for first time visitors. Since around half of your daily visitors come to your site with an empty cache making your site faster for these first time visitors is essential for a better user experience.
Use a Content Delivery Network
How close a user is to the server that delivers your content has an impact of load times. If your content is deployed on numerous servers in different geographic regions it can be delivered from the server nearest the user and improve response times. But how do you go about this?
Remember that 80-90% of the end user response time is spent downloading the components of the page. Rather than trying to tackle the daunting task of redesigning your application architecture, it’s far simpler to start off by dispersing your static content. This will achieve a greater improvement in response times and is made easier thanks to content delivery networks (CDN).
Some of the larger internet companies own their own CDN but it’s more cost effective to use a CDN provider of which there are many to choose from. For start-up companies and private web sites a CDN service can be relatively expensive but as your audience grows larger and becomes more global steps should be taken to ensure all of your users receive the best experience possible.
Put Stylesheets at the Top
Moving your stylesheets to the <head> portion of your document gives users the impression your page is loading faster. This is because putting stylesheets in the <head> allows the page to render progressively.
The reason behind wanting a page to load progressively is that you want the browser to display whatever content it has as soon as possible. This has the most impact on pages with a lot of content and for users with slower internet connections. When the browser loads a page progressively items such as the header, the navigation bar etc. all serve as visual feedback for the user who is waiting and this improves the overall user experience.
Putting stylesheets at the bottom of the page stops progressive rendering in most browsers. These browsers block rendering to avoid having to redraw page elements if their style changes. This leaves the user to look at a blank white page.
Put Scripts at the Bottom
The HTTP/1.1 specification suggests that browsers download no more than two components in parallel. If you happen to serve images from multiple hostnames then you can get more than two downloads to occur in parallel. The problem caused by scripts is that they block parallel downloads. While the script is downloading, however, the browser won’t start any other downloads, not even on different host names
It’s not always easy to move scripts to the bottom of your document. If, for example the script uses document.write to insert some of the page’s content then it cannot be moved lower in the page. Usually in these situations though there is a workaround that can be implemented.
I could go on, there are a lot of other ways you can further improve your sites performance (I feel a third instalment may be necessary) but these are some of the main points that will really make an impact in your users experience.
Tweet