What is the Most Important Feature of a Website?
This is obviously not a straightforward question…or is it?
Assuming you have designed a great-looking, helpful, and easy-to-use website that has zero mobile usability errors, no distracting ads, no security issues, and amazing content, there is a pretty simple answer to the above question: speed.
In August 2021, Google finished rolling out its Page Experience algorithm update, which included something called Core Web Vitals. These vitals include three metrics used to evaluate the speed, responsiveness, and display integrity of a website.
What are the Core Web Vital Metrics?
Largest Contentful Paint (LCP)
This metric measures the amount of time it takes to show a user the largest bit of content on the screen. This includes content only above the fold, which means anything you can see without scrolling. Examples of content measured by LCP include:
Images and image tags
Background images with CSS
Text, including paragraphs and headings
Video thumbnails
There are various ways to measure your LCP. You can measure it directly on the site (“in the field”) using Chrome User Experience Report or PageSpeed Insights.
Offsite or “in the lab,” you can use an algorithm simulator tool to measure your LCP. Some popular ones are Lighthouse and WebPage Test.
What is a good LCP score?
Ideally, you should be between 0 and 2.5 seconds. Any higher than that and you should explore ways to optimize your images and content to reduce loading speed. You can improve your LCP score by:
Resizing images and video content
Using a CDN service, like ImageEngine or CloudFlare, to improve and optimize all images
Getting rid of javascript to load images
Using a reputable host
First Input Delay (FID)
The FID measures the responsiveness of your site. Specifically, it measures the time it takes for a button, link, or other control to react once it has been clicked. Like LCP, scrolling and zooming are not calculated in this measurement.
This is an important metric in overall user experience. It puts a number on the frustration felt by users who are dealing with an unresponsive page. I high FID flags a page as unusable, which can impact rankings.
What is a good FID Score?
FID is measured in milliseconds. A good score should be 100 ms or less. The delay time is often directly related to the LCP. If the browser is busy completing another task, like loading an image or a complicated javascript file, it will increase the delay.
You can measure your site’s FID using the same tools as you would when measuring the LCP in the field (Chrome User Experience Report or PageSpeed Insights). Since you will need a real user in order to track this metric, it cannot be measured in the lab.
While you can only measure your FID in the field, you can use lab tools to improve your score. Lighthouse, for example, will run a performance audit of your site and give relevant suggestions. The reason this works is because the suggestions for reducing FID are the same as those for improving another metric, the Total Blocking Time, which is a lab metric.
Cumulative Layout Shift (CLS)
A “layout shift” happens when a visible element on the page suddenly changes position. We have all experienced this. You might go to click a certain image. The image moves and you wind up clicking something else, are redirected to another page, and are more-than-a-little annoyed.
A layout shift occurs only when an existing object changes its starting position. This is actually not always a bad thing. Artfully done animations and content shifts can actually boost engagement with your site. The key is that they must make sense and be expected.
The cumulative layout shift measures the largest burst of layout shift scores for unplanned shifts throughout the lifespan of the page.
What is a Good CLS Score?
You should be aiming for a CLS score of 0.1 or less. This score is calculated by multiplying the impact fraction by the distance fraction. The impact fraction measures the effect an unexpected object shift has on the viewport between two frames. If an element that was taking up 50% of the viewport suddenly shifts down by 15%, for example, and is now taking up 65% of the total viewport, it will have an impact fraction of 0.65.
The distance fraction measures the distance an element has moved in relation to the viewport. In the above example, an object shifted down (vertically) by 15%, so it would have a distance fraction of 0.15.
The CLS score would then be: 0.15 x 0.65 = 0.0975 (a good score)
You can improve your CLS score with a few basic techniques:
Make sure your images and videos have size attributes.
Allocate spaces for elements with CSS aspect ratio boxes. This is a great technique that gives your browser a heads up for how much space to reserve for a certain element while it is loading.
Opt for transform-type animations versus any that might result in layout changes.
Avoid adding content above existing content.
Speed Isn’t Everything, But…
When designing your website, keep the above metrics in mind. They are a means of quantifying your users’ first impressions, and first impressions ARE everything. You can have the best-looking website in the world but if users cannot interact with simple buttons or they wind up clicking a native ad instead of the link they wanted, they will go elsewhere.
In addition to great content, user experience is at the top of the list for SEO. Monitoring your core web vitals ensures a premium user experience by valuing an individual’s time and ability to interact with your site’s features.
Let Us Help
SEO is an ever-changing field and it can be daunting to try and keep up with the latest strategies. Our team at Serenity Digital is here to give you peace of mind when it comes to marketing. Let us shoulder the headache of algorithms, optimization, metrics, and all that jazz while you focus on running your business. Give us a call for your free consultation today.
No Comments