We all know that WordPress is an excellent platform. But, a problem everyone faces with their favorite 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.
WordPress Speed Optimization Guide | Picture: upklyak
Rate this post
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
For practical testing, I created a website on testy.yolife.co. This website is hosted on Hostpapa’s WordPress Hosting. I’ll be doing all the optimization on this website only. A lot of WordPress Speed Optimization Guides use a basic wordpress blog, which is pretty easy to optimize. We are not going to do that. I’ll be optimizing a properly built wordpress website with content and multiple plugins in it. Here is the list of themes and plugins I am using on this test website.
- GeneratePress (Theme)
- GP Premium 1.10.0
- GenerateBlocks
- Lightweight Social Icons
- MailChimp for WordPress
- SVG Support
- WP Logo Showcase Responsive Slider
- Ultimate Shortcodes
- Elementor Page Builder
- Header and Footer Scrips
- Simple Author Box
- Ultimate FAQs
- Wordfence Security
- WP-Sweep
- Yoast SEO
- Classic Editor
- Easy Table of Contents
By looking at the plugins I am using, you can see that it is not a simple blog or website. I am mentioning this because, in many tutorials, people show optimization on a basic website, which is easier to optimize as compared to a full-featured website. The testing website got this score without any optimization:
Now, let’s move ahead and talk about how you can make your wordpress website faster.
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)
Website URLs affecting the first contentful paint (FCP) of your website will be shown under the Eliminate Render Blocking section of opportunities. The impact of render-blocking URLs can be reduced by using inline CSS and javascript and removing unused resources.
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:
- ‘Minify’ Javascript and CSS
- Concatenate Javascript and CSS
- Defer the loading of Javascript
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.
How to Configure W3 Total Cache to Eliminate Render-Blocking Resources?
- Find Performance option on left bar of Admin Panel and go to General Settings.
- Find Page Cache, Enable it and save settings.
- In General Settings, Find Minify Option. Enable it and set to Manual Mode.
- Press Save All Settings.
- Now go back to your Pagespeed analysis and see the files which are render-blocking.
- Navigate back to Performance >> Minify in WordPress admin panel.
- Find JavaScript Section on the page and in the Operations Area, choose non-blocking using as “defer” before <head> tag.
- Now setup the JS File Management. Choose the theme you are using and click on Add Script button.
- Copy and paste Javascript URLs shown in PageSpeed analysis under render-blocking tab.
- Now scroll down a bit and you’ll see CSS minification option.
- Under CSS File Management, choose your theme and click on Add a Style Sheet. Similar to what we did for JS files, you need to pick CSS file URLs and put them in File URI.
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.
How to Lazy-load Images in WordPress?
- Navigate to Plugins >> Add New.
- Search for “Lazy Load – Optimize Images“, Install the plugin and activate it.
- Now go to Settings >> LazyLoad, and enable images. (See image below for reference).
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.
How to Convert Images to .webp in WordPress?
- Navigate to Plugins >> Add New.
- Search for “WebP Express“, Install and Activate it.
- Go to Settings >> WebP Express.
- In General, Change Scope to “All Content” and then click “save settings and force new .htaccess rules”.
- In Conversion, Click “Bulk Convert“, once conversion is done, save settings.
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.
How to Automatically Compress Images in WordPress?
- Navigate to Plugins >> Add New.
- Search for “Smush“, Install and Activate it.
- Go to Smush >> Dashboard.
- Setup Smush but don’t enable Lazy Load.
Optimize More with Autoptimize
Already being used by thousands of websites, Autoptimize is a leading website optimization plugin. It speeds-up your website by aggregating and minifying CSS and javascript of your website. I use Autoptimize on all my sites. Here is how you can use Autoptimize to optimize your website.
How to Speedup WordPress with Autoptimize?
- Install and Activate Autoptimize plugin from WordPress directory.
- Navigate to Settings >> Autoptimize.
- In JSS, CSS & HTML Tab, Enable Javascript and CSS Options and then Save and Empty Cache.
- Important: Remove all CSS and JS files from W3 Cache Minification if you are using Autoptimize.
Let’s have a look at how our website is performing so far:
Use a Content Delivery Network (CDN) WordPress
CDN is a common issue with most of the websites. Content Delivery Network, widely known as CDN, helps load your website faster by serving content from the nearest server to the user location. Usually, CDN serves content like javascript and media files.
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.
How to Set-up CDN on WordPress?
- Create a Free Account on BunnnyCDN.
- Navigate to CDN Dashboard and open Pull Zones.
- Click on Add Pull Zone.
- Enter information in given fields and create the pull zone. Here is an example:
- Now login to your WordPress Dashboard and install “BunnyCDN” plugin.
- Look for BunnyCDN in WP Admin Navigation and open it.
- Put pull zone name in the given box and update CDN settings.
Connecting Storage Zone to Pull Zone?
- In CDN Dashboard, Go to Storage.
- Click on Add Storage Zone.
- Name your Storage zone, Choose the best server for your audience and click “+ ADD STORAGE ZONE“. Don’t forget to enable geo replication.
- Navigate to Pull Zones >> Select Pull Zone >> Perma-Cache.
- Select Storage Zone and Enable Perma-Cache.
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.
How to Connect CDN with W3 Total Cache?
- Navigate to Performance >> General Settings.
- Scroll down to CDN and Enable it.
- In CDN Type, choose Generic Mirror.
- Save all settings and navigate to Performance >> CDN.
- In Configuration: Objects, Put hostname. For example, testy.b-cdn.net in my case.
- Save settings and purge cache.
How to Connect CDN with Autoptimize?
- Navigate to Settings >> Autoptimize.
- Scroll down to CDN Options.
- In CDN Base URL, put hostname, example //testy.b-cdn.net/
- Save changes and empty cache.
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:
- Bluehost (Hosting)
- Astra Theme
- GeneratePress Theme
- Shortpixel (Image Optimization and CDN)
- Perfmatters (Speed Optimization Plugin)
- CriticalCSS (CSS Optimization)
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.
AHow to enable Gzip compression?
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
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
How to convert Images to webp in WordPress?
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.
AWhat are the fastest theme frameworks for WordPress?
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:
- Astra
- GeneratePress
- Genesis Framework
- OceanWP
- Neve
What are the Best hostings for WordPress?
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:
- DigitalOcean
- Siteground
- Cloudways
- Bluehost
- Flywheel
- Kinsta
- WP Engine
- Dreamhost
How to check loading time of a website?
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.
