No content

Masanari Hamada / Yahoo! JAPAN - 11/12th generation web-frontend area KURO-OBI (Black belt) - Tech Lead in the video business area of Yahoo! JAPAN - Lead in Web Performance Working Group of Yahoo! JAPAN

We have been working to improve web performance across all Yahoo! JAPAN services. ࢲୡ͸ϠϑʔશࣾͰʮWebύϑΥʔϚϯεվળʯͷऔΓ૊ΈΛ࣮ࢪ͍ͯ͠·͢ɻ

Result: After Improvement… Percentage of services faster than benchmark in Yahoo! JAPAN web services. ࣗࣾͱϕϯνϚʔΫαʔϏεͰύϑΥʔϚϯεείΞΛൺֱ͠ߴ଎Ͱ͋ΔαʔϏεͷׂ߹ 38% 62% Yahoo! JAPAN Other 17% 83% Yahoo! JAPAN Other ※ Compare CWV performance scores from specific environments on the mobile web

98.3% (PC / Mobile) 98.5% (PC)

Agenda - 1. Background ࣮ࢪͨ͠എܠ - 2. Details of improvements ԿΛվળͨ͠ͷ͔ - 3. How we approach the entire company େ͖ͳ૊৫ͰͷऔΓ૊Έํ

1. Background ࣮ࢪͨ͠എܠ

ϖʔδͷϢʔβʔମݧ͕GoogleͷݕࡧϥϯΩϯάʹӨڹ͢Δ “Page experience signals would be included in Google Search ranking.” - Google Search Central Blog 2021 ※ https://developers.google.com/search/blog/2020/11/timing-for-page-experience Loading (LCP) Interactivity (FID) Visual Stability (CLS) Search signals for page experience

This means Increased importance of UX. From now on, web services will require “comfortable user experience” as a matter of course. ࠓޙͷWebαʔϏε͸ʮշదʹૢ࡞Ͱ͖Δ͜ͱʯ͕౰વͷΑ͏ʹٻΊΒΕ͍ͯ࣌͘୅ʹɻ

Should provide a good experience Ͳ͜ͱΓ΋ྑ͍ମݧΛఏڙ͢Δ If the content is the same what are the criteria for users to choose a service? OTHER SERVICES

should provide good experience than anywhere else. we have initiated a web performance improvement project. Yahoo! JAPAN͸ɺͲ͜ΑΓ΋շదʹ࢖༻Ͱ͖ΔαʔϏεΛ໨ࢦ͠·͢ɻ ͜ΕΒͷഎܠ͔Βɺࢲୡ͸ύϑΥʔϚϯεվળϓϩδΣΫτΛൃ଍͠·ͨ͠ɻ

2. Details of Improvements ԿΛվળͨ͠ͷ͔

Details of Improvements ԿΛվળͨ͠ͷ͔ αʔϏεͷվળ Service Improvements վળφϨοδͷڞ༗ Knowledge Sharing ՄࢹԽ Performance Visualization ڞ௨ϓϥοτϑΥʔϜͷվળ Common Platform Improvements

2-1. Performance Visualization ύϑΥʔϚϯεঢ়گͷՄࢹԽ αʔϏεͷվળ Service Improvements վળφϨοδͷڞ༗ Knowledge Sharing ՄࢹԽ Performance Visualization ڞ௨ϓϥοτϑΥʔϜͷվળ Common Platform Improvements

Differences in performance data ύϑΥʔϚϯεσʔλͷҧ͍ description Pros/Cons Lab Data Fixed-point measurements are taken in a specific network environment. Suitable for detailed analysis in a test environment. May miss problems that actual users have. Field Data Measured in the user environment used in the actual application. Know what score the actual user will experience. Not suitable for detailed analysis.

