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

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?

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.

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

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.

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:

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.

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 1 – WP 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:

Plugin 2 – Flying 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.

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.

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

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.

This is probably the easiest method to solve all the CSS render-blocking issues.

In fact, if you do this, you don’t need critical CSS anymore – since all your CSS is already on the page.

But, as I said before, this unorthodox method is not perfect (that’s why it’s unorthodox).

By in-lining all the CSS, you make your HTML code significantly larger. This may consequently lead to another problem: slow server response.

Since your HTML code is more extensive, It will take more time for the browser to load.

Therefore, It’s crucial to dequeue or remove unused CSS before in-lining all your CSS code into HTML.

As long as your initial server response time wasn’t greater than 1 second, you are good to go.

Anyway, if you want to use this method to eliminate CSS from render-blocking your content, be sure not to remove anything from the “Exclude CSS from Autoptimize” textbox and leave the predefined value unchanged.

Note: You can add your own list if you want – just don’t remove any of the predefined values.

Technique #3 – Lazy-load your images

Lazy-loading images is a technique that only loads images when the user views them and not during page load.

This is done to reduce your web pages’ overall size and subsequent server requests.

Here’s why this is important:

When the page loads, most of the “Below-The-Fold” content (like text and images) are usually not in view.

Hence, there’s no need for a browser to load them immediately.

For example: if you visit this page on Twitter (https://twitter.com/csswizardry), you will notice that the browser will take about a few seconds before showing you images from Twitter posts.

However, once those images are in view, the browser will fetch them immediately.

This is lazy-loading in a nutshell.

The site will still load without any issues despite the delayed loading of images.

As long as your browser can render the main page within 1 second, it doesn’t matter if you miss some content during the initial load.

Therefore – if you lazy-load images, your images will only load when needed.

As a result, no more render-blocking images (which can slow down page load time), and users will be able to browse your website more efficiently.

Since the image is not within your user’s viewport, it won’t impact your LCP score.

That’s why lazy-loading images are essential to optimizing a WordPress site for Core Web Vitals.

Like inlining all CSS files into HTML code before, lazy-loading images are just another tactic to reduce render-blocking delays and remove as many files as possible from the initial page load request.

For lazy-loading images, You can use:

Option #1 – WP Rocket

Just go to WP Rocket settings page > Media, and tick the following options:

• Enable for Images
• Enable for iframes and videos
• Replace YouTube iframe with preview image

Option #2 – Autoptimize

Just go to Autoptimize settings page > Images, and tick the Lazy-load images option:

Option #3 – Smush – Lazy Load Images, Optimize & Compress Images

Go to Smush Settings page > Lazy Load, and click the Activate button.

Technique #4 – Disable Google Fonts

If you use Google Fonts in your WordPress site, you might want to consider disabling it and going with the default system fonts instead.

Google Fonts can slow down your website, and it can affect your LCP and CLS score.

This is because they are hosted on Google’s servers, meaning that it takes a lot longer for the fonts to load. This delay in loading can slow down the rendering of your page.

By disabling Google Fonts and use the default system fonts, you can remove external fonts from render-blocking your content. This means the browser no longer has to wait for the fonts file to be fully processed before it can paint your page content.

To disable Google Fonts, go to Autoptimize Settings page (Settings > Autoptimize), and select the Extra tab.

Under the Google Fonts option, select Remove Google Fonts.

After disabling Google Fonts, you need to include the system fonts into your CSS.

To do that, simply go to WordPress Customizer (Admin Dashboard > Appearance > Customize) and insert the following CSS into the Additional CSS section.

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

Technique #5 – Don’t use Icon Library

In the previous lesson, I mentioned that Bloated Icon libraries, like Font Awesome, make the page size bigger.

Instead of using icon library, you should use its SVG or PNG version instead. This will prevent the bloated icon files from slowing down your website.

Please refer to my previous lesson on how to replace Font Awesome CSS with SVG icons.

Technique #6 – Preload Fonts files

If you really need to use Google fonts or Font Awesome library for your website, you should preload these font files.

By doing this, the browser will prioritize these font files and load them early.