We live in an insanely impatient world. Providing quality content fast was an enviable achievement a few years back. Today, it is a rudimentary requirement for any business.
The longer you make people wait to access your website, the greater the probability that they bounce off. A slow website is a serious problem that needs immediate attention.
Why?
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.
In this post, we will show you how to avoid that scenario. There are 5 steps to optimizing your page load time.
Step One: Find your current page load speed.
Google PageSpeed Insights and GTMetrix are useful tools to calculate page speed. Both 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:
The upcoming section elaborates on how to get a faster speed score on GTMetrix.
Step Two: Optimize your website to increase page load speed.
Tips for SEO Image Optimization
How to 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. These are 4 methods to reduce image size.
- Image Compression
- Cropping Images
- Resizing Images
Image Compression
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.
Crop Images
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?
The a3 Lazy Load plugin can help you implement lazy load quickly.
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
JavaScript(JS) and Cascading Style Sheets(CSS) are pieces of code that support every webpage you see. Both impact page load speed in two ways – they add to page size and make a set of requests to the server that takes time to be processed.
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:
Minify JS/CSS
Minification eliminates unnecessary chunks of code, reducing the file size. This enables browsers to download and execute code faster, saving bandwidth.
Leverage Caching
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.
Results
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.
Thank you for sharing