A couple of times a year, Google will update its core algorithm, which comprises the fundamental building blocks that work to power Google’s search engine. These updates are a big deal to us at New Target because we understand how dramatically these vitals impact the search engine results page. We strive to create compelling websites and specialize in search engine optimization to provide our clients with effective high-ranking websites that offer the best user experience possible. The three new page experience signals Google added to their SERP ranking algorithm in June 2021 are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
At New Target, we understand Google’s core web vitals and design websites with all of these metrics at the forefront of our minds. So, let’s talk about each metric, what affects it, and how we optimize our client’s websites for Google’s Core Web Vitals.
Google’s Core Web Vitals
Largest Contentful Paint
LCP measures the speed at which a website page’s primary content loads and appears on the screen. In other words, how fast the page loads. Some factors affecting the LCP of a website are rendering time, background video, large images, and text within the viewport (visible section of a webpage to the visitor). To optimize websites for LCP, we make sure to compress images, use the correct dimensions, utilize lazy loading, and use third-party video hosting services.
First Input Delay
FID measures the speed at which users can interact with a page after they land on it. This metric can be affected by things like third-party code, tracking scripts, JavaScript, etc. We are able to optimize client websites for FID by minifying JavaScript, removing unused tracking scripts on your website, and by using Google Tag Manager.
Cumulative Layout Shift
CLS measures how frequently users experience unexpected layout shifts. This can also be known as the “annoyance” metric because we all know how frustrating it is when we are navigating a website and a button shifts unexpectedly. This is typically affected by image size and dimensions, animations, multiple fonts, intrusive pop-ups, and menus. To avoid these unexpected layout shifts and optimize websites for CLS, we ensure that every asset has the correct dimensions, reduce the number of fonts on the website, use set dimensions, and have predefined areas for ad display.
CLS is the metric getting the most attention right now because we were never able to measure it in the past. We have all been to a website, especially on our phones, where we meant to click one button and accidentally clicked on an ad. So, our website developers take CLS into careful consideration when designing our client’s websites.
How We Develop Websites for Google’s Core Web Vitals
We are going to discuss the most common elements that can mess with your page speed and overall website page experience and explain how we optimize the websites we develop with core web vitals in mind.
1. Image Formats and Size
Images are usually the number one offender for low scores on PageSpeed Insights. Hero images, in-line images, background images, etc., are all guilty of messing with a website’s scores. To avoid this in the websites we design, we always compress our images and use the correct dimensions and size. We also implement lazy loading, which delays the loading of non-essential elements at the time of loading. Thus, it shortens the length of the critical rendering path to provide you with shorter page loading times.
2. Videos
We know that videos are important to your content strategy and love implementing them on our client’s websites. But instead of embedding large video files directly onto your website, we use third-party video hosting services to serve your videos to your users. Using a third-party video host reduces the bandwidth on your server while still delivering the desired video quality to the user’s environment. In addition, we use lazy loading and defer rendering the video until it is clicked on to take away part of the video loading from the initial page load.
3. Tracking Scripts
Our web developers avoid using third-party tracking scripts that are irrelevant to your business or marketing strategy. We review all the scripts that are included on your website and make the appropriate adjustments.
4. Typography
When designing a website for our clients, we attempt to use no more than eight custom font variants. This includes italic versions, font families, and font weights. We also preload the font assets required for a page to instruct the browser to load it immediately. Our developers also store clients’ fonts locally, so the number of HTTP requests and DNS lookups is reduced.
5. Ads, Pop-ups, Banners, Etc.
These are typically the biggest factor affecting a website’s CLS score. A change in layout that occurs without prior user input can be super annoying to the visitor and bad for their overall experience with your website. In order to avoid this when developing websites, we typically pre-determine the height and width of a space dedicated for an ad or banner. This way, we know the page layout won’t shift once the ad is loaded. We also avoid placing any ad spaces above content, so when a page fully loads, it doesn’t shift all the content down.
6. CSS and JavaScript
The page loading speed can be affected by loading large CSS and JavaScript. We address this by minifying and combining CSS and JavaScript and only including CSS and JavaScript calls on a page when necessary.
At New Target, we are focused on creating compelling, client-centered websites that provide your users with the best user experience in order for your website to be not only discoverable but also successful. This means we carefully develop our websites with all of Google’s core web vitals in mind. We understand these metrics can be challenging to understand and optimize on your own, so our web development team at New Target is here to help! We are a Google partner and have all the technical knowledge needed to optimize each page experience for your website. Contact us today!