WordPress Page Speed Optimization:
The Complete Guide

This is an ultimate guide to WordPress page speed optimization (WPSO). Here you will find the complete process to make a website load faster. This information will help you to create one of the fastest websites in the world. Discover ways to make an excellent front end, user experience & web performance. Find everything that affects the loading speed of a page.

In this guide you’ll learn:

• How to test website speed (4 accurate ways)
• 7 Factors that affect the loading time
• How to achieve a perfect score on Gtmetrix, Page Speed Insights & other tools
• Bonus at the end

In short: If you want to make a website load super fast, you’ll enjoy this guide.

Our goal here is not to score 100 out of 100 on any tool. Technology & expectations are evolving every day. So we cannot rely on just one source. But we will try to get a good score that is best for UX & SEO. You also need to practice optimization immediately in real time before forgetting.

Please, try these experiments on a test site first. Do not apply to a heavy trafficked monetized website straightaway. You will edit the source code & you might accidentally break your site.  So keep a back-up before implementing.

Importance of WordPress Page Speed Optimization

WordPress page speed optimization is very important but few bloggers know its benefits. Slow loading websites annoy users and search engines like Google. They rank faster pages higher and release their own tools & modules to polish a lazy server.

Google wants to provide the best User Experience through faster sites by providing free tools to website owners. They made their own website fast by introducing the ‘Autosuggest‘ to boost navigation. It is a feature that displays the list of keywords below a search box when any letters or words are typed.

Top companies like Amazon & Google has proved that loading time impacts conversion rates. Google discovered that 0.5-second delay in loading speed decreased their ad revenue by 20%. Bing found that if a website is 2 seconds slower, it results in a decrease in search queries by 2.5%. These data and tests were released around 2006-2009. Below is an infographic about load time.

A survey was done by Akamai with 1,048 online shoppers that reveal the following statistics:

• 47% of customers expect the page to load in less than 2 seconds.
• 23% stop shopping completely if the page is too slow
• 52% of buyers remain loyal to the store if the page loads relatively faster

This means that you can convert 52% of random visitors into dedicated customers. They will return to your website for a second time. But you might also lose 23% of them due to a slow page. Brian Dean and his team analyzed 1 million SERP pages & found that page speed has strong co-relation with rankings. At a glance, here is why page speed optimization is necessary:

1. It improves UX for high latency desktop and mobile devices
2. It results in returning customers.
3. It increases session duration per visit on Google Analytics.
4. It has Great SEO benefits.
5. It helps to control and reduce bounce rate.

How To Test WordPress Page Speed

There are two types of website page speed testing tools:

1. Synthetic: They may give inaccurate data about user experience (UX) but it is very informative and helpful.
2. Organic: They give accurate data & metrics about UX but may not be useful in all conditions.

These tools work differently as compared to one another. We use all of them to confirm that our data is accurate & avoid guesswork. The four practical tools to measure load time are as follows:

• Google Page Speed Insights
• GTmetrix
• Pingdom
• WebPageTest

Pingdom

Pingdom is a combination of both organic and synthetic testing tools. But the complete load time that it measures is slightly inaccurate with the real world. However, you can still get other good data needed for WordPress page speed optimization. At Pingdom, you can check:

1. Performance grade and tips to improve it
2. load time in seconds
3. response code – 200, 301, 302, etc.
4. Page size by content type & domain
5. Total number of file File requests
6. File sizes

You can insert your URL, select a location and start testing your website.

The timeline under file requests shows you how much time a resource took to load. If we hover our mouse cursor over the timeline, it shows the time taken to resolve DNS, SSL connect, send, wait, receive, block, and total at the end.

If you click on the drop-down arrow next to the timeline, you can find response and request headers. These two metrics are very useful for header optimization, which we will do later in this article.

GTmetrix

GTmetrix is similar to Pingdom. All you have to do is enter a URL and start analyzing the page. The test server region is Vancouver, Canada for free accounts and guest visitors. The fully loaded time differs according to test locations. It shows performance grades from A to F and between 0%-100%. The ‘Page Speed’ score is of Google’s test and Yslow comes from Yahoo.

