性能に関する考え方

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