The Ultimate Page Speed Optimization Guide!

Page speed optimization

Why page speed is so darn important.

There's a whole lot of research going on by Google, Microsoft and a lot of other organizations on what effect page speed has on internet users. The data shows that even the slightest little bit of waiting time can decrease your conversion rate substantially.

A fraction of a second leads to higher page abandonment, less time on site, visit less pages, lower conversion rates and users are less likely to visit your site again due to a less positive brand association.

Page speed is also being tracked by Google so they influence your ranking on mobile devices. If you have a really slow website it might be favorable for the user to visit your competitor instead of you. Since Google strives to deliver the best possible user experience from question (query) to answer, they do take page speed into consideration.

Furthermore, as stated before page speed influences the users satisfaction and usage metrics. Usage metrics are being used by Google as a way of tracking whether your website fits the searchers needs for the given query. So if a lot of your users bounce back to the search results because you have a slow website that could cost you ranking in Google.

Page speed vs shopping behaviour

According to research done by KISSmetrics shopping behaviour is drastically changed by page speed. Let's take a look at their findings:

  • 47% of consumers expect a web page to load in 2 seconds or less.
  • 40% of consumers abondon a website that takes more than 3 seconds to load
  • 79% of consumers who are dissatisfied with a website's performance are unlikely to purchase something from that site again.
  • 52% of consumers say that quick page loading is important to their site loyalty.
  • A 1 second delay (3 seconds of waiting) decreases customer satisfaction by about 16%.
  • 44% of consumers will tell their friends about a bad experience online.

KISSmetrics - A 1 second delay in page response can result in a 7% reduction in conversion.

Google also names several examples of websites who saw significant improvements in conversions by just optimizing their websites.

Urs Hoelzle "When you speed up service, people become more engaged - and when people become more engaged, they click and buy more."

AutoAnything upgraded their page speed significantly a while back and saw their revenue grow by 13 procent and their content delivery network costs went down a bunch too. Win-win situation for AutoAnything if you ask me.

Page speed on mobile devices

Slow websites may be a pain to desktop users, but for mobile users it's even worse. Not only is internet often slower due to 3G connections. It could possibly cost them a lot of money or at least a good cut in their data plan.

Mobile users expect a webpage to load a little bit slower than when they browse from a desktop. Still most people abandon after waiting for 6-10 seconds. Mobile devices should not get the same version of the page as desktop users. Using responsive design with best practices you would be able to make sure mobile users get smaller images or possibly less images than a desktop user would.

You shouldn't burden a mobile user with tons of data to download if they don't really need it. Every Kb that could be shaven off, should be shaven off.

Mobile SEO benefit

Google takes in the page speed as one of the ranking factors when users are searching from a mobile device. So optimizing your website for performance could actually get you higher up in Google when users search from a mobile device.

Higher position example

Credits for the image should go to Adam Powell

As you can see on the image above, this criminal defense attorney is getting much better mobile rankings than normal rankings. This started happening when they improved the performance of their website.

How to actually optimize your website

Website optimization

There are a lot of different aspects you can optimize on your website to decrease loading times and increase customer satisfactions. Not to mention you'll save a bunch of bandwidth too. So let's start looking at all the different aspects.

Server side optimization

There are a couple of server side optimization techniques you can employ to speed up your website or prevent problems from arising in the future.

Find a good web host

You'll need to have a good web host who can offer you the services you need. You should have a secure web host with almost no down-time and who will fix problems when they arise. Having a couple of days of down-time is not going to your website any good. Make sure your website is in good hands.

Recommended reading

Enable Gzip compression

Gzip compression is a way of making your HTML, CSS, Javascript and other text files smaller than they are by compressing them. This can often save you around 50% to 70% of the file size which could help you save a lot of bandwidth and have more satisfied users.

Recommended reading

Serve static resources from a cookiesless domain

One of the many techniques for optimizing a website for speed is to serve static content such as CSS, Javascript and image files from a cookieless domain. A cookieless domain is not a very complex concept. It's actually a domain which does not set cookies. Since static files such as CSS, Javascript and images files have no user interaction they have no need for cookies to be set on them. This just increases the request size for the file and therefor slows down the loading of the webpage.

Recommended reading

Minimize redirects

Finish article...

Client side optimization

Client side optimizations could be used for a speed boost as well.

Cache your static resources

Almost every website contains resources that don't change very often. CSS, javascript and image files are excellent examples of this. These files are downloaded every single time a webpage is loaded on which they are used. This could really increase the time it takes to load your webpages. Don't you think it would be better if 'static' resources wouldn't have to be downloaded over and over again?

Recommended reading

Optimizing the assets

There are various techniques to optimize your assets in a way that they will load quicker and therefor improve the page speed of your website.

Optimize all of your images

Image resizing Bluntly said images are a pain in the ass when it comes to fast loading times of your website. Images are much bigger than the actual code for the website in most cases and therefor take the longest to load. On the bright side you can do a whole lot of optimizing with images to make them load a lot faster.