description Pros/Cons Lab Data Fixed-point measurements are taken in a specific network environment. Suitable for detailed analysis in a test environment. May miss problems that actual users have. Field Data Measured in the user environment used in the actual application. Know what score the actual user will experience. Not suitable for detailed analysis. Chrome UX Report Dashboard (CrUX) Analysis of Trends and Results (monthly) Lighthouse CI + Custom Dashboard Detailed Analysis (daily) Differences in performance data ύϑΥʔϚϯεσʔλͷҧ͍

Visualization of Lab data ϥϘσʔλͷՄࢹԽ lighthouse-ci is a data visualization app specialized for fixed-point observation of Core Web Vitals score aggregation. It is self-hosted and developers can see the results of all services.

Visualization of Lab data ϥϘσʔλͷՄࢹԽ We measure daily against over 230 endpoints by lighthouse-ci cron jobs. We have a setup that simulates a slow environment and also sends metrics that are averaged multiple times. // collect page metrics lhci collect —url="[PAGE_URL]" --additive --settings.preset=desktop --settings.chromeFlags="-- no-sandbox --disable-gpu --disable-dev-shm-usage" // send metrics to ci server lhci upload --token="[TOKEN]" —serverBaseUrl="[SERVER_URL]"

Compare lab data with competitors ϥϘσʔλΛՃ޻ͯ͠ϕϯνϚʔΫαʔϏεͱൺֱ͢Δ Overlaid Results LHCI Data A LHCI Data B ETL of MySQL data acquired by Lighthouse-ci provides a dashboard that overlays scores from Yahoo! JAPAN and Benchmark services on a weekly basis.

Visualization of Field data ϑΟʔϧυσʔλͷՄࢹԽ Chrome UX Report (CrUX) provides the ability to statistically aggregate from big data submitted anonymously by Chrome users.

Visualization of Field data ϑΟʔϧυσʔλͷՄࢹԽ The dashboard has a filter function. The filter at the top can be changed to focus only on services with poor scores. CWV Filters

Define project objectives վળͷ໨ඪͷఏࣔ Maintain a score of "good" on the Core Web Vitals score. Core Web Vitalsͷج४Ͱɺ”ྑ޷”ͷείΞ͕ҡ࣋Ͱ͖͍ͯΔ͜ͱɻ 1. Benchmark selection of other companies' services of the same type and maintain a superior score to them. ಉछͷଞࣾαʔϏεΛϕϯνϚʔΫʢൺֱର৅ʣͱͯ͠ɺ༏ҐͳείΞͰ͋Δ͜ͱɻ 2.

2-2. Knowledge Sharing ύϑΥʔϚϯεվળφϨοδͷڞ༗ αʔϏεͷվળ Service Improvements վળφϨοδͷڞ༗ Knowledge Sharing શࣾڞ௨ϓϥοτϑΥʔϜͷվળ Common Platform Improvements ՄࢹԽ Performance Visualization

Performance Improvement Knowledge Base վળͷφϨοδΛू໿͢ΔϙʔλϧΛ࡞੒

Sharing Knowledge Documents ύϑΥʔϚϯεվળφϨοδͷڞ༗ featured at Chrome Dev Summit 2020 featured at Google I/O 2021 108% AD Click-Through Rate 15.1% More page views per session internal performance knowledge database

Prioritization of improvement actions վળࢪࡦʹ༏ઌॱҐΛ͚ͭΔ HIGHLY EFFECTIVE FOR CORE WEB VITALS LOW COST LOW EFFECTIVE FOR CORE WEB VITALS HIGHLY IMPLEMENTATION COST ࣮૷ίετ͕ߴ͍ վળޮՌ͕ߴ͍ վળޮՌ͕௿͍ ࣮૷ίετ͕௿͍

Prioritization of improvement actions վળࢪࡦʹ༏ઌॱҐΛ͚ͭΔ HIGHLY EFFECTIVE FOR CORE WEB VITALS LOW COST LOW EFFECTIVE FOR CORE WEB VITALS HIGHLY IMPLEMENTATION COST ࣮૷ίετ͕ߴ͍ վળޮՌ͕ߴ͍ վળޮՌ͕௿͍ ࣮૷ίετ͕௿͍ Low COST & High Effective. Priority points of improvement proposed for all services.

