性能に関する考え方

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

Transcript

1. ੑೳʹؔ͢Δߟ͑ํ 2021/12/8 @ Yamagoya Fastly
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. ฐࣾʹ͸αʔϏε͕ଟ਺ଘࡏ͢Δ • େখ߹Θͤͯ1000Ҏ্͸࣮֬ʹ͋Δɻ • ಛʹେ͖ͳ΋ͷͰ͋Ε͹ Web ͔Βͷྲྀೖͷظ ଴͕େ͖͍ • ͜ΕΒͷྲྀೖ͕গͳ͘ͳΔ͜ͱ͸ආ͚͍ͨ
4. ݕࡧΤϯδϯ͔ΒͷධՁ͕ ΋ͷ͘͢͝ॏཁ
5. ݕࡧΤϯδϯ͸ Ͳ͏΍ͬͯධՁ͍ͯ͠Δ͔
6. %# 8FC
   4JUFT 8FC
   4JUFT 8FC
   4JUFT Crawler ͕αΠτΛ๚໰ͯ͠ɺϖʔδΛऩू ऩूͨ͠ϖʔδΛ֨ೲʢΠϯσΫγϯάʣ Crawler bot
7. %# 8FC
   4JUFT 8FC
   4JUFT 8FC
   4JUFT Crawler ͕αΠτΛ๚໰ͯ͠ɺϖʔδΛऩू ऩूͨ͠ϖʔδΛ֨ೲʢΠϯσΫγϯάʣ Crawler bot ͜ͷ࣌ʹ Crawler ͕ߟ͍͑ͯΔ͜ͱ͸Կ͔
8. Crawler ͕ؾʹ͍ͯ͠Δ͜ͱ • ͜ͷαΠτ͸ͲΕ͚ͩ๚໰ͯ͠େৎ෉ͳΜͩ Ζ͏͔ɾɾɾʁ • ͲΕ͘Β͍ͷස౓Ͱ๚໰͢Δͱྑ͍΋ͷͳΜ ͩΖ͏͔ɾɾɾʁ • αΠτ͕๻ͷ͍ͤͰམͪͪΌͬͨΒ΍ͩ ͳ͊ɻɻɻ
9. 8FC
   4JUFT Crawler bot GET /articles/1 500 Server Error ๚໰ͨ͠Βམͪ ͪΌͬͨʂ
   ͠͹Β͘๚໰΍ΊΑ͏
10. 8FC
    4JUFT Crawler bot GET /articles/1 200 OK ΊͬͪΌ஗͍ɻॏ͍αΠτͳͷ͔ ͳɻͦΜͳʹ๚໰͠ͳ͍΄͏͕͍͍͔ ... 10ඵܦա ...
11. Crawler ͸αΠτͷԠ౴ੑೳͱ Ԡ౴҆ఆੑΛݟ͍ͯΔ • ͦͷ্ͰɺαΠτʹ๚໰ͯ͠ྑ͍ස౓ɺ࠶๚ ໰ظ͕ܾؒ·Δɻ • ΋͠΋஗͔ͬͨΓɺԠ౴ੑೳ͕ѱ͍ͱ๚໰͠ ͯ͘Εͳ͍ɻ • Ұ౓ͷ๚໰ͰΠϯσοΫε͞ΕΔϖʔδ͕গ ͳ͘ͳΔ͜ͱΛҙຯ͢Δɻ
12. Crawler ͸αΠτͷԠ౴ੑೳͱ Ԡ౴҆ఆੑΛݟ͍ͯΔ • ͦͷ্ͰɺαΠτʹ๚໰ͯ͠ྑ͍ස౓ɺ࠶๚ ໰ظ͕ܾؒ·Δɻ • ΋͠΋஗͔ͬͨΓɺԠ౴ੑೳ͕ѱ͍ͱ๚໰͠ ͯ͘Εͳ͍ɻ • Ұ౓ͷ๚໰ͰΠϯσοΫε͞ΕΔϖʔδ͕গ ͳ͘ͳΔ͜ͱΛҙຯ͢Δɻ ͜ͷ๚໰Մೳͳස౓ɺظؒΛαΠτͷ༧ࢉͱͯ͠ ܭࢉ͍ͯ͠Δɺ͜ΕΛ Crawl Budget ͱݺͿ
13. 8FC
    4JUFT ϖʔδΛμ΢ϯϩʔυͨ͠ޙ͸ϨϯμϦϯάΛߦ͏ɻ Crawler bot IUNM +4 $44 Rendering
14. 8FC
    4JUFT ϖʔδΛμ΢ϯϩʔυͨ͠ޙ͸ϨϯμϦϯάΛߦ͏ɻ Crawler bot IUNM +4 $44 Rendering Rendering݁ՌΛجʹίϯςϯπͷείΞ෇͚Λߦ ͍ɺ࠷ऴతʹΠϯσοΫεʹ൓ө͢Δ
15. 8FC
    4JUFT ϨϯμϦϯάʹΊͬͪΌίετ͕͔͔Δͱͦ Ε͸ͦΕͰධՁʹӨڹ͢Δ Crawler bot CMBOL
    IUNM +4 $44 Rendering
16. 8FC
    4JUFT ϖʔδ͕ 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 ʹҰఆҎ্ͷϦΫΤε τ͕ඈΜͰ͠·͍ͬͯͨɻ 8FC
    4JUFT ૣ͔ͬͨΓ஗͔ͬͨΓ͢Δɻ
    ͳΜ͔҆ఆ͠ͳ͍ͳɻɻɻ ΦϦδϯʹϦΫΤετ͕ߴස౓Ͱඈ ΜͰ͠·͏ɻ
