Page Speed Optimization

WordPress Page Speed Optimization – 51 Points to Check

Below is a long list of things to check and perfect as part of improving the speed of WordPress sites.
The list, which will be updated from time to time, comprises different categories, topics for testing, and how to test everything. There are references to solutions that exist in my Page Speed Optimization course.
If you are not in the course, you can use the list to find various problems that adversely affect the site’s performance. Also, you can search around the web for solutions or just sign up for the most comprehensive course in improving page speed and get all the answers.
More about the course…

Starting the Page Speed Optimization Course

Things to do at the beginning of the course

page speed optimization course

To learn about the process I'm doing when I receive a new site to optimize, you should look at the three Audit Videos lessons in the course.
You should also watch the long audit video I did for a client.

Below is where you can find them in the course:

Checking page speed

Go to the GTmetrix website and complete a speed test for the site you want to improve.
It is advisable to choose a geographical location close to the primary target audience of the site.
For example, if the site is targeted to Asia, don't check in Canada, but look at a location nearby.
With GTmetrix, we can see the waterfall of the page requests.
In addition, the site should also be tested with another speed measurement tool called Google PageSpeed Insights. Here speed test results will be obtained on mobile and desktop.

First, I recommend working on a duplicate testing site because sometimes, during the optimization, the site breaks. We need to do a little fine-tuning until finding exactly the correct settings. It's unfortunate to damage the live site during this process.

You can contact your hosting support and ask them to duplicate the site for tests.
Alternatively, you can use a plugin such as wp-staging.

general things to check

General Points

Important things to know in general when improving website speed

If you don't have much traffic on your site, you may be hurting the speed that Google sees.


Solution:

See the "Checking in incognito" lesson in the course.

Website speed test in a private window

If you do not use WP Rocket, you may not take advantage of the option to speed up as you go from page to page.


Solution:

See the "Faster Page Switching" lesson in the course.

Improving page speed between pages

If you see two-page requests one after the other, and one of them in status 301 when you check the page in GTmetrix, then the image below is what it looks like:

Unnecessary redirect when improving website speed


Solution:

See the "Avoid Redirects" lesson in the course.

Avoid redirect when improving website speed

How to work with Chrome's Developer Tools (F12)


Solution:

See the "Chrome's Developer Tools - F12" lesson in the course.

Chrome's Developer Tools - F12

Which plugins I use in the course and how to configure them


Solution:

See the "Plugins I Use" lesson in the course.

If you have a Taboola pixel site or use new ads from Google after iOS 14.5, Google may still experience your site as being much slower than can be seen in speed tests due to the latest parameters being havinb been added to the link.


Solution:

See the post I wrote in the private group about the new parameters and the solution.

Hosting

Important points related to the hosting server and how they affect performance
web hosting

If you see in a GTmetrix test that your site's hosting server is working with an outdated HTTP/1.1 protocol that does not support parallelism and compression,

Below is what it looks like:

Http 1.1 protocol in hosting server

You can also see that the page has made five requests from the server. They appear green, meaning that the page repeatedly wastes time connecting to the server because the protocol does not support parallel work.

Http 1.1 protocol in hosting server


Solution:

Contact your hosting company and ask if it is possible to work on a more advanced server with a newer protocol such as HTTP/2 and above. If not, then you should move to faster storage.

You should check out the "Fast Hosting" lesson.

Fast Hosting

One of the things that can affect the site's speed is the hosting server, the resources on the server, the protocol of the server, and the server's geographical location.

Your hosting server may be on a slow hosting company such as Bluehost or GoDaddy hosting. It is best to see comparisons between different storage servers or understand the impact of your server location if it is far removed from your target audience.


Solution:

Check out the "Fast hosting" lesson.

Fast Hosting

recommendations

Recommendations of Speed Tools

Important points related to the hosting server and how they affect performance

Common mistakes in building pages, especially if you work with Elementor, can adversely affect the structure of the pages. These errors will be expressed in a recommendation called "Avoid an excessive DOM size" in the speed tests.


Solution:

Check out the "Reduce DOM" lesson.

I recommend you also watch the video I shared with the private group on how to reduce DOM.

Avoid an Excessive DOM Size

If you have a recommendation of "Serve static assets with an efficient cache policy" in the speed measurement tool,

and within the recommendation, some requests come from your domain, not from an external domain.

Serve Static Assets with an Efficient Cache Policy


Solution:

Check out the "Serve static assets with an efficient cache policy" lesson.

Serve Static Assets with an Efficient Cache Policy

If you see the "Reduce initial server response time" recommendation in speed testing tools, or you see over 0.3 seconds TTFB in the first tab of GTmetrix.

Reduce Initial Server Response Time


Solution:

Check the "TTFB" lesson,
and read my article Reduce Initial Server Response Time (TTFB)

Reduce Initial Server Response Time

If there is a recommendation to reduce unused CSS in the recommendations of speed testing tools, usually it also comes with a red FCP value.

Reduce Unused CSS

You should reduce unused CSS,

but you need to help with this process because it is not yet perfect, by adding to the safe list 100+ phrases, I found during improvements I made to customers, otherwise, your site might look broken.


