43% of people will hit the big red cross if your website takes more than 3 seconds to load. It’s exactly 43%, not 44% or 42%. Shows both how impatient we are as a society and how important is it to minimize your page load time.
That’s not all. Studies were done by Akamai concluding that:
- 47% of people expect a page to load in under two seconds
- 52% of those shopping online relate fast page speeds with site loyalty
Don’t take the studies word for it, though – think about when you browse the web yourself. Do you often come across slow websites when using Google? Unless you head past the second page, it’s quite unlikely.
Page speed is such an important factor to retaining users engagement and keeping them on the site. As well, Google has been using it as a ranking factor since 2010 . And with the launch of Accelerated Mobile Pages (AMP) with near instant load times for mobile, without a fast site, you’ll be struggling with rankings and engagement.
This article will show you the low-hanging fruit available to minimize your website’s load time. As the Pareto Principle explains – 80% of the results come from 20% of the work. Let’s focus on the 20% you can do today to increase your website’s speed by 80%.
Compress your images
By far, the easiest, yet one of the most underused methods to increase website speed is compressing. Compressing your images before using them on your site can save you anywhere between 40%-80% of bandwidth.
That 200kb image you’re thinking about using – compress it down to 60kb first, then upload it. Over 10 or so images, you’ll be saving more than 1mb in bandwidth. Doesn’t sound like a lot, but it is. Remember, your situation is not indicative of everyone else’s. Many people don’t have the luxury of cable/fiber speeds yet.
There are a number of tools you can use to compress your images. Some of the most popular WordPress plugins include:
Personally, I prefer to compress images manually. Check out Caesium – one of the best free image compression tools. Plenty of features and extremely easy to use. Unfortunately, it doesn’t handle PNGs very well.
If you’ve never compressed images before, you’ll be amazed at the reduction in size with little to no difference in the visual quality.
Check out the before and after compression comparison below. We’ve achieved a file size reduction of 67.4% in less than 5 seconds.
Can you see a difference in quality without a magnifying glass in hand?
Finally – keep in mind your visitors won’t be inspecting in fine detail the images you present on your site – unless your site requires extremely high-quality photos.
Sure, when you’re in development mode, working on a structured document which is easy to understand is essential. But once you’re finished editing, you’re left with a ton of white space and unnecessary information. That’s where GZIP compression comes into play.
It strips away all the useless junk, compressing it down to reduce the bandwidth transferred between the visitor and your server. At its most effective peak, it can reduce file size by up to 70%. And it’s relatively straightforward to implement.
If you want to skip the plugin route, you can simply add the following lines of code to your .htaccess file if your server’s using Apache.
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
The code has been sourced from GTmetrix.
You can check if you’ve successfully implemented GZIP by heading to checkgzipcompression.com.
Resize your thumbnails
Too often people upload huge 1920 x 1200 images to use as a featured image in one of their posts, then scale it down rather than resizing when using it in thumbnails across the site.
What does this do? It requires users to load the full file size of the 1920 x 1200 instead of a smaller 300 x 187 version. Stop this nonsense! These practices should be abolished from all sites immediately.
If you’re using WordPress, your theme should already have functions in place to resize the images down to the appropriate dimensions. If it doesn’t you’ll need to heads to Settings > Media and specify the dimensions you want. Then install this plugin, and regenerate the correct images sizes for your thumbnails.
Inline critical CSS
Normally when a user loads a page, there’s code in the HTML telling the user’s browser to go and fetch CSS files from another part of the server before the page can be mloaded. This, of course, leads to delays in load time as more requests are needing to be made.
What we want to do is inline (embed in the HTML file) the critical CSS required by the user’s browser so it can load what the user can see as fast as possible. The rest of the CSS can be loaded asynchronously.
From 59,819 characters needing to be fully loaded before rendering, we can drop it down to 17,824. That’s saving of 70.2%. And it’s so easy to do! What are you waiting for?!
Cache your content
Caching (cayshing or catching? Cayshing.) creates a static HTML file of your dynamic content which will be served when requested by the user. This HTML file is in place of the usual PHP scripts which can take far longer to load.
“But Mike – what if my visitors browse my site many times a day and don’t want to see updated content?” No problem! Many of the plugins available automatically clear the cache (regenerate the HTML files) when specified events occur.
For example, some will provide the options of clearing the cache when there’s a new post, a new comment, or after a certain amount of hours. Caching is a very effective way to serve dynamic content statically in the fastest time possible.
Content Delivery Network
This ensures the user is downloading the files from the closest location possible with the lowest latency.
If your visitors are coming from all over the world, you may look to implement a CDN for your website. If you’re only targeting a single city or a country, it may not be as necessary.
The image below is of CloudFlare’s CDN network as of March 2017.
Time for an upgrade
If you’ve done all the above and your site is still taking its sweet time to load for visitors, it may be your server or hosting provider causing the issues.
Check your server logs and see if it’s consistently redlining, or if there are any spikes in the CPU/RAM departments. If you do spot signs of server issues, contact your hosting provider first before jumping to upgrade.
They may be able to sort out the issue and/or upgrade you to the next level on the house. Just depends on your smooth talking skills.
You already know of Page Insights by Google to test your site’s speed, but I wouldn’t solely rely on it. GTmetrix and Pingdom both provide great speed testing tools to help you minimize your load time.
Feel free to play around with the configurations in any of the above areas to find out which works for you. Over time, you’ll come to know exactly which areas you can focus on for a specific site to decrease its load time the quickest way possible.