The data provided by GTmetrix is closer to accurate. There is an arrow which is pointing upwards, found next to a grade. It compares our website with other sites tested on the tool and displays the average score. Therefore, we can find how good or bad our site is performing as compared to others.

If you scroll down the page, there are various tabs for Page Speed, Yslow, Waterfall, Timings, etc. Each of them contains recommendations sorted out in terms of priority between low, medium, and high. If you expand them, you can discover files that are not following the optimization rules.

The waterfall tab displays a chart showing filename, origin, size, response status, and ‘load time break down’. If you click on a file name, it displays the headers and request response. In simple words, it shows complete details about the total time taken to render every object from beginning to end.

Similar: highest paying adsense niches

Google Page Speed Insights

Page Speed Insights reports whether your website is performing according to Google guidelines or not. It makes sure that we are listening to Google and helps us to understand the algorithm. It displays data for both desktop and mobile version.

A score between 90-100 is considered best and indicated by green color. The score up to 80 is considered good on average and anything below that needs improvements. If an audit is indicated by red color, it needs most of our care and attention. You can also download an optimized version of files after scanning a page.

However, it does not display any actionable metrics or numbers like ‘waterfall’ that other tools in this list show. It just makes us familiar with factors that Google accepts & looks on a well-optimized page.

But these factors are not what Google uses to rank a website. It rather collects data from browsers like Chrome that the company owns. They track how long a web page took to load when a real user or person lands there.

WebPageTest

WebPageTest is one of the top performance testing tools. Originally developed by AOL, it is an open source program under a BSD license. The data provided by WebPageTest is the most reliable and accurate among others. It is unique because unlike any other tools it provides a free large number of platforms (Desktop, Android & iOs) and locations for testing. You can also choose between 80+ different browsers to analyze the website.

If we click on ‘Advanced Settings‘, we can also select a connection (2G, 3G, 4G, LTE, Cable, etc.) or define our own custom connection type. It requires values for Bandwidth up & down, latency (ping) and packet loss. You can also decide the total number of tests to run. If we run more tests, we will get more accurate data. So always set the value to ‘9’ which the maximum number of tests that you can run at once.

Always select the option ‘First View & Repeat View‘. It displays data when a webpage loads for the first time and when it is refreshed later. We can label our operation to find it in the history tab anytime later.

Once all testings are complete, it shows your grades from ‘A to F’ on the following criteria:

• First Byte Time
• Keep-Alive Enabled
• Compress Images & Transfer
• Cache Static Content
• Effective use of CDN

Like any other tool, it shows you waterfall and screenshot of the test. You can watch the clip of how your page loads in real time, only if ‘Capture Video‘ option was enabled. At the bottom, you will find two charts showing the content breakdown by requests and bytes. They show the composition of HTML, CSS, js, image, font and other elements.

There are many terms used in the report like Load Time, First Byte, Start Render, Visually Complete, etc. You can find their definition on documentation page.  At a glance, below are the terms used in the WebPageTest report:

• First Byte: average server response time (calculated from the median of all tests)
• Start Render: time taken to load the first pixel or an element like color, text character, etc.
• Visually Complete: complete time to load above-the-fold content
• Speed Index: helps to compare your website speed with others

If you open the tools and start analyzing the pages, you will get familiar with these terms yourselves. Don’t forget to use the documentation as a reference.

The Underground WordPress Page Speed Optimization Secrets – How To Increase Website Performance

Factors That Affect Page Speed

Web Hosting

A web hosting is a virtual hard disk where all the important files of a website are stored. It is responsible for making a site go live on the internet. It stores coding files (HTML, JS, CSS, etc.), images, text, videos, and every other element of a web page. It has a vital effect on loading speed.

When you purchase a web-hosting account, make sure you have full access. You should be able to do everything with your server as explained on this guide. I highly recommend you to select any of the Virtual Private Server (VPS) plan.

But you should try to avoid the following 2 types of web hosting because you won’t be able to fully optimize your site.

