The Ultimate Page Speed Optimization Guide
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.
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
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
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.
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.
After you perform a test it will give you a screen full of information. Let’s break it down.
Requests
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.
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.
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
Conclusion
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
Related articles
- How to minimize HTTP requests.
- Optimizing images for performance
- How to enable Gzip compression to speed up your site
- How to set up a cookieless domain
- How to cache your static resources
LEAVE A REPLY
Your email address will not be published. Required fields are marked *