80/20 – Increasing Your Website Speed

Slow Website Load Time

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:

  • TinyPNG & JPEG Compression – Link
  • EWWW Image Optimizer – Link
  • WP Smush – Link

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.

For PNG images, I head to RIOT or use TinyPNG’s online website – both quite effective.

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?

Increasing Website Speed Compression

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.

GZIP Compression

We’re sticking with minimizing file size through compression again, this time, with GZIP. The difference is GZIP is specifically used for compressing web documents like CSS, HTML, PHP, and Javascript files.

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.

There are a number of plugins readily available for WordPress which have options to enable GZIP of your files. W3 Total Cache and Cache Enabler come to mind.

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.

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.

The easiest way to accomplish this task is to use a critical CSS path generator.  I’d recommend installing Autoptimize and following their instructions.

Critical Path CSS

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.

WP Fastest Cache, WP Super Cache, and W3 Total Cache are a few of the most used plugins. Feel free to pick whichever, most of them are extremely similar to each other.

Content Delivery Network

As its name suggests, a content delivery network is a network of servers around various geographic locations which delivers web content to users. Each server (node) in the network caches the static files of a website (images, CSS, javascript). Once a request is made from the user to load the files, the CDN locates which server is closest to the user, and delivers the static files from there.

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.

Some of the more popular CDN networks include Cloudflare (they offer a free version as well), and MaxCDN (now with StackPack) who start at $9/month.

The image below is of CloudFlare’s CDN network as of March 2017.

Cloudflares CDN Network

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.

Conclusion

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.

No comments
Share:

Leave a Reply

Your email address will not be published. Required fields are marked *