• Shared Web Hosting: They connect multiple websites into a single server that are heavily overloaded. Plus, they also have major security issues and the threat of data stealing or loss as the hosted IP address for all websites is the same.
• Managed Web Hosting: We don’t have full control over our account. They don’t give us access to the core part of the server where we can optimize it. The company takes care of the performance at a very high price. If they cannot find a solution, you have no choice than to stop.

HTTP Requests

Whenever a web browser obtains a file from the server, it does so by using a protocol called HTTP (Hyper Text Transfer Protocol). While communicating between the browser and server, a set of rules must be followed to transfer the data which is known as a protocol.

Reducing HTTP requests is just as important as minification and gzip compression. The less number of HTTP requests means better page speed optimization as a rule of thumb. Fewer HTML, CSS, JS & Image files reduce the requests and vice versa.

Use Optimized Themes & Plugins

This means the use of themes & plugins that contain optimized codes. You will only get the best results if you have the fastest loading design. Below are my top 4 favorite WordPress themes that load extremely fast:

1. Generatepress
2. Ocean WP
3. Schema
4. Astra

The bottom line is, you will never achieve the best website performance score without a proper hosting account and optimized themes & plugins.

Similar: how to approve adsense on blogger

Caching

A cache is a copy placed between the client and server so that the files don’t have to download again & again. When users refresh or reload a page, they get a copy from the cache instead of requesting the server. It reduces the ping aka latency as it is pre-stored in the browser. If there are changes, only the updated parts of the page will be requested from the server. It also helps to save network traffic and data transferred through a connection.

There are the following main methods of caching for WordPress page speed optimization:

1. Page caching
2. Browser caching
3. Database Caching
4. Objects Caching

In WordPress, we have a hundred ways to do caching. Two of the popular methods are using plugins like WP Rocket & W3 Total Cache. These plugins give you butterflies if you know how to use them.

Page Caching

WP Rocket

WP Rocket is a premium plugin that costs you $49 yearly. It is a not just a caching tool but a complete speed optimization solution. It provides options for mobile, user, and desktop caching. We can minify, combine & optimize JS, HTML & CSS files using WP Rocket. It has the following options:

• Combine google font files (Reduces HTTP Requests)
• Remove Query Strings
• Load JS Deferred
• Lazyload for images, iframes & videos.
• Disable emojis and embeds to reduce http requests.
• Preloading
• Automatic posts, comments, transients, & database cleanup or optimization.
• CDN Integration (example Cloudflare)
• Control Heartbeat of WordPress site
• Add-ons for caching Google Analytics, Facebook Pixels & Varnish
• Integrate Sucuri cache & more

I highly recommend WP Rocket plugin for WordPress page speed optimization. It is the best caching plugin with no drawbacks at all. If you cannot afford WP Rocket, I prefer the next plugin which is ‘W3 Total Cache‘.

W3 Total Cache

W3TC is a free caching plugin found in the WordPress repository. You can install it directly from WP Dashboard by navigating to Plugins >> Add New. After activating the plugin, go to Performance >> General Settings and enable Preview Mode. It will prevent the changes to go live unless you preview them to make sure that everything is working fine.

Note: After you enable or disable an option in W3TC, always click on ‘Save Settings & Purge Cache‘. Also, deploy them in preview mode after making the changes.

Switch to Page Cache section and enable the option. If you are using the proper host as mentioned above, it is okay to use ‘Disk: Enhanced‘ page cache method. But if you have managed or shared hosting, select ‘Disk: Basic‘ method.

Now click on ‘Page Cache‘ under Performance in the left sidebar. Scroll down and Enable ‘Don’t cache pages for following user roles‘ option. Then put a check mark next to every user roles except for ‘Subscriber‘ by clicking on their checkbox.

If you scroll down further to the ‘Advanced‘ section, there are options for ‘Garbage collection interval‘ and ‘comment cookie lifetime‘. Change these settings based on how quickly your website gets updated or the amount of comment it receives per hour. By default, the values are set to 3600 seconds (1 hour) and 1800 seconds (30 minutes) respectively. If your blog is updated frequently in one hour, reduce these values in seconds so that the end users can see the changes faster.

