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

性能に関する考え方

 性能に関する考え方

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa
PRO

December 08, 2021
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. ੑೳʹؔ͢Δߟ͑ํ 2021/12/8 @ Yamagoya Fastly

  2. Twitter: @yosuke_furukawa Github: yosuke-furukawa

  3. ฐࣾʹ͸αʔϏε͕ଟ਺ଘࡏ͢Δ • େখ߹Θͤͯ1000Ҏ্͸࣮֬ʹ͋Δɻ • ಛʹେ͖ͳ΋ͷͰ͋Ε͹ Web ͔Βͷྲྀೖͷظ ଴͕େ͖͍ • ͜ΕΒͷྲྀೖ͕গͳ͘ͳΔ͜ͱ͸ආ͚͍ͨ

  4. ݕࡧΤϯδϯ͔ΒͷධՁ͕ ΋ͷ͘͢͝ॏཁ

  5. ݕࡧΤϯδϯ͸ Ͳ͏΍ͬͯධՁ͍ͯ͠Δ͔

  6. %# 8FC4JUFT 8FC4JUFT 8FC4JUFT Crawler ͕αΠτΛ๚໰ͯ͠ɺϖʔδΛऩू ऩूͨ͠ϖʔδΛ֨ೲʢΠϯσΫγϯάʣ Crawler bot

  7. %# 8FC4JUFT 8FC4JUFT 8FC4JUFT Crawler ͕αΠτΛ๚໰ͯ͠ɺϖʔδΛऩू ऩूͨ͠ϖʔδΛ֨ೲʢΠϯσΫγϯάʣ Crawler bot ͜ͷ࣌ʹ

    Crawler ͕ߟ͍͑ͯΔ͜ͱ͸Կ͔
  8. Crawler ͕ؾʹ͍ͯ͠Δ͜ͱ • ͜ͷαΠτ͸ͲΕ͚ͩ๚໰ͯ͠େৎ෉ͳΜͩ Ζ͏͔ɾɾɾʁ • ͲΕ͘Β͍ͷස౓Ͱ๚໰͢Δͱྑ͍΋ͷͳΜ ͩΖ͏͔ɾɾɾʁ • αΠτ͕๻ͷ͍ͤͰམͪͪΌͬͨΒ΍ͩ

    ͳ͊ɻɻɻ
  9. 8FC4JUFT Crawler bot GET /articles/1 500 Server Error ๚໰ͨ͠Βམͪ ͪΌͬͨʂ

    ͠͹Β͘๚໰΍ΊΑ͏
  10. 8FC4JUFT Crawler bot GET /articles/1 200 OK ΊͬͪΌ஗͍ɻॏ͍αΠτͳͷ͔ ͳɻͦΜͳʹ๚໰͠ͳ͍΄͏͕͍͍͔ ...

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

    Ұ౓ͷ๚໰ͰΠϯσοΫε͞ΕΔϖʔδ͕গ ͳ͘ͳΔ͜ͱΛҙຯ͢Δɻ
  12. Crawler ͸αΠτͷԠ౴ੑೳͱ Ԡ౴҆ఆੑΛݟ͍ͯΔ • ͦͷ্ͰɺαΠτʹ๚໰ͯ͠ྑ͍ස౓ɺ࠶๚ ໰ظ͕ܾؒ·Δɻ • ΋͠΋஗͔ͬͨΓɺԠ౴ੑೳ͕ѱ͍ͱ๚໰͠ ͯ͘Εͳ͍ɻ •

    Ұ౓ͷ๚໰ͰΠϯσοΫε͞ΕΔϖʔδ͕গ ͳ͘ͳΔ͜ͱΛҙຯ͢Δɻ ͜ͷ๚໰Մೳͳස౓ɺظؒΛαΠτͷ༧ࢉͱͯ͠ ܭࢉ͍ͯ͠Δɺ͜ΕΛ Crawl Budget ͱݺͿ
  13. 8FC4JUFT ϖʔδΛμ΢ϯϩʔυͨ͠ޙ͸ϨϯμϦϯάΛߦ͏ɻ Crawler bot IUNM +4 $44 Rendering

  14. 8FC4JUFT ϖʔδΛμ΢ϯϩʔυͨ͠ޙ͸ϨϯμϦϯάΛߦ͏ɻ Crawler bot IUNM +4 $44 Rendering Rendering݁ՌΛجʹίϯςϯπͷείΞ෇͚Λߦ ͍ɺ࠷ऴతʹΠϯσοΫεʹ൓ө͢Δ

  15. 8FC4JUFT ϨϯμϦϯάʹΊͬͪΌίετ͕͔͔Δͱͦ Ε͸ͦΕͰධՁʹӨڹ͢Δ Crawler bot CMBOL IUNM +4 $44 Rendering

  16. 8FC4JUFT ϖʔδ͕ JavaScript ͳͲͰߏங͞ΕΔ৔߹͸ JSΛ࣮ߦͯ͠ϨϯμϦϯά͢Δɻ Crawler bot CMBOL IUNM +4

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

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

    ྫ͑͹ JS Ͱେ൒ͷ HTML Λߏங͢ΔͳͲɺϨϯμϦϯ ά͕͔͔࣌ؒΔαΠτʹؔͯ͠͸Ԡ౴ͨ͠΋ͷͷɺ్த Ͱ΍Ίͯ͠·͏ɺ΋͘͠͸ޙʹճͯ͠ΠϯσοΫε͕஗ ͘ͳΔέʔε΋͋Δ ϨϯμϦϯάʹ͔͔Δ࣌ؒΛݟ͍ͯΔɻ͜Ε͸ Rendering Budget ͱݺ͹Ε͍ͯΔɻ
  19. ͞Βʹ

  20. ࠷ۙ͸ Core Web Vitals ͱݺ͹ ΕΔࢦඪ΋ଘࡏ͢Δ • ϢʔβʔͷϑϥετϨʔγϣϯΛܭଌ͢Δࢦඪ • Google

    ͕ఏএ
  21. Core Web Vitals • Largest Contentful Paint: ϖʔδ্ͷҰ൪࠷େ໘ੵΛ࣋ͬͯ ͍ΔΤϦΞ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒʢώʔϩʔը૾ͷදࣔ࣌ ؒͳͲʣ

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

    ͍ͱ͍͚ͳ͍ • ͜ΕΒΛؾΛ্͚ͭͨͰɺ Core Web Vitals ͳͲ ͷ৽͍͠ࢦඪʹ΋έΞ͕ඞཁ
  23. Crawler bot ͕๚໰͢Δ࣌ʹؾ Λ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱ • ͦ΋ͦ΋Ԡ౴ੑೳΛߴ͘อͨͳ͍ͱ͍͚ͳ͍ • ๚໰தʹམͪͯ͸͍͚ͳ͍ • ๚໰ޙͷϨϯμϦϯάͷύϑΥʔϚϯε΋ߴ͘ͳ

    ͍ͱ͍͚ͳ͍ • ͜ΕΒΛؾΛ্͚ͭͨͰɺ Core Web Vitals ͳͲ ͷ৽͍͠ࢦඪʹ΋έΞ͕ඞཁ ؾΛ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱ͸ଟ͍ɻ͔͠΋ఆৗ։ൃ ࡞ۀΛ͍ͯ͠Δ͚ͩͰ͸தʑؾ͚ͮͳ͔ͬͨΓ͢Δ
  24. ϦΫϧʔτࣾ಺Ͱ͸֤αΠτ ͷঢ়گΛఆظతʹΞηεϝϯ τ͠ɺमਖ਼Ͱ͖Δͱ͜Ζ͔Β मਖ਼͍ͯ͠Δ

  25. https://blog.recruit.co.jp/rtc/2021/09/22/core-web-vitals- %e3%81%ab%e5%af%be%e5%bf%9c%e3%81%99%e3%82%8b%e3%81%9f%e3%82%81%e3%80%81%e5%90%84% e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e6%94%b9%e5%96%84%e6%b4%bb%e5%8b%95%e3%82%92 %e5%ae%9f%e6%96%bd/

  26. ࣮ࡍʹ͋ͬͨέʔεͱ ͦͷղܾࡦ

  27. έʔε1: CDNΛೖΕͨͷʹԠ౴ੑೳ͕ ҆ఆ͠ͳ͍έʔε

  28. CDNΛಋೖ͢Δ͜ͱͰɺલड़ͷ Ԡ౴ੑೳͷ҆ఆԽΛਤͬͨ ※ CDNΛखલʹೖΕͯͱΓ͋͑ͣղܾ͢Ε͹OKͱ ࢥ͍ͬͯͨ࣌ظͷ࿩Ͱ͢ɻ

  29. $%/ Crawler bot ҆ఆ͢Δ͔ͳʔͱࢥ͚ͬͨͲɺ଎͍࣌΋஗͍࣌΋͋ͬ ͨɻΑ͘Α͘ݟΔͱɺ origin ʹҰఆҎ্ͷϦΫΤε τ͕ඈΜͰ͠·͍ͬͯͨɻ 8FC4JUFT ૣ͔ͬͨΓ஗͔ͬͨΓ͢Δɻ

    ͳΜ͔҆ఆ͠ͳ͍ͳɻɻɻ ΦϦδϯʹϦΫΤετ͕ߴස౓Ͱඈ ΜͰ͠·͏ɻ
  30. QPE Crawler bot pod ͕ͨ͘͞Μ͋ΓɺΫϥΠΞϯτͷϦΫΤετઌ͕ ෼ࢄ͞ΕΔࣄͰɺCDN಺෦ͷΩϟογϡ͕ଘࡏ͠ͳ͍ podʹߦ͘ͱɺorigin΁ͷ໰͍߹Θ͕ͤ૿͍͑ͯͨɻ 8FC4JUFT QPE QPE

    QPE͕ෳ਺͋ΓɺΩϟογϡ͕͋Δ ͱ͜Ζͱແ͍ॴͰ໰͍߹Θ͕ͤൃੜͯ͠͠·ͬ ͍ͯͨ
  31. CDNΛೖΕͨͷʹԠ౴ੑೳ͕҆ ఆ͠ͳ͍ • ※ Fastly Ͱ͸͋Γ·ͤΜɻ • ͋·Γஶ໊Ͱ͸ͳ͍ɺผͳCDNΛ࠾༻͍ͯ͠ ͨɻ •

    CDNͷpodͷ਺͕ଟ਺͋Γɺͦͷ pod શମʹ Ωϟογϡ͕ਁಁ͍ͯ͠ͳ͔ͬͨɻ
  32. ղܾࡦ • CDN Λ Fastly ʹม্͑ͨͰɺ Origin Shield ͱݺ͹ΕΔ ػߏΛಋೖͨ͠ɻ

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

    8FC4JUFT ݹ͍Ωϟογϡ͔͠ແ͍ͷͰɺҰ୴ݹ ͍΋ͷΛͦͷ··ฦͭͭ͠ɺ৽͍͠ίϯςϯ πΛཪͰߋ৽͢Δ request Ұ୴Ωϟογϡ͔Βฦ͢ Ϩεϙϯεޙʹ ίϯςϯπΛ࠶ߋ৽
  34. CDNΛೖΕͨͷʹԠ౴ੑೳ͕҆ ఆ͠ͳ͍ • ͲΜͳCDNΛೖΕͨͱͯ͠΋Ԡ౴ੑೳ͕ྑ͘ͳΔΘ͚ Ͱ͸ͳ͍ • ಛʹίϯςϯπͷߋ৽͕සൟʹ͋ͬͨΓɺαΠτͷߋ ৽͕සൟʹ͋ΔΑ͏ͳαΠτͩͱCDNଆͷػೳ΋ͦΕ ʹ߹Θͤͨ΋ͷ͕ඞཁ •

    ࠓճ͸ Origin Shield ͱ Stale While Revalidate Λ࢖ͬ ͯԠ౴ੑೳΛ҆ఆͤͨ͞
  35. έʔε2: ڊେը૾͕഑৴͞Ε͍ͯͨ έʔε

  36. ڊେը૾͕഑৴͞ΕΔέʔε • ฐࣾͷαΠτ͸ը૾͕ଟ͍ • ͔͠͠ɺը૾ͷϦαΠζ͕؁͍ͱ͜Ζ͕ଟ͍ • ख࡞ۀͷϦαΠζʹΑΓɺ͖ͪΜͱͨ͠ม׵͕ ͞Ε͍ͯͳ͍έʔε΋༗Δ • ·͍͔ͨͭ͘ͷαΠτ͸దͨ͠ը૾ϑΥʔϚο

    τ͕࢖ΘΕ͍ͯͳ͔ͬͨΓ͢Δ
  37. 8FC4JUFT ը૾͕ॏ͍ͱԠ౴ੑೳ΋ѱ͍͕ɺϨϯμϦϯάύ ϑΥʔϚϯε΋ѱ͘ͳΔɻ Crawler bot IUNM +4 $44 Rendering JNBHFT

    JNBHFT JNBHFT
  38. ղܾࡦ • Fastly ͷ Image Optimizer ʹΑΓɺCDN্Ͱ ը૾ͷ࠷దԽΛߦ͏Α͏ʹͨ͠ɻ • ΋͘͠͸ը૾ͷ࠷దԽΛӡ༻ʹ࣮֬ʹ૊Έࠐ

    ΉΑ͏ʹ͠ɺ΋͠΋࿙Εͨͱͯ͠΋ݕ஌Ͱ͖ Δ࢓૊ΈΛ lighthouse CI ͳͲͰߏஙͨ͠ɻ
  39. खલʹ͍ΔCDN͕ը૾ͷϑΥʔϚοτΛ࠷దԽ͠ɺ ΫϥΠΞϯτʹ߹Θͤͯ഑৴͢Δɻ JNBHFT XFCQ $%/ *NBHF0QUJNJ[FS JNBHFT BW Browser A

    Browser B
  40. Before => After • Before • After

  41. Before => After • Before • After 3398ms => 1729ms

    ʹLCPΛ࡟ݮɺԠ౴ੑೳ҆ఆԽʹد༩
  42. έʔε3: 3rd party resource ΁ͷϦΫ Τετ͕ଟ͍

  43. 3rd party resource ΁ͷϦΫΤ ετ͕ଟ͍ • ௕೥ͣͬͱӡ༻͞Ε͖ͯͨ͜ͱͰɺ3rd party resource ͕΋ͷ͘͢͝ଟ͍ɻ

    • A/Bςετɺ޿ࠂɺ෼ੳπʔϧͳͲͳͲͷπʔϧ ྨΛಋೖͯ͠ޮՌΛଌఆͯ͠... • ͱ͍͏աఔͷதͰνϦπϞͰϦΫΤετ͕૿͑ͯ ͍ͬͯ͠·ͬͨɻ
  44. 3rd party resource ΁ͷϦΫΤ ετ͕ଟ͍ ҰͭͷϚϧ͕ϦΫΤετઌΛද͢ɻ͜͜Ͱݴ͏ͱɺ਺ेݸͷ ϦιʔεΛμ΢ϯϩʔυ͍ͯ͠Δɻ

  45. ղܾࡦ • ٕज़తͳϨΠϠͰͷղܾࡦ͸ͳ͍ • աڈʹ࢖ͬͨ΋ͷͰࠓ࢖͍ͬͯͳ͍΋ͷΛؔ࿈ ෦ॺʹώΞϦϯά͠ɺ࢖͍ͬͯͳ͍΋ͷΛআ٫ • ঃʑʹݮΒ͢Α͏ʹ࿈བྷ͠ͳ͕ΒαΠζΛϞχ λϦϯά͍ͯ͠Δɻ •

    ·ͩ͜ͷ׆ಈ͸ܧଓதɻɻɻ
  46. ੑೳվળ͸୹ڑ཭૸Ͱ͸ͳ͍ɻ ௕ڑ཭૸Ͱ΋ͳ͍ɻ ϩϯάδϟʔχʔͰ͋Δɻ

  47. ੑೳվળ • ΢ΣϒΞϓϦέʔγϣϯʹ͓͍ͯ͸ࢸ্໋୊Ͱ͋Δ • ҰํͰ୹ڑ཭Ͱαοͱ΍ͬͯҰճͰ์ஔͯ͠͠·͏ͱɺ݁ ہ௕͍໨ͰݟΔͱແҙຯͩͬͨΓ͢Δɻ • ࢦඪ΋มΘΔ͠ɺྼԽ͢ΔϙΠϯτ΋มΘΔ • ͣͬͱ௕͍ظؒΛ௨ͯ͠αʔϏεͷঢ়گΛϞχλϦϯά͠

    ଓ͚Δඞཁ͕͋Δɻ • ͜͏͍͏νʔϜΛ࡞Γɺࣾ಺ͷจԽʹ͢Δඞཁ͕͋Δɻ
  48. ·ͱΊ

  49. ·ͱΊ • Ϋϩʔϥ͔ΒݟΔͱ࣮͸৭ʑͱݕ౼͠ͳ͍ͱ͍͚ͳ͍͜ͱ͕ଟ͍ • ΫϩʔϦϯάόδΣοτ • ϨϯμϦϯάόδΣοτ • Core Web

    Vitals • ͦͷ্Ͱ࠷దԽΛ͖ͯͨ͠ɻ • ੑೳվળ͕࣮ࢪͰ͖ͨ • ͨͩ͠ɺ·ͩಓ൒͹ɺಛʹٕज़తͳϨΠϠҎ্ͷͱ͜ΖͰ͸ࠓޙ΋վળͷ༨஍͕͋Δ • ੑೳվળ͸୹ظεύϯͰऴΘΔΑ͏ͳ࿩Ͱ͸ͳ͘ɺத௕ظΛݟਾ͑ͯ௕͍εύϯͰ΍ͬͯ ͍͘ඞཁ͕͋Δ
  50. ࢀߟจݙ • https://developers.google.com/search/docs/advanced/crawling/large-site- managing-crawl-budget?hl=ja • https://www.botify.com/blog/from-crawl-budget-to-render-budget • https://blog.recruit.co.jp/rtc/2021/09/22/core-web-vitals- %e3%81%ab%e5%af%be%e5%bf%9c%e3%81%99%e3%82%8b%e3%81%9f %e3%82%81%e3%80%81%e5%90%84%e3%82%b5%e3%82%a4%e3%83%8

    8%e3%81%ae%e6%94%b9%e5%96%84%e6%b4%bb%e5%8b%95%e3%82 %92%e5%ae%9f%e6%96%bd/ • https://developers.google.com/search/docs/advanced/javascript/javascript- seo-basics • https://www.youtube.com/watch?v=XUOD6pcvnso