How to Speed Up Website Loading Time? An Actionable Guide

How to Speed Up Website Loading Time? An Actionable Guide

This is our complete guide to page speed optimization in 2020.

You will learn the following after reading this detailed guide:-
– Step by step instructions to improve website loading time
– List of tools/plugins that fire up your website like anything
– Speed improvement hacks that no one talks about

Let’s dig in.

What is page speed?

Page speed, also known as page load time, is the time taken by a web page to load on the web browser.

There are 2 acceptable ways to measure page speed metric:-

  1. Average page load time – It is the end to end time between a browser sending a request to a webserver and the page rendering fully on that browser.
  2. Time to first byte – This is the time elapsed between sending a request to the webserver and the browser receiving the first byte of data.

As part of this blog post, I have used GTMetrix and average page load time for illustration purposes.

You should also use Google Page Speed Insights which gives you data on time-to-first-byte as well.

Importance of fast loading websites for SEO

No one loves a slow loading website.

As per a 2018 research by Google, almost half of mobile users leave a page if it takes more than 3 seconds to load.

Clearly, site speed ads to great user experience. And that’s the reason site speed is considered as one of the important on page SEO factors to optimise.

Google tends to give less importance to a slow loading website, given all other things are equal.

Thankfully, it’s not tough to speed up your website, and that’s what we are going to discuss today.

10 actionable steps to increase website speed in 2020

Page Speed SEO infographic

