Tutorial to get 100 score in PageSpeed Insights for most WordPress websites having couple external javascripts and embedded youtube videos.
Current website is already using an optimized theme with single css and single js file. All images are also well optimized and have small file size. Initial PageSpeed Insights score is 65.
I will analyze the PageSpeed report and apply a precise solution for each problem related to speed. I will use small and free plugins that are available on the WordPress repository.
Watch the video version of the page speed optimization tutorial on YouTube.
Subscribe to my YouTube channel for more tutorials.
Before starting optimization here is the result of final PageSpeed Insights score 100.
This optimization is permanent. I used this optimization for a long time and it is visible in Google Search Console as well.
Report for Core Web Vitals for mobile devices from my Google Search Console account. Similar results for desktop devices as well.
Let’s learn more about the current website veppa.com .
Current website details:
- Already optimized parts
- Latest version of WordPress and PHP.
- Fast Theme “Neve” with single CSS and vanilla (not jquery) JS file.
- No custom fonts.
- Small (optimized) images.
- Needs optimization
- 25 active plugins.
- 2 external JavaScripts: Google Adsense, Google Analytics.
- Youtube video embeds.
Now let’s look at what is PageSpeed score for a not fully optimized website.
With these settings the website gets PageSpeed score 65.
This is a PageSpeed report for a page with:
- 3000 words article.
- 20 optimized images.
- 1 YouTube video embed.
Report details show high “Total Blocking Time” 4.5 seconds and “Speed Index” 6 seconds.
Other metrics “First Contentful Paint” 1 seconds, “Largest Contentful Paint” 1.5 seconds and 0 for “Cumulative Layout Shift”.
Looking at these numbers we can guess that javascript is responsible for high “Total Blocking Time”.
Scrolling down in PageSpeed Insights we can confirm that 3 external resources block main thread for long time:
- YouTube embedded video (before even playing): 816 Kb, 3 seconds blocking time.
- Analytics: 107Kb, 0.36 seconds blocking time.
- Adsense: 280Kb, 0.4 seconds blocking time.
Further down we can see page load time details.
Generating and downloading a web page from website “Initial Server Response Time” metric (Root document) took 1.46 seconds.
Solution: Knowing these details I will apply following speed optimization steps:
Step 1: Cache
To reduce initial server response time I will install a caching plugin. Instead of generating a page every time cache will save the generated page and send the saved page every time when the user visits that page.
Simple plugin that will handle page caching in WordPress website is “Cache Enabler“.
Plugin is free and available on WordPress repository. It is regularly updated, actively used by more than 100K users, and supports multiple versions of PHP (from 5.6 up to latest 8.3).
I love its simplicity and compatibility with most WordPress websites and hosts.
On the settings page uncheck all checkboxes. I will manually clear cache whenever I add new posts or update old ones. Usually once per week.
I do not want any extra features from this plugin. Just a simple page cache. And it is really good at it.
Now check PageSpeed Insights score. Remember to check it twice because the first time the page will be cached, the second time it will be served from cache.
I now got PageSpeed score 67 and Initial server response time 0.42 seconds.
Which is a 3x improvement from the previous result of 1.46 seconds.
“Initial server response time” can further be improved with Server or CDN level caching. Content serving capacity will dramatically increase when server or CDN level cache is added. View more caching plugins for WordPress.
I prefer using 3 levels of caching (plugin + Nginx server + free Cloudflare CDN) at the same time. From the current tutorial we can see that even a single plugin level cache is enough to get PageSpeed score 100.
Now let’s improve loading and execution of JavaScript.
Step 2: Lazy load JavaScript files
Javascript has 2 main problems:
- Takes long time to load additional files. Too many files, big file size, downloaded from internal and external servers.
- Execution of Javascript code delays page loading and rendering time. User waits for a long time until the page shows up in the browser.
To address these issues the best solution is lazy loading and lazy execution of JavaScript files and inline JavaScript codes.
Best free plugin for lazy loading JavaScript is called “Flying Scripts“.
It is a simple and lightweight plugin. Plugin has 30K active installations, supports all versions of PHP and is regularly updated.
Lazy loading for JavaScript means load on user interaction.
User interaction is one of these actions: mouse movement, mouse click, finger tap, page scroll.
Lazy execution of JavaScript also means execution on user interaction. This will optimize inline JavaScript code and delay its execution.
Delaying javascript will prioritize loading and rendering pages visually much faster. Users can view and start consuming information on the page instantly.
It will reduce “Total Blocking Time” that is detected in the PageSpeed report at the beginning.
Now lets do minimal setup for Flying Script plugin.
This is the settings page that can be found by navigating to the “Settings” → “Flying Scripts” page.
It is very simple and we only need to set the “Include Keywords” field.
There we will add lines that partially match the source of JavaScript files or inline JavaScript code.
Here is my javascript keywords:
googlesyndication googletagmanager jquery-migrate.min.js comment-reply.min.js /plugins/ jQuery(
Explanation of each line:
googlesyndication– matches Google Adsense external javascript files.googletagmanager– matches Google Analytics external javascript files.jquery-migrate.min.jsandcomment-reply.min.js– matches javascript files that are inserted by WordPress./plugins/– matches all internal JavaScript files inserted by WordPress plugins. This is how we optimize all JavaScript files inserted by plugins. This is a clever solution because when you install new plugins or old plugins add more JavaScript files they will still be automatically optimized (lazy loaded).jQuery(– matches all inline JavaScript code that uses jQuery which is either added by theme or some plugins.
I knowingly do not delay jquery.min.js file. Because it needs to be loaded first so that other scripts that depend on it can run without any errors.
No need to change the default timeout field of 5 seconds. JavaScript will be loaded and executed after that time if no user interaction happens.
Remember to include any additional keywords here if you have other external javascript files like live chat, or other analytics.
Now let’s check PageSpeed score again.
Important: clear cache first, then test PageSpeed twice to make sure that page is served from fresh cache.
I got a PageSpeed score of 69.
This step helped to improve analytics and adsense loading time.
It is not high because I have embedded a youtube video on this page. If you test a page without youtube then this number should be higher than 90.
Now let’s improve total blocking time caused by embedded YouTube video.
Step 3: Lazy load (load on click) YouTube videos
What is the functionality of youtube embeds?
- User views the thumbnail of the video.
- User decides to watch the video.
- User clicks the play button and watches the video.
Default youtube embed implementation loads thumbnail, video controls and lots of javascript files (816 kilobytes, blocks main thread for 3 seconds) even before the user sees a thumbnail of the video.
Ideal youtube embed implementation will be to load a static image, when the user decides to watch and clicks thumbnail only then load youtube video.
This optimized (lazy loaded) youtube embed implementation will not block the main page thread at all.
To add click to load (lazy) behavior to youtube video embeds I will use a plugin called “Lazy Embed“.
It is a relatively new plugin with few installations. Plugin supports the latest WordPress version and PHP versions starting from 7.1.
Beauty of this plugin is that it does not have any settings. It will work automatically when activated.
Additionally “Lazy Embeds” uses cookieless domain youtube-nocookie.com for youtube videos. So that your WordPress website will stay GDPR friendly when you embed youtube videos.
Now clear cache and test PageSpeed Insights twice (once for caching, second time for serving from cache).
Result: PageSpeed score 100
This is the final score 100 from PageSpeed Insights.
Last step of optimization (load on click youtube video) increased PageSpeed score from 67 to 100. It is a huge improvement for blogs with embedded youtube videos.
Following these steps will increase your PageSpeed Score to 90+ regardless how many video embeds or heavy javascript files you have.
Details of the report show all speed metrics in green.
Total Blocking Time is 20ms. Reduced from 4.5 seconds to almost zero. This is a huge win for page speed.
Bonus: Speed up WordPress admin pages by optimizing WP_HTTP API usage with HTTP Requests Manager plugin.
FAQ
What are prerequisites for getting 100 score using this tutorial?
- Have fast mobile friendly theme with 1 css and 1 non blocking vanilla JavaScript file.
- Optimized images with small file size and using lazy loading provided by WordPress core.
- No custom fonts.
If your website does not meet any of these requirements it might not score 100.
Do I need to have PageSpeed score 100 or 80-90 is also sufficient?
PageSpeed score 80-90 for mobile devices is ok. No need to spend time and resources for getting 100 score. It will not change much your SEO rankings or conversions.
In PageSpeed Insights and inside Google Search Console each score means:
- 50-89 score will show as URL needs improvement (orange).
- 90+ score will show as URL is good (green).
But in reality score 80 and score 90 does not make much difference unless you are in too competitive niche where micro improvements can make huge difference.
How to fix high Total Blocking Time?
“Total Blocking Time” in PageSpeed report is related to slow JavaScript and slow Iframe (JavaScript inside iframe) on that page. To fix it you need to lazy load Javascript files and lazy load iframes.
Lazy load for JavaScript files means load on user interaction (click, mouse move, scroll, swipe, touch).
Lazy loading iframe required only when JavaScript inside that iframe responsible for high “Total Blocking Time”.
And using default HTML feature loading="lazy" will not fix it. You need to implement load on click feature. Load contents of that iframe when user clicks on it.
How to fix slow Initial Server Response Time?
Slow Initial Server Response time can be fixed by reducing page generation and page delivery time. Use caching to reduce page generation time, use CDN to reduce page delivery time.
Are all plugins used in this tutorial free?
Yes, all used plugins are free and available on WordPress repository.
For optimization I used simple plugins. Some of them even without any settings page.
The plugin without settings works automatically when you activate them. Which means no ads, no upsells, no affiliate links etc. Pure functionality that fixes precisely the single problem.
Here is quick list of used plugins:
Why use 3 separate plugins instead of single plugin with many features?
I prefer separate plugins because they are best at what they do instead of complicated all in one plugins.
All in one plugins have more code and lots of features that are not used. Not used features will confuse you and take more time for setting up and managing. Big plugins use more server resources.
Simple plugins are easy to manage, detect malfunction and replace with other simple plugin when needed. They are more practical.
Separate plugins act like modules. You install and active only necessary modules.
For example if your website does not have embedded youtube videos then yo do not need to use “Lazy Embeds” plugin.
Conclusion
WordPress website speed depends on multiple factors like a fast mobile friendly theme, small images, less plugins, website caching, reducing page requests. After completing most speed optimizations you may still get a low PageSpeed Insights score like 65.
In that case you may still be a couple steps away from getting a perfect PageSpeed Insights score 100.
Understanding the exact reasons for a slow website will help to identify precise solutions to the speed problem. In our case we added caching, lazy loaded javascript and added click to load optimization for embedding youtube videos.
These speed optimization steps will work for most WordPress websites.
I have an easy to follow checklist that I use to get a 90+ PageSpeed Insights score for all WordPress websites that I work on.
Get Free Speed Optimization Checklist.
You can use it for your own and client WordPress websites.