10 Tips for Decreasing Web Page Load Times

Mar 7 2011 by Adam Heitzman | 41 Comments

10 Tips for Decreasing Web Page Load Times

Patience is a virtue, but for many, it is often a difficult concept to practice. That is especially true for web users visiting a website that takes a long time to load. Users are enamored with speedy websites, and when a site responds slowly, visitors lose their patience and are less likely to come back.

Improving the speed of your website is important not only to users, but to search engine rankings as well. Last April, Google announced that they are now including website speed in their search ranking algorithms.

While this inclusion doesn’t hold the same weight as many of Google’s other ranking signals, it is still something that should be considered when planning out your website’s SEO efforts.

The following are some tips for decreasing your web page loading times.

1. Check the Current Speed of the Website

The first thing you will want to do is to analyze your current page speed. This allows you to track your improvement and ensure that any changes you make positively improves your page load times.

There are many free tools out there for checking how long it takes to load your website. Here are a few of them:

  • Pingdom offers an easy-to-use site speed test that mimics that way a page is loaded in a web browser.
  • Page Speed is an open source Firefox add-on that helps you assess the performance of your web pages. It also provides suggestions on how to fix performance issues.
  • Web Page Test is another great tool that shows you the speed and performance of your website in different browsers.

2. Optimize Your Images

Know when to use the appropriate file format for your images. Changing to a different file format can dramatically decrease the file size of an image.

  • GIF is ideal for images with few colors like logos.
  • JPEG is great for images with lots of colors and details like photographs.
  • PNG is the choice when you need high quality transparent images.

Check out these resources to learn more about optimizing images:

3. Don’t Scale Down Images

Avoid using a larger image than you need just because you can set the width and height attributes of <img> elements in HTML.

If you need a 100x100px image and you have a 700x700px image, use an image editor like Photoshop or one of these web-based image editors to resize the image to the needed dimensions. This lowers the file size of the image, thus helping to decrease page loading times.

4. Compress and Optimize Your Content

The task of compressing your website content can have a huge impact on reducing load times. When using HTTP compression, all of your web page data is sent in a single smaller file instead of a request that is full of many different files. For more information, see this Wikipedia article on HTTP Compression.

You can also optimize and compress your JavaScript and CSS files by combining them and minifying the source code.

5. Put Stylesheet References at the Top

Moving your stylesheet references to the <head> of your HTML document helps your pages feel like it is loading faster because doing so allows your pages to render the styles progressively. In addition, it doesn’t hurt that it’s the W3C standard.

6. Put Script References at the Bottom

Browsers can only download two components per hostname at the same time. If you add your scripts towards the top, it would block anything else below it on the initial loading of the page. This makes it feel like the page is loading slower.

To avoid this situation, place script references as far down the HTML document as possible, preferably right before the closing <body> tag.

7. Place JavaScript and CSS in External Files

If your JavaScript and CSS are directly in your HTML document, they are downloaded every time an HTML document is requested. This, then, doesn’t take advantage of browser caching and increases the size of the HTML document.

Always place your CSS and JavaScript in external files; it’s a best practice and makes your site easier to maintain and update.

8. Minimize HTTP Requests

When visiting a new web page, most of the page-loading time is spent downloading components of that page (e.g. images, stylesheets, and scripts).

By minimizing the number of requests a web page needs to make, it will load faster. To reduce HTTP requests for images, one thing you can do is to use CSS sprites to combine multiple images.

If you have multiple stylesheets and JavaScript libraries, consider combining them to reduce the number of HTTP requests.

9. Cache Your Web Pages

If you use a content management system that dynamically generates your web pages, you should statically cache your web pages and database queries so that you can decrease the strain on your server as well as speed up page rendering times.

When you cache your page, it saves a static version of it to be presented to the user instead of recreating it every time it’s requested.

For WordPress, check out WP Super Cache and W3 Total Cache (also read this WordPress codex entry on optimizing/caching WordPress). Drupal core has native caching.

10. Reduce 301 Redirects

