The impact on Core Web Vitals by redesigning Cameranu
Cameranu's redesign went into effect in early March. A lot of effort went into it, besides the new style and layout, the developers also tried to improve the core web vitals of the site. Of course, Cameranu was interested in seeing if it worked out and if there were any improvements or declines.
Monitoring the Core Web Vitals
Cameranu started their investigation by using the metric table. By using the display option: "show all” they were able to easily identify the outliers. As an example, looking at the image provided below, you can see a great increase in Cumulative Layout Shift (CLS) for the home page and “other” pages but a decline in CLS for the listing page.
- The homepage CLS improved by 95.3%
- The listing CLS declined by 38%
- The other pages (informational) improved by 60.1%
Informing the stakeholders
After finding some outliers, Cameranu wanted to inform their stakeholders. Of course, not every stakeholder is interested in the nitty-gritty of things. So Cameranu tried making it interesting for all, not only for developers. Fortunately, RUMvision had them covered.
Cameranu wanted to start simple, they did this by showing the overall improvement in User experience and First User Experience scores.
UX and FUX score before the redesign
UX and FUX score after the redesign
Improved Core Web Vitals for Cameranu
To zoom in on specific metrics, Cameranu used annotations. By using this, Cameranu was able to show the trends before and after the rebranding (see image below). Another way to convey the message was by using the “show thresholds” option. This shows if a metric performs well, could use some improvements, or is performing badly.
- You can compare before and after the annotation was made, in this we compared 14 days before the redesign and 14 days after the redesign.
- This showed an improvement of 26.9% of the Largest Contentful Paint (LCP) for all templates combined
- This means that the LCP went from 2357 ms to 1722 ms. The Core Web Vitals threshold for the LCP is 2500ms.
Core Web Vitals metric per template
To zoom out again, Cameranu used the compare option which is easy to understand in a single eyesight. Problems here are very notable, like the decrease in the CLS of the listing page in the picture below.
When comparing a dashboard with all the Core Web Vitals metrics and more will show up. The improvement or deterioration in percent will be shown per metric. This dashboard and its visualization of it made it easy to show less technical stakeholders that we're doing great on page speed.
By using these tools, Cameranu was able to convey the improvements to its shareholders and possible problems to solve for its developers.
The future of Core Web Vitals monitoring
After the presentation given by Jan Ruben de Wilde about the metrics, Cameranu is committed to helping their developers keep improving the website. Besides monitoring improvements, we also use RUMvision to analyze Core Web Vitals. For this, we mainly use filters to investigate which elements give a long LCP value or, on the contrary, elements that cause shifts. But even looking at new marketing campaigns and their impact on performance is something we do.
Finding Core Web Vitals optimizations
As mentioned above, we use filters to find out which specific element is the LCP on a given template. This is also how we found out that there is not just one LCP element. RUMvision shows this in the following way:
This screenshot is from before the optimizations, but we were able to remove the lazyload tag from the image so that the LCP improved. Even though a redesign was coming, this was still a worthwhile improvement. Because in this way, the months before the redesign had improved the user experience.
Finding CLS optimizations
As with the LCP, we can find optimization opportunities for the CLS that can be fed through to development. Or even spotted directly when a developer is hooked into RUMvision. Now, we know that currently listing page users are still suffering from a shift, however, this is soon on the roadmap to be resolved so that no more user frustration can occur.
Debugging and finding the element that is causing a layout shift is easy and works just like the LCP.
Conclusion
By using the tools that RUMvision provides, such as annotations, comparing tools, display options, and thresholds, Cameranu was able to easily convey the improvements and declines in metrics to not only the developers of the website but also stakeholders with less experience in core web vitals.
