Improve Page Speed & Site Load Time | An Actionable Guide

Improve Page Speed & Site Load Time | An Actionable Guide

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 the 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 Page Speed

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 why Google considers site speed as an important ranking parameter.

That means a faster loading website stands to rank higher up than a slow loading website, given all other things are equal.

And that’s a reason good enough to work on improving your page load time and speed.

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

How to improve your Page Load Time?

Infographic Page Load Speed Improvement Checklist

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 below)
  3. Replacing components for improved site speed (#5, #6, #7, #8 & #9 below)

#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 proximity.

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 faster response time and better page load speeds.

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 CDN will dynamically serve the user request without the need to involve the origin server.

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:-

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

Cloudflare CDN plugin for WordPress

Step #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.


#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 this step 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 are browser-side caching works?

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 plugin for browser caching


#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 using W3 total cache plugin

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 on 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.


#4. Review 3rd party services

This is probably one thing that will fire up your website speed like anything.

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

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’s got us thinking about whether we actually need to live chat on our entire website.

As a self-serving SEO SaaS tool, we can’t afford to initiate a live chat with every prospect that lands on our website. We need to qualify the prospect and that can be done basis his page views.

That’s the reason we now have our chat widget only on the pricing page and have removed it across all other pages, including the homepage and blog articles.

The result: an instant saving of 5 secs of page load time.

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 reader is most likely to subscribe to our updates when he is on our blog page.

There’s absolutely no point in serving him a popup when he is on the pricing page or the 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.


#5. Compress all images

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

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:-

Smush plugin for image compression

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


#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 for image lazy load


#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.

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.

Why to scale 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


#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’));

}}


#9. 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.

Page Speed Optimization Key Takeaways

If you love problem-solving, improving site speed is one such challenge you will love to solve. It’s pretty logical, scientific and process-based and gives instant 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 for his consumption.

Key methods include:-

  • Using 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 load speed may feel like a mamoth task at first. But it’s a critical one and should be done without any procastination.

If you have something on top of this list , please do comment with your tips below.

Your subscription could not be saved. Please try again.
Your subscription has been successful.

Subscribe to our posts

Latest marketing tips, straight to your inbox 

Don't worry. We won't spam.

Leave a Comment