How to Speed up your WordPress Site

how to speed up your wordpress site

How to Speed up your WordPress Site

 

A slow site is really great concern to site owners. If you are using it for your own and the usage is limited to some confined community then the slowness can be tolerated and is accepted. For example, when you want to buy your favorite perfume on Amazon, you can wait 10 seconds and even refresh the page 5 times if it is not loaded properly!

But when you are opening up the site for the whole world, then it is worth making faster. Who would wait 10 seconds just to read an article from your site, when a google search will bring up thousands of similar content?

There are two basic reasons why you should have a faster site. One is user experience, when a user wants to read a post on your site, as expected, s/he would not wait 6 seconds for your site to be visible properly. They will simply choose to navigate away to another site. Secondly, search engines like google, bing will almost never show your site in the top 50 lists! Only because your slow site performance may take the reader away and it may, in turn, hurt the credibility of google or bing search engines!

 

What are the basic features that speed up a WordPress site?

The below are the core website vitals that needs to be improved to speed up your WordPress Site:

  1. Minimum server execution time (while inside the server)
  2. Minimum transfer size (while in transit)
  3. Minimum browser-side code execution (while on readers device)

 

How to minimize server execution time

The WordPress framework is a minimalistic framework. It can not work with full potential as it comes in the beginning. We need to install some more plugins into it to take more out of it. 

The more plugins we add, the more backend executions the server needs to do before it can produce the desired output. For example, security plugins, anti-spam plugins, custom blocks plugins, frontend publishing plugins, etc. will add their own code in the line and thus you need to do something about it.

 

Cache

If your website contains content that does not change much over time, then we recommend using a cache plugin. The cache plugin is not recommended for logged-in user pages, because cached pages hold the same data over some time and serve the content immediately when requested.

Therefore, in WordPress, it is better to exclude pages from the cache where a login is required, otherwise, you can see some old data when served. Thus you may come to a more complex problem while trying to speed up your WordPress site.

But if you have a subscriptions system where you show the same post content to logged-in users after login, then you can cache those contents. Suppose you have written an article about “How to brush your teeth in a proper way”. Now, the post content does not change frequently over time, after it has been written. But a subscribed user must log in to see the post.

Here in this case you can safely cache your post, provided you are restricting your users on the basis of the requested URL. Otherwise, there is a chance that the post content could have been served to a non-logged-in user accidentally! But remember you should never cache the user dashboard page as it may change frequently.

 

litespeed cache to speed up your wordpress site

 

What are the best WordPress cache plugins to speed up a WordPress site?

Beware! Before choosing a cache plugin, please try to know the server configuration you have. For example, some server runs Apache-Nginx, while some other may run Litespeed with Apache. If your server is running a Litespeed module, then there is a great cache plugin for the same, it is a free plugin and you can get it from WordPress.org. Litespeed Cache plugin (free and paid) has been built specifically for Litespeed or OpenLitespeed server modules.

The next thing is choosing a cache plugin if you are not running Litespeed or OpenLitespeed server module. Well, a detailed benchmarking and comparison shows that the W3 Total Cache plugin (free and paid) is the best, and somewhat better than the much popular WP Rocket (only paid) plugin. But the WP Rocket customer service and support are legendary and they have integrated RocketCDN, which simply eliminates all the need to integrate an extra CDN manually. 

Therefore the bottom line is that to speed up your WordPress site, just know your server configuration. If it is Litespeed or OpenLitespeed, then go for the Litespeed cache plugin. Otherwise, you can freely choose between W3 Total Cache and WP Rocket. 

 

CDN

A CDN will minimize your server execution load by serving static resources files from their own servers. On your page, you always need external static files such as javascript (.js), style sheets (.css), etc. A CDN stores those in their own server worldwide and serves them on demand from the nearest server available. This reduces dependencies upon your server bandwidth and speeds up your site loading to an extent.

If you want to speed up your WordPress site, a CDN is a must. 

Which CDN to use?

The best CDN we recommend is Cloudflare CDN. Cloudflare will cache your visited pages in cache and will serve them from their cache. This saves your server load and reduces your bandwidth usage. It will also minify your page HTML, JS, and CSS while serving them. Cloudflare will also prevent many types of cyberattacks against your site.