Prioritization of improvement actions վળࢪࡦʹ༏ઌॱҐΛ͚ͭΔ - 1. Change the order of loading resources by importance - 2. Compressed Delivery (gzip / brotoli) - 3. Reduce layout shifts, especially in the first view - 4. Delayed loading of scripts that monopolize the main thread - 5. Lazy loading image and iframe ॏཁ౓ͰϦιʔεͷಡΈࠐΈॱΛมߋ ѹॖ഑৴͢Δ ಛʹॳظը໘ͷϨΠΞ΢τγϑτΛ΁Β͢ ϝΠϯεϨουΛઐ༗͢ΔεΫϦϓτΛूத ͯ͠஗ԆಡΈࠐΈ͢Δ ը૾ͱiframeͷ஗ԆಡΈࠐΈΛ͢Δ

Find bottlenecks and make suggestions based on service characteristics. Not all, but concentrated.

2-3. Service Improvements αʔϏεͷվળ αʔϏεͷվળ Service Improvements શࣾڞ௨ϓϥοτϑΥʔϜͷվળ Common Platform Improvements ՄࢹԽ Performance Visualization վળφϨοδͷڞ༗ Knowledge Sharing

How can we facilitate for many services? αʔϏεͷվળΛଅ͢ʹ͸? Must coordinate with other departments to improve…! How to investigate bottlenecks? ! ଞ෦໳ʹ·͕ͨΔௐ੔͕ඞཁ ϘτϧωοΫͷௐࠪํ๏͕Θ͔Βͳ͍

Suggest improvements from source code Therefore, the Performance Improvement Working Group will then analyze the bottlenecks in the service. We will analyze the service at the source code level and suggest prioritized performance improvements. ιʔείʔυ͔ΒվળࢪࡦΛఏҊ͢Δ 2. Analysis 3. Proposed improvements by priority 1. Selection of important pages 1. ॏཁͳϖʔδͷબఆ 2. ύϑΥʔϚϯε෼ੳ 3. ༏ઌ౓ผʹվળࡦΛఏҊ

Suggest improvements from source code ιʔείʔυ͔ΒվળࢪࡦΛఏҊ͢Δ Suggestions for Improvement Priority Details Progress Status

ex: For services with heavy initialization վળఏҊྫ: ॳظಡΈࠐΈ͕ॏ͍ͨαʔϏεʹରͯ͠ - Lazy loading of modules below first view. ॳظը໘ͷϞδϡʔϧͷ஗ԆಡΈࠐΈ - Delayed loading of scripts for analysis. ෼ੳʹؔ࿈͢ΔεΫϦϓτͷ஗ԆಡΈࠐΈ - Remove unnecessary bundles of lodash. lodashͷόϯυϧαΠζͷ࡟ݮ - Enable tree shaking of configuration file (convert from json5 format to js format) ઃఆϑΝΠϧʹTreeShakingΛ༗ޮԽ

JS File splitting by loading timing ࢀߟ: JavaScriptͷಡΈࠐΈλΠϛϯάผͷϑΝΠϧ෼ׂ TIMING EXAMPLES IMPLEMENTATION Immediately ͙͢ʹ࣮ߦ Critical processes that are not related to the DOM and can be executed independently. Sequential execution after loading DOM υΩϡϝϯτΛಡΈࠐΈޙɺॱ࣮࣍ߦ Main processing of applications, etc. <script defer src="****"> Execute in free time after the page is operational ϖʔδ͕ૢ࡞Մೳʹͳͬͨޙɺ ۭ͖࣌ؒʹಡΈࠐΜͰ࣮ߦ Analytics, ad retargeting, tag managers, etc. after “DOMContentLoaded” with RequestIdleCallback Execute in free time after the entire page has finished loading ϖʔδશମΛಡΈࠐΜͩޙɺ ۭ͖࣌ؒʹಡΈࠐΜͰ࣮ߦ Sub-elements unrelated to content, such as social networking widgets. after window “loaded” with RequestIdleCallback

