Core Web Vitals Best Practices: Site Performance and Optimization

The recommendations below will not only assist with Core Web Vitals but also enhance the overall SEO health of the site.

📘

NOTE

Related resources:

• Site Performance and Optimization

• Core Web Vitals

Move heavy or custom widgets to below the fold

Custom widgets aren’t always slow to load, but if they require calls to external APIs or 3rd party tools, they may be. Heavy widgets are widgets that, by definition, require external API calls or 3rd party code to load fully. For example, the Map widget, Twitter feed widget, Video widget, any Facebook widget, etc.

📘

NOTE

The "fold" of a website refers to the portion of the webpage that is visible without scrolling. It's the content you see right away when you first load the page. Anything you have to scroll down to see is considered "below the fold."

Avoid having multiple custom/heavy widgets on the same page

Custom and heavy widgets can have different load times from each other, and this can decrease LCP and overall page loading experience.

📘

TIP

For custom widgets, ask your developer to improve how content is rendered and fetched with techniques such as async loading, fetching data off the main thread, and more.

Use no more than 2 font families on your sites

Fonts are automatically downloaded and embedded within the HTML of your page (up to a max of 50KB of fonts), speeding up how fast your browser displays fonts. This helps to prevent CLS and font flashes commonly seen on loading pages.

📘

TIP

Also try to keep the number of weights to a minimum.

Only load a single image above the fold and place background videos below the fold

Images and background videos are typically the largest asset that browsers download on a site. When there are a lot of images, large images (ones that take up most of the page width) or videos, there can be a delay in LCP and an increase in CLS because the browser has to download the elements before they can be rendered.

If you do need multiple images above the fold, reduce the size of the image to that of an icon or thumbnail.

📘

TIP

Move background videos and slideshows lower on the page. If you want to use a slideshow, limit it to 3 images or less.

Summary

Core Web Vitals can have a big impact on how sites are ranked by Google, and promise to do great things for user experience.

For videos, webinar replays and much much more, visit our Core Web Vitals Resource Center, focused entirely on preparing your sites for for Core Web Vitals.

Core Web Vitals FAQs

Why do my scores fluctuate?

It is normal to see a small fluctuation in your scores over a short period of time. These fluctuations can be caused by variations in server response, domain lookup, and asset loading times. How quickly assets load can be affected by other programs running simultaneously on the device that is trying to access your site.

If you see large score fluctuations over a long period of time this can be attributed to Google making adjustments to their scoring system.

What should I do with unused JS, CSS, and Google Fonts?

If you added the unused JS, CSS, or Google fonts to your site, you can remove them wherever you originally added them.

When checking Web Vitals, your report might reference JS and CSS that can be removed. Typically, this is not referencing the code you have added, but is referencing default code that cannot be changed or removed.

Can I access the JS and CSS source files?

You cannot access JS and CSS source files because they are a core part of the platform.

Google sent me an email saying Core Web Vitals INP issues were detected on my site. What does this mean?

INP is an existing metric that was previously not officially measured, though Google has recently announced it will be replacing the FID metric in March 2024. The INP score will not impact CWV until March 2024. However, in preparation for this transition, Google has started to inform site owners when INP issues are detected.

Prior to the announcement from Google, Website Builder had already started addressing this metric. As a result many sites already score well on INP, though we are continuing to optimize it.

We are continuing to learn about INP and identifying the optimal practices for both backend operations and site creators. We will update you on what best practices you can put in place are as we learn more.

In the interim, if you receive a notice from Google reporting your site has INP issues, please review your site to ensure it is following the current best practices.

Rest assured, Website Builder is actively working on optimizing this score and we are confident we will be ready for the official launch in March 2024. If you have any concerns about your INP score before that time, we recommend consulting with an SEO expert for further assistance.

How do I remove render-blocking resources?

If you added JS to the site head, it can block your page content from loading while the JS renders. For this reason, we recommend moving your JS to the body and adding either async or defer keywords.

Using async tells the browser to load the script and page contents at the same time. Using defer tells the browser to run the script after the page contents have loaded.

What are the best templates for page speed?

All templates are well optimized, but the most recent templates have been optimized for current guidelines. To determine which templates were most recently released, look for the orange New icon on the template.

Should I add scripts to the head or body?

We recommend adding scripts to the body. If your scripts are in the head, they will have to parse before any HTML or CSS can load. This can cause a delay in LCP and FID.

Why is my mobile score lower than my desktop score?

In general, mobile devices are slower than desktop computers because they rely on data. For example, a video loads faster on a desktop computer than it would on a mobile phone usi