$30 off During Our Annual Pro Sale. View Details »

Initiative to “Improve Web Performance” Across Yahoo! JAPAN

Initiative to “Improve Web Performance” Across Yahoo! JAPAN

Masanari Hamada (Yahoo! JAPAN / Web Frontend Lab., Application Division, CTO Office / Engineer)

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

Tech-Verse2022
PRO

November 18, 2022
Tweet

More Decks by Tech-Verse2022

Other Decks in Technology

Transcript

  1. None
  2. 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
  3. We have been working to improve web performance across all

    Yahoo! JAPAN services. ࢲୡ͸ϠϑʔશࣾͰʮWebύϑΥʔϚϯεվળʯͷऔΓ૊ΈΛ࣮ࢪ͍ͯ͠·͢ɻ
  4. 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
  5. 98.3% (PC / Mobile) 98.5% (PC)

  6. Agenda - 1. Background ࣮ࢪͨ͠എܠ - 2. Details of improvements

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

  8. ϖʔδͷϢʔβʔମݧ͕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
  9. This means Increased importance of UX. From now on, web

    services will require “comfortable user experience” as a matter of course. ࠓޙͷWebαʔϏε͸ʮշదʹૢ࡞Ͱ͖Δ͜ͱʯ͕౰વͷΑ͏ʹٻΊΒΕ͍ͯ࣌͘୅ʹɻ
  10. Should provide a good experience Ͳ͜ͱΓ΋ྑ͍ମݧΛఏڙ͢Δ If the content is

    the same what are the criteria for users to choose a service? OTHER SERVICES
  11. should provide good experience than anywhere else. we have initiated

    a web performance improvement project. Yahoo! JAPAN͸ɺͲ͜ΑΓ΋շదʹ࢖༻Ͱ͖ΔαʔϏεΛ໨ࢦ͠·͢ɻ ͜ΕΒͷഎܠ͔Βɺࢲୡ͸ύϑΥʔϚϯεվળϓϩδΣΫτΛൃ଍͠·ͨ͠ɻ
  12. 2. Details of Improvements ԿΛվળͨ͠ͷ͔

  13. Details of Improvements ԿΛվળͨ͠ͷ͔ αʔϏεͷվળ Service Improvements վળφϨοδͷڞ༗ Knowledge Sharing

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

    ՄࢹԽ Performance Visualization ڞ௨ϓϥοτϑΥʔϜͷվળ Common Platform Improvements
  15. 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.
  16. 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 ύϑΥʔϚϯεσʔλͷҧ͍
  17. 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.
  18. 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]"
  19. 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.
  20. Visualization of Field data ϑΟʔϧυσʔλͷՄࢹԽ Chrome UX Report (CrUX) provides

    the ability to statistically aggregate from big data submitted anonymously by Chrome users.
  21. 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
  22. 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.
  23. 2-2. Knowledge Sharing ύϑΥʔϚϯεվળφϨοδͷڞ༗ αʔϏεͷվળ Service Improvements վળφϨοδͷڞ༗ Knowledge Sharing

    શࣾڞ௨ϓϥοτϑΥʔϜͷվળ Common Platform Improvements ՄࢹԽ Performance Visualization
  24. Performance Improvement Knowledge Base վળͷφϨοδΛू໿͢ΔϙʔλϧΛ࡞੒

  25. 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
  26. Prioritization of improvement actions վળࢪࡦʹ༏ઌॱҐΛ͚ͭΔ HIGHLY EFFECTIVE FOR CORE WEB

    VITALS LOW COST LOW EFFECTIVE FOR CORE WEB VITALS HIGHLY IMPLEMENTATION COST ࣮૷ίετ͕ߴ͍ վળޮՌ͕ߴ͍ վળޮՌ͕௿͍ ࣮૷ίετ͕௿͍
  27. 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.
  28. 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ͷ஗ԆಡΈࠐΈΛ͢Δ
  29. Find bottlenecks and make suggestions based on service characteristics. Not

    all, but concentrated.
  30. 2-3. Service Improvements αʔϏεͷվળ αʔϏεͷվળ Service Improvements શࣾڞ௨ϓϥοτϑΥʔϜͷվળ Common Platform

    Improvements ՄࢹԽ Performance Visualization վળφϨοδͷڞ༗ Knowledge Sharing
  31. How can we facilitate for many services? αʔϏεͷվળΛଅ͢ʹ͸? Must coordinate

    with other departments to improve…! How to investigate bottlenecks? ! ଞ෦໳ʹ·͕ͨΔௐ੔͕ඞཁ ϘτϧωοΫͷௐࠪํ๏͕Θ͔Βͳ͍
  32. 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. ༏ઌ౓ผʹվળࡦΛఏҊ
  33. Suggest improvements from source code ιʔείʔυ͔ΒվળࢪࡦΛఏҊ͢Δ Suggestions for Improvement Priority

    Details Progress Status
  34. 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Λ༗ޮԽ
  35. 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. <script async src="****"> 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
  36. վળఏҊྫ: ը૾͕ॏཁͳαʔϏεʹରͯ͠ 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) ΧϧʔηϧͷॲཧͰը૾͕දࣔ͞Εͳ͍͜ͱͷ ରࡦ
  37. 2-4. Common Platform Improvements શࣾڞ௨ϓϥοτϑΥʔϜͷվળ શࣾڞ௨ϓϥοτϑΥʔϜͷվળ Common Platform Improvements ՄࢹԽ

    Performance Visualization վળφϨοδͷڞ༗ Knowledge Sharing αʔϏεͷվળ Service Improvements
  38. 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 ڞ௨ϔομʔͷϨΠΞ΢τγϑτ࡟ݮ
  39. 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.
  40. 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)
  41. Reduced layout shift of Advertisement ޿ࠂͷϨΠΞ΢τγϑτ࡟ݮ single size AD double

    size AD The specifications do not tell us which ads will be shown. !
  42. 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
  43. ڞ௨ϔομʔͷϨΠΞ΢τγϑτ࡟ݮ Reduced layout shift of common header Campaign Banner Area

  44. ڞ௨ϔομʔͷϨΠΞ΢τγϑτ࡟ݮ 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 Ωϟϯϖʔϯ͕͋Ε͹࿮Λදࣔ Ωϟϯϖʔϯ͕ͳ͚Ε͹࿮Λ࡟আ
  45. 3. How we approach the company େن໛૊৫ͰͷऔΓ૊Έํ

  46. Prepare an environment where many services can be improved smoothly.

    ଟ͘ͷαʔϏε͕ গͳ͍࣌ؒ Ͱɺ໎͍ͳ͘վળʹऔΓ૊ΊΔ؀ڥΛࢧԉɻ
  47. 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
  48. Temporary project Project to create a culture of performance improvement

    Ұ࣌తͳվળϓϩδΣΫτ վળͷจԽΛ࡞ΔͨΊͷϓϩδΣΫτ
  49. 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 ύϑΥʔϚϯεٕज़ʹର͢ΔϕʔεϥΠϯͷ޲্
  50. What we are working on next! ࣍ʹ޲͚ͯऔΓ૊ΜͰ͍Δ͜ͱ

  51. - 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? ࣗൃతʹվળ͢ΔจԽΛ࡞Δʹ͸Ͳ͏ͨ͠Β͍͍ͩΖ͏ʁ
  52. - 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 Ϗδωεࢦඪͱͷඥ෇͚Λࣗಈతʹߦ͏
  53. 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ύʔςΟϕϯμʔΛؚΊͨमਖ਼Λ࣮ࢪ தɻ
  54. දࣔεϐʔυʹපతͳ·Ͱʹ߆Δɺͥͻ͜ΕΛ૊৫จԽʹ·ͰҾ͖ଓ͖͍͍ͯͬͯͩ͘͠͞ “Kentaro Kawabe (Yahoo! JAPAN co-CEO)” Please continue the crazy

    focus on display speed into the culture of our organization. දࣔεϐʔυʹපతͳ·Ͱʹ߆Δɺͥͻ͜ΕΛ૊৫จԽʹ·Ͱʹ͍ͯͩ͘͠͞ɻ
  55. Thank you