How CLS optimizations increased Yahoo! JAPAN News's page views per session by 15%

2021-03-09T00:00:00Z

Yahoo! JAPAN is one of the largest media companies in Japan, providing over 79 billion page views per month. Their news platform, Yahoo! JAPAN News has more than 22 billion page views per month and an engineering team dedicated to improving the user experience.

By continuously monitoring Core Web Vitals (CWV), they correlated the site's improved Cumulative Layout Shift (CLS) score with a 15% increase in page views per session and 13% increase in session duration.

0.2

CLS improvement

15.1_%

More page views per session

13.3_%

Longer session duration

Page content moving around unexpectedly often causes accidental clicks, disorientation on the page, and ultimately user frustration. Frustrated users tend not to stick around for long. To keep users happy, the page layout should stay stable through the entire lifecycle of the user journey. For Yahoo! JAPAN News this improvement had a significant positive impact on business critical engagement metrics.

For technical details on how they improved the CLS, read the Yahoo! JAPAN News engineering team's post.

Identifying the issue #

Monitoring Core Web Vitals, including CLS, is crucial in catching issues and identifying where they're coming from. At Yahoo! JAPAN News, Search Console provided a great overview of groups of pages with performance issues and Lighthouse helped identify per-page opportunities to improve page experience. Using these tools, they discovered that the article detail page had poor CLS.

Google Search Console Core Web Vitals Report.

Lighthouse "Avoid large layout shifts" audit shows which elements are contributing to CLS score and how much.

It's important to keep in mind the cumulative part of the Cumulative Layout Shift—the score is captured through the entire page lifecycle. In the real-world, the score can include shifts that happen as a result of user interactions such as scrolling a page or tapping a button. To collect CLS scores from the field data, the team integrated web-vitals JavaScript library reporting.

The team used Chrome DevTools to identify which elements were making layout shifts on the page. Layout Shift Regions in DevTools visualizes elements that contribute to CLS by highlighting them with a blue rectangle whenever a layout shift happens.

Visualized layout shifts.

They figured out that a layout shift occurred after the hero image at the top of the article was loaded for the first view.

Layout shift on the article detail page.

In the example above, when the image finishes loading, the text gets pushed down (the position change is indicated with the red line).

Improving CLS for images #

For fixed-size images, layout shifts can be prevented by specifying the width and height attributes in the img element and using the CSS aspect-ratio property available in modern browsers. However, Yahoo! JAPAN News needed to support not only modern browsers, but also browsers installed in relatively old operating systems such as iOS 9.

They used Aspect Ratio Boxes—a method which uses markup to reserve the space on the page before the image is loaded. This method requires knowing the aspect ratio of the image in advance, which they were able to get from the backend API.

Left: reserved blank space for the image at the top of the page; right: the hero image loaded in the reserved space without layout shifts.

Results #

The number of URLs with poor performance in Search Console decreased by 98% and CLS in lab data decreased from about 0.2 to 0. More importantly, there were several correlated improvements in business metrics.

Search Console after improvements.

When Yahoo! JAPAN News compared user engagement metrics before and after CLS optimization, they saw multiple improvements:

15.1_%

More page views per session

13.3_%

Longer session duration

1.72_%*

Lower bounce rate (*percentage points)

By improving CLS and other Core Web Vitals metrics, Yahoo! JAPAN News also got the "Fast page" label in the context menu of Chrome Android.

"Fast page" label in Chrome on Android.

Layout shifts are frustrating and discourage users from reading more pages, but that can be improved by using the appropriate tools, identifying issues, and applying best practices. Improving CLS is a chance to improve your business.