Skip to content

Get PageSpeed Score 100 for a WordPress containing YouTube embeds

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.

PageSpeed Insights score 100 after optimization.

This optimization is permanent. I used this optimization for a long time and it is visible in Google Search Console as well.

With this optimization all pages of WordPress website have a good score for Mobile Core Web Vitals inside Google Search Console report.

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 WordPress website has 25 active plugins, 2 external javascript files and 1 embedded YouTube video.

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.

Initial PageSpeed score 65 (bad) for a webpage with 3000 words, 20 images and 1 embedded youtube video.

This is a PageSpeed report for a page with:

  • 3000 words article.
  • 20 optimized images.
  • 1 YouTube video embed.

PageSpeed insights shows 4.5 seconds (very slow) total blocking time metric.

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”.

Detailed report shows that external javascript files for analytics, adsense and youtube embed slows down page loading time. Total file download size for each external resource is also shown.

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.

Initial server response time is 1.46 seconds. Which is very slow.

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.

WordPress plugin Cache Enabler. Simple and lightweight solution for a page cache.

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.

Cache Enabler plugin settings. Uncheck all checkboxes. I will clear cache manually when content updated.

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.

Initial Server Response time decreased to 0.42 seconds after applying page cache by Cache Enabler plugin. Which is good, 3x improvement compared to previous result.

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.

WordPress average page cache performance for different caching levels. Table shows initial server response time and page serving capacity per second for each level.

“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:

  1. Takes long time to load additional files. Too many files, big file size, downloaded from internal and external servers.
  2. 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.

Flying Scripts plugin for lazy loading and lazy execution of all javascript code. Delay all inline and separate internal/external javascript files.

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.

Flying Scripts plugin settings page. Only setting you need to define is Include Keywords field.

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.js and comment-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?

  1. User views the thumbnail of the video.
  2. User decides to watch the video.
  3. User clicks the play button and watches the video.

Main reason for a slow web page is Youtube embed that loads 816 kilobytes data and blocks main thread for 3 seconds.

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.

Lazy Embed plugin will show static thumbnail image and when user clicks on it youtube video will be loaded.

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.

Lazy Embed plugin has no settings page. It works automatically once activated. Additionally it uses GDPR friendly (cookieless) domain for youtube videos.

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

PageSpeed Insights score 100 after optimization.

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.

PageSpeed Insights after optimization shows Total Blocking Time 20ms. which is very good. All core web vitals metrics are also green.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *