Optimize Your WordPress site for Core Web Vitals using R.O.S.E Mechanism

Core Web Vitals is a new standard introduced by Google to measure overall page experience.

It’s a way for webmasters to assess their website’s performance and optimize it for a better user experience.

By also taking into account the page loading speed, this standard demands high-performance standards on the website.

In this lesson, I will show you a system that can help you optimize your WordPress site for Core Web Vitals.

The R.O.S.E Mechanism

This is the same system that I used to turn a poorly configured Elementor site into one, which passed the Core Web Vitals standard with flying colors.

screenshot of core web vitals improvement for elementor site

The R.O.S.E Mechanism is made up of a 4-steps process that, if implemented, will help you optimize your WordPress site for speed and performance:

  • Step #1: Reduce as many Assets Files as possible
  • Step #2: Optimize Your Initial Server Response Time
  • Step #3: Simplify your “Above The Fold” content
  • Step #4: Eliminate Unexpected layout shifts

Each of these steps is made up of multiple techniques to help you achieve the objective.

So, let’s dive into the details of the first step:

Step #1:
Reduce as many Assets Files as possible to make your website lighter

As I have mentioned in the previous lesson (Why is WordPress loading so slow?), the more resources a browser has to load, the longer it takes for your website to load.

This is why reducing as many asset files (CSS, JS, fonts) as possible is vital to optimizing your WordPress site for Core Web Vitals.

Let me give you an example: if you look at the screenshot below of a WordPress website with all the assets files listed, do you see how many files are loading?

waterfall model from webpagetest.org
(screenshot taken from webpagetest.org)

A LOT!!!!

Suppose you measure your website with GTmetrix under the Page Details section. In that case, you should see how big your page size is (in KB) and how many requests your page is making (AKA how many files a browser needs to load).

The main goal here is to reduce your page size to around 150kb ~ 250kb and not more than 15 items in your page request.

I know – this might seem impossible for a WordPress website, but trust me when I say that it’s not.

Here are the techniques that will help you reduce your assets files as much as possible:

Technique #1: Combine your non-critical JavaScript files into one, and delay its execution to eliminate JavaScript render-blocking.

The first thing you want to do is combine all your JS files into one.

To do this, simply install Autoptimize plugin into your WordPress site, and activate it.

install Autoptimize plugin

Once it’s activated, go to Autoptimize settings page, under the JavaScript Options section, enable both Optimize JavaScript Code & Aggregate JS-files options:

how to merge JavaScript files using Autoptimize

Make sure you exclude critical JavaScript files, such as jquery,min.js, or lazy-load.min.js, from being combined into the bundle. If you don’t do that, it will cause JavaScript errors and create user experience problems.

How to exclude critical JavaScript files from merging

Then, go to Misc Options section, make sure you untick the Also optimize for logged-in editors/ administrators option.

You don’t want to see a cached copy of your CSS & JavaScript files when editing the website.

Once you are finished, go to the bottom of the page and click Save Changes and Empty Cache:

How to disable cache for logged in user

To see if it works, simply open your website in Chrome incognito mode, and then Right Click -> View Page Source. Scroll down to the bottom, and you can see that all of your non-critical JavaScript has been merged into a single file.

How to find combined JavaScript file

Next, we need to decide how we will delay the execution of this combined JavaScript file.

Delay JavaScript Execution is a technique in which the execution of JavaScript code is delayed until a user interaction is detected.

This prevents JS files from render-blocking while the browser loads content, thus improving a website’s loading time.

There are 2 plugins you can use to delay JavaScript files’ execution.

Plugin 1WP Rocket (premium plugin)

If you have WP Rocket installed on your website, simply go to WP Rocket settings page > File Optimization, tick the Delay JavaScript execution option, then insert /wp-content/cache/autoptimize into the “Scripts to delay” text box:

how to delay JavaScript execution in WP Rocket

Plugin 2Flying Scripts by WP Speed Matters (Free plugin)

If you don’t have WP Rocket, you can use Flying Scripts by WP Speed Matters. It’s free, and you can download it from the WordPress repository.

Once you installed and activated the Flying Scripts plugin, go to its settings page (Settings > Flying Scripts), and insert /wp-content/cache/autoptimize into the Include Keywords box. Then, change the Timeout option to Never.

How to delay JavaScript execution in Flying Scripts

Once you’re done, Remember to click Save Changes and delete your Autoptimize cache.

Now – if you use Gtmetrix to measure your website again, you should see only your critical JavaScript files are loaded in the waterfall tab.

waterfall modal in GTmetrix to show only critical JavaScript files are loaded

You should see a boost in both GTmetrix and Google’s PageSpeed Insights score.

Why it works

By default, a browser will need to load all JavaScript files before it displays the web page.

By delaying all your non-critical JavaScript, you essentially reduced the total page request by at least 10-20 files.

Hence, the site will load much more quickly.

The best part?

The JavaScript codes still run as usual, and it won’t break your website, which is fantastic.

No more dequeuing JavaScript files one-by-one from your WordPress site 😛

Next – we need to spend some time optimizing your CSS.

Technique #2 – One simple hack to eliminate CSS render-blocking

There are lots of techniques for CSS optimization.

From compressing & minifying CSS files to generating critical CSS, most of these techniques can help speed up rendering your web page.

You probably read about them in the past, and you probably tried at least one of them yourself.

However, the method I’m going to show you is very unorthodox, and it comes with a caveat.

So – here’s is it:

Go back to Autoptimize settings page, under CSS Options, tick the following options:

  • Optimize CSS Code
  • Aggregate CSS-files
  • Also aggregate inline CSS
  • Inline all CSS
How to inline all css using Autoptimize

By doing this, Autoptimize will compress, minify, and inline all your CSS into the HTML code.

Yes – you read it correctly.

I did say, “Inline all your CSS into the HTML code.”

Inline CSS into HTML is considered bad practice for web development.

However, in our case, by in-lining all the CSS into HTML code, we basically remove all the CSS files from page requests. Thus, preventing it from render-blocking the website content.