I’m sure that there are tons of blog posts where you can find information about boosting the page speed of your WordPress site. Just google “how to boost WordPress page speed”, and you’ll understand! But most of these articles only give you some generic and well-known tips, such as:
– Use a caching plugin
– Use a CDN
– Limit the use of plugins
However, in this post we’re going to dive deeper in some of the less-known page speed optimization strategies. Let’s cut the fluff and get started!
1. Using JPG vs PNG
When it comes to web images there are two formats you should use – JPG and PNG. It’s a well-known fact that you need to optimize your images using the tools that offer the best compression rates. But that’s just not enough. You also need to know when to use these formats.
In layman terms:
– JPG format: use this format when your image has diverse colors, for example for portraits or photographs
– PNG format: use this format when your image has limited colors. We’re talking about screenshots or vector images here
If you use PNGs for photographs, they will take several megabytes of storage. On the other hand, if you use JPGs for screenshots or vectors, they will take considerably more space than PNGs.
You need to forget about compression and resizing, just choose the right format and let the WordPress plugins and services like ShortPixel handle the rest.
I used to compress and resize images manually using ImageOptim and my Mac Preview app, but now I have ShortPixel installed on my site and it automatically does the work for me.
This kind of plugins which handle image compression, resizing, and, also change the image format, save you a lot of time and headache.
2. Choose your theme cleverly
You need to choose the right theme for your WordPress site. Here are some tips that help you choose a theme that’s great:
– A theme should have a clean code – without improper image scaling and inline CSS
– A theme should be modular so that you can disable the unwanted functionalities and scripts to speed up your site
– A theme should be well-maintained with regular updates (this is crucial as WordPress regularly undergoes major chances – like the one we saw in the case of Gutenberg)
– Complete mobile responsiveness is very important as Google’s mobile-first indexing is in place
– A theme should offer good features so that you can avoid using plugins
I’ve been in the WordPress field for 5 years and I absolutely love Astra Pro and GeneratePress Pro themes.
Another question I see people ask is: “What about page builder plugins?” Using page builders is becoming essential for any website that needs great design flexibility. I recommend you check out this post where popular WordPress page builder plugins are compared to each other.
I always suggest my readers not to use page builders on each page of their site. With WordPress Gutenberg and some custom CSS you can build fast loading pages and, also, not depend on any other plugins but the WordPress core.
You could also read: How to Optimize Images in WordPress Themes and Plugins With ShortPixel?
3. Choose plugins that offer all-in-one features
Limit the number of plugins you use on your site. Because multiple plugins from different developers can conflict with each other and slow down your page speed. Make use of a few plugins that offer more features!
For example, ShortPixel comes with multiple features like:
– JPG and PNG compression
– PDF compression
– Image resizing
– Image format conversion
You don’t need to use separate plugins to implement these functionalities.
You can also consider using themes that come with multiple features that replace the need of using multiple plugins.
If there are small functionalities you need to implement on your site, rather than using a separate plugin for it, you can add hooks to your theme using plugins like Code Snippets. In doing so, you’ll be reducing the number of plugins from your site.
4. Disable plugins/scripts on pages
If you have lots of plugins on your site and don’t want to load certain plugins on certain pages of your site, you can use plugins like the free Plugin Organizer or PerfMatters.
These plugins allow you to prevent the unwanted plugin scripts to be loaded on the pages you select. For example, Perfmatters allows you to track down the scripts that are loading on your site and helps you selectively block those scripts on pages that satisfy your preset conditions.
For example, if you are using a social sharing plugin that loads on every page of your site, you can use the above plugins to selectively block it on certain pages.
Also, you need to consider adding retargeting and tracking scripts only to the landing pages that are crucial for your campaign and not on your entire site.
5. Not all caching plugins are equal
You are often advised to use website caching plugins. But you need to remember that not all the caching plugins are created equal.
People only think of W3 Total Cache and WP Super Cache when discussing caching plugins. But there’s more to it. According to this post from Adam Connell, and if I take my experience into account, WP Rocket is the best plugin for caching.
WP Rocket does more than caching, as it comes with great features like Google fonts optimization, minification of scripts, lazy loading, database optimization and dozens of others.
If you are looking for a free plugin, I’ve had great results with WP Fastest Cache. I’ve used and tested almost all the free plugins for WordPress and this is by far the best; it also cuts down additional 2-3 seconds on page load compared to W3 Total Cache. This is how this plugin worked for me. You need to run your tests and determine which free plugin integrates and performs well with the tools that you are using.
6. Progressive web app or AMP
Ever since Google announced its mobile-first indexing, the importance of faster page loads on mobile devices has increased.
Google has two solutions when it comes to boosting mobile UX:
– Accelerated Mobile Pages (AMP)
– Progressive web pages (PWP)
Both have their own strengths and disadvantages.
AMP enables lightning fast website load times using their cache. The majority of the news websites are using this technology to highlight their results in SERPs.
However, you need to remember that AMP can easily strip off your website’s branding and it could also interfere with payment gateways and popups if proper integration is not done.
On the other hand, PWA is more suitable for sites like Amazon or Walmart, where they need to have interactive elements, animations, native payment modals, etc. The PWA makes your website feel like an app inside the user’s mobile browser.
If you want to get the best of both technologies, you can use them together. You get the page speed of AMP and the UX/UI interface of PWA.
7. Lazy load images and videos
Allowing the images and videos to be loaded only when the user comes to the viewport is very important. This increases the page speed of your website.
For implementing this functionality, you can use features offered by Jetpack or BJ Lazy Load plugin. If you are already using WP Rocket, there’s a built-in option.
You may also want to use lazy load for video functionalities. There are great plugins out there for accomplishing this.
It’s very important to compress and resize your images properly by using a good image compression plugin before lazy loading them. If the images are in bulk, it may take forever for the images to load and there’ll be a huge blank space at the time of the lazy loading. If you have more than 10 images on any blog post, make sure you enable lazy loading. If not, your page speed may suffer.
Make use of tools like GTMetrix or Pingdom to check the page speed of your site.
As with anything, it’s important to figure out the top 20% factors that are contributing to the 80% slowness of your site. Most of the times, that top 20% factors are large images, poorly coded plugins, and scripts.
I hope you found this post helpful.
Author’s bio: Akshay Hallur is the founder of BloggingX. He teaches other business owners and individuals how to leverage the power of blogging and content marketing in order to grow their online companies.
Image 1 from rawpixel.com
Image 2 from freepik.com
Image 3 from freepik.com
Image 4 from freepik.com
Image 5 from freepik.com
Image 6 from freepik.com
Image 7 from freepik.com
Image 8 from freepik.com