This is the third instalment of our Core Web Vitals series, with the first providing an overview and the second article detailing the metrics involved in delivering a great user experience on the web.

Here at Novagram, we use a handful of Google-created tools to measure Core Web Vitals. These measurement tools are vital to improving user experience and overall site performance.

PageSpeed Insights

PageSpeed Insights is one of Google’s most significant performance testing tools for measuring Core Web Vitals. PageSpeed Insights provides a score report on performance, accessibility, best practices and SEO. We use PageSpeed Insights to determine what aspects of a website need improvement and take actions to boost scores where possible.

Each category within the report is measured using the following score methods:

  • 0 to 49 (red): Poor
  • 50 to 89 (orange): Needs Improvement
  • 90 to 100 (green): Good

It’s also important to note that outside factors such as server speed, website testing location and Google’s testing devices can also affect performance scores. This is why you might see one score today and a different score tomorrow.

Reviewing and improving performance scores for our own website, novagram.com

How the Performance score is weighted

Overall performance scores are measured using the Lighthouse scoring calculator. The metric scores are not visible in the report, but are instead measured in the background. The performance score weight ratios for the current version of Lighthouse (v10) are defined below:

AuditWeight
First Contentful Paint10%
Speed Index10%
Largest Contentful Paint25%
Total Blocking Time30%
Cumulative Layout Shift25%

Desktop vs mobile

The Lighthouse score varies for desktop and mobile. A website will nearly always score higher on desktop due to parameters such as device performance and connection. This means that to achieve a good desktop score, you can almost certainly focus on meeting the mobile score requirements first.

In practice

For one of our client projects, The National Tutoring Programme, we had to design and develop a website that was compliant with Web Accessibility Content Guidelines (WCAG 2,1), be fully user-editable and achieve a performance score of at least 90 (out of a maximum of 100) on Google’s PageSpeed Insights test. The result was a website that performed a perfect score on accessibility, SEO and best practices, and boasted 94/100 on performance.

We are Novagram, a UK creative agency
specialising in branding, design and digital development