The main focus for this month’s Melbourne Drupal Meetup was a presentation by Shivan Jaikaran. Shivan shared how the web-vitals.js library can help monitor and enhance core web vitals in real-time.
Improving core web vitals with web-vitals.js: presentation summary
This presentation provided an in-depth overview of core web vitals, a set of key performance metrics defined by Google that influence user experience and search engine rankings. Shivan explained that core web vitals encompass metrics like Largest Contentful Paint (LCP), First Input Delay (FID), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). These metrics capture how users perceive the loading speed, interactivity, and visual stability of a webpage. Shivan emphasized the significance of these metrics not just for technical performance but also for their impact on SEO, as Google uses them as ranking signals.
Leveraging web-vitals.js for real-time monitoring and ebugging
Shivan introduced the web-vitals.js library as a powerful tool for tracking and improving core web vitals in real-time. Unlike traditional methods that rely on simulated lab data, this JavaScript library collects field data, offering insights based on actual user experiences. Shivan highlighted how web-vitals.js allows developers to send performance data to Google , , or Data , enabling detailed analysis and visualization. He demonstrated how the library provides granular insights, such as identifying specific elements on a page that negatively impact performance metrics like LCP or CLS. This real-time feedback loop helps developers address issues more quickly, avoiding the delays associated with waiting for monthly updates from tools like the Chrome User Experience Report (CrUX).
Practical implementation and benefits
In his demonstration, Shivan walked attendees through the setup and practical application of web-vitals.js on a live website. He showed how the library can be integrated with existing analytics tools to provide continuous monitoring and how it can be configured to block or flag changes in a CI pipeline if they negatively impact core web vitals. This proactive approach allows teams to maintain high performance standards and optimize the user experience before issues escalate. Shivan also discussed the challenges of interpreting certain metrics, such as INP, and the importance of balancing lab and field data in performance analysis. The session concluded with a Q&A, where Shivan addressed questions about the practicalities of implementing web-vitals.js and its comparison to other tools like Chrome Lighthouse.