How We Have Maintained the Number of Good URLs of Core Web Vitals Above 99%

Keita Matsuura (Yahoo! JAPAN / Production Division 1, Vertical Services Group, Media Group / Engineer)

https://tech-verse.me/ja/sessions/287
https://tech-verse.me/en/sessions/287
https://tech-verse.me/ko/sessions/287

Transcript

2. Profile Title Leader of frontend engineer team Name Keita Matsuura
3. Service Service Description A service to support job changes and employment by showing reviews of employees, the reputation and salary of the company Service Name Yahoo! Japan Job Catalog URL https://jobcatalog.yahoo.co.jp/
4. Agenda - Introduction - What are Core Web Vitals? - How to improve? - How to maintain high quality?
5. Introduction 写真：WavebreakMedia/イメージマート
6. Is SEO important?
7. Yes
8. SEO Impact Page 1 Page 2 Page 10 Webpage ・ ・ ・ Search engine result page Affect number of users
9. Is UX important?
10. Yes
11. UX Impact Affect bounce rate and conversions Slow to react Low readability Not user-friendly I stopped using this site.
12. About Today's Session - Many of the improvements are simple - Core Web Vitals affect SEO and UX - Introducing the most effective
13. What are Core Web Vitals? 写真：アフロ
14. What are Core Web Vitals? - Ranking factor on SEO since June 2021 - Three metrics that score a user's experience loading a webpage
15. Three metrics of Core Web Vitals - CLS - FID - LCP *INP, that was added around May 2022 is likely to become a major indicator in the future.
16. This is the amount of time from when the webpage starts loading to the moment when the largest content visible in the viewport is displayed. That amount of time should ideally be less than 2.5 seconds. Of the three indicators, it has the most impact on SEO. LCP (Largest Contentful Paint) Source: https://web.dev/lcp/ Largest Content Webpage starts loading Largest content is visible Example
17. Images are displayed after text, but if the text is larger than the image, the text is considered as largest content. Another example of LCP Source: https://web.dev/lcp/ Largest Content Webpage starts loading Largest content is visible
18. This is an indicator to measure how much the visual elements in the viewport are moving. If the amount of movement is high, the score will be low. Intentional movement by the user, such as accordion or expand should be less than 0.5 seconds. CLS (Cumulative Layout Shift) Source: https://web.dev/cls/
19. The time from when the user performs the operation (form-type operation such as clicking a link or button) until the browser actually starts processing the event handler. This time should ideally be less than 100 ms. FID (First Input Delay) Button Nothing happens on tapping - 提供：アフロ First Input Delay is long Example
20. Yahoo! Job Catalog Status
21. From January to April at 2021 February 2021 30% April 2021 98%
22. From August to November at 2022 Mobile
23. From August to November at 2022 Desktop
24. How to improve? 写真：アフロ
25. LCP
26. Improvement for LCP How fast should the largest content be displayed?
27. Detect largest content Run [Lighthouse] under developer tools in Google Chrome
28. Detect largest content Check in [Largest Contentful Paint element] in Diagnostics
29. Improvement for LCP Browser loads the html from the top Downloads, analyses and executes JS It takes time to load the LCP element
30. Improvement for LCP Add "defer" or "async" attribute Move the script under "largest content"
31. Improvement for LCP If the largest content includes images It is difficult to know in what order the images will be downloaded
32. Improvement for LCP If the largest content includes images Set preload and download first
33. Improvement for LCP If the largest content includes images Set the image format as webp. Reduce the file size to 1/2 to 1/6. If we consider browsers that do not support webp, use the picture tag or Next.js image.
34. Improvement for LCP on server side
35. Architecture Client side Browser BFF API DB Server side
36. Improvement for LCP on server side - Shortening the response time With our service, BFF is returned to 400 ms
37. Improvement for LCP on server side BFF、API Thorough parallel processing with BFF and API Node.js example 0 500 Process1 Process2 Process3 0 500 1000 1500 Process1 Process2 Process3 (ms) (ms)
38. Improvement for LCP on server side BFF If parallel processing is not possible, request is sent to the server when approaching the display position Browser BFF 1. Main content data acquisition 2. Data acquisition on approaching by scrolling (Use Intersection Observer) Process 1 Process 2 Process 3 Process 3 ☓ Response data faster on page load
39. Improvement for LCP on server side BFF、API If the processing is time-consuming, use the memory cache BFF DB Add data First request API Redis BFF DB Get data Second request API Redis *Depending on the situation, use it for BFF.
40. Improvement for LCP on server side DB If SQL running is slow • Affix index to the table • Process data in batches to avoid executing aggregation queries (SUM, AVERAGE, etc.) as much as possible BATCH DB Index
41. Improvement for LCP on server side - Ask for help from BE engineers if it is difficult for FE engineers alone
42. CLS
43. Improvement for CLS - The elements should not move as much as possible Ex) Images, data displays acquired later, advertisements
44. Setting the height of images When determining the width and height of images set "width" and "height"
45. Setting the height of images If the height changes with the width, preset "div" that maintains the height. Ex) Image aspect ratio - Height:Width = 1:5 Padding
46. Setting the height of images Aspect ratio is easy depending on the browsers that the service supports Maintaining height
47. Data for delayed acquisition Height varies for delayed acquisition Layout Shift
48. Data for delayed acquisition Maintain the approximate height in the skeleton Almost no Layout Shift occurs
49. Unknown height Set min-height for the elements (such as advertisements) where height is unknown Contents Contents Ad Layout Shift Contents min-height Contents Ad Layout Shift has a small impact.
50. FID
51. Reason for input delay Source: https://web.dev/fid/ Main processing · Analysis of html, css, javascript · Drawing on the browser · Execution of javascript Requests for css, js, webfont, image, etc. Page request In the busy state, there will be no response even if there is input
52. Reasons why browsers tend to be busy - JS file size is large
53. JS file size analysis Source: https://www.npmjs.com/package/webpack-bundle-analyzer When handling a JS file with Webpack, use a Webpack Bundle Analyzer.
54. Webpack Bundle Analyzer Report JS file size becomes large from the top left
55. Webpack Bundle Analyzer Analysis OSS with large file size • moment • Chart.js • lodash.js Details of the report
56. Improvement for FID moment - Since the places of usage were few, it was changed to plain JavaScript implementation. - Day.js with smaller file size is also acceptable
57. Improvement for FID lodash Import of entire lodash Change to import of the function being used
58. Improvement for FID Chart.js Graph does not need to be displayed in First View Use dynamic import where JS can be downloaded when display is required (Intersection Observer is used for timing, and is activated when it gets close) Reduce JS file size in First View First View Chart
59. Dynamic import implementation Chart.js Component that wraps Chart.js Use Intersection Observer to dynamic import upon approach
60. Webpack Bundle Analyzer Results File size -70%
61. Improvement for FID In case of JS that does not use Webpack, see the diagnostic results of Lighthouse
62. Loading common unnecessary JS - JS via Tag Manager Ex) Advertisement, traffic analysis - Using unneeded functions Ex) Using of video engagement function although the extension measurement function of GA4 does not handle videos. - JS that is no longer used
63. How to maintain high quality? 写真：アフロ
64. Understanding current status Use Google Search Console. If there is a problem is Core Web Vitals, a report is displayed, and a mail is sent. Error notification Handing
65. Search Console Issues Search Console data is the data acquired from the actual user's Chrome browser in the Chrome UX Report Impact is already showing
66. How to detect in advance Lighthouse CI Tool that can execute Lighthouse automatically
67. Example of incorporation of Lighthouse CI https://github.com/GoogleChrome/lighthouse-ci Incorporating in the already-existing CI of Lighthouse 1.Implement and push the code CI/CD Tools FE Server 2.Run Lighthouse 3.Upload the report of Lighthouse 4.Assert and notify errors 5.Check the report MySQL Lighthouse Server
68. Lighthouse CI report You can know which commit went wrong Reports can be compared with each other You can see the details of the report Reducing the time to identify the cause Code can be fixed before there is any impact on users
69. Issues of human resources • Transfer of knowledgeable people • People who have just joined cannot provide support - 提供：アフロ
70. Issues of time resources • Too occupied with developing new functionalities to work on Core Web Vitals - 提供：アフロ Please implement ___ by ___ (date)
71. Solutions - Make the implementation method compact - Clearly define the implementation policies - 提供：アフロ
72. Concrete example 1 Tech Stack • React • Next.js • express(BFF) Implementation policy LCP FID CLS Next.js Image ˓ ˓ Parallel processing ˓ Delayed acquisition ˓ Skeleton ˓ Next.js dynamic import ˓ Further discussion is required when using JS with large file size ˓
73. Concrete example 2 Tech Stack • Movable Type • html • css Implementation policy LCP FID CLS preload and webp ˓ Secure the height of image ˓ loading on img tag=lazy
74. Summary 写真：アフロ
75. Summary • Core Web Vitals affect SEO and UX • Use Google Search Console to monitor the situation. • LCP and CLS are easy to deal with • Define the implementation policies • Lighthouse CI is useful
76. Thanks