Introduction

Hello. Thank you for reading this article!

My name is Nakamoto, and I work on developing the frontend forKINTO FACTORY (hereafter FACTORY), a service that enables users to upgrade their current vehicles.

This time, I would like to introduce a case where we improved page performance (CWV) by utilizing Kaizen DAY that was implemented in the FACTORY Development Group and the internal frontend study sessions

Kaizen DAY and Frontend Study Sessions

Kaizen DAY

In the FACTORY Development Group, we made it a practice to ticket technical debts and non-urgent tasks noticed during project development, keeping them in the backlog so they wouldn’t be forgotten. As this practice went on, daily project development rarely paused, causing the improvement tasks to accumulate in the backlog, eventually pushing the total number of tickets to over 100.

As a result, during Scrum retrospectives, concerns were raised about leaving those improvement tasks unattended. So, as a team, we launched an initiative to dedicate one afternoon each week solely to addressing them, blocking that time in Outlook to prevent meetings from other departments.

This time, we decided to use Kaizen Day to focus on improving page performance that we hadn’t been able to tackle until now, which is measured using CWV (Core Web Vitals) scores.

Frontend Study Sessions

Additionally, we hold a weekly volunteer-led frontend study session where participants choose the topics. These include watching past event presentations together to share insights, reviewing baselines from past to present, exchanging frontend techniques, and sharing practical knowledge about actual development products and processes.

I began considering how the outcomes of our study sessions could be applied to actual services, and proposed 'FACTORY performance improvement' as a potential topic. All members coordinated their schedules to review the FACTORY page together, conducting two live verification sessions.

We worked on the following.

• Checked the current scores using the browser's Lighthouse (setting network and CPU throttling as appropriate)
• Reviewed improvement proposals for each score
• Blocked analysis tags and other elements unrelated to page rendering to check performance differences
• Checked more detailed browser behavior with a performance tab.
• Checked layout shifts from captured images

Through these actions, we were able to clarify how to use the verification tools provided by the browser and identify where the improvement points are.

:::message For more details about the frontend study session, please also check this article! :::

Score Improvement

From here, I will introduce how we progressed with score improvement by utilizing the insights gained from the study sessions.

Core Web Vitals (CWV) are indicators for measuring page performance, which can be classified into the following three metrics.

• Largest Contentful Paint (LCP): Measures how quickly the main content of the page loads
• Interaction To Next Paint (INP): Evaluates the responsiveness of the page to user interactions
• Cumulative Layout Shift (CLS): Measures the visual stability of the page

Due to the nature of FACTORY's services, there are strict constraints on product and vehicle images (due to strict color specifications, etc.), making it difficult to change static content (such as image compression), so we first focused on CLS, which can be improved just by changing the content layout on the page.

• Referencing Google Search Console, checked which pages had poor CLS scores
• Created static pages using SSG to eliminate loading screens during API access on the client side
• Looked for areas where height shifts before and after loading content such as images

In practice, we examined pages with poor CLS scores using the browser’s Performance tab, and systematically addressed each area causing layout shifts while reviewing the screen captures.

Among them, the CLS occurring on the TOP page took a particularly long time to identify. Even when viewed with an analysis tool as shown below, it was not immediately clear where the layout shifts were occurring.

However, upon checking the relevant images, I noticed that contain-intrinsic-size was defined in CSS. It seems that this property is relatively new, and in unsupported browsers, the image size is not set correctly, causing layout shifts.

Instead, by changing the fixed image size to aspect-ratio and setting the aspect ratio, we were able to eliminate layout shifts.

Results

This time, I would like to reflect on both the efforts made on Kaizen DAY and the actual CWV scores.

Ticket Resolution on Kaizen DAY

The following charts show the number of resolved tickets on the board summarizing the improvement tickets. Around April, we introduced the 'Kaizen DAY' system, with the red line in the graph indicating tickets added during the period (one month) and the green line indicating completed tickets.

April ticket resolution	June ticket resolution

The above results are for the entire team, and it can be seen that the completion of improvement tasks is steadily increasing. Recently, the company has been actively incorporating AI into development. Many of these improvement tasks are straightforward but involve frequent context switching, making them cumbersome for humans to handle and therefore well-suited for delegation to AI.

Given this aspect, it can be understood that despite ongoing development of feature additions and other projects, there is a solid commitment to the improvement activities as mentioned above.

CWV Scores

Now, let's reflect on how the CWV scores, which are the theme of this discussion, have improved before and after the improvement activities.

PCスコア

モバイルスコア

The graphs above show the changes in performance scores for individual URLs, which can be checked in Google Search Console.

For both PC and mobile, the number of good URLs (green) has increased, and the number of bad URLs (red) has decreased or dropped to zero, leading to performance improvements on the majority of pages. There are still some URLs that need improvement(yellow), but these do not seem to be solely the result of the CLS scores addressed this time. We plan to work on improving those other metrics in the future.

Summary

This time, I presented a case in which we improved the page scores (CWV) of FACTORY by using Kaizen DAY implemented in the FACTORY development group and internal frontend study sessions.

In our day-to-day project work, deadlines and other constraints often lead us to postpone addressing technical debt. However, I intend to continue making use of Kaizen DAY to prevent such debt from accumulating. Through internal study sessions, I can gain valuable insights and improvement ideas from other products and services under development. By applying these ideas effectively, I hope to continuously improve and ensure the stable operation of FACTORY’s services.