Every time a 301 redirect is used, it forces the browser to a new URL which increases page-loading times. If possible, avoid using 301 redirects.

Conclusion

Web page speed is a metric that should not be ignored if you are concerned about providing an optimal user experience.

Want more information on decreasing your website’s page load times? Read Google’s section on page speed, which provides tools, articles, and community feedback regarding website speed. Good luck and happy optimizing!

Related Content

About the Author

Adam Heitzman is a web designer/developer with a strong background in SEO. He’s a Managing Partner at HigherVisbility, a Memphis-based internet marketing agency that offers a full range of marketing services ranging from SEO, Pay Per Click Marketing, Web Design and Development, and Social Media Marketing. Connect with HigherVisibility on Facebook and Twitter.

41 Comments

Afraz

March 7th, 2011

Quite right but now-a-days, there is no problem for broadband users. Anyhow, optimizing is suitable for the countries where broadband is partially connected.

Alex

March 7th, 2011

I wouldn’t recommend #6 if the javascript has anything to do with user interactions or displaying custom fonts.

Sunny Makkar

March 7th, 2011

Yes great tips this is the nice tips that you have shared.

Will

March 7th, 2011

Sage advice but would image sprites not initially slow the loading speed?

Marco Barbosa

March 7th, 2011

Don’t mean to sound boring but isn’t this well known since years ago?

Was excepting something new.

Jim Gaudet

March 7th, 2011

I have been using head.js on my latest project where I have a lot of requests for plugins. Using it virtually tripled my performance!

Blake

March 7th, 2011

I agree with Alex, before moving all JavaScript to the bottom of the page make sure that it doesn’t effect the way the site looks/works. Also I would recommend the use of either Google’s page speed plugin or Yahoo’s, I personally would use both as they will each point out different issues. Other then that great post! Thanks.

Young

March 7th, 2011

I was gonna ask about something Alex seems to have mentioned – things like jQuery image carousel or lightbox, I tend to put them in before the page loads. It looks bad when the carousel images are large or you have a lot of them, and you see them load on the page without the effect first… your thoughts on that?

@Marco: isn’t it a good thing there are no “new” things to do to optimize your site performance? judging from a lot of sites out there, not everyone knows about these.

Luke Terry

March 7th, 2011

Great tips, recommend Y!SSlow for firfox

Raju Mishra

March 7th, 2011

Very Knowledgable Article to a web designer.

Kevin Saunders

March 7th, 2011

Great post! This is so true. Google has been looking at speed a lot lately. I have a real life case. Our Google webmasters account was showing that our site was slow. The company I work for started using akamai to increase the speed of our website. In less than a week we started to see real improvements in our search rankings. It is my belief that our site speed was holding us back because Google was thinking it was hurting the user experience.

Candace

March 7th, 2011

Thank you for the great post. I heard about this benefitting websites before but didn’t know too much about it. I will definitely take these recommended steps to improve my company’s website speed.

Matthew

March 7th, 2011

Great post. I’ve had this problem in the past and will use these tips in the future.

TheAL

March 7th, 2011

All good things, and I try to implement all of them. Though, if you really think about it, don’t 7 and 8 somewhat clash? Even if only conceptually?

Farhan

March 7th, 2011

very useful tips

Laxmi Singh

March 7th, 2011

Nice post. Learned few good things to improve my blogs. don’t know if i am able to implement all of them.

gbsquared

March 7th, 2011

Really great article.

Those free load tests will come in handy. I didn’t even know about them.

I checked my site in Pingdom. I had a pretty good load time, so that makes me feel good.

Thankfully I was already using the tips about resizing images in Photoshop.

I will probably download the FireFox plugin. I have always been pleased with everything they produce.

Duncan McDougall

March 7th, 2011

@afraz. Though the speed of broadband is so much faster than a few years back have you never experienced a site that is slow to load. We are paying good money for these connections so our expectations go up. Where we would have had the patience to sit and stare at a white screen for 5+ seconds a few years ago, now we have higher expectations. With mobile browser usage on the rise consider the crappy connection speed these visitors are on. I think page speed optimization is as important as it has ever been, if not more so.