You can also create custom page rules to redirect, block, show captcha to users on demand. It will also give you a real-time report of detailed user requests. You can block a specific IP, User-Agent, bad bots from within the Cloudflare dashboard. The best thing is that Cloudflare will do all these for free and for unlimited sites.

 

cdn cloudflare to speed up your wordpress site

 

Do not forget to enable GZip compression in CDN. This will significantly reduce your outgoing payload.

Also if you use W3 Total Cache, then you can use StackPath CDN with built-in support. Similarly, WP Rocket uses a RocketCDN which they have integrated support.

 

Hummingbird Plugin

This plugin is a legendary plugin from WPMU. This plugin is even recommended by Google Pagespeed! Hummingbird plugin gives you the following features in one place. Just read below and be amazed (taken from plugin site)! To speed up your WordPress site, this is perhaps the best solution as we consider it a legendary plugin.

Enable text compression – Use gzip to make your site fly.
Preconnect to required origins – Use Hummingbird to establish earlier connections.
Preload key requests – Prioritize resources based on order.
Avoid enormous network payloads – Consider Lazy Load for comments or breaking up smaller posts.
Use efficient cache – The Hummingbird Cache suite offers effective browser cache for caching any site.
Fix your JavaScript execution time – Deliver smaller JS payloads, preload JS, and defer JS.
Minify CSS – Strip unused code from your CSS.
Minify JavaScript – Speed up the time it takes to parse your JS files.
Eliminate render-blocking resources – Move critical CSS and JS inline and defer all non-critical JS/CSS.
Defer unused CSS – Defer the loading of CSS not used for above-the-fold content.
Lazy Load offscreen images (Smush free integration).

The plugin comes in both free and paid versions. We recommend that you use the Asset Optimization and Smush of this plugin as a must.  Asset Optimization will let you move js and CSS files to the footer as necessary. This will significantly reduce the page load time and will remove most of the render-blocking resources.

Our one crucial recommendation regarding the Hummingbird plugin is that you should put most of the CSS files in the “inline” option. This eliminates new file calling and writes the CSS codes directly into the page HTML body. This significantly reduces the number of requests.

Also, put all the CSS and js files in the “minify” option. Just exclude the “jquery” file from any type of reordering. Keep it as is.

 

Lazy load images

Image lazy loading is a very good and effective trick to play in course of minimization of website response time delay. First, you have to send the plain text and HTML and then wait for the user to scroll to the section where you have images.

 

smush lazy load speed up your wordpress site

 

After the image section has become visible, then bring the images from the server to show up. There are multiple plugins that can do the same. The best choice as per our recommendation is to use Smush from WPMU. This comes with a Hummingbird plugin with integrated functionality for better performance. 

This plugin will compress, minimize, and lazy load your images on demand automatically. Image lazy loading is a must if you want to speed up your WordPress website response performance.

 

Choose the fastest theme

Choosing a fast response and a very lightweight theme is the lifeline of your site performance. Some of the very fast responding themes are Hello Elementor, GeneratePress, OceanWP,  and Astra.

The OceanWP theme has a bad reputation when it comes to mobile page speed. But the WordPress customizer options they have are very elaborate and you can customize this theme with great flexibility. though you may find it a bit difficult to speed up your WordPress site while using the OceanWP theme.

Here is a great blog from Kinsta, which has a very detailed discussion with required benchmarking regarding the fastest theme.

11 Fastest WordPress Themes in 2021 (Based on Thorough Testing)

We recommend that you choose the theme with the lowest TTFB value. TTFB means Time To First Byte, it measures the time taken to receive the first response from your server after the request has been sent. The lowest TTFB indicates the maximum time taken by the raw theme with its bare minimal structure and content to appear visibly. So you first choose the base and then apply the enhancements.

The above measurements will significantly reduce your server reaction time when implemented in combination. But the highest source of revenue and the highest number of the audience comes from the mobile visitors, Therefore you should take action regarding mobile speed improvements with the highest importance.

 

AMP

Whatever be your theme, it would not be satisfactory if you test them in mobile view. It is extremely difficult to reach a 70+ score in mobile view under the page speed insights test. On the other hand, you can sleep a good night’s sleep if your mobile score is at least 85-90. 

A low score slow mobile view website will attract only desktop users. And those users are not in very high numbers as compared to mobile users. So, what could you do?

 

