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

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Profile Title Leader of frontend engineer team Name Keita Matsuura

Slide 3

Slide 3 text

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/

Slide 4

Slide 4 text

Agenda - Introduction - What are Core Web Vitals? - How to improve? - How to maintain high quality?

Slide 5

Slide 5 text

Introduction 写真：WavebreakMedia/イメージマート

Slide 6

Slide 6 text

Is SEO important?

Slide 7

Slide 7 text

Yes

Slide 8

Slide 8 text

SEO Impact Page 1 Page 2 Page 10 Webpage ・・・ Search engine result page Affect number of users

Slide 9

Slide 9 text

Is UX important?

Slide 10

Slide 10 text

Yes

Slide 11

Slide 11 text

UX Impact Affect bounce rate and conversions Slow to react Low readability Not user-friendly I stopped using this site.

Slide 12

Slide 12 text

About Today's Session - Many of the improvements are simple - Core Web Vitals affect SEO and UX - Introducing the most effective

Slide 13

Slide 13 text

What are Core Web Vitals? 写真：アフロ

Slide 14

Slide 14 text

What are Core Web Vitals? - Ranking factor on SEO since June 2021 - Three metrics that score a user's experience loading a webpage

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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/

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Yahoo! Job Catalog Status

Slide 21

Slide 21 text

From January to April at 2021 February 2021 30% April 2021 98%

Slide 22

Slide 22 text

From August to November at 2022 Mobile

Slide 23

Slide 23 text

From August to November at 2022 Desktop

Slide 24

Slide 24 text

How to improve? 写真：アフロ

Slide 25

Slide 25 text

LCP

Slide 26

Slide 26 text

Improvement for LCP How fast should the largest content be displayed?

Slide 27

Slide 27 text

Detect largest content Run [Lighthouse] under developer tools in Google Chrome

Slide 28

Slide 28 text

Detect largest content Check in [Largest Contentful Paint element] in Diagnostics

Slide 29

Slide 29 text

Improvement for LCP Browser loads the html from the top Downloads, analyses and executes JS It takes time to load the LCP element

Slide 30

Slide 30 text

Improvement for LCP Add "defer" or "async" attribute Move the script under "largest content"

Slide 31

Slide 31 text

Improvement for LCP If the largest content includes images It is difficult to know in what order the images will be downloaded

Slide 32

Slide 32 text

Improvement for LCP If the largest content includes images Set preload and download first

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

Improvement for LCP on server side

Slide 35

Slide 35 text

Architecture Client side Browser BFF API DB Server side

Slide 36

Slide 36 text

Improvement for LCP on server side - Shortening the response time With our service, BFF is returned to 400 ms

Slide 37

Slide 37 text

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)

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Improvement for LCP on server side - Ask for help from BE engineers if it is difficult for FE engineers alone

Slide 42

Slide 42 text

CLS

Slide 43

Slide 43 text

Improvement for CLS - The elements should not move as much as possible Ex) Images, data displays acquired later, advertisements

Slide 44

Slide 44 text

Setting the height of images When determining the width and height of images set "width" and "height"

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Setting the height of images Aspect ratio is easy depending on the browsers that the service supports Maintaining height

Slide 47

Slide 47 text

Data for delayed acquisition Height varies for delayed acquisition Layout Shift

Slide 48

Slide 48 text

Data for delayed acquisition Maintain the approximate height in the skeleton Almost no Layout Shift occurs

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

FID

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Reasons why browsers tend to be busy - JS file size is large

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

Webpack Bundle Analyzer Report JS file size becomes large from the top left

Slide 55

Slide 55 text

Webpack Bundle Analyzer Analysis OSS with large file size • moment • Chart.js • lodash.js Details of the report

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Improvement for FID lodash Import of entire lodash Change to import of the function being used

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Dynamic import implementation Chart.js Component that wraps Chart.js Use Intersection Observer to dynamic import upon approach

Slide 60

Slide 60 text

Webpack Bundle Analyzer Results File size -70%

Slide 61

Slide 61 text

Improvement for FID In case of JS that does not use Webpack, see the diagnostic results of Lighthouse

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

How to maintain high quality? 写真：アフロ

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

How to detect in advance Lighthouse CI Tool that can execute Lighthouse automatically

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Issues of human resources • Transfer of knowledgeable people • People who have just joined cannot provide support - 提供：アフロ

Slide 70

Slide 70 text

Issues of time resources • Too occupied with developing new functionalities to work on Core Web Vitals - 提供：アフロ Please implement ___ by ___ (date)

Slide 71

Slide 71 text

Solutions - Make the implementation method compact - Clearly define the implementation policies - 提供：アフロ

Slide 72

Slide 72 text

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 ˓

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Summary 写真：アフロ

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Thanks