BLAZE Sites | Core Web Vitals Best Practices

The recommendations below will not only assist with Core Web Vitals, but also enhance Site Performance and Optimization

Note

Move heavy/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.

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."

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 do great things for user experience.