This is a guest post by Borko Simms who is a contributing author at WebmasterFormat.com
Back in the Old Days of the internet, you could boot up your machine, type in the URL, and go make coffee, confident that your page would be just about ready by the time you got back with your cup of joy. Web designers worked hard to make their pages load faster in those days. Now, faster hardware and modern technology have made a lot of us casual about speed.
Page Speed – the speed at which your website loads – isn’t currently a major factor in search, but Google has talked about adding it to the algorithm. Where Google leads, Yahoo and bing will follow. But even without being included in ranking algorithm, your speed can have effects on search if other webmasters choose to link to someone faster instead of you.
Fewer links mean fewer votes of confidence, from the search engines point of view, and therefore a less desirable website.
Beyond considerations of search, you will also want your pages to load quickly for the sake of your visitors’ experience of your page – and your conversions. Web surfers will usually decide whether or not to stay on your page and explore within about 12 seconds. If your page is still loading, they’re likely to click away without staying to see what you have to offer.
How Can You Inspect Loading Time?
You might think you know why your website loads the way it does, and you might be wrong. There are a couple of great tools that can help you discern how fast your page really is and what factors you should optimize. PageSpeed and YSlow are both open source Firefox add-ons. Both test how well your website measures up when it comes to speed.
How Can You Speed up a Sluggish Page?
PageSpeed lists specific best practices:
- Optimizing caching, which includes making sure your styles are in CSS files on the server, not in your page’s code.
- Minimizing round-trip times, which means reducing the number of different stylesheets and scripts you use, and avoiding redirects when possible.
- Minimizing request size, which means keeping cookies small and serving static content from a cookieless domain when possible.
- Minimizing payload size by compressing scripts and images, and by serving all resources from the same URL every time you use them in your site.
- Optimizing browser rendering by using efficient CSS and putting stylesheet links in the head of the document.
These are general recommendations; overall, using standards-compliant CSS and html will work best, and that shouldn’t surprise us. Here are a few small tips that can make a big difference:
- Minimize image sizes. Don’t use large images and just resize them in the html. Compress those images to the size you need first. SmushIt, a tool included with YSlow, will optimize your images for you without lessening quality.
- Specify image sizes in your html, though. Browsers don’t have to take time to calculate if you’ve told them both height and width.
- Put your stylesheet links at the top of the page and your scripts at the bottom, so browsers can get the look in right away and let the scripts catch up.
- Cut down on Flash and large images when you can. Using a tiny repeating gif to get the background you want instead of a single large background image makes a difference.
Perception Is Reality
The tips above will make your page load faster, but remember that your visitors’ perception of the speed of your site can also be affected by your navigation and layout. If visitors have to stop and look around for the information they want, or have to watch a video or flash intro every time they visit, their experience will be slower and they will feel as though your site is slow.