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…
Topics in page speed optimization
Starting the Page Speed Optimization Course
Things to do at the beginning of the course
Audit Videos
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:
Testing 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.
Work on a Testing Site
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 Points
How to Check the Site Without Hurting Performance
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.
Faster Page Switching
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.
Redirects
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:
Solution:
See the "Avoid Redirects" lesson in the course.
Chrome's Developer Tools - F12
How to work with Chrome's Developer Tools (F12)
Solution:
See the "Chrome's Developer Tools - F12" lesson in the course.
Plugins I Use
Which plugins I use in the course and how to configure them
Solution:
See the "Plugins I Use" lesson in the course.
Using Taboola Pixel or Using New Google Ads
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
Hosting Server Protocol
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:
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.
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.
A Slow or a Faraway Server
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.
Recommendations of Speed Tools
Avoid an Excessive DOM Size
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.
Serve Static Assets with an Efficient Cache Policy
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.
Solution:
Check out the "Serve static assets with an efficient cache policy" lesson.
Reduce Initial Server Response Time
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.
Solution:
Check the "TTFB" lesson,
and read my article Reduce Initial Server Response Time (TTFB)
Reduce Unused CSS
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.
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
Images
Mobile Images
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.
Alternatively, you can check the "Avoid enormous network payloads" recommendation of speed testing tools.
We will look at the heaviest images and check what their width is.
Solution:
Check out the "Mobile Images" lesson.
Normal Images Loaded Below the Fold
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.
Solution:
Check out the "Lazy Load" lesson.
Background Images Loaded Below the Fold
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:
Solution:
Check out the "Background Images Lazy Load".
Images Above the Fold Loaded with 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,
and when we inspect the image, there is a class "lazyloaded" on them:
Solution:
You should exclude the images that are above the fold from Lazy Load.
Check out the "Lazy Load" lesson.
Image Compression
If your site has heavy images, over 200KB per image:
Solution:
Check out the "Image compression" lesson.
LCP & CLS
Two major metrics from Core Web Vitals that Google looks for, therefore, impact organic SEO.
Red LCP
If the page speed tools show a red LCP value in mobile,
and the most significant component loaded above the fold is a background image, as you can see here:
Solution:
Check out the "Image LCP" lesson.
LCP Is Text
If the page speed tools show a red LCP value and that the LCP is the text:
Solution:
See the post I wrote in the private group on what to do when LCP is text and the solution.
Red CLS
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
Get_Refreshed_Fragments Request
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.
Solution:
Check out the "WP Cart Fragments" lesson.
Password Strength Meter
If the site is a WooCommerce site, and you see in the list of requests the expression "zxcvbn", like:
Or "password-strength-meter" requests:
Solution:
Check out the "Password Strength Meter" lesson.
LCP of Product Pages
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":
Plugins
If You Are Not Using WP Rocket
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.
You Are Using WP Rocket
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.
Using Contact Form 7
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":
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.
Using Contact Form 7 and there is a Refill request
If you are using the "Contact Form 7" plugin
and you see in GTmetrix "Refill" request:
Solution:
Check out the "Contact Form 7 Refill" lesson.
JS / FID / TBT
Red TBT
Facebook Page Embeded
If you have a Facebook page embedded in the page, and in the GTmetrix, you see requests coming from Facebook like:
Solution:
Check out the "Facebook Page" lesson.
Email-Decode Request
If you see the "email-decode.min.js" request in GTmetrix's waterfall:
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.
WP-Embed Request
If you see the "wp-embed.min.js" request in GTmetrix's waterfall:
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.
WP-Emoji-Release Request
If you see the "wp-emoji-release" request in GTmetrix's waterfall:
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.
Delay Scripts!
If the JS tab has more than one JS request and is over 10KB:
Solution:
Check out the "Delay Scripts" lesson.
Alternatives when delaying JS - Sticky Header, submenu, animated text
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.
Need Double Click to Open Mobile Menu
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
Elementor's SlideShow Appears Only After User Interaction
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.
Google Analytics
If you have Google Analytics, and in GTmetrix, you see requests like:
Solution:
Check out the "Delay Scripts" lesson and/or "Google Analytics" lesson:
GTM
If you have GTM on your site, and in GTmetrix, you see requests like::
Solution:
Check out the "Delay Scripts" lesson and/or "Google Tag Manager (GTM)" lesson.
Hotjar
If you have Hotjar on your site, and in GTmetrix, you see requests like:
Solution:
Check out the "Delay Scripts" and/or "Hotjar" lessons.
Facebook Pixel
If you have a Facebook Pixel on your site, and in GTmetrix, you see requests like:
Solution:
Check out the "Delay Scripts" lesson and/or "Facebook Pixel" lesson.
There is a chat on the site
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.
Google Maps
If you have Google Maps on your site, and in GTmetrix, you see requests like:
Solution:
Check out the "Google Maps" lesson.
Errors
404 Errors
If you see 404 errors in GTmetrix waterfall:
Solution:
Use the "Fix Broken Requests" lesson to find out how to fix the errors.
There are JavaScript errors in the console
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:
Solution:
Check the "Fixing JS Errors" in the course
Fonts
Local Fonts
If you see in GTmetrix requests from fonts.gstatic.com and fonts.googleapis.com external domains:
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.
Icons—Font Awesome, and the Like
If you see in GTmetrix requests for icons like Font Awesome/Flaticon/Linearicons/ElegantIcons/ and the like:
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.
Too Many Font Weights Requests
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:
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
YouTube
If there are YouTube videos on the site and we see in GTmetrix requests from YouTube and Google.
Solution:
Check out the "YouTube" lesson.
Background Video Above The Fold
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.
Topics in page speed optimization
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.
