We live in an insanely impatient world. Providing quality content fast was an enviable achievement in the pre-Kanban era. Today, it is a rudimentary requirement for any business, so it is imperative you increase your page load speed as well.
The longer you make people wait, the greater the probability that they bounce off. A slow website is a serious problem that needs immediate attention.
Suppose you have a 3% conversion rate. You get three prospects for every 100 clicks. Now, what if all three bounce off because your landing page loads in dinosaur years? Imagine the impact on your bottom line.
I witnessed it first hand; my site was so slow it attracted crickets. But I improved my WordPress website load speed from 7 seconds to 1.2 seconds. In this post, I will show you how you can replicate each step.
Step One: Find your current page load speed.
I rely on Google PageSpeed Insights and GTMetrix to calculate page speed. Both tools list factors that hamper speed. However, GTMetrix tells you how many seconds it takes for your page to load.
Plugin your domain URL in GTMetrix and let the tool run its magic.
In a few seconds, it will populate the numbers and assign you a grade.
It will also map how much time each element of the page took to load. For instance, as per the above image, it took 5.5 seconds for the FCP, or First Colorful Paint, to load. The total page load time is a lazy 7.3 seconds!
The tool also lays down a list of suggestions to increase your page load speed…
…and a few more tips:
I tried to find a way to address each suggestion. The upcoming section elaborates on all those methods.
Step Two: Optimize your website to increase page load speed.
Reduce image size
Every website is a file that gets loaded from the servers on request. You want that file size to be minimal to promote fast loading.
Images are usually huge in size! They take eons to load.
But they add tremendous value if used wisely. For instance, the images of GTMetrix helped me put my point forth better while giving you a reference.
We should not eliminate images, but we can optimize their usage.
Make images you use smaller in size. The process of this file size reduction is called image compression. Images are a stack of layers; each layer adds a flavor. Compression reduces page size by removing layers that sharpen the image.
This does impact the image quality, but it more than compensates by winning you SEO points.
Start by saving your images in JPG format as they take lesser disk space. Some blogs recommend JPEG2000 or WEBP, but my theme had rendering issues with that format. Often, JPG works well.
From here, there are two ways to achieve more compression.
- Compress images online
Head on to compressjpeg and upload your JPG image. The tool compresses your image and tells how much it was compressed. Download the compressed image and use it for your web page.
- Use plugins to compress images
I am not a big fan of using plugins. Sure, they make the job easy if you can not code. But they hinder the existing code of your website. However, it is an option worth considering.
There are tons of plugins that can help you compress images; you are spoilt for choice. Anyhow, check for the ‘Compatible with your version of WordPress’ checkmark before using any plugin.
Choose between Lossy/Lossless Compression
Compression can be lossy/lossless. It accounts for what degree you compress your images.
I use lossless compression for text-heavy images. Lossy image text tends to be too blurry to read. I use lossless compression for everything else.
Experiment with which one works for you best.
It seems like an obvious method to reduce image size – you are literally reducing the image size – but many tend to ignore it.
Take a note of image dimensions that work for your blog. The main image and featured image sizes must be consistent. However, supporting visuals can be cropped to display what is necessary.
For instance, none of the screenshots in this post have redundant visuals. No address bars or footers. Every pixel adds to page load time. Remove unnecessary ones.
Resize Images on MS Paint
This obvious-sounding method hides in plain sight.
- Open your image in MS Paint. You will see the option to resize.
- Set your resize percentage, and now you have a version much smaller in dimensions and size. It saves loads on file size!
Lazy Load Images
All your website data is stored in data centers and retrieved when needed; images are no different. The technique of lazy load delays the retrieval process till the time the visitor scrolls to the visual.
It is only then that the system garners the resources required to serve the said image. This technique reduces the initial load on the system by queueing elements for loading only when needed.
This not only saves on initial load time but also conserves bandwidth.
Try it out on this page: scroll down and see how an image loads when you reach it, not before.
How to implement Lazy Load on your website?
For someone like me who can not code, a plugin is the best way to implement Lazy Load. I use the a3 Lazy Load, but there is no shortage of plugins that serve the purpose. Choose what works best for you.
Choose the apt Font.
Font often comes under the purview of design; it is rarely seen as a performance factor.
But it contributes to the page size. The report from GTMetrix discussed earlier shows that Font occupied the most size after images.
For a fast load speed, you must choose fonts that load fast.
I use Open Sans for my website because I do not need to get fancy for my business category. If you own a creative business, you may want to sacrifice a bit of page speed for the beauty aspect. Also, if you want a stylish font contributing to your brand identity, go for it. Brand >> Page Speed.
Tamp down the code
But they are needed to add some style and oomph to your website. For instance, notice my subscription box below – it nods when you scrolled down to it. If you missed the effect, reload this page and try again.
Effect attracts attention but, if overused, become distractions.
There is a tradeoff between styling and page speed. Do not eliminate styling for page speed. However, optimizing the code will increase your page load speed.
And this is how I did it:
Minification eliminates unnecessary chunks of code, reducing the file size. This enables browsers to download and execute code faster, saving bandwidth.
A cache is the storage unit that keeps copies of your website, obviating the need to load every time it is called for. With caching, after loading for the first time, your website will load faster whenever it is called for again.
I use the LiteSpeed Cache plugin to minify code and cache.
Step three: Consider changing your web hosting provider.
Would an aerodynamic sports car run on Kerosene? Nope.
Similarly, a well-optimized website will have a slow page load speed if the server responds only by the next ice age.
I was hesitant to make the change mainly because of the uncertainty. But I did some research and arrived at choosing Hostinger, and I have no regrets.
Many other web hosts do the job for you. Decide what works for you based on your budget and location.
Here is a complete guide to changing your WebHost.
Step four: Use a Content Distribution Network (CDN.)
Geographical distance impacts page speed big time. The farther a visitor is from where your website is hosted, the longer the page load time.
CDN is a collection of global servers located in multiple data centers across the world. It enables a visitor to connect with a geographically closer server instead of the home server. It does so by leveraging servers at the exchange points between different networks.
The reduced distance promotes a faster serving of your webpage.
I use the Cloudflare CDN, and it has served its purpose big time.
Step five (optional): Use Accelerated Mobile Pages (AMP) to increase mobile page load speed
Remember we talked about minifying the code. HTML is a form of code that is lighter than CSS/JS. It does not permit styling, but HTML is the basic code that servers need to load your website.
AMP pages are the HTML form of your webpage. These are second version pages that are predominantly used for mobile devices. They are code stripped down to the bare minimum, thus pages load in a fraction of a second.
Going AMP means eliminating styling from your page. However, they are beneficial for news pages and blogs. I used them briefly but went back on the decision because the first three steps did enough even for my mobile page speed.
I wrote a detailed guide on deciding if you want to implement AMP or not.
The above steps did wonders for my page load speed. Going back to GTMetrix, here is where my website stands today.
It loads in 1.2 seconds. About a 6 fold increase.
But, the proof is in the pudding. Try it out, and let me know in the comments how it goes.