Jon Fletcher 2021-02-26

Core Web Vitals: Building a more generic mobile web?

SEO is designed to be obtuse. Google doesn't want people to know exactly what makes up their ranking system. If everyone had the exact technical model to follow, they would exploit it. 

Rather than concentrating on creating content that engages the user, good content would lose out to sites that put SEO techniques first —even more so than today. 

To keep the user experience at the heart of the internet, Google drip-feeds enough information so webmasters have a general idea of ​​the best things to do. This creates A mysterious alchemy between engaging content, recognition, and technical performance, SEO is a force designed to keep results pages democratic. 

But, Google has diverted from this plan when it comes to the mobile web. Google is now trying to demystify its priorities, at least when it comes to mobile performance. 

With around a year's notice, it has announced that mobile performance will be simplified into three Core Web Vitals, that will be scored and used as a direct search ranking factor. 

Core Web Vitals are designed to boil down performance to the most important elements of a page load for users. The page should load some content quickly, be stable, and actually usable. Rather than collecting information on numerous, technical metrics that readers don't have a true sense of, Core Web Vitals strip the page loading experience to the basic components that are noticeable to normal people. 

If an SEO master wants to 'game' the system by making their content fast, stable, and usable then there's not really an issue to address. 

Mobile pages are better than ever for the user 

The standardization of mobile design and site-building principles has given us many advantages. Having hard and fast standards for performance has given us: 
  • Familiar patterns that users know how to navigate 
  • Prototyping can be fast and easy 
  • Site building is standardized which means faster and cheaper 
  • Grid layouts with strict parameters lend themselves to responsive design
However, if everyone starts a page by focusing on these three areas, will it make mobile pages more homogenized and make web designers prioritize scores over functionality, form, and creativity, leading to a more generic, boring mobile web landscape? 

In the current system, an idea can be done first and optimized later. As Core Web Vitals become more established and grandfathered into web design principles, will mobile web design become a smaller, more limited playground?

Fitting their ideas within a template that conforms to the standards of Core Web Vitals may reduce mobile sites to a handful of standard templates that publishers or designers work within. 

And it's not just design. Important functionality for publishers might get buried or removed from mobile sites that end up costing them value from user engagement. So, what changes in the mobile experience will Core Web Vitals bring about for the mobile experience?

A picture is worth a thousand words 

The largest contentful paint on publishers' pages is often an image. But, images are often large files that can cause a 'bad' LCP rating. 

Rather than do everything to optimize the best thing for the content, it may become easier for webmasters to push heavy content below the fold. This would lead to more pages that lead with headlines and blocks of text that load much faster than images.

In this example, you can see how reordering the page switches the LCP from a high-res image to a block of text. This may result in a fast loading page, but it can be argued that it damages the overall impact of the page for the user and publisher. 

Publishers that still want to lead with a high-res, large image on a story will have to implement things like an image CDN and WebP formats to make the grade. 

You can read our full guide to optimizing images for a good LCP here.

Interactions buried below the fold 

First input delay is often delayed by Javascript occupying the main thread. This means if the page is busy loading a long-task when the user requests an action, there will be a long first input delay. 

Like pushing images to below the fold, webmasters may also want to move common interactive elements down the page. By making the user scroll and read a little, it gives the browser more time to complete these tasks and free up the main thread for user interactions. 

If interactive elements in the first impression are a must, it will take bundlers like Webpack, removing all unused JS, and splitting up long tasks on the main thread. For sites without a development team, this can be a tough requirement.

In this mock-up, you can see a normal page on the left, with many interactive elements. The image on the right shows how it would be possible to re-shape pages. Imagine a user clicks a link from social media, they may get a pared-down version of the article, similar to an AMP page, with interactive elements redacted. 

We may see a future with two classes of pages depending on factors like user device, location, or connection. In order to offer full interactivity, publishers will need the access and resources to shave down all possible Javascript. 

You can read our full guide to cutting down long JS tasks and getting a good FID score here.

Goodbye to rich media and embeds

Finally, one of the biggest causes of cumulative layout shift on pages is dynamic elements. These are elements that can be multiple sizes and get rendered on the page, causing it to jump about. 

Then loading custom and unique design features, such as web fonts, can also contribute to Cumulative Layout Shift as the page prints a default before loading the custom font. Again, developers can avoid these issues by simply opting not to include embeds, multiple ad sizes, or custom features like unique web fonts. 

Publishers that want to keep this rich media in their pages can precompute and preload the space needed and the assets to prevent shifting.

Another technique is to precompute the biggest possible space for the element and let the content sit in the white space. In the example above, you can see an ad space has been reserved. The ad is smaller than the space, which would normally force the content below to resize and shift about. In this case, the page keeps the white space and the content stays still. 

You can read our full guide to getting an ultra-low CLS score here

Core Web Vitals does not spell the end of rich mobile designs 

But, just as the need to be mobile responsive led to many designs falling into familiar patterns, Core Web Vitals may create new templates, but there will still be scope for creativity. Publishers will have to put more emphasis on making every element performant in the world of Core Web Vitals, while still making up a unique and recognizable page design and UX. 

In order to stay different in a standardized landscape, publishers will have to start with an optimized platform, formats, and user experience. This will push publishers to optimize the entire structure of their sites. Ways to do this include building PWAs for lighter overall pages and web workers to move Javascript away from the main thread. 

Rather than avoiding elements or features that can lead to poor Core Web Vital scores, publishers will have to build around them. Google hopes this will lead to a user-first development style rather than a bleak landscape of dry and dull pages that load in an instant. 

At Marfeel, every page is built around the user experience. By optimizing performance, we are now able to offer publishers infinite extensibility without compromising performance factors like Core Web Vitals. To see what you can build on the Marfeel mobile platform, click here for a demo.

Latest Articles

‹ Back to Blog Home

Get the headlines

Sign up to get the best headlines direct to your inbox

Your name
Your email