Creating fast websites is important. Not only for pleasing your visitors and customers and keeping them on your site, instead of leaving your site, but also for ranking well in the search engines. Google has stated that loading speed is a ranking factor, and there is a lot of data out there about how a large number of your visitors will leave before seeing a slow loading page. So speed is definitely important!
Check out our SEO guide for more tips regarding optimizing for the search engines.
There are many ways to lower your websites loading times, some of which requires server configurations, some will require changing host, while some require coding or optimizing your content for speed.
Table of contents
- SSD storage
- Use HTTP/2
- Nginx web server
- Data center location
- Content delivery network
- Have few HTTP requests
- Optimize images
- Use cache
- Use compression
- Minify code files
FREE tools for testing website loading speed performance
- GTMetrix – Great free tool with lots of details about how your site is performing and how to improve it. It has a built-in feature that will give you links to optimized images part of your tested web page. These images usually use less storage but stay just as crisp as the original images. TinPNG is a free tool that you can use for reducing image file sizes before uploading them anywhere. You will also be notified if you are using too large images, among a long list of other things. If you sign up for an account you can test your sites form different locations, including Canada, USA, UK, China, and Australia.
- Pingdom Website Speed Test – Test your website loading speed from USA east and west, Australia, and Sweden in the EU.
- PageSpeed Insights – Another great free tool for scoring your website loading speed and offering tips for improvement. It will display different scores and tips for mobile and desktop performance.
Server features, configurations, etc
1. SSD storage
SSD disks are much faster than the traditional spinning HDD disks. Most web hosting companies have upgraded their hardware and offer at least some plans hosted 100% on SSD disks.
This is an easy win if you’re not already hosted on SSD. Compare hosting offers with SSD.
2. Use HTTP/2
If your server has not already activated the HTTP/2 module, you could ask your web host’s support to activate it for you. I saw an average loading time improvement from 1.4 seconds to 1.2 seconds, simply by activating HTTP/2. Other tests show similar wins. Not only will this speed up your sites but it will also increase security and efficiency. Check if your website has HTTP/2 support with a free tool, like this from KeyCDN.
HTTP/2 vs HTTP/1.1 tests
- HTTP/2 – A Real-World Performance Test and Analysis
- Performance difference between HTTP2 and HTTP1.1
Compare hosting plans that have the HTTP/2 protocol included.
3. Change from Apache to the Nginx web server
Tests show that the Nginx web server can reduce resource usage by your server substantially and speed up loading of static web pages by up to 2.5x. The same tests show that there is more to gain the more concurrent users a website has. You can install Nginx on most servers, but not on shared hosting plans. If you are not familiar with installing and running with Nginx you should contact your host’s support and ask them if they can help you get it set up and running perfectly.
Many hosts take advantage of the speed benefits from Nginx by default though, and you can compare many of them here.
4. Data center location
Having your website hosted close to your most important visitors will enable them to load your site much faster. Just to give you a real life example I have a 600 KB site with only 13 requests that is hosted in the USA. It loads in about 0.5 seconds for visitors in the USA, while taking 1.5 seconds to load in the UK, and 3 seconds to load in Australia.
We have listed offers from web hosts with servers in data centers globally. Check out our list with the different locations.
5. Using a Content Delivery Network (CDN)
A CDN lets you load static parts of your website from different locations around the globe. A CDN is a separate feature, not something that web hosts deliver. This could help your sites be faster in locations far away from your data center location. When I tested it out with GTMetrix I experienced mixed results though.
The loading time at my most important location, USA, went up by about 0.5 – 1.0 seconds, to about 1 second total. For Europe, I tested many times from UK, London and the loading times stayed at about the same 1.5 seconds total with or without a CDN, while the Australia loading time reported a 1 second improvement down to 2 seconds from 3 seconds. I tested with the StackPath CDN and selected the “Entire Website” option, not the “Assets Only”. This should according to their support be the fastest way to serve a simple static website.
I don’t know why it would add to the loading speed in the USA and also in the UK some of the sample tests. It did, however, add 35 KB to the total page size and 3 HTTP requests but that should be negligible. If you want to use a CDN for your websites I would recommend doing some testing to make sure that you actually do get performance benefits. Also, note that website loading speed is only one of the benefits that a CDN can deliver. Protection against DDoS attacks is another.
List of popular CDNs
- Cloudways – CDN for all of their hosting customers costing $1 per GB per application/website.
- Cloudflare – FREE option available, $20/mo per domain, allows adult content.
- StackPath – FREE 15 day trial – Perfect for doing your own tests. Starting at $20/mo for up to 5 domains after that.
- MaxCDN – Acquired by StackPath and will be merged late summer 2018.
1. Optimize images and lower the total page size
The less data that has to be transferred the faster your site loads. Make sure that your images are not larger (height and width) than required and are optimized (quality) not higher than required. You can optimize for quality with the GTMetrix tool. Just click on the Optimize Images section on the report for your website, and then on “see optimized version”. Note that this will not resize your images.
As described below in step 5 you can minify code files to save some extra bytes.
2. Have as few HTTP requests as possible
One way to get fewer server requests to fully load your website is to combine several small images into a so-called CSS sprite. That works well for our small web host logos, that are just several 16 x 16 px images. I use the simple and free tool called CSS Sprite Generator for creating the image file and generating the CSS code needed.
3. Use cache
Cache lets your website load faster and you can activate it easily with a plugin like WP Super Cache for WordPress, or by modifying your .htaccess file if you are not using WordPress and are using the Apache web server.
Here’s an example for what you could add to your .htaccess file:
## EXPIRES CACHING ##
ExpiresByType image/jpg “access 1 week”
ExpiresByType image/jpeg “access 1 week”
ExpiresByType image/gif “access 1 week”
ExpiresByType image/png “access 1 week”
ExpiresByType text/css “access 1 week”
ExpiresByType text/html “access 1 week”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 week”
ExpiresDefault “access 1 week”
## EXPIRES CACHING ##
4. Use compression, like Gzip
You can activate Gzip easily with a setting on the “Advanced” section of the plugin WP Super Cache if you are using WordPress. The setting is called “Compress pages so they’re served more quickly to visitors. (Recommended)“. You can also activate it by adding a few lines of code to your .htaccess file, if you are using the Apache web server:
## GZip ##
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
5. Minify code files
More tips for improving loading speed
If you want to read even more about this topic you might find the following resources helpful.
- 9 Tips by Google – A resource that actually is a description of the factors that Google uses to score website performance with their PageSpeed Insights tool. Some of the same topics that we already have covered here, as well as some new ones. It contains pretty thorough and technical descriptions of the problems and solutions.