By: Zorro D In: Google Optimization14 Jul 2012
It was in April, 2010 that Google first announced â€˜page loading speedâ€™ as one of the ranking signals. In 2011, Matt Cutts (Anti-spam head at Google) reinforced the importance of improving websiteâ€™s loading speed.
â€œOne thing I would pay attention to isoptimizing for speed...It is a slight factor in google rankings but lots of people have run tests and discovered that if you are able to decrease the speed…the latency when pages are returned within your website, customers end up doing more things… more purchases, more browsing and so you can definitely increase your ROI if you decrease your speed or latency…â€œ
- Matt Cutts
Finally Google brought â€˜loading speedâ€™ under the ranking scale after running a couple of tests to judge the effect of slow loading speed on usersâ€™ behaviour. In each experiment, Google ended up concluding that speed is a crucial factor to satisfy visitors.
One of these studiesÂ points that if the search results page is slowed down by mere 100-400 milli-seconds, it impacts 0.2% – 0.6% searches per user.
In a similar experiment, Marissa Mayer, Vice President of Location and Local service at Google, inquired web-surfers on whether they would like to have more than 10 results on a search page or not. Google implemented the idea of showing 30 results after receiving an overjoyed consent from a majority of web-surfers. But what was the result? Google witnessed a whopping 25% drop in their searches in less than 6 weeks! And that was because of a piddling 0.5 second delay (a page with 10 results took 0.4 seconds to load while a page with 30 results took 0.9 seconds).
Also with the announcement of â€˜Instant Pagesâ€™ lately, Google has re-emphasized itâ€™s focus on speed. If Google is too obsessed with itâ€™s own search speed, itâ€™s definitely concerned with the loading speed of individual websites!
Apart from Googlesâ€™ experiments, there have been many otherÂ independent studiesÂ as well that go into proving the worthiness of building faster sites.
And why just Google, website visitors are all for quick loading! Your browsers wish to flip through your pages as easily and quickly as they can with a tangible newspaper or magazine. And thatâ€™s pretty obvious, isnâ€™t it? So, it all follows a flow-chain – pokey websites create a bad user experience, bad user experience causes missed leads, missed leads cause high bounce rate and high bounce rate causes poor SERPs.
Thus, if your website is taking longer than usual to load and you are unconcerned, you are losing out on your websiteâ€™s SERPs. But wait…
Image Courtsey: Search Engine Watch
Unfortunately, there is no unanimity on the World Wide Web over the optimum page loading speed. However, generally speaking, a website begins to lose out on visitors if it crosses the 4 seconds mark. But, there are websites that load in two seconds or less. THESE are the websites that create happy visitors.
You may use â€˜Progressive Loadingâ€™ technique to make sure that at least the website text loads faster than anything else so that the users have something worthwhile to do till the time other heavyweight elements load.
Okay, so we have gotten enough proofs to vouch for the fact that faster websites DO make users and search engines happy. Now, whatâ€™s the other half of the story? How do you achieve such impressive speed? Hereâ€™s how -
Did you know that almost 39% of Wikipediaâ€™s page weight is comprised of Â images and yet it manages an incredible loading speed? So, the trick is to use less number of well-optimized images and hereâ€™s how you can do that:
- Crop out any extra white space in the graphic
- Use micro versions of a picture (called thumbnails) that load faster and redirect the user to the actual image when clicked upon.
- Make sure you re-size the images in an image editing program and not website design program. The latter does not reduce the actual size of the image.
- Make use of JPEG for photos (multiple colours and patterns, landscapes etc), GIF for animations and PNG (PNG24 preferably) for everything else (backgrounds, graphs, icons etc.)
- Specify the height and width of the images in HTML tag so that the browser does not consume extra time in repositioning the text around the image. Also, use Alt attribute with the IMG tag.
- Each background image adds to another HTTP request. So, the best is to combine all theme images used in your website to create a CSS spritemap.
- Make use of interlacing (layered graphics)
- While saving images, use the option ‘save for web’ which is available in photoshop
Note – While testing the page loading time, do clear the cache in your computer. And do test for all the browsers, usually there is a variation.
First there was just HTML (that dull formatted text with multiple headings), then images were introduced, then tables, sometime later text backgrounds and then CSS. CSS is a style-sheet language that affects the mood, tone and style of web-pages such as layouts, fonts and colours.
Most often than not, youâ€™d require multiple CSS files and that would mean more frequent requests to the server. So, you must club them all into one big file but no nothing to worry. There are many free online tools to help you with this. YUI is the most widely used and trusted one.
Also, you must prevent inline styles. For instance, if you have multiple paragraphs on a web-page and you want some of them to be in italics, using inline styles would makes style text long and repetitive and also make the code chunky. You must instead define a class for these styles in the global style-sheet and then refer to that class. It would make the code clean and more manageable.
Minification implies reducing all superfluous characters and extra space in your resource files. Again nothing that you need do manually and this time you know the answer too. Yes, YUIÂ lets you with the minification part also. There are many other obfuscators available for those who find YUI somewhat complex to operate.
A webpage without any images and advertisements requires a minimum of 3-4 HTTP requests to load. A webpage with a good number of images, videos, animations, CSS etc requires somewhere between 10 to 15. Our goal is to minimize the number of HTTP requests. Unless the number of such requests exceeds 25, you need not worry.
To minimize the number of HTTP requests, you must
- Combine all theme images used in your website to create a CSS spritemap.
- Eliminate all unwanted elements from webpages
You may achieve this by either HTTP compression (enabled on server level) or Gzip (enabled on site level). Page compression can reduce file size by over 50%.
When a page is loaded, the server site scripting language requests database server to run some queries. When database returns results, it displays them to the user. Being a heavy process, it eats up more memory.
Instead you can generate a cache file which is just a static file and requires much lesser memory than database server. Content that does not require frequent changing may be put in this cache file for example â€˜About Usâ€™ page of your website.
So, wasnâ€™t that easy? And when you know that these tips come straight from Matt Cuttsâ€™ mouth, you can be sure of their worthiness too…
- Matt Cutts
If you want to dig still deeper into it,hereÂ is a fund of information on how to make your website run faster. Google also enables you to measure your websiteâ€™s loading speed with the help of â€˜Page Speedâ€™ that accords a â€˜Page Speed Scoreâ€™ on a 1-100 scale…Anything else you think can increase loading speed?
We have an overwhelming urge to help businesses grow & improve the way they market themselves. And we'll be frequently funding this space with rich & actionable content. We love the semantic web & thrive on constructive feedback...Got a tip? Want to guest blog? Let us know...