Vadim Kleyzit

March 7th, 2011

All 3 tools in #1 are very good for measuring current speed of your website. You should also perform load testing to determine its scalability. Load testing is especially important before initial release / major upgrades, or if you anticipating backed database growth or preparing to handle more hits due to growth or special events. There are many commercial and free load testing tools some of which are listed here. We also developed a simple and free web load testing tool called StresStimulus. It replays website navigation scenario under load with various number of virtual users to determine when and why the performance stars degrading.

Rakesh Kumar

March 8th, 2011

I almost get 10% of traffic from images and now i feel that i need to some more practice to optimize them for better result. Thanks for tips.

Tom

March 8th, 2011

I can’t really see speed affecting rankings that much, google would be silly to penalise a useful site if it loads a little slow. You’re best bet to speed up a site is to remove google analytics and adwords they have fairly hefty load times.

Connie Myres

March 8th, 2011

I have my CSS in an external file but not JavaScript. That’s something I’ll look into. Thanks!

James - Intrahost

March 8th, 2011

WordPress is a good example of a blogging platform that uses many HTTPS requests. Websites and blogs that heavily use PHP can seriously slow their web server down. Additional plugins can also slow your web hosting’s server down.

301 redirects are important for SEO, but can seriously slow your website or blog’s speed.

Web hosting can play a part in your web hosting speed. If you’re using a shared hosting provider, this may slow down your web page speed.

Depending on the size of your blog you may want to consider, VPS hosting or a even a dedicated server. High quality web hosting also plays a part in your website.

Baltech

March 9th, 2011

Thanks for this. All information is very necessery for tha users. And “web page test” is very ggod tool for showing the speed and performance of the web site. that solve lot of problems related to web.

ArleyM

March 9th, 2011

Some simple WordPress specific changes you can do is remove all of the simple tags that you can – if it’s calling a path to a stylesheet, or the homepage you can just change your theme to have the absolute URL.

Why have PHP solve something you already know and can easily put in static?

Mark @ Alchemy United

March 9th, 2011

Did anyone mention YSlow?

Mark @ Alchemy United

March 9th, 2011

Opps. And what about Google Page Speed?

Jeremy

March 11th, 2011

One more to add: 3rd party calls for things like analytics, conversion tracking, etc. are a big driver of load time. Loading them asynchronously using tools such as UberTags and others can improve the page load. Disclosure: I’m the founder of UberTags.

Lee B

March 11th, 2011

Cheers some great tips there.

Matthew Lux

March 13th, 2011

What about Minify, and other options on compressing javascript and css. And dont forget application that can compress all images within a site.

Kevin Thomson

March 15th, 2011

If you”ve looked at all of the above and still need more preformance then you could look into hosting your site on a dedicated server which is as expensive as you might think. Most hosting companies offer this service.

Gaurav Mishra

March 16th, 2011

And also assign some work to CSS3. To reduce the dependency on images.
Thanks for writing!

Laurent

March 24th, 2011

GT metrix is a nice tool, just try it and test your site.

sam fleming

March 26th, 2011

Great points. Every developer should think about these when creating sites.

On the point of image optimization http://smush.it from yahoo is a priceless tool.

Zahid

May 31st, 2011

Great advice. Speed check tools you mention are excellent and quite telling.

Nitin Gupta

August 12th, 2011

gzip is the most efficient way to reduce load time size.

Andrew Richards

October 7th, 2011

Very Interesting Read thanks

Annie

October 7th, 2011

Thanks for the insight :)

Daniel Quijano

November 2nd, 2011

Excellent tips!!! This will help me a lot!!!

kishore

November 18th, 2011

What is the best catching plugin to decrease page loading time? I am using Hyper cache. What is the best among Hyper cache and W3 total cache?

KSingh - Designer

October 6th, 2012

I personally think PNG images should be avoided. They tend to be much larger in file size than JPEG’s and GIF’s.

Leave a Comment

Subscribe to the comments on this article.