վળఏҊྫ: ը૾͕ॏཁͳαʔϏεʹରͯ͠ ex: For services images are important - Do not apply delayed loading to LCP images, and also load them first with PriorityHints and meta tag preload. ॳظը໘ͷॏཁը૾ʹ͸஗ԆಡΈࠐΈΛద༻ͤ ͣɺઌಡΈ͢Δ - Use “srcset” attributes to deliver the optimal image size for each device. σόΠεผʹը૾αΠζΛ࠷దԽ͢Δ - The initialization process of the carousel is not done first. (I often see bad implementations) ΧϧʔηϧͷॲཧͰը૾͕දࣔ͞Εͳ͍͜ͱͷ ରࡦ

2-4. Common Platform Improvements શࣾڞ௨ϓϥοτϑΥʔϜͷվળ શࣾڞ௨ϓϥοτϑΥʔϜͷվળ Common Platform Improvements ՄࢹԽ Performance Visualization վળφϨοδͷڞ༗ Knowledge Sharing αʔϏεͷվળ Service Improvements

List of Common Platform Improvements શࣾڞ௨ϓϥοτϑΥʔϜʹߦͬͨվળ಺༰ - 1. Optimization of Cache-Control header Ωϟογϡίϯτϩʔϧϔομͷ࠷దԽ - 2. Do not use document.write document.writeΛ࢖༻͠ͳ͍ - 3. Reduced layout shift of Advertisement ޿ࠂͷϨΠΞ΢τγϑτ࡟ݮ - 4. Reduced layout shift of Common header ڞ௨ϔομʔͷϨΠΞ΢τγϑτ࡟ݮ

Optimization of Cache-Control header Ωϟογϡίϯτϩʔϧϔομͷ࠷దԽ // If the filename contains a hash value, set maximum cache time // ϑΝΠϧʹϋογϡ஋ؚ͕·Ε͍ͯͨΒɺ࠷େ·ͰΩϟογϡ࣌ؒΛ৳͹͢͜ͱ͕Ͱ͖Δ Cache-Control: public, max-age=31536000, immutable // Set stale-while-revalidate cache with max-age (for Chrome/Edge/Firefox currently) // ΋ͦ͠͏Ͱͳ͚Ε͹ɺSWRͷΩϟογϡετϥςδΛ࢖༻ͯ͠ɺ࠷৽ͷίϯςϯπΛ୹࣌ؒΩϟογϡ͢Δ Cache-Control: public, max-age=1, stale-while-revalidate=60 The short cache time that was set as the default value has been changed and adjusted to be the longest possible.

Do no use document.write document.writeΛ࢖༻͠ͳ͍ ※ https://developer.mozilla.org/en-US/docs/Web/API/Document/write document.write inhibits page display optimization. - It has continued to be used in old critical processes, but has finally been reviewed at this time. (sorry about this)

Reduced layout shift of Advertisement ޿ࠂͷϨΠΞ΢τγϑτ࡟ݮ single size AD double size AD The specifications do not tell us which ads will be shown. !

Reduced layout shift of Advertisement ޿ࠂͷϨΠΞ΢τγϑτ࡟ݮ single size AD double size AD - If there is a high likelihood that ads will be displayed, keep the minimum height using min-height and min-width. - Be prepared to display filler images when ads are not displayed. The specifications do not tell us which ads will be shown… min-height reduced layout shift

ڞ௨ϔομʔͷϨΠΞ΢τγϑτ࡟ݮ Reduced layout shift of common header Campaign Banner Area

ڞ௨ϔομʔͷϨΠΞ΢τγϑτ࡟ݮ Reduced layout shift of common header Campaign Banner Area Change the default height with the highest probability of being displayed. insert a frame if there is a campaign delete a frame if there is a campaign Ωϟϯϖʔϯ͕͋Ε͹࿮Λදࣔ Ωϟϯϖʔϯ͕ͳ͚Ε͹࿮Λ࡟আ