Browser Caching

If you have the WP Rocket plugin, then it will automatically do the browser caching. For W3 Total Cache, navigate to Performance > General Settings > Browser Cache and enable the option there. Then click on ‘Browser Cache‘ option in the left sidebar.

It contains many options like page caching tab. If you enable any options under the ‘General‘ section, it will set default values for all remaining global sections.

You should never enable ‘Set W3 Total Cache Header‘ option to keep hackers away from exploiting your site. Although the company claims to have full security enabled, we cannot take any risks because modifying headers are some techniques to access an unauthorized website. I know this is completely off-topic but it is worth knowing the consequences of it.

Under ‘HTML & XML‘ tab, there is an option for ‘Expire Header Lifetime‘. It should match exactly with the value of ‘Garbage collection interval‘ which we did during Page Caching. It will tell the browser to refresh cache content within the given time. We are done with browser caching here. Leave the other options in W3TC because they are already set to their best values by default.

Object & Database Caching

In the ‘General Settings‘, scroll down to ‘Object Cache‘ & ‘Database Cache’ section and enable them. If you have a premium version of W3TC, it is best practice to enable the method ‘Opcode: Alternative PHP Cache (APC/APCu)‘ for both object & database. But if you don’t have a premium W3TC, you can leave the methods to ‘Disk‘.

After enabling both the options, click on ‘Database Cache‘ in the left sidebar. The default values for the maximum lifetime of cache objects is 180 seconds & garbage collection interval is 3600 seconds. We want to change them to 2 hours which is equivalent to 7200 seconds. This is the time period when the database cache makes a new fresh request from the server. Don’t forget to save settings and purge cache at the end.

You can always add the most important commercial intent pages that generate leads like the payment pages on the list of ‘Never Cache‘ pages. You just have to enter the values of their permalink that comes after the slash in the main URL. Let’s say www.example.com/never-cache-page.php is the link which we want to add to the exception list. Therefore we should just enter /never-cache-page.php rather than the whole URL.

In the object cache tab, change the values of both default lifetime and garbage collection to 7200 seconds.

Minification

Minification is one great method for WordPress page speed optimization. It converts large script files into smaller size by editing and removing all unnecessary characters inside them. They may be whitespaces, comments, new lines, etc. A web developer uses such characters to remember the purpose of code in future. But that is totally unnecessary for a live website as it consumes resources.

If there are less number of files, it will simply boost website speed. We can combine all those HTML, CSS & JS files into one and make them smaller. It reduces the amount of load into our server as a whole.

It is very easy to minify files using WP Rocket plugin. All you have to do is navigate to settings >> WP Rocket >> File Optimization and enable all available options. You don’t need to do any further minification steps after that.

For those who are not using WP Rocket, use Autoptimize plugin. You can install it directly from WordPress dashboard or download it, extract to computer & upload to the server using an FTP. We will not go deep into how to install a plugin here because since you have made this far, I am assuming that you know how to do it.

W3TC also provides the functionality to minify page assets. But we will be not using it because it is not the best solution as it creates problems with inlining css. So if you have minification enabled through W3TC, disable it and purge cache now. You can do that by navigating to Performance >> Minify and remove the tick mark from all active settings.

Moving on, the first thing you need to do is navigate to Settings >> Autoptimize and click on ‘show advanced settings‘ to unlock more powerful features. To get a clear idea about what we are doing here, open a new incognito window on whatever browser you are using. Open the test website that you are trying to optimize and check its source code. You will find a lot of white spaces, line breaks, javascript, HTML comments, etc. that are unnecessary for the browser to display data.

To minify files using Autoptimize, you need to enable the following advanced settings by putting a check mark in their respective boxes:

1. Optimize Javascript, CSS & HTML Code
2. Aggregate JS & CSS File
3. Also aggregate inline JS?
4. Inline All CSS

After enabling all options, click on ‘Save Changes & Purge Cache‘. We will also need to empty W3TC cache. So click on Performance & select ‘Purge All Caches‘ from the top header bar.

