Enhancing Core Web Vitals: What web development processes to change

To achieve top scores in PageSpeed Insights and GTMetrix, focusing on Core Web Vitals optimization is crucial. Here are some lesser-known techniques for web designers and developers to consider when building a WordPress website with high PageSpeed Insights scores in mind, as part of Google’s Core Web Vital signals:

Eliminate Above-the-Fold Element Animations

Disable animations for all elements appearing above the fold. Total Blocking Time (TBT) greatly influences Core Web Vital metrics, and reducing TBT can be achieved by using JavaScript delaying techniques. As a result, you’ll need to avoid animations above the fold. From a user’s perspective, this is how a visitor experiences the website when JavaScript is delayed:

Optimize Video/Image Placement

This tip is particularly relevant to mobile scores, but it’s recommended to position videos and images below the fold. Doing so allows lazy loading to work effectively, preventing Cumulative Layout Shift (CLS) and First Contentful Paint (FCP) issues.

Exclude Above-the-Fold Images from Lazy Loading

Beginner optimizers may overlook images on both mobile and desktop that appear within the fold. To prevent CLS problems, exclude all above-the-fold images from lazy loading.

Reassess SVG Images

For extra optimization points, if your logo or an image within the fold is an SVG, try using a PNG or JPG version instead and test the results. You may be surprised to find that using an image format can increase your PageSpeed Insights score upon testing.