Your strategy to improve page speed should include 3 components:-

  1. Adding components that fire up the speed (#1, #2 & #3 below)
  2. Cutting components that slow down the speed (#4 & #9 below)
  3. Replacing components for improved site speed (#5, #6, #7, #8 & #10 below)

Step #1. Use Content Delivery Network (CDN)

Irrespective of the type of content that you serve to your users, I suggest you use a CDN for your website.

Content Delivery Network (popularly called as a CDN), is a mesh of distributed web servers that cache your content and distribute it to end-users based on their geographic proximity.

website without CDN

That means a user based out of US will be served a website from a local CDN server (even if the website is hosted in, say, Germany) resulting in a faster response time and better page load speed.

How CDN works

This is extremely useful for content-heavy websites that serve users with videos, images, graphics, PDFs, etc.

CDN not just improves site speed but also reduces the load on your server as it dynamically serves the user request without the need to involve the origin server for every small thing.

How to implement a Cloudflare CDN?

You can use free CDN services from Cloudflare for your website.

If you are on WordPress, setting up Cloudflare is a 2 step process, as detailed below:-

#1: Install the Cloudflare WordPress plugin from here. Register and activate your free subscription.

Implement CDN to boost speed

#2: Change the DNS setting to point your website to the Cloudflare server. Here’s how we did this on GoDaddy.

DNS settings for CloudFlare

If you are not on WordPress, you can setup Cloudflare using its APIs.


Step #2. Leverage browser-side caching

This is probably one thing which you would already be doing, given that this is an age-old practice.

If not, do it right away.

The logic behind browser side caching is that at times, networks can be slow and servers may not respond right away. That’s when browser-side caching saves your page from slow loading dilemmas.

How do browser-side caching works?

Browser caching

All web browsers are advanced enough to support caching.

As a web developer, you should pass the right parameters to the browser to enable it to cache your web pages.

Some of the parameters that get cached include:-

  • HTML pages
  • CSS stylesheets
  • JavaScript scripts
  • Images
  • Other types of multimedia content

Caching enables the browser to render the said elements correctly the next time they are requested, without the need to request the host server for these resources.

For the nerds out there, here’s a deep dive from Google to understand the A to Z of browser-side caching.

How to do browser-side caching?

We are using the W3 Total Cache plugin on our WordPress site that handles browser-side caching at just a click of a button.

W3 Total Cache browser caching


Step #3. Minify CSS and JS

Minification is the process of cutting short the code without impacting any underlying functionality.

Many a time, developers use comments, white spaces, longer variable names etc in their CSS and JS.

While this definitely contributes to good coding practices, it also adds to the page loading time.

CSS and JS minification remove this extra code thereby resulting in reduced page size and faster loading.

As an example blog post from Imperva, a minified JS got reduced by almost 50%, with 176kb difference in the original and minified version.

JS file before minification

JS file before minification (Source: Imperva.com)

 

JS file after minification

JS file after minification (Source: Imperva.com)

How to Minify CSS & JS?

You can do that using the W3 cache plugin by enabling the option, as shown below.

How to minify CSS and JS?

Caveat on W3 Total Cache

While this is a great plugin, it comes with its own set of challenges.

With browser-side caching on, the developer needs to flush the cache every time she wants to see a change made to the webpage. You might have to switch the plugin off to enable a smooth development experience.

Additionally, minification may play spoilsport with your CSS (at times). This is frequent in cases where you switch off the plugin for your dev effort.

So don’t fret when you see things getting haywire. It’s probably because of W3 total cache and is easily fixable by turning the plugin on and off.


Step #4. Review 3rd party services

This is probably one thing that will increase website speed like anything.

Review each and every 3rd party service that loads on your website.

Review 3rd party services

When I say review, I am not asking for a technical review. You can obviously run technical hacks and optimize the load time of these services.

The bigger question should be: do you actually need these services? Are they serving any real benefit the way they are placed on your website right now?

It’s all about cutting the flab from places where it’s not required.

As a case in point, let me show you how we cut the load time for OnPage Champ by almost 50% for some of our pages.

Example 1: Chat widgets

Live chat is a marketing necessity today.

As per Super Office, 46% of website users prefer to live chat on a website. Further, CrazyEgg predicts that 38% of consumers are more likely to buy from a website if they can chat with a real person.

Now these stats are compelling enough to put a chat widget on your website, right?

No.

We made the same mistake by placing Drift on our entire site. When we were speed optimizing our website, we realized that Drift JS takes a hell lot of time to load and impacts the site speed drastically.

That got us thinking whether we actually need a live chat on every website page.

That’s the reason we have removed chat widget from our blog pages.  We wanted the experience to be uncluttered and uninterruptive.

The result: an instant saving of ~3 secs of page load time for our blog pages.

Example 2: Opt-in forms

Just like the chat widget, we were using Sumo’s opt-in popup sitewide.

This again adds its own JS and CSS.

As part of our review process, we realized that our website traffic is most likely to subscribe to our updates when they are reading the blog posts.

There’s absolutely no point in serving our traffic a popup when they are on the pricing page or the product features page.

We are ready to let go of a couple of conversions that could have been generated from outside the blog page.

This tradeoff comes with faster load time for our website pages.

Example 3: Desktop push notifications

We were using PushEngage to opt users for web notifications.

A quick glance at the metrics and we could see that the opt-in rate is less than 1%.

Plus it adds to the clutter and breaks the user flow.

We have now removed desktop notifications from the entire website, plus saved 1 sec of load time as a result.


Step #5. Compress all images

Any image that you upload to your website should be in the right format, properly compressed and search engine optimized.

JPG serves as the best format for image graphics. Compression helps cut metadata that ads to the image size.

You can use a WordPress plugin named Smush to compress your images without much quality loss.

In their free plan, you can compress 50 images at a single go.

Here’s Smush in action on our website:-

WP Smush image compressions

In case you are not on WordPress, you can use free tools like TinyPng to manually compress each file before uploading.


Step #6. Use lazy loading for images

Lazy loading is a great way to speed up your website pages.

If there are multiple images on your page, there will be a number of requests made by the browser to your web server. Your page will keep loading until all the images are fetched and displayed.

Now, this is a complete wastage of resources.

A user may never scroll to the bottom of the page while the page renders all the images right at the beginning.

Lazyload cuts short this process by loading only the first fold images. All images are loaded at scroll time, thus saving on page load time.

Smush offers a lazy load option as part of their free offering, so you don’t need to look anywhere else.

Smush plugin lazy load


Step #7. Resize images – resizer

The majority of the webmasters don’t pay attention to image scaling thereby resulting in unnecessarily poor page load time.

This happens when the image that gets rendered is more than the size defined in the page CSS or HTML, as shown below.

resize images

For example, at OnPage Champ we use stock images from Unsplash as the featured image on our blogs.

We didn’t realize that we were downloading images with the highest resolution whereas rendering on our website happens at a lower resolution.

Consider the analysis from GTMetrix below for one of our pages where using a scaled image can save ~200kb of data.

Finding unoptimized images

Making this one change improved the page load speed of this page by 0.7 secs.

Imagine how much impact will this make if there is more than one such opportunity on your web page.

How to scale images for faster page load time?

Step #1: Use GTMetrix to identify the image URL that needs scaling (as shown in the screenshot above)

Step #2: Use an online image editing tool (like PicResize). Just paste the image URL that needs scaling, specify the new dimension (through Custom Size option) and click ‘Done’ to generate a JPG of the scaled image.

PicResize Image scaling tool

Step #3: Next, install Media Replace Plugin (for WordPress based websites). You can now directly replace images from the media section of your WordPress. Simple, fast and easy.

Media replace plugin


Step #8. Use lazy load for YouTube Videos 

Just like images, you can also defer the rendering of your YouTube videos after the initial page load.

YouTube and Vimeo videos result in a lot of JS and data flow back and forth and can slow down your page big time.

As a test case, we did lazy loading for 2 videos on this blog post, resulting in an improvement of 1.5 seconds of load time.

How to defer videos?

The logic behind deferring videos is to hide the iframe source in the initial load. That means no calls are made to fetch resources required to load an iframe.

While I am sure there will be WordPress plugins that can help defer YouTube videos. I found this suggestion by Varvy quite easy to follow, without putting a burden of another plugin on my website.

Here’s step by step instructions on how we did this:-

A normal YouTube embed code looks as follows:

<iframe width=”900″ height=”506″ src=”https://www.youtube.com/embed/onlt3qkaxKQ” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

To defer loading, introduce a new field (data-src) and move the video URL there

<iframe src=”” width=”900″ height=”506″ data-src=”//www.youtube.com/embed/2Wtjc1o2oI0frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Next, add the following script to the bottom of your page, just below the end body tag.

var vidDefer = document.getElementsByTagName(‘iframe’);

for(var i=0; i<vidDefer.length; i++) {

if(vidDefer[i].getAttribute(‘data-src’)) {vidDefer[i].setAttribute(‘src’,vidDefer[i].getAttribute(‘data-src’));

}}


Step #9. Clean up your assets

This is one advanced technical SEO hack that not many SEO pros talk about.

But trust me that it is super effective and immediatelly improves your site speed by atleast 3-4 seconds, especially if you using a theme on your WordPress site.

Minifying CSS, JS & HTML is not enough.

Many a times, certain plugins will insert their code on every page, even though it may be used only on one single page (e.g. social media plugin/contact form plugin etc.).

Asset cleanup strips this code from places where it is not required, thereby cutting the flab and reducing the requests that are made to your server.

How to clean up assets?

At OnPage Champ, we use Asset Cleanup WordPress Plugin for this task.

Asset Cleanup WordPress plugin

You can specify the global setting in the plugin and it will strip of the unused assets across all the pages.

But if you want a specific page to be handled differently, you can customize the asset cleanup settings for that page.

I would strongly suggest that you try this plugin today and see your website speed zoom like anything.

Caveat: When we used the plugin for the first time, we opted for a global setting. As a result, some of  our pages lost their styling. We had to call in our developer to get back the styling.

The trick is to be super selective in making global setting, unless you are too sure about the asset.


Step #10. Improve server response time

If you are consistently facing trouble with site speed, review your hosting provider and plans and switch if required.

Things like server response time, dedicated resources vs. shared resources, more resources, etc. all play an important role in making a website load faster.

In our case, we initially built OnPage Champ on Bluehost’s shared hosting plan. We knew the limitations of shared hosting but thought of building and optimizing the website first before we move to faster hosting.

Now that the website has started receiving traffic, we have migrated it to Google Cloud with dedicated and more resources than our BlueHost plan.

Website loading time optimization key takeaways

If you love problem-solving, improving site speed is one challenge you will love to solve. It’s pretty logical, scientific and process-based and gives quicker results to boost your SEO.

Remember one thing: page speed is a synonym for user experience. Keep your user at the center and focus on how fast you can deliver your content to her.

Key methods include:-

  • Browser side and server side caching
  • Minifying CSS/JS for lesser server calls
  • Using lazy scrolls for images & videos
  • Compressing & resizing images
  • Cutting the flab
  • Reviewing your web hosting

Working on page speed SEO may feel like a mamoth task at first. But it’s a critical one and should be done without any procastination.

Moreover, improving website speed is a journey. You need to run multiple iterations before you hit the right spot.

What’s one hack that works for you when it comes to improving website load time?

Leave a Comment