Angular: Google’s Front-End Framework that Google Doesn’t Recognise

What it is and how to improve the first parameter of the new Google Web Core Vitals

The revolution labelled Google Page Experience for a better User Experience, which has kept the most clued-up webmasters who take care of   marketing and online sales awake at night for months, is about to become a reality.  The algorithm update, which was announced last year, kicks off in May 2021, unleashing Google’s new metrics for ranking sites in their search engine results.

The new parameters introduced in the Google Page Experience update principally deal with Core Web Vitals and aim to measure the key elements which influence the real user experience during a browsing session (they are not based on simulations but on real data generated from website use by real users).  If one, or worse still, none of these parameters are optimized, the consequences can be dire for a website’s ranking position and consequently, will negatively impact not only ecommerce businesses, but  all businesses.

In fact nowadays, the web is the starting point for the customer journey for almost all types of products irrespective of whether the end purchase is made online or offline. This growing trend in shopping habits is supported by numerous studies, and the pandemic has further driven this behavior. Optimizing the user experience is thus vital for any marketing campaign to be a success. But there is no need to panic:  many easily-applicable plugin solutions are available to fix and prevent root problems without touching a site’s architecture and code.  

The Core Web Vitals: what they are and how they work

There are three new Core Web Vitals, the first being Largest Contentful Paint.  However, before going into more detail on advice for optimization for a user’s better UX, let’s run-through them quickly. 

The main new parameters introduced by Google are as follows:

  • Largest Contentful Paint (LCP): it measures the render time of the largest image or text block visible within the viewport, relative to when the page first starts loading.
  • First Input Delay (FID): it measures how quicky a site responds to a user’s first interaction.  It considers the time taken between when a user first interacts with a page in any way (i.e. when they click on a link, tap on a button etc.)  to the time it takes the browser to actually be able to begin processing event handlers in response to that interaction.
  • Cumulative Layout Shifts (CLS): is the sum of all the individual movement of visible elements on the viewport during loading.  This factor basically measures a page’s visual stability while loading content, be it text, images or videos.  

Google considers each one of these factors as of equal and fundamental importance in its evaluation of the user experience. Ultimately, this means providing a correct, fluid and pleasant use of site content to achieve a good score for ranking purposes. But it is no accident that Largest Content Paint, which essentially analyzes and measures a page’s loading speed, comes first on the list. While they are all vital, LCP is perhaps the parameter which has the greatest impact on website visitors as, from a chronological point of view, it is the first feature they experience when they land on the page.

What Contentful Paint is and how it is measured

In fact, the shorter the waiting time and thus the quicker the loading time, the better the user’s page experience.  Inversely, the longer the times, the more likely users are to abandon the site regardless of the quality of page contents, whether they be text or images. Unfortunately, this is something we can all relate to in our daily lives. Loading speed is thus the entry factor:  neglecting it or choosing not to optimize it will have a devastating effect on any marketing strategy.

From a technical point of view, it can be said that LCP analyzes and evaluates the time needed to render the biggest element on a user’s display be it on a mobile device or desktop. This obviously refers to visible content because this is what determines a user’s perception of how quickly a website or single page they have visited loads.  

But what is meant by visible element? They are outlined in the following category:

  • Elements with background images loaded with CSS
  • Elements which contain text nodes
  • Images
  • Videos

The metrics introduced by Google for classifying loading times, thus LCP, are as follows:

  • Goodexcellent user experience when loading time is less than or equal to 2.5 seconds for at least 75% of page loads
  • Needs improvementabove 2.5 seconds but less than or equal to 4 seconds for at least 75% or more of page loads.
  • Poor user experience– when it takes more than 4 seconds for a page load.

In addition, there are other metrics which are measured during page loading and must be taken into consideration: They are as follows: 

First Paint (FP) refers to the point when the browser renders the first bit of content, including those   pages without visible content. 

First Contentful Paint (FCP) refers to the point when the browser visualizes text or images for the first time, thus measuring   the time it takes a browser to receive its first byte of a visible element of the web page.

What slows down LCP, why it occurs and how to fix it

There are various field and lab tools available for measuring these factors such as Chrome User Experience Report, PageSpeed Insights, Search Console (essential web signals report) and JavaScript web vitals for field. Instead, Chrome DevTools, Lighthouse, WebPage Test can be used for the lab.

But what actually slows down Largest Contentful Paint? And to the point, more importantly, how can it be sped up? Google experts outline that simplifying load speed of page content boils down to four main factors. These factors, which can work separately or in combination with each other are:

    • Slow Server response times
    • Render-blocking Java Script and CSS
    • Slow resource load times
    • Client-side rendering 

Without going into too much detail, it is evident that these factors require important interventions on HTML codes, JavaScript and CSS, or image optimization at the very least. Such interventions are slow, expensive and invasive. However, they can be easily avoided by inserting a layer such as the iSmartFrame between the server and the browser to speed up and optimize page loading time without interfering with the site’s contents and resources.

The layer operates between the user’s server and browser, minimizing site problems and maximizing the user experience. This enables LCP to meet the parameters set by Google. On a closer look, they are not so stringent if you consider the huge impact they have.  In fact, the same Mountain Valley researchers on thinkwithgoogle.com calculate the there is a +123% increase in bounce risk on mobile if loading time increases from 1 to 10 seconds and a 95% drop in conversions if there is an increase in the number of elements on a page.

In short, clients may not be so clued-up on the technical aspects of Core Web Vitals and how they impact on organic traffic performance and sales for search engine ranking for UX.  But they do know how to distinguish between a satisfactory user experience to be repeated again and a bad user experience to immediately escape from and avoid in the future.  Once again, the effects on web traffic and revenue are blatantly obvious.  This is why the more prudent webmasters and marketing managers have not taken the new algorithms lightly: they are fully aware of how deadly they can be.   

Ti potrebbe interessare

Increase a website’s loading speed: the new challenge launched by Google

Increase a website’s loading speed: the new challenge launched by Google

Speed ​​in business has always been important, and the stories of successful entrepreneurs are full of quickly gained insights which are then executed just as quickly. Well, now more than ever speed has become the business driver, and one of such aspects was rather underestimated until a few years ago: the corporate website’s loading times. If until 2010 having a slow site was normal and did little damage, if not to the visitor’s patience and the user experience, today it has to be avoided at all costs, especially for a company focusing on e-commerce (which does not only means managing an e-store).

read more
User experience: why it is increasingly crucial for the success of an e-commerce

User experience: why it is increasingly crucial for the success of an e-commerce

Do you know the first rule for e-commerce? Here it is: “if users can’t find a product, they cannot even buy it”. Full stop. And breaking this simple rule is easy, even without knowing it. You only need an item poorly displayed in the digital showcase, described with insufficient information or hard to reach due to a slow website, to blow up even the most refined branding, marketing and communication strategies.

read more