Top 20 Comprehensive WordPress Page Speed Optimization Checklist [with Free Template]

As Google has announced Page experience is going to be a search ranking signal from May 2021, Many Webmasters are working on pageSpeed tools like Google PageSpeed Insights, Website speed test, GT Metrix, Pingdom, and Chrome lighthouse test to test their site speed and focusing on fixing the issues to improve website speed. Even I’ve encountered the same in late June 2020, Checking the user experience on the mobile device, pagespeed and so on. It would be the most daunting thing to start if you don’t know any of the basics like how the browser serves the webpages from the server and what are the factors that affect the website speed.

If you’re new to this whole things and want to improve the page speed of your website. Then this article going to help you with the comprehensive check list for Word Press Page Speed Optimization. Let’s get started,

1) Website Hosting

Web hosting plan has a major impact on website loading speed. Basically there are four types of server:

1. Shared Server
2. Dedicated Server
3. Virtual Private Server
4. Cloud Server

Shared hosting server often tends to lower the website speed as the power and memory were shared by many other sites hosted on the same server. As the name implies Dedicated Server provide dedicated hosting to single website. It is more powerful and able to handle large website traffic. But it is expensive. In Virtual Private Network and Cloud Server the resources are available from different virtual machines physically and on cloud. So it is fast and highly scalable.

Make sure your website is not using shared hosting server. Check with your website hosting provider for more information about your hosting server.

• Check for Bandwidth Consumption
• Check for Disc Space
• Check for CPU utilization and RAM

2) Website Theme

Check your website theme. Test a empty website with your theme on any page speed test tool and look at the score. A score of 99 tells you that the selected theme is light weight. Some times the empty website theme itself scores lower and it would be bloated when you add basic coding on it. Check for the mobile friendliness test on Google mobile friendly test tool. Light weight and responsiveness are the two things you should check when selecting website theme.

• Check page score for empty theme
• Check for user friendliness
• Check for mobile responsiveness

3) Content Delivery Network (CDN)

CDN automatically choose a nearest network to deliver fast results by fetching and serving the results from its own cache instead of fetching it from the actual server which is physically located far away from the requested user. All static assets of any website such as images, css and Js files can be uploaded to CDN. So it actually reduce the burden of server thereby increasing its memory processing speed. There are also many handy option available in CDN settings like on the fly image optimization, TTL time to live value to set how long it can hold its cache, and prefetching this could reduce round trips and deliver content fast.

• Choose reliable CDN service
• Self-host static assets on the CDN
• Integrate with Caching plugin

4) Caching Plugin

Caching plugin is helpful in storing a set of website’s files like images, CSS and JS on your computer(browser’s cache) when it is loaded for first time by your browser for a short period of time depending upon the configuration. So, When the same website is loaded for the second time by the same browser, instead of getting all the information from the server it loads the website from its cache. As a result of this, It helps to decrease the website loading time, make fewer requests to server, and improves the user experience by lowering the time to first byte (TTFB). Some of the WordPress best caching plugins are WP-Rocket, W3 Total Cache, Autoptimize, and Litespeed Cahe.

5) Analytic Tracking Code

Tracking codes are helpful in figuring out who your audience are, traffic sources, heat maps, analyzing how much the users are engaged with your site, and analyzing how you’re moving forward with your campaign strategy. These tracking codes are implemented in the head section of your HTML page and has heavy impact on the page speed. There are several software using their own tracking code to measure. But make sure you’re actually benefiting and monitoring the traffic through the software. Remove unused tracking code from your site. If you’re using Google Analytics ga.js files, make sure it is loaded asynchronously and support pre connect which gives a small boost in loading website from modern web browser.

• Remove unused tracking code
• Bundle up all the tracking code on Google Tag Manager
• Double check any tracking code has installed twice a time
• Consider server side tracking in GTM

6) Image Optimization

Images are first biggest and most important assets in the website which impacts the page loading speed. It will increase the overall website size and weight if it is delivered as an unoptimized file. Find the image optimization tips to boost up your website performance. Check for lazy loading images along with its quality and relevancy.

7) Videos

Mp4 formats are supported video format by all web browser. Use data compression and directly load it from your local server. Use associated structure data to mark up your video file. Embeds video files using iframe with lazy loading attribute.

8) GIF

GIF files are fantastic way to engage with your audience but it contribute to bloating of website too. Always convert the animated GIF format into Mp4 video format. This helps to reduce the file size thereby improving the speed of the website.

9) File Code Minification:

File minification refers to minifying HTML, CSS and JS files. These removes redundant, unused code, white spaces, line breaks, comments from the file. After File minification process, each file will have incredible size reduction which helps to reduce the additional time the browser take to parse and execute. File minification can be done manually using HTMLMinifier, CSSNano, UglifyJS. It can also be done through plugin. Most caching plugin comes with the features for file minification too.

10) HTTPs/Data Compression:

When serving files using HTTP/s protocol, the resources can be compressed using GZIP/Brotli data compression technique. This help to reduce the load transfer between the server and client . Depending upon your server configuration you can able to enable the compression at server level. All browser support GZIP compression for all http request. Make sure your server is properly configured to handle the compression.

11) Web Font Optimization:

Web fonts are another assets contribute to website page speed. If not handled properly will cause major bottle necks in the critical rendering path. For smooth out the web font rendering process make sure always you use:

• Minimal webfont style
• set font-display to swap in your @font-face style.
• Preload your major font style

12) Minimize Third Party Resources

Most commonly you might be come across the URL’s where you have no control over the code. Ex: social media buttons, Gravatar, Analytics, video embeds, Google maps, Google Recaptcha and so on. You have “zero percent control” over these third party resources and major culprit in page speed optimization. As much as possible audit all the third party resources that you’re using on your website. And double check if it is still needed or not. You can do few things to effectively use them as by:

• Using Async/Defer
• Using Prefetch/Preconnect
• Self hosting on local server

Keep in mind that don’t add too much resources on preconnect/prefetch, this will not give you much effect on pagespeed.

13) Keep Minimal Plugins

Whenever you’re adding additional plugin to your website for optimizing or for any other features, you’re adding additional HTML code, CSS code, Java Scrip Code and PHP code which all contributed to page loading speed. So as much as possible keep minimal plugins and use custom code for additional features.

• Add custom coding replacing plugin as much as possible
• Remove redundant plugin

14) Reduce Http Count

A Http Count is a number of http requests made by the browser to receiving the required resources to display the website. More the file size and number increase the Http count. Ideally, HTTP count should be less than 50. You can reduce the HTTP count by

• Combining files (Only if applicable)
• Using CSS Sprites
• Minimizing Redirects
• Uploading asserts in CDN

15) Reduce Total Page Size

As the website grow, new scripts, images are added. Constantly check all the files are minified and images are optimized. The following are the three things which helps to reduce the page size

• File minification
• Data Compression
• Image Optimization

You can check the size of each files contributing to total page size using chrome add on – Page Size Inspector.

16) Optimizing Java Script files

Java Scripts are most time consuming thing for the browser to Parse, Compile and execute. Having more java script files further slows down the process. Following are few options to consider when optimizing java script files to improve the page speed.

• Code Splitting to break up critical and non critical resources
• Data Compression
• File Minification
• Removing Unused Code
• HTTP Caching

Find the free resource to learn more about Java Script Optimization

17) Optimizing CSS files

Similar to Java Script files, It is possible to separate critical CSS files and non-critical CSS files by using Chrome Dev tools. Critical CSS files are the one which is necessary for the browser to make the first contentful paint. By defering the non-critical CSS, the critical CSS elements are load faster and helpful in improving the page speed. The other options are by:

• Minifying CSS files
• Removing unused CSS code

WebPack plugin can be helpful in extracting critical CSS code and for managing and bundling up the asserts.

18) Move to Amp pages

Building an Amp – Accelerated Mobile Pages is an easy way to achieve the page speed. It is an free open project anyone can use it. You can convert the whole WordPress site into amp enabled web pages. Amp pages are so fast and provides good mobile user experience. As Google is using mobile first indexing, it is perfect to convert your website as Amp enabled web pages. There are several plugins such Amp for Wp which is helpful in the conversion process.

19) Always keep a site Backup

As a word of caution, Some changes might break the site too. So it is always better to start the job with a site back up. You can revert it back at any such instance. You can go with server side backup. If server side backup is not possible, in that case you can opt for any WordPress backup plugin such as updraft.

20) Choose the right CMS/Custom Platform:

Choose the right CMS/Custom platform depending upon the need of your business. CMS itself has impact on the pagespeed. The media files and the plugins how you going to use it will have a great impact too. For eCommerce – Joomla should be fine, and for enterprise level – Typo3. So, Choose the right one and use minimal plugins for optimal speed.

All the subtopics will be created as a blog post for detail explanation and more subtopics will be added further to this page.

Please add any other things which I missed out in the comment section.