Compression

The large volume of files stored in the server may slow down a web page. So compression reduces the size of website assets when URL loads into a browser. We use Gzip compression to reduce the size of a file into smaller bits by 90% without losing their function. The Gzip compression is enabled by default when you install plugins like W3 Total Cache or WP Rocket.

Image Compression

Every image & Multimedia files create their own HTTP requests. If we can reduce their number or compress them, speed will increase. They are good for UX but only attach the most important multimedia files that your users need. Be careful while uploading anything because every single byte is crucial to beat your competitors.

We can minify or compress images to reduce their size without losing quality. For example, the images that you find on this page were originally 1 or 2 MB of size. I compressed them using some techniques and now they are below 100 kb. They look the same as before and also carry less load for the browser.

We use both of the following two types of image compression methods for best results:

1. Lossy – it involves removing of pixels
2. Lossless – no pixels are eliminated. We delete unnecessary metadata instead.

Note: An image metadata consists of the resolution, color, size, etc.

Before uploading to WordPress, use tools like Photoshop to compress an image. At first, change the size of large images to 640×360 pixels wide. In photoshop, it can be done by navigating to Image >> Image Size. Then visit, File >> Export >> Save For Web. Be sure to check the option ‘optimized‘ and select either JPEG or JPG file format. You can change the picture quality to high, medium and low depending upon your choice. Then save the optimized image and upload to WordPress size. Use Imagify plugin (free) to reduce the size of the picture in WP dashboard.

Similar: niche research

Eliminate Render Blocking Scripts

There are some scripts and codes in our site that block rendering of the page unless they themselves get rendered first. They may be in any form of HTML, CSS, Javascript, etc. They are mostly present in above-the-fold content, which is the area that users see while landing on a page without scrolling down.

This is an important issue to solve because people can wait until the page loads if they are scrolling down. But if they don’t scroll the page, they will leave immediately if ‘above the fold‘ content does not load as quickly as possible.

Create critical rendering path for css

You can use tools like Critical Path CSS Generator to eliminate render blocking cascading style sheet files. First of all, you need to open a CSS file by looking at the source code of the page that you want to optimize. Then copy all of it and paste the full CSS on the tool. Input the URL of the page that you are trying to fix and click on ‘Create Critical Path CSS‘. Then you can copy the output and paste it in Inline & Defer CSS box inside Autoptimize plugin.

Asynchronous Javascript

These are the assets that run in the background and applied to prevent blocking of the render time. We use such resources to inline render blocking JS. This process is known as optimizing the ‘Critical Rendering Path FOr JS‘. Check if ‘Cach Posts Page‘ option is enabled.

To solve this issue, you need to paste the following code in theme’s function.php file (only if you use Autoptimize plugin):

add_filter('autoptimize_filter_js_defer','my_ao_override_defer',10,1);
function my_ao_override_defer($defer) {
return $defer."async ";
}

Again, if you have a plugin like WP Rocket, you don’t have to do all these hard work because of its automatic functionality. I am not paid to promote the plugin or affiliated with it in any way. I just love it because I have been using it for so many years.

Keep In Mind

Before ending this, I would like to share some additional WordPress speed optimization tips below:

1. Always use CDN like Cloudflare with good page rules for free edge optimization, DDOS protection and faster caching.
2. Advertisements like AdSense or media net ads contain too many javascript that slows down any website. Try to minimize their use i.e. use a very small amount of ads for better UX.
3. Pop-ups like email newsletter sign-up form reduce your website loading speed. Be specific while using them.
4. Always maintain the number of plugins to 5-10. Delete unwanted plugins.
5. Use ‘Plugin Organizer‘ to define the order of how plugins are loaded.

Final Words

I hope that you enjoyed reading the underground WordPress page speed optimization secrets. Like I told you before, always keep a record of your performance using the testing tools mentioned above. Our goal is not to score 100/100 on any tool but get closer to it as technology keeps evolving every second. Please share this guide with your friends. Also, if you want more advanced performance improvement tips like cron jobs, lazy load, domain sharding, etc. leave a comment below. [C U]