Skip to content
BXM Multimedia: home

Productivity

Speed, Core Web Vitals and availability in modern website

Speed and availability should be assessed during real activities. We explain how to combine Core Web Vitals indicators with the attempts to use the site and control changes after publication.

The modernity of the site is best assessed not by the number of effects, but by the quality of use. The user should quickly see the content, no problem clicking on the right element and avoid shifting the layout. Availability extends this principle in various ways of using the internet.

What Core Web Vitals Measure

LCP evaluates the display time of the main element, the INP response of the site to interactions, and CLS stability of the system. Results are best analysed on real data and for specific types of subpages.

A single result from the laboratory is a clue, not a full image. The site may operate differently on a slower phone, with a weaker network or after accepting additional scripts.

The most common sources of problems

Too large images, inappropriate formats, blocking fonts, excess JavaScript and heavy external tools delay the first content. No image dimensions and late inserted banners cause redeployment.

The improvement starts with simplification, not with another plugin. We set the efficiency budget for the template and consciously choose integrations.

Availability is part of the project

Semantic headers, proper labels, visible focus, contrast and keyboard support help people using assistive technologies. They also improve overall readability and interface resistance.

An automatic test is not enough. Forms, menus, modals and error messages require manual verification.

Images, fonts and movement

We export images in the size corresponding to the presentation and choose a modern format. An important image of the first screen should not be loaded lazyly, and others can use the lazy loading.

Animation is intended to support orientation. We take into account the preference for limited movement and avoid effects that obscure content or delay action.

Quality control process

We test key templates on your phone and computer, at different states of content. After publication we observe field data, errors and real user behaviour.

Productivity and availability can deteriorate after adding new modules, so they should be checked periodically, not only on premiere day.

Checklist

  • Set the main LCP element for each template.
  • Enter image dimensions and limit external scripts.
  • Check the menu and forms with the keyboard itself.
  • Take care of contrast, focus and error messages.
  • Monitor the real user data after publication.

Read the thresholds together with the measurement method

Documentation web.dev gives good values: LCP to 2.5 seconds, INP to 200 milliseconds and CLS to 0.1. The rating refers to the 75th percentile of user experience rather than to one best run test.

In practice, first determine what the data relate to: a specific address or a wider group, telephone or computer, laboratory measurement or customer visits. Comparing results with different conditions may lead to a mistaken conclusion that the amendment has helped or harmed.

Check what happens after the first screen

The page can quickly show the header, and then react with delay to open the menu or change the filter. Another problem is the item that moves the text while reading. Therefore, the test should not end with loading the address.

  • Open the menu and go through the items by keyboard.
  • Change the filter or product variant several times.
  • Call form error and correct the data.
  • See if the supercharged content is picking up the space you have just read.

Any of these attempts may reveal a problem unseen on the motionless drop of the site.

Specify the conditions for comparison before amendment

Keep the address, content and description of the test conditions. If you change the main image, check the same template before and after implementation. With several simultaneous changes it is harder to determine which affected the result. The actual visit data may also need time to reflect the new version.

Include control in the editorial work

The efficiency may deteriorate after adding a large film, and readability after pasting an unordered text. Short instructions on the size of materials and the way publication helps prevent such situations. The team should know when to improve the content themselves, and when to report the template problem. A good measurement result is a useful indication, but it does not replace checking that the recipient can comfortably perform his task.

The most common questions

Does Lighthouse's good score guarantee speed?

No. This is a laboratory measurement; it should be combined with the actual data of users.

Does accessibility help SEO?

Many practices improve semantics and experience, but accessibility should be implemented primarily for users.

Do you need to remove all animations?

No. They should be light, deliberate and respect the preference for limited traffic.

Related BxM guides

BxM · From reading to action

Do you have any ideas for a change?

Tell us what you want to improve on your website. Together we will determine which changes should be planned first.