30. QPE Crawler bot pod ͕ͨ͘͞Μ͋ΓɺΫϥΠΞϯτͷϦΫΤετઌ͕ ෼ࢄ͞ΕΔࣄͰɺCDN಺෦ͷΩϟογϡ͕ଘࡏ͠ͳ͍ podʹߦ͘ͱɺorigin΁ͷ໰͍߹Θ͕ͤ૿͍͑ͯͨɻ 8FC
    4JUFT QPE QPE QPE
    ͕ෳ਺͋ΓɺΩϟογϡ͕͋Δ ͱ͜Ζͱແ͍ॴͰ໰͍߹Θ͕ͤൃੜͯ͠͠·ͬ ͍ͯͨ
31. CDNΛೖΕͨͷʹԠ౴ੑೳ͕҆ ఆ͠ͳ͍ • ※ Fastly Ͱ͸͋Γ·ͤΜɻ • ͋·Γஶ໊Ͱ͸ͳ͍ɺผͳCDNΛ࠾༻͍ͯ͠ ͨɻ • CDNͷpodͷ਺͕ଟ਺͋Γɺͦͷ pod શମʹ Ωϟογϡ͕ਁಁ͍ͯ͠ͳ͔ͬͨɻ
32. ղܾࡦ • CDN Λ Fastly ʹม্͑ͨͰɺ Origin Shield ͱݺ͹ΕΔ ػߏΛಋೖͨ͠ɻ • origin ͷखલͰcacheΛ࣋ͭpodʹϦΫΤετΛҕৡ͢Δ QPE QPE QPE PSJHJO
    TIJFME 8FC
    4JUFT جຊతʹDBDIF
    ͔ Βؼͬͯ͘Δɻ
    ҆ఆͨ͠Ϩεϙϯε͕͋Δɻ
33. ղܾࡦ • ͜ΕʹՃ͑ͯ Stale While Revalidate ͱݺ͹ΕΔɺҰ୴ݹ ͘ͳͬͨΩϟογϡΛฦͭͭ͠ɺཪଆͰΩϟογϡΛߋ ৽͢Δ࢓૊ΈΛಋೖͨ͠ɻ $%/ 8FC
    4JUFT ݹ͍Ωϟογϡ͔͠ແ͍ͷͰɺҰ୴ݹ ͍΋ͷΛͦͷ··ฦͭͭ͠ɺ৽͍͠ίϯςϯ πΛཪͰߋ৽͢Δ request Ұ୴Ωϟογϡ͔Βฦ͢ Ϩεϙϯεޙʹ ίϯςϯπΛ࠶ߋ৽
34. CDNΛೖΕͨͷʹԠ౴ੑೳ͕҆ ఆ͠ͳ͍ • ͲΜͳCDNΛೖΕͨͱͯ͠΋Ԡ౴ੑೳ͕ྑ͘ͳΔΘ͚ Ͱ͸ͳ͍ • ಛʹίϯςϯπͷߋ৽͕සൟʹ͋ͬͨΓɺαΠτͷߋ ৽͕සൟʹ͋ΔΑ͏ͳαΠτͩͱCDNଆͷػೳ΋ͦΕ ʹ߹Θͤͨ΋ͷ͕ඞཁ • ࠓճ͸ Origin Shield ͱ Stale While Revalidate Λ࢖ͬ ͯԠ౴ੑೳΛ҆ఆͤͨ͞
35. έʔε2: ڊେը૾͕഑৴͞Ε͍ͯͨ έʔε
36. ڊେը૾͕഑৴͞ΕΔέʔε • ฐࣾͷαΠτ͸ը૾͕ଟ͍ • ͔͠͠ɺը૾ͷϦαΠζ͕؁͍ͱ͜Ζ͕ଟ͍ • ख࡞ۀͷϦαΠζʹΑΓɺ͖ͪΜͱͨ͠ม׵͕ ͞Ε͍ͯͳ͍έʔε΋༗Δ • ·͍͔ͨͭ͘ͷαΠτ͸దͨ͠ը૾ϑΥʔϚο τ͕࢖ΘΕ͍ͯͳ͔ͬͨΓ͢Δ
37. 8FC
    4JUFT ը૾͕ॏ͍ͱԠ౴ੑೳ΋ѱ͍͕ɺϨϯμϦϯάύ ϑΥʔϚϯε΋ѱ͘ͳΔɻ Crawler bot IUNM +4 $44 Rendering JNBHFT JNBHFT JNBHFT
38. ղܾࡦ • Fastly ͷ Image Optimizer ʹΑΓɺCDN্Ͱ ը૾ͷ࠷దԽΛߦ͏Α͏ʹͨ͠ɻ • ΋͘͠͸ը૾ͷ࠷దԽΛӡ༻ʹ࣮֬ʹ૊Έࠐ ΉΑ͏ʹ͠ɺ΋͠΋࿙Εͨͱͯ͠΋ݕ஌Ͱ͖ Δ࢓૊ΈΛ lighthouse CI ͳͲͰߏஙͨ͠ɻ
39. खલʹ͍ΔCDN͕ը૾ͷϑΥʔϚοτΛ࠷దԽ͠ɺ ΫϥΠΞϯτʹ߹Θͤͯ഑৴͢Δɻ JNBHFT
    XFCQ $%/
    *NBHF
    0QUJNJ[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