To help you optimize your website for Google’s Core Web Vitals, we have identified several potential problem areas and how to update them to improve your Core Web Vital scores.
Custom and Heavy Widgets
Both custom and heavy widgets can be slow because they load content from a third-party service, which requires calling an external API to retrieve and then load the content.
Not all custom widgets are slow to load. It depends on how the custom widget was built.
Heavy widgets: Map, Twitter Feed, Facebook Like, Facebook Feed/Page, Facebook Comments, Audio (Soundcloud, Mixtape), Video (Custom, Youtube, Vimeo), Photo Gallery, Image Slider, Lottie Animations, Multi-location, Google Calendar, and Disqus.
How to Fix
To improve your Core Web Vitals scores:
Remove custom/heavy widgets from the top area of your page and move them lower. This prevents them from negatively impacting CLS and FID by loading and then pushing content below them further down the page.
Avoid adding multiple custom/heavy widgets on the same page. Each widget has different loading times, which can decrease the LCP.
If a custom widget is causing FID, you can ask your developer to improve how the content renders and is fetched by using techniques such as async loading, fetching data off the main thread, and more.
eCommerce
Store is loaded dynamically with JavaScript. This can affect CLS because the Store takes longer to load than the rest of the content on the page. Because of this, we recommend moving the Store lower on the page instead of at the top.
How to Fix
To improve your Core Web Vitals scores:
Add content above the Store instead of putting the Store at the top of the Store page. This ensures that the Store is below the fold.
Build your own category pages or use the Store Product Gallery widget to create category pages. Both native images and photo gallery elements load faster than the Store because they have less content and code to render before they are displayed.
Fonts
Web fonts can slow down your website because the browser has to download and load the full font family for each font and weight combination. Fonts are automatically downloaded and embedded within the HTML, up to 50KB. This speeds up how fast your browser renders custom fonts and helps prevent CLS. However, this is not always enough and is why we recommend using at most, two different font families and only a few weights from each.
How to Fix
To improve your Web Vitals scores:
If you have more than two fonts applied, remove them from specific elements or widgets on your website. Use global fonts to apply only the fonts and weights you need. After this has been completed, only the fonts that are necessary for the text to display properly are downloaded.
Google Tag Manager
Google Tag Manager may download extra libraries and code that you don’t need, which can decrease LCP.
How to Fix
To improve your Web Vitals scores:
If possible, remove Google Tag Manager. If you only have one or two tracking technologies it might not be worth implementing Google Tag Manager.
If you do implement Google Tag Manager, follow our Google Tag Manager Tracking guide. This helps ensure that the tracking code loads correctly and does not slow down the site.
Do not put Google Tag Manager in the head of the website. This causes it to load first, before other important site elements.
Images and Background Videos
Images and background videos are typically the largest asset that browsers download on your site. When there are too many images, one large image above the fold, or a video, it can cause a delay in LCP and increase in CLS because the browser has to download the elements before they can render. This typically happens with large background images/videos, image slideshows, background images with another image on top, or with multiple large images in a row at the top of the page.
By “large image” we mean an image that takes up a majority of the page width.
How to Fix
To improve your Web Vitals scores:
Use only a single image above the fold.
If you need multiple images above the fold, reduce the size of the image down to an icon or thumbnail.
Move background videos and slideshows lower on the page. If you need a slideshow, limit it to three images or less.