Google has been talking about speed again recently, but not as far as optimisation is concerned. In a recent blog post Google have been talking about a range of features and improvements which they have been implementing in order to speed up searching and browsing online.
They’ve been reiterating the advantages of their Instant Pages, highlighting the fact that this feature makes use of the pre-rendering technology available in their own browser, Chrome.
In fact most of their post, despite being published on their Webmaster Central blog has more to do with the benefits of Chrome than of anything practical which can be done by web developers in terms of better optimisation.
To be honest I’m surprised that Google have not been raising the subject of website speed for some considerable time. It’s just over a couple of years since they published a detailed blog post highlighting the fact that they were now using site loading speed as part of their overall web search ranking. Certainly it seems to be the case that they are still using site speed as a factor, but of course a slow loading website will cause your rank to potentially drop for two other reasons.
Google certainly analyses your page loading speed, and will use this as a factor when deciding how high your site will rank. But if your pages are slow loading then not only does this significantly increase the potential bounce rate of your site, causing real people to cancel the loading of your page and return to the search results, but it can also prevent people who may be using a mobile network from accessing your site.
These two factors are important because not only are you losing out on real, genuine and potentially targeted traffic, but Google also takes the bounce rate of your site into consideration when appraising the ranking of your site. But despite the importance and relevance of fast loading websites many people are still happily churning out bloated and poorly optimised websites, often unaware of the problem.
I have often blogged about the need to increase the amount of relevant and fresh content on your site, but simply sticking more and more on your site isn’t necessarily better. Perhaps you integrated a number of scripts within your pages to monitor and analyse traffic and performance. Perhaps you’ve also integrated plug-ins which enable your visitors to quickly share and bookmark your content through social media, and perhaps integrated RSS feeds from other sites. This all might be terribly good in terms of optimisation and analysis, but of course the more you add to your site, the slower your pages inevitably load.
So since Google has raised the subject of speed just recently, but failed to provide any information recently for Webmasters who wish to refresh themselves of the best advice as far as speed optimisation is concerned I thought it would be helpful to have a quick rundown today of some of the issues which you should give a little thought to.
So here is my list of 6 site speed optimisation tips…
1. Combined Files
It is very easy to end up with several different scripts all being downloaded separately for each page. You may have a scripts for visitor analysis, a script to track links, a scripts to prevent plagiarism and so on. If you have multiple scripts on single page each of these has to be downloaded individually and verified, and this can significantly increase the page loading time.
2. CSS Sprites
If you have multiple images on a page which you use frequently, for example for buttons, bullets, logos and for making sections of text stand out, then it is preferable to combine these into a single image, using the CSS background-image and background-position properties to display the individual section of the image you need.
This means that rather than downloading several images, initiating, verifying and closing the download process multiple times, one single image is downloaded, and may even be stored in the cache, massively reducing the number of HTTP requests, speeding up the page loading time hugely.
3. Image Optimisation
If you have a broadband connection yourself then you may not worry too much about how long it takes to download images, but it is important to remember that images are one of the most problematic components within a page in terms of loading times. When you have an image you wish to embed within a page is good practice to use a graphics program to compress the image.
This doesn’t mean reducing the quality of the image, but reducing the size of the file. It’s surprising just how much unnecessary data there is embedded within an image, which can be removed without compromising the visual appearance of the image at all. As a guide you should only ever really be looking to embed three types of image formats:
• GIF – these are usually the smallest file size, and are ideal for simple images which contained few colours, such as logos, diagrams, charts and cartoons
• JPEG or JPG – these are perfect for images which contain a much wider range of colours, including photographs
• PNG – if you need images which include transparent sections, and you need the image itself to be high-quality, then this is the best choice
For more information about optimising images for the web I recommend you visit http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images.
4. Resize Images
Checked to make sure that you never use the width and height attributes of an image element within your webpage HTML. It’s a shame really that they exist, because they can tend to encourage people to either use an image which is much larger than necessary, and therefore likely to slow the page down considerably, or distort an image reducing its quality significantly. Use an image editing program to scale or crop the image to the correct size needed, and use this instead.
If you don’t have an image editing program there are plenty to choose from online. For example, if you need to quickly and easily resize, crop, rotate or flip an image then visit Pixer where you can do all this for free, as well as applying various other effects such as brightness and contrast, saturation and much more.
5. CSS Stylesheets
This is perhaps one of the most important tips today. If you are not using CSS stylesheets then it is almost inevitable that your pages will be very slow loading. Rather than having each individual webpage stand entirely alone and distinct, with its own style references the size of your page is inevitably going to be significantly larger than if you can have a CSS stylesheet pulled from the server once and then reused for every page.
It’s also important to remember to include your stylesheet references in a section of your webpage. Not only is this the W3C standard, but it also helps page loading time because the page is rendered progressively rather than once all of the data has already been loaded.
6. Create Cached Versions Of Your Web Pages
One of the reasons why some websites seem to load so much faster than others is because the content of the page has already been created. In other cases though the page content is dynamically generated. This is often the case if you use a content management system or a blogging system such as WordPress.
But there is a way in which you can still create cached versions of your pages so that your page rendering times are significantly improved. If you do use WordPress then I recommend having a look at the WP Super Cache plug-in which you can find out about here – http://wordpress.org/extend/plugins/wp-super-cache/
I hope you found these six points helpful, but if you need any further advice or have any questions please do leave a comment below. If you have any suggestions of other ways in which web pages can be optimised for speed please feel free to share them with our readers.