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.

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.

If possible, remove Google Tag Manager

Google Tag Manager may download extra libraries and code that you don’t need, which can decrease LCP. If you only have one or two tracking technologies, it might not be worth implementing Google Tag Manager.

Tip

If you have Google Tag manager on your site, see Google Tag Manager for tips on how to ensure that the tracking code loads correctly and doesn’t slow down the site.

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.