CORE WEB VITALS Google PageSpeed Insights · Site Optimizer · Agency Guide

Core Web Vitals
Optimization Guide

The guide to improving your Google Core Web Vitals score. Improve your Google PageSpeed Insights score in a nick of time. Staq's tool will take care of the rest.

Start Free — No Credit Card Book a Call

Free trial · no credit card Built-in site optimizer Trusted by 400+ agencies

Do you prefer to watch a video tutorial instead?

Checkout our Core Web Vital optimization videos instead.

Otherwise, see the text information below.

Improve your Google PageSpeed Insights score in a nick of time. Staq's tool will take care of the rest. The tool is accessible inside your Staq hosted WordPress website.

Preparation

Step 1: Chrome configuration

Step 2: Migrate website to Staq

Step 3: Disabling other plugins & services

Under the existing website in your Staq account or the recently migrated website, go to the Plugins page and disable the following plugins:

Caching

Optimization & Minification

Image compression & WebP generation

Popular plugins (but not limited to) that fall under this category are:

Caching

WP Rocket

W3 Total Cache

WP Super Cache

WP Fastest Cache

Optimization & Minification

Autoptimize

Hummingbird

FlyingScript

NitroPack

Image Compression & WebP generation

ShortPixel

Smush

Imagify

CDN

Cloudflare

BunnyCDN

MaxCDN

Sucuri CDN

StackPath

KeyCDN

Once you confirm every single form of optimization plugin has been disabled, please proceed to the next step.

Step 4: PageSpeed Insights score check

Let the PageSpeed Insights tool perform a true assessment of your website by clicking this link. Enter the website URL and let the tool run its course.

Automatically being on Staq means text compression and an efficient caching policy on static assets within the root domain are enabled.

It is recommended that you take a screenshot of both Mobile and Desktop scores along with the opportunities that Google recommends that you follow.

Ste 5: Enable Staq Hosting caching and optimizer functions

1-click optimization opportunities

Eliminate Render-Blocking Resources

Both .CSS and .JS files can cause render-blocking issues, however, you may find that Google identifies purely .CSS files only.

The Staq tool may either eliminate render-blocking resources or improve them.

To optimize, go to Site Optimizer > CSS. Then turn on:

Load CSS deferred

Extract Critical CSS.

What this will do is find all the critical CSS that loads the website above the fold and add it as an inline CSS at the top of the HTML file. Then, it defers the rest of the CSS files that aren't required at the initial load.

Reduce Unused JavaScript

There are JS files that don't need to load on the initial load. So go to Javascript and select Delay JavaScript execution.

Please note that Staq applies conservative measures here. It does not delay:

core WordPress JS files

scripts and files that contain .min. and jQuery

If you wish to aggressively improve your PageSpeed Insights score, please scroll further down to JAVASCRIPT OPTIMIZATION GUIDE to view our advanced tutorial on how to optimize JavaScript files and scripts further.

Defer Offscreen Images

This recommendation means to defer all images upon initial load and download the image as the user scrolls down the webpage.

Under Site Optimizer > Media, click Lazyload images & videos. As a rule of thumb, it is best to exclude all images that appear above the fold. Images such as:

logos

icons that appear in the header

and hero images

should be excluded:

To be on the safe side, please make sure that the images served on your mobile device also match the same image file names on your desktop.

Forgetting to exclude images that appear above the fold may cause Cumulative Layout Shift (CLS) issues.

Minify CSS

Minify JavaScript

Serve Images in Next-Gen Formats (WebP)

Reduce Initial Server Response Time

Generally, using our tool will either reduce or eliminate this from being an issue.

However, there are 2 features that you can adopt that will assist.

Go to Staq Panel for the site in question and click CDN:

[IMAGE]

You'll see:

Next-Gen CDN (recommended)

Traditional CDN

Next-Gen CDN Cache

This feature will deploy the entire website into the CDN. This means that the server will not receive any request as the site is delivered from the closest data center.

The Time To First Byte (TTFB) and load time will be relatively similar across the globe. Typically, optimized sites are fast in the same location as the origin server but are slow across the globe. This feature eliminates this issue.

Traditional CDN

The CDN will offload to AWS CloudFront the following:

images and videos

plugins

theme

The origin-server will still handle each request.

Reduce Unused CSS

COMING SOON: A FEATURE TO REMOVE UNUSED CSS AND ONLY SHOW USED CSS

In the meantime, until our new feature is released, we do not modify CSS files beyond minification.

Typically, following the Eliminate render-blocking resources instruction in this document will either reduce the execution time or remove this entry from the list.

Regardless, it isn't a significant score-breaker inside the calculator of PageSpeed Insights if this isn't followed.

Avoid an Excessive DOM Size

Image elements do not have explicit width and height

Optimize Google Fonts

Believe it or not, Google Fonts causes harm to your PageSpeed Insights score. By default, if the Optimizer is enabled, Staq will automatically apply it as Combine and apply display:swap which is best practice according to Google.

