SEO
Jetpack Boost For WordPress Core Web Vitals is Ready
Automattic, founded by the same person who created WordPress, formally launched Jetpack Boost, a free plugin that helps web pages optimize for Core Web Vitals. This is important because Core Web Vitals will become a ranking factor in June 2021.
What is Jetpack Boost?
Jetpack Boost is a plugin that provides one-click optimization for Web Core Vitals. The plugin currently does three things and will in the future do more.
Jetpack Boost does the following:
- Optimize CSS Loading
- Defer Non-Essential JavaScript
- Lazy Image Loading
1. Optimize CSS Loading
In order to make a web page come together, a browser needs to build it, a process called “rendering.”
Cascading Style Sheets (CSS) is code that tells browsers what color a font is, where page elements are positioned and everything else that has to do with what a web page looks like.
CSS however is what is called a render blocking resource. A render blocking resource is something that stops the browser from building a web page because the browser needs to download the resource (like a Cascading Style Sheet).
A Cascading Style Sheet (CSS) is the most important code for telling a browser how to build the web page. For that reason a browser may stop downloading a web page in order to download the CSS.
There is some code that’s more important than other code to make the page functional to a web page visitor.
That’s called Critical CSS.
A trick for making a web page download faster is to take the parts of the CSS that relates to how a web page looks and put it at the top of the web page itself.
So rather than download the CSS code in a separate file, the most important part is downloaded first so that the web page can be created faster.
A publisher can edit their CSS file and put it in the appropriate file in WordPress or they can use Jetpack Boost to do it automatically.
While some may say it’s better to do it by hand, not everyone has access to someone to do it for them.
Those are the publishers Jetpack Boost is for. Jetpack Boost simplifies the process of adding Critical CSS to a web page and speeding it up.
2. Defer Non-Essential JavaScript
JavaScript is code that works like a little machine that makes things happen on a web page. For example, JavaScript is generally what makes a drop down menu in the main navigation drop down.
The process of downloading the JavaScript stops the browser from building the web page. That makes JavaScript a “render blocking resource.”
One way to help the web page download faster and create the “perception” of a web page that’s ready to be interacted with is to download non-critical JavaScript code last.
Advertisement
Continue Reading Below
The important code necessary for a visitor to interact with a site is downloaded first and the stuff that is not immediately necessary for a user at that moment is downloaded last.
3. Lazy Loading Images
Images can be some of the largest web page elements that need to be downloaded. Having to download images can make a web page take a long time to render.
However, every image on a web page does not need to be downloaded right away. Lazy Loading is a way to defer downloading an image. That means images are not downloaded until a visitor scrolls to where the image is.
This makes the web page usable to a site visitor faster.
Jetpack Boost
Boost is a one-click solution that is recommended for publishers who need an easy way to improve Core Web Vitals performance.
Jetpack describes it like this:
“Jetpack Boost gives your site the same performance advantages as the world’s leading websites, no developer required.”
Jetpack Boost is not for everyone. It’s for businesses that don’t have access to a developer that can make the difficult coding changes to improve Core Web Vitals scores.
This is a way for business that are expert at doing business but not at coding to get the benefit of better Core Web Vitals scores.
Citation
The Easiest Way to Improve Your Site’s Performance and SEO