This includes:

  • Resizing images
  • Compressing images
  • Reducing quality of images
  • Including HTML width and height attributes
  • Using CSS sprites
  • Caching the images
  • Serving images from a cookieless domain
Recommended reading

Minify your HTML, CSS and Javascript files

In the quest for the best website loading speed you will come across minifying HTML, CSS and Javascript files. The impact of this depends on the size of your files of course. In my opinion it's always worth it though. I mean, for 5 minutes out of your day you can save a lot of unneccessary waiting for your users.

Recommended reading

Minimize HTTP requests

Finish this article...

Testing your page speed

There are several tools for testing the page speed of your website. These tools will tell you how long it takes to load your page and exactly which elements on your page are loading. This will give you the information you need to start optimizing your website.

Pingdom Website Speed Test

The pingdom website speed test is so simple to use and yet so powerful.
Pingdom Tools Home Page

It starts of with a simple page where you can fill in your URL in an input field in order to start the test and a list of recently tested websites. You can also click the settings button under the input field to choose where to test from and make the test private if you wish to do so.

Pingdom Tools Results After you perform a test it will give you a screen full of information. Let's break it down.


The number HTTP requests that were made by the browser in order to load your website. You should keep this as low as possible. The reason it is so high here is because I used my Google+ page here. This loads in all my posts and associated images to those posts. Google+ is of course a major website by itself and it has to load in a lot of things in order to work. They manage to keep the load times decent so they get away with this.

But whenever you can avoid making an HTTP request, avoid it. More information on minimizing the amount of HTTP requests.

Load time

The load time is the actual time it took the test to load your entire web page. This is a one-time test. You should register and let Pingdom test your website several times each day at different times. This way you can get an average time which you can work with. I've seen websites loading in 13 seconds the first time and in 2 seconds the second time because files were cached the second time. So don't trust a single test. Trust the average of lots of tests.

Try to keep the load time below 2 seconds. As said earlier in this post 47% of consumers expect a website to load in at least 2 seconds. The lower your loading times the higher your customer satisfaction. So keep optimizing your website!

Page size

The page size is the combined size of all files which make your page what it is. HTML, CSS, Javascript, images etcetera. Do whatever you can to make this as small as possible. Not only does this speed up your website. Mobile users are often browsing from 3G or 4G and might be on a limited data plan. Mobile users are becoming more and more aware of which websites to avoid while on 3G/4G and you don't want to be 'blacklisted' by them because they know you are flooding them with mb's of data.

Images are a big part of this of course. Make sure you serve mobile users smaller images than desktop users and maybe you can even leave away some images.

Your website is faster than 58% of all tested websites

This little line of text is a comparison against all other websites tested by Pingdom and it is of course a gamification element. This motivates you to optimize your website a bit more so you score higher. I've had a couple of projects where it said that the websites was faster than 100% of all tested websites.

List of resources

The bottom of the page is a big list of all resources requested by your website. This contains all HTML, CSS, Javascript and images files. You can see the loading time for each file. Combining files, not loading useless files and making files smaller will increase your page speed. This list shows you exactly where your loading time is coming from and where you should work hardest to improve it. Do frequent tests for every page on your website to improve your website in the best possible way.

Performance Grade

At the top of the screenshot you can see that my Google+ page has a performance grade of 76/100. Their is also a performance grade tab to show you more information on this. Let's have a look.
Pingdom Tools Performance Grade

This screen gives you lots of things to fix in most cases (unless your website is already optimized really well). For example, the tested website has way to much external Javascript files and does not leverage browser caching for all resources. Start by improving the performace grade as far as you can. Getting it to 100 is a good objective, but not always realistic. Third-party applications like Google analytics and Google Maps will destroy your hopes of scoring 100 pretty quickly.

Other page speed testing tools

Tools for optimizing your website

There are several tools for optimizing your website's page speed. These tools will let you know which areas of your site/page you need to optimize and some of these tools will actually give you the enhanced files (like minified css code).

Google Page Speed

Google's Page Speed toolset is a really useful tool for identifying areas that can be optimized and addressing them at the same time. You can use Page Speed on the website or as a Chrome plugin or Firefox add-on.

Google Page Speed Insights Home Page The homepage is very straightforward. Input a URL into the field, click the analyse button and it will start analysing your website.

After it's done you will get to see the following screen. Here it will highlight all the areas where you can optize your website further and in most cases they will offer the solution too.

For example, let's say you have some images on the page which haven't been compressed yet. They give you the option to download a zip file of all the images already compressed for you.

Google Page Speed Insights is a very useful tool for identifying and fixing performance issues on your website and should be a part of any webdevelepors toolset.

Other page speed optimization tools


Optimizing your website has various major benefits.

  • Higher user satisfaction
    • More time spent on site
    • Higher conversion rates
    • More pages per visit
    • Better brand association
    • More returning customers
  • Less stress on your server
  • Better ranking
    • Better ranking due to better usage metrics
    • Better mobile ranking due to page speed


Recent Posts


Follow me on Google+!

Join my Community!