Online Tools for Site Speed
Google, recently announced that site-speed is now an integral part of search engine rankings. This means that faster sites could rank better than slower websites!
Now Google haven’t quite said how much site speed is a factor in their search rankings algorithm, and have confirmed that quality content is still the most important thing, but they have confirmed that speed is an algorithmic factor none the less.
So I’m going to show you some tools that will help you speed up your website, but before I do that I’m just going to discuss the following two points.
Site Speed is Relative
First of all it’s important to understand this point. A website that has 70 images on their home page will never load in 0.00001 second. This is becuase the browser cannot and will not load all the images at once and even if the images are only 3K each, they will still be downloaded two or three at a time.
Site speed is relative in that when we talk about site speed we have to make concessions for what is actually on the web page at hand.
First Page Load vs Repeat Page Load
We are presuming at this point that Google will make allowances for the first page load against the second page load. This is bacause we all know that in the first page load on a website sets cookes and creates sessions etc. which are things it does not do on the second load. This is relevant for tool number 1 below.
Tools
1) Tool: Web Page Test - webpagetest.org
The first step to speeding up your website is looking at what exactly it’s loading. This tool will show you what images, javascript etc. your website page is loading and it also does a second page-load test as described above.
Once this tool has done it’s test it shows you how long it took to start rendering your page and how long it took in total to complete loading. In my opinion if your page takes any longer than 2 seconds for an basic HTML website and 5 seconds for an e-commerce website, this is too long and you should look at ways to speed up your site. Tools for doing so can be found below.
2) Suggestion: Move Javascript Files to The Bottom
Okay so this one isn’t a tool. It’s a suggestion. Move your javascript files to the bottom of your HTML document. Doing this will allow your images and stylesheet(s) to load first and render your page faster. There are some instances where this is not possible, in that case use the tool below to compress your JS.
3) Tool: Javascript Compressor
Compressing your Javascript can reduce the size of your javascript files. Just compressing one small javascript file can reduce the file size (and subsiquently load time) by up to 80%. This is a significant improvement and you will see speed differences straight away.
4) Suggestion: Use CSS Sprites
Using CSS sprites is a great idea. By using css sprites you combine all your background images into one single image. This allows your browser/css file to download one single image and not download multiple images, hence being faster.
5) Tool: CSS Compressor
CSS Drive from Dynamic Drive have an amazing tool that allows you to compress your css files. This is someting I only recommend doing once you have finished developing your website as it will remove all extra white space and it will also remove your css comments if you tell it to. CSS Compressor
6) Suggestion: Different Domains
Host your images on another sub-domain or a totally different domain. Most browsers will only load two or three components at once. For example, Firfox may only load three images at once even if your internet connection speed would allow you to download 2000 images at once.
Hosting your images on a different sub-domain or domain will allow you to almost fool your browser into loading more components simultaneously. An example would be to create an image sub-domain, img.example.com when your website is hosted on www.example.com.
7) Tool: SmushIt
SmushIt is an image optimisation tool that will “smush” images with no loss creating smaller, better optimised images. SmushIt can be used as a firefox flugin.
Tool: YSlow
YSlow is a tool that integrates into the Firefox plugin Firebug. It shows you what components are being downloaded and how long each component takes.
Additional Site Speed Improvement Suggestions
- 21 Scripts and Tips to Decrease Website Server Load
- Yahoo! - Best Practices for Speeding Up Your Web Site
- Google: Using site speed in web search ranking
- Tools to Speed Up Your Site – Ready for 2010
- 10 Ways to Instantly Speed Up Your Website