Core Web Vitals
Leading the pack in Google's Core Web Vitals
** Graph by Google’s data studio. You’re looking at the performance curve of sites built with VIV VS other builders and how many of these sites pass the CWV test i.e. get a “Good” score on its 3 metrics.
VIV is still leading the way in Google’s Core Web Vitals, compared to other website building platforms. This is not a matter of chance. Since first introduced in May 2021, we have been working hard at maintaining high Core Web Vitals scores through constant platform optimizations.
What Exactly Are Core Web Vitals?
Google announced its Core Web Vitals algorithm update back in May 2020. The Core Web Vitals are three metrics that attempt to summarize the experience of loading a web page in a web browser and first interacting with it. The three metrics are:
- Largest Contentful Paint (LCP) — measures page speed by using the loading time of the largest object above the fold as a proxy for overall speed. Anything under 2.5 seconds is a good score.
- First Input Delay (FID) — measures the interactivity of a web page by checking how long it takes from a user’s first interaction with a page until the browser responds. Anything less than 100 milliseconds is a good score.
- Cumulative Layout Shift (CLS) — measures the visual stability of a web page by gauging the degree to which page components move around while the page loads. Anything under 0.1 is a good score.
Over the past few years, Google has used the unparalleled influence of its search algorithm to move the web in a more user-friendly direction. This is the reason metrics like mobile-friendliness and pagespeed are now included as ranking factors. In June, the search giant is poised to once again put its metaphorical shoulder to the wheel and push for better usability on all websites with its Core Web Vitals initiative.
VIV has been prepped for Core Web Vitals for months, working behind the scenes to ensure the sites built on our platform are ready — and you don’t have to do a thing.
Today, we’re very happy to report that, on average, more VIV sites receive “Good” scores for two of these key metrics — Largest Contentful Paint and First Input Delay — than other industry competitors based on data provided by the Google Chrome User Experience (CrUX) Report. VIV sites also showed strong results for the other Core Web Vital — Cumulative Layout Shift — with further improvement expected in the coming months.
HOW VIV SITES STACK UP AGAINST COMPETITORS
The majority of VIV websites consistently receive “Good” scores for all three Core Web Vitals. Additionally, a higher percentage of VIV websites receive “Good” scores for the two speed metrics — LCP and FID — than other industry competitors.
Largest Contentful Paint
VIV leads the pack in the percentage of sites built on its platform that receive “Good” LCP scores. According to the Google CrUX report, 72.90% of VIV websites receive a "Good” LCP score, solidly beating out Weebly, Wix and WordPress.
First Input Delay
More than 92% of VIV websites receive a “Good” FID score. This is higher than any other industry competitor.
Cumulative Layout Shift
As of today, 73.17% of VIV websites receive a “Good” score for Cumulative Layout Shift, up from 68.72% last month. Our team is dedicated to improving the scores of the sites built on our platform, and we expect to push that percentage even higher in the near future.
VIV is used by all kinds of best-in-class companies to provide modern, integrated websites to customers.
HOW VIV PREPARED WEBSITES FOR CORE WEB VITALS
To ensure sites built on our platform are ready for Google’s new metrics, VIV set up a dedicated team to continuously evaluate and improve the infrastructure that drives “Good” Core Web Vitals scores.
Below are brief summaries of the steps we have taken.
Optimizations for LCP
Render-blocking CSS and JavaScript
- Issue: Render-blocking CSS and JavaScript. It used to be that when a visitor landed on a VIV website, all of the site’s assets were downloaded in the <head> section. This is a blocking operation which halts the rendering process until all resources have been loaded — a potentially significant impediment to a good LCP score.
- Solution: Implement critical CSS. VIV automatically calculates the necessary CSS to render above-the-fold content. This CSS chunk is inlined in the head section and doesn't require any network calls. All other scripts and styles are moved down to the body end. This completely removes all render-blocking requests and provides a dramatic improvement to LCP.
Image Size Optimization
- Issue: Image sizes that are not optimized. Image files that are not properly optimized for the device they are being viewed on (e.g., mobile) will take a lot longer to load than they should and result in a poor LCP score.
- Solution: Resize and compress images. All images loaded to VIV go through an automatic, behind-the-scenes image resizing process using imagemagick. The proper image size is then served to the proper device type and container size. We also use lossy compression to reduce image file sizes. Lossy compression eliminates redundant data and can enable file size reduction by up to 80%. This optimization also applies to images that are included in custom widgets.
Bulk Image Loading vs. Lazy Loading
- Issue: Loading all images at once. Historically, all images (except in photo galleries) and widgets on VIV web pages were fully loaded when a visitor landed on a page. This meant that if a website had a lot of images or widgets, it could take a few extra moments to load — obviously, a problem for LCP.
- Solution: Lazy load images and widgets. Now all images and widgets at the top of a site (above the fold) are marked as “important.” All remaining images (marked as “unimportant”) are set to load after the page finishes loading or as they come into view while scrolling.
Image File Type Optimization
- Issue: Image file types are larger than required. JPG and PNG files are used across every type of browser, which makes them universally applicable. However, there are now more compressed file types that deliver images more efficiently.
- Solution: Serve WebP images when possible. VIV now converts uploaded images to the WebP format. WebP has about a 35% reduction in size as compared to JPGs, and has long been supported by Chrome with other browsers adding support all the time. We also ensure there are fallbacks in place for browsers that don’t support WebP yet.
CSS Loading Priorities
- Issue: CSS loading priorities. Browsers have to make many decisions about what type of content and resources to load and when. VIV automatically generates all of the required styles needed to load above-the-fold content, so we already know which resources do not need to load first.
- Solution: CSS loading priorities hints. VIV gives browsers hints about which resources they should prioritize when downloading page content. This helps browsers focus on the required content and resources for faster page loading.
Background Image Slider Optimization
- Issue: Background slider image loading. Background image sliders can be big and heavy to load, especially when there are multiple images that take up the same space on a web page. Previously, VIV loaded all background images of a background image slider at the same time.
- Solution: Optimize background image slider loading. VIV prioritizes loading the first image in the Image Slider, and then lazy-loads the other images, improving how quickly the first image loads.
Optimizations for CLS
Image Layout Shifting
- Issue: Image layout shifting. Image loading is the biggest cause of layout shifting on the web, because browsers have no way of knowing the dimensions/size of an image before it's fully downloaded. So, once an image is actually downloaded, browsers load and shift all content around it.
- Solution: Add image width & height. VIV automatically identifies the width and height of an image (even inside custom images), and sets these attributes on the image HTML tag, which allows browsers to reserve the right amount of space while the image downloads. It’s important to note that setting height and width does not make an image non-responsive. Instead, browsers use the image’s width/height attributes for calculating its aspect ratio so images automatically take up the correct space.
Loading Above-the-fold Fonts
- Issue: Loading above-the-fold fonts. Nearly every website today includes some form of custom fonts, usually from Google’s huge Font Library. Fonts are often big and heavy, and browsers usually first load a system font, such Arial, Georgia, Sans, etc. Once the custom font is done loading, the browser adds the custom font, something which causes the font to jump on the website, and has a negative impact on the visitor’s experience.
- Solution: Embed fonts. VIV automatically detects which custom fonts are used in above-the-fold content on each page, downloads that font, and embeds it directly into the HTML of the page (up to a max size of 50kb). This means browsers don’t need to go and fetch the custom font and can display it immediately.
Cookie Notification Placement
- Issue: Cookie notification placement. In the past, cookie notifications were displayed above the header with an animation, pushing all the content down. This resulted in CLS.
- Solution: Place cookie notifications at the bottom of pages. We changed our cookie notification to be positioned at the bottom of the viewport and be displayed as an overlay. It uses CSS animations which are not considered as layout shifts.
Photo Gallery Layout Shifting
- Issue: Photo gallery layout shifting. Photo galleries with lots of images can vary in height due to the lazy loading. Many galleries change their height while scrolling as the default behavior. Also, photo gallery widgets load dynamically based on their settings.
- Solution: Set min-height. VIV sets the min-height CSS property of the photo gallery to reserve space on the page for loading the photo gallery. This prevents content below the gallery from being pushed down as the images load, something which would cause the layout to shift.
Optimizations for Both LCP & CLS
Widgets with Images
- Issue: Widget image sizing. Many widgets, especially those built using the Widget Builder, feature images. Previously, these images were not sized to the correct screen size and did not automatically have width/height dimensions added to them.
- Solution: Optimize images in widgets. The image width/height improvements described above are now implemented for images within widgets too.
We're Helping Local Businesses Succeed. Let’s grow together.
Get in touch today!
Let us know about your marketing goals and one of our marketing specialists will be in contact with you!
Browse Our Packages
We've been lucky to work with over 2,100+ businesses. Check out some of our packages!
CONTACT US
We bring the team to the table to provide the best value for your business strategy. We're experts at collaborating the many different moving parts of digital marketing so that you can be the expert at running your business.
(812) 618-9498
10999 Stahl Rd, Newburgh, IN 47630
USEFUL LINKS
FOLLOW US
STAY INFORMED ON HOW TO GROW YOUR BUSINESS!
You need a helping hand with your project?
Evolv, Inc, doing business as Evolv is a registered Independent Sales Organization of Wells Fargo Bank N.A., Concord, CA and Fifth Third Bank, N.A., Cincinnati, OH