3. How we approach the company େن໛૊৫ͰͷऔΓ૊Έํ

Prepare an environment where many services can be improved smoothly. ଟ͘ͷαʔϏε͕ গͳ͍࣌ؒ Ͱɺ໎͍ͳ͘վળʹऔΓ૊ΊΔ؀ڥΛࢧԉɻ

Create an improvement work-flow վળ·ͰͷྲྀΕΛʮ࢓૊ΈԽʯ͢Δ WEB PERFORMANCE WG SERVECES Visualize ՄࢹԽ Tell us which pages you want to improve Analyze ৄࡉ෼ੳ Analyze & report the problem Development ։ൃ Tell us when finished. start deploy Know current

Temporary project Project to create a culture of performance improvement Ұ࣌తͳվળϓϩδΣΫτ վળͷจԽΛ࡞ΔͨΊͷϓϩδΣΫτ

How can we create a culture of self-improvement? ࣗൃతʹվળ͢ΔจԽΛ࡞Δʹ͸Ͳ͏ͨ͠Β͍͍ͩΖ͏ʁ - 2. Creating an environment that enables performance improvement without conscious effort ҙࣝͤͣͱ΋ύϑΥʔϚϯε޲্Ͱ͖Δ։ൃ؀ڥΛ੔උ͢Δ - 1. Improved technical baseline for web performance ύϑΥʔϚϯεٕज़ʹର͢ΔϕʔεϥΠϯͷ޲্

What we are working on next! ࣍ʹ޲͚ͯऔΓ૊ΜͰ͍Δ͜ͱ

- 1. Improved technical baseline for web performance ύϑΥʔϚϯεٕज़ʹର͢ΔϕʔεϥΠϯͷ޲্ - 2. Creating an environment that enables performance improvement without conscious effort ҙࣝͤͣͱ΋ύϑΥʔϚϯε޲্Ͱ͖Δ։ൃ؀ڥΛ੔උ͢Δ How can we create a culture of self-improvement? ࣗൃతʹվળ͢ΔจԽΛ࡞Δʹ͸Ͳ͏ͨ͠Β͍͍ͩΖ͏ʁ

- Measure correlation with business metrics without complex implementation. Ϗδωεࢦඪͱͷඥ෇͚͸ෳࡶͳ࣮૷͕ඞཁ - Planning to add CWV integration capabilities to Yahoo! JAPAN’s common analysis tools. Yahoo! JAPANͷڞ௨෼ੳπʔϧʹCWV࿈ܞػೳΛ௥Ճ༧ఆ Automatically link to business metrics Ϗδωεࢦඪͱͷඥ෇͚Λࣗಈతʹߦ͏

Enable Back-Forward Cache (BFCache) - Browser back/forward requests account for about 15% of all requests. BFCacheͷ༗ޮԽ ࣮͸શମͷϦΫΤετͷ໿15%ఔ౓͸ϒϥ΢βͷ ໭ΔਐΉʹΑΔϦΫΤετ - Removed "unload" event: code fixes including 3rd party vendors. ͜Ε·Ͱͷϩά࢓༷Λݟ௚͠ɺBFCache͕༗ޮʹ ͳΔΑ͏3rdύʔςΟϕϯμʔΛؚΊͨमਖ਼Λ࣮ࢪ தɻ

දࣔεϐʔυʹපతͳ·Ͱʹ߆Δɺͥͻ͜ΕΛ૊৫จԽʹ·ͰҾ͖ଓ͖͍͍ͯͬͯͩ͘͠͞ “Kentaro Kawabe (Yahoo! JAPAN co-CEO)” Please continue the crazy focus on display speed into the culture of our organization. දࣔεϐʔυʹපతͳ·Ͱʹ߆Δɺͥͻ͜ΕΛ૊৫จԽʹ·Ͱʹ͍ͯͩ͘͠͞ɻ

Thank you