How to optimize your WordPress website and satisfy Google Page Speed Insights
WordPress website performance optimization is not a one-size-fits-all process, and every website is different in its own way, but some of the items should be applied to every website in order to handle and prevent most of the common problems faced by the majority of websites.
In the following article, we will explain how to do some of the things and give you a few resources that we found to work great, but this is only guidance, and the most important part is on you and how you decide to implement our recommendations.
Plugins
Using an excessive number of plugins on a WordPress site can pose a performance risk, as each plugin can add additional HTTP requests, database queries, and potentially conflicting scripts, leading to slower page load times and a less responsive user experience.
However, the notion that having too many plugins inherently causes performance issues is a misconception. The key factor is not the quantity of plugins but their quality; well-coded plugins that are optimized and contain only the necessary features can be used in larger numbers without negatively impacting performance.
On the other hand, even a single poorly coded plugin can significantly degrade website performance, causing slow load times, compatibility issues, and potentially leading to a suboptimal user experience. It’s crucial to carefully select plugins, ensuring they are well-reviewed, regularly updated, and from reputable sources, to maintain optimal site performance and functionality.
When choosing a plugin you should pay attention on a several details.
- A plugin that has not been updated for a while can be incompatible with the latest WordPress version, can cause conflicts with other plugins and themes, and can pose a security threat due to the not-updated code.
- Plugins that are updated regularly but do not have enough installs can mean that they are not well tested in the real world, and the potential issues are not yet discovered.
- Plugins with too many installs are well tested and, of course, well-coded, but they are filled with features to accommodate the needs of many users, which means that in most cases, you will not use a large amount of the features, but all the code and assets will be loaded on your website even though you’re not using them.
Theme
Poorly coded WordPress themes can primarily hinder website performance by incorporating unoptimized code and excessive, resource-heavy features, which can lead to longer page load times and a suboptimal user experience.
Even though there are well-coded premium themes out there, they are focused on broad outreach and filled with features that can accommodate the needs of a huge audience. They are great if you want to build a website without the need to code, but most of the time you will not need more than 80% of the theme’s features. The assets of the theme containing those features will be loaded anyway, causing your website to work and load suboptimal.
The best solution possible is to build a theme with only the features you will need and nothing else.
But if your website is already built with the poorly coded or feature-bloated theme, you can partially solve some of the issues with the plugins meant to unload some of the assets and make your pages less heavy.
There are a variety of free and premium plugins that serve a particular purpose. A plugin such as Asset CleanUP can help you unload assets that are not being used. WP Rocket, aside from other features that we will mention later, can remove unused CSS and delay the execution of JavaScript. WP Rocket is our tool of choice, but it only comes in a premium version. There are free alternatives, one of which is Debloat, which can be found in the WordPress repository.
Hosting
Choosing a good hosting provider is essential for website performance because it directly influences the site’s speed, reliability, and uptime. A quality host will handle most of the optimization for you by providing sufficient resources, optimized configurations, and robust server infrastructure.
Also, if you’re maintaining the website yourself without a developer, it is important that the user interface is friendly and not confusing, so you can optimize or change some of the things yourself. And if, at times, you have trouble, good support from the hosting provider can save you a lot of time and headaches.
On the other hand, a poor hosting provider can lead to slow page load times due to inadequate resources, overcrowded servers, and frequent downtimes, negatively impacting your site’s accessibility and user engagement. Additionally, bad hosting can result in poor customer support, making it challenging to resolve issues promptly, further hurting your website’s performance and reputation. Investing in a reputable and reliable hosting service is therefore fundamental to ensuring your website remains fast, secure, and accessible at all times.
Our host of choice is Cloudways, since it has all of the great features we mentioned above and much more. Aside from Cloudways, there are a variety of great hosts out there, such as WPEngine, Flywheel, Indystack, and Pantheon, and whichever you choose, you will not regret it.
Images
As the biggest item on this list, we have images. Even if all of the items above are in perfect condition, the website will perform poorly if the images are not properly handled. Image optimization plays a crucial role in website performance for several reasons. If not optimized properly, they significantly increase the size of the page, which prevents browsers from loading your page quickly and can lead to a poor user experience and low Page Speed Insights scores.
If you’re developing a new website, it is recommended to optimize images before uploading them to the website. For this, you can use a variety of tools, including Photoshop, Image Compressor, or our favorite Tiny JPG. Even though JPG is in the name of the opimizer, you can use it for JPG, PNG, and WebP image formats.
Simply drag and drop the image into the appropriate box on the Tiny website, wait a few seconds, and download the optimized version of it. Optimized images without compromising quality will be ready to be uploaded to the website, leading to faster page load times and a smoother user experience.
BUT, even with properly optimized images, Page Speed Insights will have a problem with your images if they are not uploaded in next-gen formats, such as webP, avif, or svg.
WebP has been used for a while now, and even though it has support within most of the popular browsers, it is still not used as a default since there are browsers that lack support for it, such as the older version of the Safari browser, and the webP images will show as broken on such browsers.
To overcome that, there are many plugins out there, and our favorite is Imagify. Imagify will create a webP version of your images, and it will serve them to all supporting browsers; for the non-supporting ones, it will serve the original jpg or png.
Aside from the optimization and webP conversion of the images, there is one more thing that you need to pay attention to. The width and height of the image. The height of the image oftentimes depends on the width of the image, since we want to keep the same aspect ratio, which means that the most important part is the width itself. The maximum width of the image uploaded to the website should correspond to the maximum container width. If you’re not quite sure what this means, to simplify things, the uploaded image should not be more than 1920 px wide. If you have more people in your team that handle the content and the images of your website and are having trouble communicating this to everyone, the image optimization plugins, such as Imagify, have an option to limit this and automatically resize all images that are wider or larger.
Optimized images consume less bandwidth, which is beneficial for users with limited data plans and contributes to lower hosting costs. Additionally, search engines like Google use page speed as a ranking factor, so optimized images can improve your website’s SEO, making it more visible and accessible to potential visitors. Lastly, efficient image optimization helps ensure your website looks professional and engaging, which is vital for retaining visitors and reducing bounce rates.
Extras
Even with a well-chosen theme, carefully selected plugins, and a top-tier hosting service, websites can still benefit from additional layers of optimization to further enhance performance. Technologies that store frequently accessed data closer to the user or distribute content across multiple servers can significantly reduce load times and bandwidth usage. These optimizations ensure that a website remains fast and efficient, providing a seamless experience for users worldwide, regardless of their geographical location or the number of concurrent site visitors.
Caching
Caching is a technology that temporarily stores web page data such as HTML pages, images, and other files, making them quickly accessible upon subsequent requests. This process reduces the need for repeated processing and database queries each time a page is requested, significantly speeding up website performance and decreasing the load on the hosting server. Caching plugins for WordPress automate this process, offering an easy-to-use solution for optimizing page load times and improving overall site efficiency. Aside from that, caching plugins like WP Rocket offer other features such as Lazy Load, which delay the image loading until the image comes to viewport, combinig of assets, and delaying the execution of JavaScript, which can greatly satisfy and improve Page Speed Insights scores.
As we mentioned, WP Rocket is a premium plugin, but many free plugins from the WordPress repository offer the same improvements and have a similar impact on the website. You can find themes easily by browsing the WP repo, but here are some of them that we tested that had great results: WP Fastest Cache, W3 Total Cache, etc…
All of them have a user-friendly interface with self-explanatory checkboxes, and all you need to do is tick the optimization feature you need, and the plugin will do the rest.
CDN
A Content Delivery Network (CDN) is a network of servers strategically distributed across various locations around the globe, designed to deliver web content and pages to users more efficiently. By caching the content on multiple servers, a CDN allows a user’s request to be fulfilled by the server closest to them geographically, significantly reducing the data travel time to the user. This not only speeds up the loading time of web pages but also reduces the load on the origin server, leading to improved website performance and decreased server latency.
Moreover, CDNs can enhance website security by providing additional protection against traffic spikes, DDoS attacks, and other types of cyber threats, making them a vital component for maintaining a fast, reliable, and secure online presence.
Many hosting providers offer a CDN as an addon to their service, either developed by them directly or by collaborating with a third-party CDN. The most popular one, and our choice, is Cloudflare, which is simple to configure, reliable, and even has a free plan for small websites. This can be great if you’re just starting your business or getting familiar with this way of optimizing.
Bonus
If you’re a developer or are reading this article on behalf of your developer to help them optimize your website to their best abilities, here are some tips and tricks to make the most of your website.
ACF and Gutenberg
If you decide to make the most of the website performance but keep the simplicity and usability of the WordPress editor, an amazing way to go is ACF Guteberg Blocks. ACF and Gutenberg themselves are amazing tools that work fast on their own, but combining the power of both is a way to make the best of both worlds in terms of usability and performance.
We will not get into the development itself, but what is most important in this context is the loading of ACF Gutenberg block resources. If configured properly, all the assets of a specific Gutenberg block will be loaded only if that block is present on the website. To sum it up, if you have 50 blocks developed for your website and you only use one on a specific page, resources from 49 of the blocks will not be loaded at all on that page.
Background Images
As we mentioned earlier, Page Speed Insights loves next-gen image formats, but we can’t still use them as default due to compatibility issues, we use Imagify to convert jpg and png to webP. But, Imagify converts only IMG tags in HTML and can’t convert the CSS background images, we though of the way to overcome that, as well.
When developing a website, instead of the standard CSS rule to apply background image, you should use the IMG tag with absolute positioning inside your container that will act as a background, but still allow the image optimization plugin to convert is to webP, and satisfy Page Speed Insights.
Conclusion
From the start, a WordPress website should be developed with performance in mind, as it is one of the most crucial aspects of your business’s online presence. It is often overlooked, and it can pose a challenge later on. If developed properly, a website should perform well above average without much trouble. But if you already have a website with less than optimal performance, we hope this article helps you get it back on track, keep your visitors engaged more, satisfy Google Page Speed insights, and avoid any penalties.