Written on the 16th of June 2024.

Improving the core web vitals of the NC-CMS2

As a developer at NC-Websites, my primary task has been working on the development of our content management system, the NC-CMS2. This platform was designed to overcome the limitations of its then already 13-year-old predecessor. One of my proudest achievements in this journey has been the significant improvement in the average web vital scores across various performance categories. This article details the strategies and efforts that led to these improvements, along with changes in our processes to ensure sustained quality and performance.

What is the NC-CMS2

The outdated platform we previously used posed numerous challenges, including repetitive tasks, complex maintenance, and a lack of user-friendliness. These issues highlighted the need for a modern, efficient solution, prompting the development of NC-CMS2. Our goal was to create a system that streamlined updates, improved layout reuse, and provided a solid foundation for future development.

Together with my colleagues, we embarked on creating a content management system that would not only address the existing issues but also incorporate the lessons learned over the years. Key features of NC-CMS2 include a flexible system for creating page categories with customizable fields, a user-friendly page editing system, and various custom applications such as registration, ordering, and reservation systems. These applications seamlessly integrate with external tools like CRMs and accounting software, enhancing the system's versatility.

The improvements made

One of my key contributions has been optimizing content presentation to create a more dynamic and engaging user experience. By utilizing my technical expertise, I helped elevate the standards of our websites, ensuring they were not only visually appealing but also functionally a joy to use.

A significant milestone in our journey with NC-CMS2 has been the improvement of the web scores, which measure various aspects of web performance. One of the tools we chose to benchmark our efforts was Google's Lighthouse. Lighthouse allows developers and stakeholders to get an idea of the expected user experience of a webpage as well as point out problems that can be solved to improve the user experience. Through targeted optimizations and process improvements, we achieved the following enhancements:

• SEO improved on average by well over 20%.
• Best practices score improved on average by more than 25%.
• Accessibility improved on average by close to 50%.
• Performance score improved on average by nearly 75%.

Measurements and methodology

To measure these improvements, I used the tool Unlighthouse. It allows users to run the Lighthouse suite of tests not on a single webpage at a time but in rapid succession. The benefit is that you can get a more holistic idea of the website, ensuring that one poorly performing page isn't missed.

I tested up to the first 200 webpages listed in the sitemap of a website. The tests were run with the throttling setting enabled and ensured all scores were measured on the same device. While the sample size is unfortunately small due to time constraints, the improvements have been significant and indicative of the overall enhancements made to the platform.

How we achieved better core web vitals

I started out by measuring several webpages made on the new platform with tools such as Lighthouse. Based on the information learned from these results, I began researching what problems were affecting the user experience as well as different ways to solve them. Because I was working on the core of our product, any improvements made were likely to apply to all existing websites on the new platform.

Adding indices and unique constraints to tables in the database helped reduce the time each query took, and together with caching data retrieved from it, I was able to reduce the time to the first byte. The database was often hit with complicated queries as well as with the same exact information as before, even within the same request. By ensuring database requests are quick and stored temporarily, I was able to more than halve the render time of the webpage.

Asset bundling and minification were also critical to reduce the total load time of the website. Previously, the browser had to request many different assets from the same site as well as from external CDNs. This not only made for a complicated puzzle of "what is loaded and ready to use when," but it also created unnecessary overhead for which the user had to sit and wait. Most code for the content management system was split into two bundles: one for visitors and another for editors of the website. The build step that I put together has been a key contribution to reducing the time until a webpage is ready to be used.

Automatic image scaling has also helped reduce the overall size of a webpage, meaning there is less for the browser to load. I built a system that allows us to specify the MIME type, width, height, compression, as well as plenty of other information about an uploaded image. It will then dynamically convert, crop, and compress this for the browser to receive. This means that all a front-end developer has to do is indicate the ratio of the viewport the image takes up. The content management system will then dynamically add srcset attributes for the image, as well as the modern format WebP with additional fallbacks for legacy support.

Because we were now able to dynamically change the images, we could also add a width and height to the tags that load them in. This means that browsers will be able to expect what size to reserve for it, reducing the cumulative layout shift. It allows for a pleasant user experience where content does not shift during loading.

Those were just some of the improvements I was able to make compared to earlier versions of the content management system. But the changes were not limited to the product alone; our processes have also evolved. I now perform a quick review before any website goes live, ensuring adherence to our company standards. This review goes beyond a simple Lighthouse check, incorporating several other tools and leveraging my years of experience as a developer.

As targets increase, we are committed to continuous improvement. While significant progress has been made, especially in terms of performance, we recognize that there is still much to gain. The core web vital scores, though not directly correlated to user experience, provide a good indicator of where further improvements can be made. Our commitment to leveraging these insights ensures that we will continue to enhance the quality and performance of NC-CMS2. With these systems in place, we hope to provide more trust to our customers and highlight our years of experience and dedication.

Further reading

You can also learn about the NC-CMS2 here, as well as what exactly I do as a full stack developer at NC-Websites, or read the the explanation of the CMS at: Uitleg NC-CMS2.