However, removing Google Fonts can improve your PageSpeed Insights score.

Select Remove Google Fonts. Double-check your website to see if it doesn't hinder the look and feel of the website as you may wish to revert it to Combine and apply display:swap:

Preload Images

Properly size images

This means two things:

resize images so you're not serving Full-Size images

optimize and compress images.

Full-Size Images

Avoid using full-size images. Instead, select the resized image based on the settings inside the WordPress builder:

Optimize and Compress Images

Staq allows you to optimize and compress images automatically.

You can compress the following images:

WebP

Inside Staq Hosting, click Media in the horizontal tab. Then, click WEBP Image and Standard Image. From there, you can play with the settings:

Please note that when an image is uploaded via Media Library in WordPress whilst hosted on Staq, we transfer the original image into an AWS S3 bucket for safekeeping and via AWS Lambda, compress and optimize the duplicate image.

Staq will always have the original image you've uploaded just in case you wish to change the compression settings in the future.

The instructions below are to be used if you wish to have more control of how your javascript files and scripts load along with pushing your PageSpeed Insights score even further.

JavaScript optimization Guide

Recommended JavaScript optimization

Try this JS Optimization first

With this method, we are combining all safe JavaScript files and then combining it into a single file. Then, we delay that combined JS file. You can then exclude certain JS files from being delayed. Those scripts did not form part of the combined process.

Steps

Enable the first 3 JS settings:

Then, under Delay JavaScript execution, delete the default entries under Exclude JavaScript keywords from delay and copy and paste the following entries into the list instead:

lazyload.min.js
lazyLoadOptions
above-the-fold
removeLoading

Test

Then, go to the website in Incognito mode and make sure:

the Inspect window is open

it is selected on the Network tab

the JS tab is selected.

Then, go ahead and refresh your screen with your keyboard.

Under the JS tab, you should notice that no scripts will load until you move your mouse or keyboard as per the screenshot below:

After, go ahead to the testing phase to ensure the site works perfectly. If so, you're done. If it requires tweaks, refer to the tutorial below.

QUICK TIP: It is recommended that you turn off animation to all elements that appear above the fold only. The animation is powered by JavaScript which will give you a blank section until you move your mouse.

Outcome

If this strategy worked for you, then go to the Testing section, below.

If it did not work, then you'll need to carefully select which JavaScript files and scripts to delay. Instructions on how to do this appear below.

If you wish to reverse this, click Restore Defaults under the JavaScript page of the Staq tool. Please note that it'll only restore the settings on this page and not the entire optimization setup.

Aggressive JavaScript optimization

Aggressive JS optimization

**TRY WITH CAUTION**

This strategy does not work for all websites, however, it is a quick and easy solution to apply and may work for you.

Under Delay JavaScript execution, go to Exclude JavaScript keywords from delay and delete all excluded file names. This will make this list empty:

Then, go to the website in Incognito mode and make sure:

the Inspect window is open

it is selected on the Network tab

the JS tab is selected.

Then, go ahead and refresh your screen with your keyboard.

Under the JS tab, you should notice that no scripts will load until you move your mouse or keyboard as per the screenshot below:

After, go ahead to the testing phase to ensure the site works perfectly. If so, you're done. If it requires tweaks, refer to the tutorial below.

Outcome

If this strategy worked for you, then go to the Testing section, below.

If it did not work, then you'll need to carefully select which JavaScript files and scripts to delay. Instructions on how to do this appear below.

Moderate JavaScript optimization

Moderate JS Optimization

To see the unminified JS files, go to Site Optimizer > JavaScript and turn off both:

Minify JavaScript tags

Minify JavaScript files

Continue to have Delay JavaScript execution enabled with the default list of keywords listed under Exclude JavaScript keywords from delay.

Then, in Incognito mode in Chrome, open Inspect and go to Network > JS. Refresh the page with your keyboard (without moving the mouse over the page) and review all javascript files that have loaded. These files have been excluded.

To determine if that particular JS file is required at the initial load, right-click that file and click Block request URL as per the GIF below:

Refresh the page in Incognito mode and see if anything on the website breaks. If it doesn't, then it is safe to say that this particular JS file can be delayed upon initial load.

Repeat the process.

If a file breaks the look and feel of the website, unblock the file and move to the next one.

Once you're done, you should have a list of blocked JS files in red like this:

Right-click on each file and copy the URL:

Then, in the backend of WordPress, go to the JavaScript optimization section in Staq Hosting paste the URL and remove the unnecessary information as per the GIF below:

Note, once you're done, go ahead and unblock the blocked file from your browser by right-clicking it.

Outcome

Diagnosing JavaScript errors in browser

Diagnose JavaScript errors (COMING SOON)

Testing

Clear CDN cache

Refresh your site in Incognito Mode

Assessing the score