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

性能に関する考え方

 性能に関する考え方

Yamagoya Fastly で発表した内容です。

Yosuke Furukawa

December 08, 2021
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. Crawler ͸αΠτͷԠ౴ੑೳͱ Ԡ౴҆ఆੑΛݟ͍ͯΔ • ͦͷ্ͰɺαΠτʹ๚໰ͯ͠ྑ͍ස౓ɺ࠶๚ ໰ظ͕ܾؒ·Δɻ • ΋͠΋஗͔ͬͨΓɺԠ౴ੑೳ͕ѱ͍ͱ๚໰͠ ͯ͘Εͳ͍ɻ •

    Ұ౓ͷ๚໰ͰΠϯσοΫε͞ΕΔϖʔδ͕গ ͳ͘ͳΔ͜ͱΛҙຯ͢Δɻ ͜ͷ๚໰Մೳͳස౓ɺظؒΛαΠτͷ༧ࢉͱͯ͠ ܭࢉ͍ͯ͠Δɺ͜ΕΛ Crawl Budget ͱݺͿ
  2. 8FC4JUFT ϖʔδ͕ JavaScript ͳͲͰߏங͞ΕΔ৔߹͸ JSΛ࣮ߦͯ͠ϨϯμϦϯά͢Δɻ Crawler bot CMBOL IUNM +4

    $44 Rendering ϖʔδʹίϯςϯπ͕ͳ͍ͷͰɺ+4 Λ࣮ߦͯ͠ίϯςϯπΛදࣔ͠Α͏ ஗͍ʂʂʂ͋·Γʹ΋͕͔͔࣌ؒΔ ͳΒεΩοϓ͢Δɻ
  3. Crawler ͸ϨϯμϦϯάʹ͔͔ Δ࣌ؒ΋ݟ͍ͯΔ • αΠτͷԠ౴ੑೳ͚ͩͰ͸ͳ͘ɺϨϯμϦϯάͷੑೳ΋ ಉ༷ʹݟ͍ͯΔ • ͪ͜Β΋ಉ༷ʹ͋·Γʹ΋ϨϯμϦϯά͕͔͔࣌ؒΔͳ Β్தͰϨϯμϦϯάΛ΍Ίͯ͠·͏ •

    ྫ͑͹ JS Ͱେ൒ͷ HTML Λߏங͢ΔͳͲɺϨϯμϦϯ ά͕͔͔࣌ؒΔαΠτʹؔͯ͠͸Ԡ౴ͨ͠΋ͷͷɺ్த Ͱ΍Ίͯ͠·͏ɺ΋͘͠͸ޙʹճͯ͠ΠϯσοΫε͕஗ ͘ͳΔέʔε΋͋Δ
  4. Crawler ͸ϨϯμϦϯάʹ͔͔ Δ࣌ؒ΋ݟ͍ͯΔ • αΠτͷԠ౴ੑೳ͚ͩͰ͸ͳ͘ɺϨϯμϦϯάͷੑೳ΋ ಉ༷ʹݟ͍ͯΔ • ͪ͜Β΋ಉ༷ʹ͋·Γʹ΋ϨϯμϦϯά͕͔͔࣌ؒΔͳ Β్தͰϨϯμϦϯάΛ΍Ίͯ͠·͏ •

    ྫ͑͹ JS Ͱେ൒ͷ HTML Λߏங͢ΔͳͲɺϨϯμϦϯ ά͕͔͔࣌ؒΔαΠτʹؔͯ͠͸Ԡ౴ͨ͠΋ͷͷɺ్த Ͱ΍Ίͯ͠·͏ɺ΋͘͠͸ޙʹճͯ͠ΠϯσοΫε͕஗ ͘ͳΔέʔε΋͋Δ ϨϯμϦϯάʹ͔͔Δ࣌ؒΛݟ͍ͯΔɻ͜Ε͸ Rendering Budget ͱݺ͹Ε͍ͯΔɻ
  5. Core Web Vitals • Largest Contentful Paint: ϖʔδ্ͷҰ൪࠷େ໘ੵΛ࣋ͬͯ ͍ΔΤϦΞ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒʢώʔϩʔը૾ͷදࣔ࣌ ؒͳͲʣ

    • First Input Delay: ϨϯμϦϯά͕։࢝͞Ε͔ͯΒೖྗՄೳʹ ͳΔ·Ͱͷ࣌ؒʢԡͯ͠΋൓Ԡ͠ͳ͍ϖʔδͳͲʣ • Cumulative Layout Shift: ϨϯμϦϯά్தͰίϯςϯπ͕ ͣΕͨ৔߹ͷζϨ෯ʢޡλοϓૂ͍ͷ޿ࠂͳͲ͕Α͘΍Δ΍ ͭʣ
  6. Crawler bot ͕๚໰͢Δ࣌ʹؾ Λ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱ • ͦ΋ͦ΋Ԡ౴ੑೳΛߴ͘อͨͳ͍ͱ͍͚ͳ͍ • ๚໰தʹམͪͯ͸͍͚ͳ͍ • ๚໰ޙͷϨϯμϦϯάͷύϑΥʔϚϯε΋ߴ͘ͳ

    ͍ͱ͍͚ͳ͍ • ͜ΕΒΛؾΛ্͚ͭͨͰɺ Core Web Vitals ͳͲ ͷ৽͍͠ࢦඪʹ΋έΞ͕ඞཁ ؾΛ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱ͸ଟ͍ɻ͔͠΋ఆৗ։ൃ ࡞ۀΛ͍ͯ͠Δ͚ͩͰ͸தʑؾ͚ͮͳ͔ͬͨΓ͢Δ
  7. ղܾࡦ • CDN Λ Fastly ʹม্͑ͨͰɺ Origin Shield ͱݺ͹ΕΔ ػߏΛಋೖͨ͠ɻ

    • origin ͷखલͰcacheΛ࣋ͭpodʹϦΫΤετΛҕৡ͢Δ QPE QPE QPE PSJHJO TIJFME 8FC4JUFT جຊతʹDBDIF͔ Βؼͬͯ͘Δɻ ҆ఆͨ͠Ϩεϙϯε͕͋Δɻ
  8. ղܾࡦ • ͜ΕʹՃ͑ͯ Stale While Revalidate ͱݺ͹ΕΔɺҰ୴ݹ ͘ͳͬͨΩϟογϡΛฦͭͭ͠ɺཪଆͰΩϟογϡΛߋ ৽͢Δ࢓૊ΈΛಋೖͨ͠ɻ $%/

    8FC4JUFT ݹ͍Ωϟογϡ͔͠ແ͍ͷͰɺҰ୴ݹ ͍΋ͷΛͦͷ··ฦͭͭ͠ɺ৽͍͠ίϯςϯ πΛཪͰߋ৽͢Δ request Ұ୴Ωϟογϡ͔Βฦ͢ Ϩεϙϯεޙʹ ίϯςϯπΛ࠶ߋ৽
  9. Before => After • Before • After 3398ms => 1729ms

    ʹLCPΛ࡟ݮɺԠ౴ੑೳ҆ఆԽʹد༩
  10. 3rd party resource ΁ͷϦΫΤ ετ͕ଟ͍ • ௕೥ͣͬͱӡ༻͞Ε͖ͯͨ͜ͱͰɺ3rd party resource ͕΋ͷ͘͢͝ଟ͍ɻ

    • A/Bςετɺ޿ࠂɺ෼ੳπʔϧͳͲͳͲͷπʔϧ ྨΛಋೖͯ͠ޮՌΛଌఆͯ͠... • ͱ͍͏աఔͷதͰνϦπϞͰϦΫΤετ͕૿͑ͯ ͍ͬͯ͠·ͬͨɻ
  11. ·ͱΊ • Ϋϩʔϥ͔ΒݟΔͱ࣮͸৭ʑͱݕ౼͠ͳ͍ͱ͍͚ͳ͍͜ͱ͕ଟ͍ • ΫϩʔϦϯάόδΣοτ • ϨϯμϦϯάόδΣοτ • Core Web

    Vitals • ͦͷ্Ͱ࠷దԽΛ͖ͯͨ͠ɻ • ੑೳվળ͕࣮ࢪͰ͖ͨ • ͨͩ͠ɺ·ͩಓ൒͹ɺಛʹٕज़తͳϨΠϠҎ্ͷͱ͜ΖͰ͸ࠓޙ΋վળͷ༨஍͕͋Δ • ੑೳվળ͸୹ظεύϯͰऴΘΔΑ͏ͳ࿩Ͱ͸ͳ͘ɺத௕ظΛݟਾ͑ͯ௕͍εύϯͰ΍ͬͯ ͍͘ඞཁ͕͋Δ