Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

November 18, 2022
Tweet

More Decks by Tech-Verse2022

Other Decks in Technology

Transcript

  1. 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

    View full-size slide

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

    View full-size slide

  3. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 1. Background
    ࣮ࢪͨ͠എܠ

    View full-size slide

  7. ϖʔδͷϢʔβʔମݧ͕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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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.

    View full-size slide

  15. 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
    ύϑΥʔϚϯεσʔλͷҧ͍

    View full-size slide

  16. 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.

    View full-size slide

  17. 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]"

    View full-size slide

  18. 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.

    View full-size slide

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

    View full-size slide

  20. 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

    View full-size slide

  21. 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.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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

    View full-size slide

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

    View full-size slide

  26. 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.

    View full-size slide

  27. 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ͷ஗ԆಡΈࠐΈΛ͢Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. 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. ༏ઌ౓ผʹվળࡦΛఏҊ

    View full-size slide

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

    View full-size slide

  33. 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Λ༗ޮԽ

    View full-size slide

  34. 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.
    <br/>Sequential execution after loading<br/>DOM<br/>υΩϡϝϯτΛಡΈࠐΈޙɺॱ࣮࣍ߦ<br/>Main processing of applications, etc. <script defer src="****"><br/>Execute in free time after the page<br/>is operational<br/>ϖʔδ͕ૢ࡞Մೳʹͳͬͨޙɺ<br/>ۭ͖࣌ؒʹಡΈࠐΜͰ࣮ߦ<br/>Analytics, ad retargeting, tag<br/>managers, etc.<br/>after “DOMContentLoaded” with<br/>RequestIdleCallback<br/>Execute in free time after the<br/>entire page has finished loading<br/>ϖʔδશମΛಡΈࠐΜͩޙɺ<br/>ۭ͖࣌ؒʹಡΈࠐΜͰ࣮ߦ<br/>Sub-elements unrelated to content,<br/>such as social networking widgets.<br/>after window “loaded” with<br/>RequestIdleCallback<br/>

    View full-size slide

  35. վળఏҊྫ: ը૾͕ॏཁͳαʔϏεʹରͯ͠
    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)
    ΧϧʔηϧͷॲཧͰը૾͕දࣔ͞Εͳ͍͜ͱͷ
    ରࡦ

    View full-size slide

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

    View full-size slide

  37. 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
    ڞ௨ϔομʔͷϨΠΞ΢τγϑτ࡟ݮ

    View full-size slide

  38. 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.

    View full-size slide

  39. 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)

    View full-size slide

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

    View full-size slide

  41. 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

    View full-size slide

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

    View full-size slide

  43. ڞ௨ϔομʔͷϨΠΞ΢τγϑτ࡟ݮ
    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
    Ωϟϯϖʔϯ͕͋Ε͹࿮Λදࣔ Ωϟϯϖʔϯ͕ͳ͚Ε͹࿮Λ࡟আ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. 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

    View full-size slide

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

    View full-size slide

  48. 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
    ύϑΥʔϚϯεٕज़ʹର͢ΔϕʔεϥΠϯͷ޲্

    View full-size slide

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

    View full-size slide

  50. - 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?
    ࣗൃతʹվળ͢ΔจԽΛ࡞Δʹ͸Ͳ͏ͨ͠Β͍͍ͩΖ͏ʁ

    View full-size slide

  51. - 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
    Ϗδωεࢦඪͱͷඥ෇͚Λࣗಈతʹߦ͏

    View full-size slide

  52. 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ύʔςΟϕϯμʔΛؚΊͨमਖ਼Λ࣮ࢪ
    தɻ

    View full-size slide

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

    View full-size slide