We all know that WordPress is an excellent platform. But, a problem everyone faces with their favourite rig is the speed performance. Often we use 10s of plugins and premium themes, and many of them are not speed optimized. So, WordPress Speed Optimization becomes vital for every website or blog.
If you ignore taking proper actions, you’ll continue to deliver a slow and laggy web experience to the users. I don’t need to tell you what a bad user experience can do to your business. You’ll lose visitors and rankings on Google if you still have a slow website. There are plenty of guides and articles available on the internet about speed optimization, but I thought, why not have everything in one place. So, this WordPress Speed Optimization Guide will have everything you need to do to make your website faster. Before diving into the optimization guide, I would like to update you about the recent Google Search Engine Update.
In this WordPress Speed Optimization Guide, we’ll take a look at:
- Core Web Vitals are New Ranking Signals
- Why Having a Fast Website Matters?
- How to Check Website Performance?
- Testing Website for Speed Optimization
- Choose a Good Web Hosting Provider
- Use a Lightweight Theme
- How to Compress Images for Faster Load Time
- Our Website Performance so far
- Eliminate Render Blocking Resources in WordPress
- How to Defer Offscreen Images in WordPress
- Serve Images in Nextgen Format
- Optimize More with Autoptimize
- Use a Content Delivery Network (WordPress)
- Conclusion of this WordPress Speed Optimization Guide
Core Web Vitals are New Ranking Signals
In a recent core update, Google announced that Web Vitals are new ranking signals. According to webmasters blog, Web Vitals are a set of the real world, user-centric metrics that quantify critical aspects of the user experience. It includes measurement of web usability factors like load time, interactivity, and stability of content while it is loading. Let’s take a quick look at criteria that decides whether your website complies to web vitals or not.
Information for Reference: This Google Update was a Core Update released in May 2020.
Let’s take a quick view at what these 3 web vitals factor means.
- Largest Content Paintful: LCP means the time it takes to load the main content of the page. If the main content is loading within 2.5 seconds, it will be considered as good.
- First Input Delay: FIP means the time it takes to make your page interactive. If a user is not getting any interactive and engaging element within 100ms, your page will not qualify this metric of Web Vitals.
- Cumulative Layout Shift: It usually happens that unexpectedly layout of the page changes because some of the page elements load late. So, CLS will measure how long your web page is taking for a cumulative layout shift. If the time is below 0.1, you will pass the test.
You now have a basic knowledge about the recent Google update and how it is relevant to your website speed. Now, let’s quickly start with our WordPress Speed Optimization Guide.
Why Having a Fast Website Matters?
When a visitor lands on your website for the first time, you only have a few seconds to serve the visitor. If your website fails to serve the visitor, there are chances that the visitor may not come back to your site soon. Losing a visitor can be a significant loss for your business or profits. A visitor can be a reader, a potential client visiting your services page, a buyer visitor product page, etc. So, ask yourself a question, can you afford losing even a single visitor? The answer is no.
With time, the human attention span has dropped from 12 seconds to 7 seconds between 2000 and 2016. People want to be served quickly, and when it comes to web content, people want everything faster than their blink of the eye.
Along with all this losing and gaining game, as we told above, speed is now an official factor of Google Rankings. If you are losing on rate, you are missing on rankings, and suffering on rankings means losing everything you may have earned from Google. Well, let’s start with the practical stuff and optimize your website at best.
How to Check Website Performance?
Before beginning with website speed optimization, it is crucial to know the current performance of the website. If you are judging your website speed just by counting 1 second, 2 seconds, 3 seconds, etc. and deciding that your website is performing good, then you are making a big mistake.
Website owners usually access and browse their website and caches gets store in your browser. So, you may see your website loading faster, but this will not be the case for someone opening your site for the first time. Even the geography of the visitor affects the time your website takes in loading.
GTMetrix and Google PageSpeed Insights are two major tools that are widely used to measure website speed performance. We will be analyzing both the home and post pages of the website. Usually, the Home Page is considered for speed factors, but we’ll be optimizing all the pages because we want a better user experience.
Testing Website for Speed Optimization
Choose a Good Web Hosting Provider
Your website’s hosting quality has a significant impact on the speed of your website. Most of the shared hosting providers don’t provide good performance as the servers are not well optimized and shared with many users. But, that doesn’t mean you cannot optimize if your website is on shared hosting. Web hosting providers like Bluehost and Namecheap are good companies that can offer you a good hosting server at a low cost. Siteground is a really good hosting provider, but i find their plans overpriced.
I would advise you to avoid all those web hostings that cost cheap. They save costs by sacrificing the quality of the server or by sharing it with more than the required users. So, you may save costs at once, but your website will pay the price. Our testing website is hosted on HostPapa, a decent company with a really good price range. You can also consider it’s shared hosting plans if you are not expecting a flood of traffic. If you are technical enough to manage cloud hosting then DigitalOcean is a perfect option to go with.
Use a Lightweight/Optimized Theme
WordPress themes like Newspaper, JNews, Bimber, etc. come with many dynamic elements, sliders, widgets, and scripts that cause a slow load time. What these themes offer is attractive and vibrant, but all this has its own cost. So many elements and scripts increase the page size and consume more power of your web servers.
So, it would be best if you used lightweight themes for creating a website. Themes like Astra and GeneratePress can be a perfect choice for anyone. These themes are built for speed; Along with speed, they offer a lot of functionality. The website on which you are reading this WordPress Speed Optimization Guide and our testing site is built on GeneratePress.
Image Compression for Faster Page Loading
The images you download from stock websites or create with softwares look fantastic but are bulky in size. The dimensions, colors, and building software used impacts the size of the image. If you put these images on the website, it’ll slow down your website. That’s the reason why image compression is necessary.
I am sharing a quick technique that I use to compress my images. Dimensions are critical, so set the required dimensions of your image. For example, you can see that none of the images used on this page has a width of more than 900 pixels. I know how wide images my website requires, so i resize them accordingly. You can use Microsoft paint for resizing. Once you have resized your image, it is time to compress it. I use toolur for image compression. You can set the compression percentage to 75% if you don’t mind serving a bit of a low-quality image. Otherwise, you can compress images between 85% to 90%. Images on this page are optimized between 75% to 80%. Using this compression method, I save around 70% size on every file.
Our Website Performance so far
As we mentioned above, we are using GeneratePress Theme with 17 plugins listed above. So far, the website is not cached and optimized for speed. I have just used an optimized theme and some plugins for website functionalities. Let’s have a look at what scores the site gets while testing it for page speed. As you can see above, the website is performing poorly, even after using an optimized theme. Let’s start with WordPress speed optimization to fasten-up the website for Pagespeed and GTMetrix.
Many issues shown in GTMetrix and PageSpeed Insights are similar, so when we optimize a page for PageSpeed Insights, you’ll also see improvement in the report of GTMetrix.
Eliminate Render-Blocking Resources (WordPress)
Because we use multiple plugins on the WordPress website, it loads many scrips and files, and not all scripts are required to load at first. It blocks and delays user from seeing page content. Render-blocking resources slow down your website that results in negative SEO scores. So, how can you sort out this issue? We have the solution. Here are the 3 ways how you can eliminate render-blocking resources:
Using W3 Total Cache to Eliminate Render-Blocking Resources
W3 is an extremely popular cache plugin for WordPress. It is available for free download on the WordPress directory. Simply install it and activate the plugin. Then, just follow these instructions, and you’ll be able to eliminate render-blocking resources. Once you have installed and activated the plugin, follow these instructions to configure w3 total cache.
The method I shared using W3 Total Cache is enough to eliminate render-blocking resources. After implementing it, the score of performance on GTMetrix and PageSpeed improved significantly. Here are the results derived after testing the site:
How to Defer Off-Screen Images (WordPress)
In Defer offscreen images tab, you’ll see all the hidden or offscreen images. These images can be delayed to load using Lazy Load. Lazy loading images will improve the load time of the page, and then the images will appear. So, using a lazy-load plugin will be a quick solution for this issue.
Using Lazy Load, you won’t sacrifice content or quality of the images. Along with Lazy Load, a lot of website assets can be lazy-loaded to save loading time. Lazy Load doesn’t make your images smaller in size; it just delays the loading of an image until the user navigates to the image. Google recommends lazy-loading images to improve page score that results in better SEO and website user experience.
Serve Images in Nextgen Formats (WordPress)
If images on your website are already optimized, then you won’t get this issue. Although Google recommends using next-generation image formats like WEBP, JPEG 2000, JPEG XR, etc.. On our testing site, we got 0.15 seconds of time delay due to over-weighted images. Image formats like Webp offer higher compression without affecting image quality. It is the reason these nextgen formats are being preferred and recommended.
Another thing you’ll find problematic is the size of images. You must be having many large images, and you may not know that your images can be compressed to save more space and improve page speed. Above in this article, I have already shared how you can compress images. After compressing the image, just upload it to your website and using the methods mentioned below, you’ll save a little bit more on image size.
Optimize More with Autoptimize
Use a Content Delivery Network (CDN) WordPress
Popular CDN networks like Cloudflare are a little expensive. Many of us don’t receive much traffic, so investing in a CDN may not be worth it. So, recently I got to know about BunnyCDN. BunnyCDN is a pay as you go CDN service. You don’t need to pay anything on a fixed charge, just pay for what you consume. Also, BunnyCDN is quite easy to configure. I’ll tell you how to configure it. But wait, if you have signed up for BunnyCDN, claim free $5 credit by using the “GET5” promo code.
That’s it. You are done with integrating CDN on your WordPress website. Now, we need to connect CDN with the caching plugins we are using. Until we specify CDN address in caching plugins, they’ll continue to serve files from your server instead of CDN. So, here is how you can add CDN to W3 Total Cache and Autoptimize.
You may get a different score on PageSpeed every time you analyze your website. So, if you are getting a bad score, try opening the website on your end and then re-analyze it. This usually happens because of the cache your website creates.
Now, as we have done almost all major improvements. Let’s look at the scores we are getting on GTMetrix and Google Pagespeed Insights.
I started optimizing this website since it had a very poor score. Without using any premium plugin or service, I took it to an impressive score. If you further want to improve the score of your website, you can use or consider these products:
Conclusion of WordPress Speed Optimization Guide
I understand you were expecting the score of 100, but unfortunately, I couldn’t get that. Even Google’s own web.dev doesn’t get that. 100 seems like a myth and extremely hard to achieve. So, don’t run behind the score of 100. Whatever score we achieved in this WordPress Speed Optimization Guide was at zero cost. You can invest in premium plugins and services, which can give you better results. I’ve tried optimizing a website hosted on a Shared Hosting server at its best. I hope you find it helpful. If you have any doubt or questions, then quickly let me know in the comments section.
Gzip compression is an important thing for any website. It comes activated by default with almost every hosting provider. If you want to manually activate it, you can either use PageSpeed Ninja or use this code in your .htaccess file:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
Webp is a next generation image format. It is recommended by Google PageSpeed Insight report. You can easily convert all your website images to Webp image format by using Webp Express WordPress plugin which is available for free on WordPress repository.
Using an optimized and well-coded WordPress is really important to avoid heavy loading time. Dynamic themes with a lot of elements like social sharing widgets, glossy looks, sliders, etc. are heavy in size and contains a lot of files that loads while loading a website. Here are some best themes with fast loading time:
- Genesis Framework
Well, it is hard to pick best hosting for a wordpress website. Hosting is a big business and it has been growing since many years. So, don’t fall for the reviews you see on big comparison sites. As per my experience, these are some best hosting providers for a WordPress websites:
- WP Engine
The home page of a website is used as a standard to analyze speed. In order to check the speed of a website, you can use GTMetrix and PageSpeed Insights. Other than these two major platforms, you can use tools like Pingdom, WebPageTest, etc. to analyze your website’s loading speed.