Solution:

Check the "Reduce Unused CSS" lessons

Reduce Unused CSS

Images

Images take up a large part of the page size and the number of requests the page makes from the server, two things we want to reduce to improve website speed
Image Optimization

If you have images with a width over 800px loaded on mobile,

this can be seen in Chrome when we check which images are requested on mobile and check their width.

Mobile Images

Alternatively, you can check the "Avoid enormous network payloads" recommendation of speed testing tools.

Avoids enormous network payloads

We will look at the heaviest images and check what their width is.

Mobile Images


Solution:

Check out the "Mobile Images" lesson.

Mobile Images

If you see in the Images tab of GTmetrix more than ten images loaded, and some of these images are regular images, not background images, that exist at the bottom of the page—below the fold.

Images


Solution:

Check out the "Lazy Load" lesson.

Lazy Load

If there are background images loaded below the fold, the chances are that even if you have Lazy Load, the background images are still loading.

Background images are usually in the background of an area or column, and it looks like this when inspecting the element:

Background Images


Solution:

Check out the "Background Images Lazy Load".

Background Images Lazy Load

If there are images above the fold that are loaded with Lazy Load, and you can see that these images don't come right away,

Lazy Load Above The Fold Images

and when we inspect the image, there is a class "lazyloaded" on them:

Lazy Load Above The Fold Images


Solution:

You should exclude the images that are above the fold from Lazy Load.

Check out the "Lazy Load" lesson.

Lazy Load Images

If your site has heavy images, over 200KB per image:

Image Compression


Solution:

Check out the "Image compression" lesson.

Image Compression

LCP-CLS

LCP & CLS

Two major metrics from Core Web Vitals that Google looks for, therefore, impact organic SEO.

If the page speed tools show a red LCP value in mobile,

Red LCP

and the most significant component loaded above the fold is a background image, as you can see here:

Improving LCP


Solution:

Check out the "Image LCP" lesson.

Improving LCP

If the page speed tools show a red LCP value and that the LCP is the text:

Text LCP


Solution: 

See the post I wrote in the private group on what to do when LCP is text and the solution.

If the page speed tools show a red CLS value, then this means that there are elements that move and push content, which hurts the CLS metric.


Solution:

Read the article on How to improve CLS and make sure that elements do not move and cause content to shift and have a reserved place in terms of height.

WooCommerce

Specific points related to WooCommerce
WooCommerce

If you see in GTmetrix a request of "wc-ajax = get_refreshed_fragments".

It should be eliminated because this is another request, which is often too long and adversely affects the page's performance.

get_refreshed_fragments


Solution:

Check out the "WP Cart Fragments" lesson.

get_refreshed_fragments

If the site is a WooCommerce site, and you see in the list of requests the expression "zxcvbn", like:

zxcvbn

Or "password-strength-meter" requests:

Password Strength Meter


Solution:

Check out the "Password Strength Meter" lesson.

Password Strength Meter

If the site is a WooCommerce site, you should improve the LCP of product images.


Solution:

Enter the code I put in the course under "Code Snippets":

Improve LCP of Product pages

Additives

Plugins

Specific points for certain plugins

Suppose you use a cache plugin like ezCache/W3TC or any other cache plugin besides WP Rocket. In that case, visitors coming from Facebook may get your site much slower than you think.


Solution:

Check out the "Ignoring Query String" lesson.

ignoring query strings

If you are using WP Rocket caching plugin, that is excellent. With its help, we can make many performance improvements like Lazy Load for images, delaying scripts, and Reduce Unused CSS.

In the "WP Rocket" lesson, we will go over the optimal settings, including a safe list for Reduce Unused CSS that I built myself while improving site speed for clients.


Solution:

Check out the "WP Rocket" lesson.

wp rocket

If you are using "Contact Form 7", a very popular forms plugin,

but the form only exists on specific pages like the contact page and not in the footer of all the pages,

and you see in GTmetrix requests of "contact-form-7":

Contact Form 7 Requests

It means that you are making unnecessary requests because the above plugin affects all the pages on the site, even on pages that do not have a form.


Solution:

Check out the "Contact form 7 & partially used plugins" lesson.

Contact Form 7

If you are using the "Contact Form 7" plugin

and you see in GTmetrix "Refill" request:

Contact Form 7 Refill


Solution:

Check out the "Contact Form 7 Refill" lesson.

Contact Form 7 Refill

JS / FID / TBT

The third metric in Core Web Vitals that relates to scripts
JavaScript

If the page speed tools show a red TBT value


Solution:

Read the article on First Input Delay.

If you have a Facebook page embedded in the page, and in the GTmetrix, you see requests coming from Facebook like:

Facebook Page Embeded


Solution:

Check out the "Facebook Page" lesson.

Facebook Page Embeded

If you see the "email-decode.min.js" request in GTmetrix's waterfall:

Email-Decode Request

Usually, you can disable it because this is another JS that adversely affects page performance, and we want to minimize page requests and page size.


Solution:

Check out the "email-decode" lesson.

Email-Decode Request

If you see the "wp-embed.min.js" request in GTmetrix's waterfall:

WP-Embed Request

Usually, you can disable it because this is another JS that adversely affects page performance, and we want to minimize page requests and page size.


Solution:

See the post I wrote on the subject in the private group on how to disable wp-embed and a few other unnecessary things.

If you see the "wp-emoji-release" request in GTmetrix's waterfall:

WP-Emoji-Release Request

Usually, you can disable it because this is another JS that adversely affects page performance, and we want to minimize page requests and page size.


Solution:

See the post I wrote on the subject in the private group on how to turn off wp-emoji-release and a few other unnecessary things.

If the JS tab has more than one JS request and is over 10KB:

Scripts


Solution:

Check out the "Delay Scripts" lesson.

Delay Scripts

After delayingJS, you might have issues like:

Sub-menu icon appears after interaction
Sticky Header
Animated Text


Solution:

Check out the "Alternatives with Delay JS" lesson.

Alternatives with Delay JS

If you performed Delay JS from the previous section and on mobile, when you load the page and press the menu button, you must double-click for the menu to open.


Solution:

Enter code to fix the problem as described in "Fix mobile menu double click in Elementor sites" in the course

Double Click to Open Mobile Menu

If you performed Delay JS from a previous section, and you have a SlideShow at the top of the page that you only see after a user interaction—mouse movement, for example.


Solution:

Look at the post I wrote in the private group on the subject and solution.

If you have Google Analytics, and in GTmetrix, you see requests like:

Google Analytics


Solution:

Check out the "Delay Scripts" lesson and/or "Google Analytics" lesson:

Google Analytics

If you have GTM on your site, and in GTmetrix, you see requests like::

GTM


Solution:

Check out the "Delay Scripts" lesson and/or "Google Tag Manager (GTM)" lesson.

GTM

If you have Hotjar on your site, and in GTmetrix, you see requests like:

Hotjar


Solution:

Check out the "Delay Scripts" and/or "Hotjar" lessons.

Hotjar

If you have a Facebook Pixel on your site, and in GTmetrix, you see requests like:

Facebook Pixel


Solution:

Check out the "Delay Scripts" lesson and/or "Facebook Pixel" lesson.

Facebook Pixel

If you have a Facebook Messenger or tawk.to or VirtualSpirits or any other chat service.


Solution:

Check out the "Delay Scripts" lesson and/or one of the Chat lessons.

Chat plugins

If you have Google Maps on your site, and in GTmetrix, you see requests like:

Google Maps


Solution:

Check out the "Google Maps" lesson.

Google Maps

Errors

Errors

Resolve common errors

If you see 404 errors in GTmetrix waterfall:

404 Errors


Solution:

Use the "Fix Broken Requests" lesson to find out how to fix the errors.

404 Errors

Suppose there are JS errors in the Chrome console. It can be seen by opening the browser's Developer Tools by pressing F12 or right-clicking and clicking "Inspect". Select the Console tab, go to Errors, and refresh the page. If you have an ad blocker, turn it off once.

So, if there are JS errors like:

JS Errors


Solution:

Check the "Fixing JS Errors" in the course

fixing-js-errors

Fonts

Different fonts, font weights and icons and their effect on improving performance
Fonts

If you see in GTmetrix requests from fonts.gstatic.com and fonts.googleapis.com external domains:

Google Fonts

We prefer to change to local fonts in order to save the need to connect to an external domain, which adversely affects performance.


Solution:

Check out the "Local Fonts" lesson.

Local Fonts

If you see in GTmetrix requests for icons like Font Awesome/Flaticon/Linearicons/ElegantIcons/ and the like:

Font Awesome

You should be aware that you are loading a lot (1000+) of unnecessary icons while you're probably using only a few.


Solution:

Check out the Icons lessons.

Font Awesome

If you see in GTmetrix, in the Fonts tab that there are more than five requests for fonts, not including requests for icons I showed in the previous section:

Too many font weights

You should reduce the weights we use because each font-weight causes a request from the server.


Solution:

Check out the "Finding Used Fonts" lesson and a post in the private group that shows another tool that can help in searching for used fonts.

.


Video

Video

What to do if there are videos on the page

If there are YouTube videos on the site and we see in GTmetrix requests from YouTube and Google.

YouTube


Solution:

Check out the "YouTube" lesson.

YouTube

If there is a video above the fold that is played automatically, and it comes from YouTube.


Solution:

Read the post in the private group about the options that can be made in such a case.

This course is an online program on improving the performance of WordPress sites. Here you can learn to improve the speed of sites and build fast sites with a better user experience. These sites will have higher scores, so your websites will be beautiful and fast.

In the course, I share the knowledge, tricks, and secrets that I use every day to improve the speed of clients’ sites. Knowledge that helped me win 1st (2019), 3rd (2020), and 1st (2021) places in worldwide WordPress performance contests.
There is a private Facebook group for course members where I answer everyone’s questions related to page speed optimizations.

You can also get personal guidance and receive specific recommendations for your site. You can also get private support so that you can learn to improve yourself and get me to accompany, guide, and help you if necessary.
More details are located here about Website Speed Optimization Course.