amp plugin to speed up your wordpress site

 

We recommend you use the Google AMP plugin to speed up your WordPress site. It is free and supports multiple and in-depth settings suitable for fine-tuning a mobile view of a website.

How AMP works?

AMP’s working procedure is focused on how to speed up your WordPress site. AMP implementation just eliminates your javascript execution on-page. It executes all the page javascript as much as possible on the server-side and creates javascript less content, This javascript less content is very lightweight because of the absence of javascript resources requests. 

In a normal scenario, after coming to the user device, the page starts calling to javascript resources. Then those javascript are executed as received. Thus, eliminating javascript from the whole lifecycle will gain from twofold. One is reduced time to call all javascript URLs, and the other is to render them after receiving them in the user device.

Our recommendation 

You should enable the “Transitional” option in the Google AMP plugin. In this way, you will have two separate caches of pages. One is for mobile AMP and the other will be for desktop and other devices. Then you should select all templates under “transitional” to be converted to AMP. Also, do not forget to check the “Redirect mobile visitors to AMP” checkbox. This will speed up your WordPress site on mobile devices.

AMP can break your site

Yes, this is true that the AMP plugin can break some of your pages. We recommend that you should selectively turn off AMP from certain pages which need javascript to work. For example, pages with Elementor or BuddyPress plugins can easily be broken after enabling AMP on them. Thus to speed up your WordPress site, you will lose some core functionalities unintentionally.

To exclude all pages using BuddyPress you can add the following code snippet in your function.php file:

add_action( 'wp',
function() {
if ( function_exists( 'is_buddypress' ) && is_buddypress() ) {
add_filter( 'amp_skip_post', '__return_true' );
} } );

This will selectively exclude Buddypress pages being AMPeid!

Also, for the AMP plugin, there is an option to selectively opt out of AMP on each and every page. For that just go to the pages menu, then open the page of your choice and look at the right-side panel. You can find an AMP-enabled or disabled option. Change it according to your need.

 

How to minimize the transfer size to speed up your WordPress site

If you can correctly and efficiently apply the above-mentioned tips, then it can be ensured that your final payload, which is about to start the journey from your server towards the requested client browser, is minimized in terms of size. So obviously, a smaller size will take lesser time to arrive fully on the browser. How? Read below…

Suppose, your internet speed at home is 100kb per second. That means it can bring a 100kb payload in one single second. After you get the page request from the browser, it will take some time on the server-side to process and prepare the final content. Suppose it takes 2 seconds for the same.

So when you are sending a 585kb payload from the server after 2 seconds of processing, it will take 6 seconds to completely fetch the payload into your browser tab. Then comes rendering time. Your browser may take 2 more seconds to process and render the received payload. That means a whopping 2+6+2=10 seconds is your painting time. 

minimum transfer size to speed up your wordpress site

 

Now in the above scenario, the first 2 seconds is your TTFB. 6 seconds is your transfer time. the last 2 seconds are a time for contentful paint. That means you have to choose to minimize TTFB, and as well as payload size. Rendering time depends mostly upon javascript executions. AMP will help you to minimize the last 6+2 seconds. These are the most important classification of the core web vitals to speed up your WordPress site.

Of course, a higher bandwidth internet connection like 4G or 5G or higher will help you in reducing the transfer time, but you can not force a user to select a higher internet billing package for sake of your website!

Therefore, the key here is to reduce the payload size generated from your server.

 

How to minimize the browser-side code execution

As stated earlier, javascript code execution takes most of the rendering time on the client browser. The next culprit is heavy images which often take huge transfer time and bandwidth and thus leave the website in an unresponsive mode for a long time. 

A minimalistic theme design will help you reduce the javascript drag. A lazy loading option will save you from downloading heavy images pagewise.

In AMP, as there is no javascript at all, it executes fastest at the client browser.

 

So all these are some easy and free to avail tricks you can use on your website without hassle. If you can carefully use all of them and do some trial and error to ascertain exactly which settings and plugins can give you the desired result, your site will benefit from it.

Please remember, once again, search engines only prefer fast sites. If a search engine repeatedly starts to bring slower sites in the search results, then it will lose credibility over time. That means that your slow site will eventually cost them their business. And they will never let this happen. Now the only way to survive is to speed up your WordPress site.

~*~

Have something in mind? Publish your story here…