性能に関する考え方

by Yosuke Furukawa

Slide 1

Slide 1 text

ੑೳʹؔ͢Δߟ͑ํ 2021/12/8 @ Yamagoya Fastly

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

%# 8FC4JUFT 8FC4JUFT 8FC4JUFT Crawler ͕αΠτΛ๚໰ͯ͠ɺϖʔδΛऩू ऩूͨ͠ϖʔδΛ֨ೲʢΠϯσΫγϯάʣ Crawler bot ͜ͷ࣌ʹ Crawler ͕ߟ͍͑ͯΔ͜ͱ͸Կ͔

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

8FC4JUFT Crawler bot GET /articles/1 500 Server Error ๚໰ͨ͠Βམͪ ͪΌͬͨʂ ͠͹Β͘๚໰΍ΊΑ͏

Slide 10

Slide 10 text

8FC4JUFT Crawler bot GET /articles/1 200 OK ΊͬͪΌ஗͍ɻॏ͍αΠτͳͷ͔ ͳɻͦΜͳʹ๚໰͠ͳ͍΄͏͕͍͍͔ ... 10ඵܦա ...

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

8FC4JUFT ϖʔδΛμ΢ϯϩʔυͨ͠ޙ͸ϨϯμϦϯάΛߦ͏ɻ Crawler bot IUNM +4 $44 Rendering

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

8FC4JUFT ϖʔδ͕ JavaScript ͳͲͰߏங͞ΕΔ৔߹͸ JSΛ࣮ߦͯ͠ϨϯμϦϯά͢Δɻ Crawler bot CMBOL IUNM +4 $44 Rendering ϖʔδʹίϯςϯπ͕ͳ͍ͷͰɺ+4 Λ࣮ߦͯ͠ίϯςϯπΛදࣔ͠Α͏ ஗͍ʂʂʂ͋·Γʹ΋͕͔͔࣌ؒΔ ͳΒεΩοϓ͢Δɻ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Slide 19

Slide 19 text

͞Βʹ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Core Web Vitals • Largest Contentful Paint: ϖʔδ্ͷҰ൪࠷େ໘ੵΛ࣋ͬͯ ͍ΔΤϦΞ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒʢώʔϩʔը૾ͷදࣔ࣌ ؒͳͲʣ • First Input Delay: ϨϯμϦϯά͕։࢝͞Ε͔ͯΒೖྗՄೳʹ ͳΔ·Ͱͷ࣌ؒʢԡͯ͠΋൓Ԡ͠ͳ͍ϖʔδͳͲʣ • Cumulative Layout Shift: ϨϯμϦϯά్தͰίϯςϯπ͕ ͣΕͨ৔߹ͷζϨ෯ʢޡλοϓૂ͍ͷ޿ࠂͳͲ͕Α͘΍Δ΍ ͭʣ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Crawler bot ͕๚໰͢Δ࣌ʹؾ Λ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱ • ͦ΋ͦ΋Ԡ౴ੑೳΛߴ͘อͨͳ͍ͱ͍͚ͳ͍ • ๚໰தʹམͪͯ͸͍͚ͳ͍ • ๚໰ޙͷϨϯμϦϯάͷύϑΥʔϚϯε΋ߴ͘ͳ ͍ͱ͍͚ͳ͍ • ͜ΕΒΛؾΛ্͚ͭͨͰɺ Core Web Vitals ͳͲ ͷ৽͍͠ࢦඪʹ΋έΞ͕ඞཁ ؾΛ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱ͸ଟ͍ɻ͔͠΋ఆৗ։ൃ ࡞ۀΛ͍ͯ͠Δ͚ͩͰ͸தʑؾ͚ͮͳ͔ͬͨΓ͢Δ

Slide 24

Slide 24 text

ϦΫϧʔτࣾ಺Ͱ͸֤αΠτ ͷঢ়گΛఆظతʹΞηεϝϯ τ͠ɺमਖ਼Ͱ͖Δͱ͜Ζ͔Β मਖ਼͍ͯ͠Δ

Slide 25

Slide 25 text

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/

Slide 26

Slide 26 text

࣮ࡍʹ͋ͬͨέʔεͱ ͦͷղܾࡦ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

$%/ Crawler bot ҆ఆ͢Δ͔ͳʔͱࢥ͚ͬͨͲɺ଎͍࣌΋஗͍࣌΋͋ͬ ͨɻΑ͘Α͘ݟΔͱɺ origin ʹҰఆҎ্ͷϦΫΤε τ͕ඈΜͰ͠·͍ͬͯͨɻ 8FC4JUFT ૣ͔ͬͨΓ஗͔ͬͨΓ͢Δɻ ͳΜ͔҆ఆ͠ͳ͍ͳɻɻɻ ΦϦδϯʹϦΫΤετ͕ߴස౓Ͱඈ ΜͰ͠·͏ɻ

Slide 30

Slide 30 text

QPE Crawler bot pod ͕ͨ͘͞Μ͋ΓɺΫϥΠΞϯτͷϦΫΤετઌ͕ ෼ࢄ͞ΕΔࣄͰɺCDN಺෦ͷΩϟογϡ͕ଘࡏ͠ͳ͍ podʹߦ͘ͱɺorigin΁ͷ໰͍߹Θ͕ͤ૿͍͑ͯͨɻ 8FC4JUFT QPE QPE QPE͕ෳ਺͋ΓɺΩϟογϡ͕͋Δ ͱ͜Ζͱແ͍ॴͰ໰͍߹Θ͕ͤൃੜͯ͠͠·ͬ ͍ͯͨ

Slide 31

Slide 31 text

CDNΛೖΕͨͷʹԠ౴ੑೳ͕҆ ఆ͠ͳ͍ • ※ Fastly Ͱ͸͋Γ·ͤΜɻ • ͋·Γஶ໊Ͱ͸ͳ͍ɺผͳCDNΛ࠾༻͍ͯ͠ ͨɻ • CDNͷpodͷ਺͕ଟ਺͋Γɺͦͷ pod શମʹ Ωϟογϡ͕ਁಁ͍ͯ͠ͳ͔ͬͨɻ

Slide 32

Slide 32 text

ղܾࡦ • CDN Λ Fastly ʹม্͑ͨͰɺ Origin Shield ͱݺ͹ΕΔ ػߏΛಋೖͨ͠ɻ • origin ͷखલͰcacheΛ࣋ͭpodʹϦΫΤετΛҕৡ͢Δ QPE QPE QPE PSJHJO TIJFME 8FC4JUFT جຊతʹDBDIF͔ Βؼͬͯ͘Δɻ ҆ఆͨ͠Ϩεϙϯε͕͋Δɻ

Slide 33

Slide 33 text

ղܾࡦ • ͜ΕʹՃ͑ͯ Stale While Revalidate ͱݺ͹ΕΔɺҰ୴ݹ ͘ͳͬͨΩϟογϡΛฦͭͭ͠ɺཪଆͰΩϟογϡΛߋ ৽͢Δ࢓૊ΈΛಋೖͨ͠ɻ $%/ 8FC4JUFT ݹ͍Ωϟογϡ͔͠ແ͍ͷͰɺҰ୴ݹ ͍΋ͷΛͦͷ··ฦͭͭ͠ɺ৽͍͠ίϯςϯ πΛཪͰߋ৽͢Δ request Ұ୴Ωϟογϡ͔Βฦ͢ Ϩεϙϯεޙʹ ίϯςϯπΛ࠶ߋ৽

Slide 34

Slide 34 text

CDNΛೖΕͨͷʹԠ౴ੑೳ͕҆ ఆ͠ͳ͍ • ͲΜͳCDNΛೖΕͨͱͯ͠΋Ԡ౴ੑೳ͕ྑ͘ͳΔΘ͚ Ͱ͸ͳ͍ • ಛʹίϯςϯπͷߋ৽͕සൟʹ͋ͬͨΓɺαΠτͷߋ ৽͕සൟʹ͋ΔΑ͏ͳαΠτͩͱCDNଆͷػೳ΋ͦΕ ʹ߹Θͤͨ΋ͷ͕ඞཁ • ࠓճ͸ Origin Shield ͱ Stale While Revalidate Λ࢖ͬ ͯԠ౴ੑೳΛ҆ఆͤͨ͞

Slide 35

Slide 35 text

έʔε2: ڊେը૾͕഑৴͞Ε͍ͯͨ έʔε

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

8FC4JUFT ը૾͕ॏ͍ͱԠ౴ੑೳ΋ѱ͍͕ɺϨϯμϦϯάύ ϑΥʔϚϯε΋ѱ͘ͳΔɻ Crawler bot IUNM +4 $44 Rendering JNBHFT JNBHFT JNBHFT

Slide 38

Slide 38 text

ղܾࡦ • Fastly ͷ Image Optimizer ʹΑΓɺCDN্Ͱ ը૾ͷ࠷దԽΛߦ͏Α͏ʹͨ͠ɻ • ΋͘͠͸ը૾ͷ࠷దԽΛӡ༻ʹ࣮֬ʹ૊Έࠐ ΉΑ͏ʹ͠ɺ΋͠΋࿙Εͨͱͯ͠΋ݕ஌Ͱ͖ Δ࢓૊ΈΛ lighthouse CI ͳͲͰߏஙͨ͠ɻ

Slide 39

Slide 39 text

खલʹ͍ΔCDN͕ը૾ͷϑΥʔϚοτΛ࠷దԽ͠ɺ ΫϥΠΞϯτʹ߹Θͤͯ഑৴͢Δɻ JNBHFT XFCQ $%/ *NBHF0QUJNJ[FS JNBHFT BW Browser A Browser B

Slide 40

Slide 40 text

Before => After • Before • After

Slide 41

Slide 41 text

Before => After • Before • After 3398ms => 1729ms ʹLCPΛ࡟ݮɺԠ౴ੑೳ҆ఆԽʹد༩

Slide 42

Slide 42 text

έʔε3: 3rd party resource ΁ͷϦΫ Τετ͕ଟ͍

Slide 43

Slide 43 text

3rd party resource ΁ͷϦΫΤ ετ͕ଟ͍ • ௕೥ͣͬͱӡ༻͞Ε͖ͯͨ͜ͱͰɺ3rd party resource ͕΋ͷ͘͢͝ଟ͍ɻ • A/Bςετɺ޿ࠂɺ෼ੳπʔϧͳͲͳͲͷπʔϧ ྨΛಋೖͯ͠ޮՌΛଌఆͯ͠... • ͱ͍͏աఔͷதͰνϦπϞͰϦΫΤετ͕૿͑ͯ ͍ͬͯ͠·ͬͨɻ

Slide 44

Slide 44 text

3rd party resource ΁ͷϦΫΤ ετ͕ଟ͍ ҰͭͷϚϧ͕ϦΫΤετઌΛද͢ɻ͜͜Ͱݴ͏ͱɺ਺ेݸͷ ϦιʔεΛμ΢ϯϩʔυ͍ͯ͠Δɻ

Slide 45

Slide 45 text

ղܾࡦ • ٕज़తͳϨΠϠͰͷղܾࡦ͸ͳ͍ • աڈʹ࢖ͬͨ΋ͷͰࠓ࢖͍ͬͯͳ͍΋ͷΛؔ࿈ ෦ॺʹώΞϦϯά͠ɺ࢖͍ͬͯͳ͍΋ͷΛআ٫ • ঃʑʹݮΒ͢Α͏ʹ࿈བྷ͠ͳ͕ΒαΠζΛϞχ λϦϯά͍ͯ͠Δɻ • ·ͩ͜ͷ׆ಈ͸ܧଓதɻɻɻ

Slide 46

Slide 46 text

ੑೳվળ͸୹ڑ཭૸Ͱ͸ͳ͍ɻ ௕ڑ཭૸Ͱ΋ͳ͍ɻ ϩϯάδϟʔχʔͰ͋Δɻ

Slide 47

Slide 47 text

ੑೳվળ • ΢ΣϒΞϓϦέʔγϣϯʹ͓͍ͯ͸ࢸ্໋୊Ͱ͋Δ • ҰํͰ୹ڑ཭Ͱαοͱ΍ͬͯҰճͰ์ஔͯ͠͠·͏ͱɺ݁ ہ௕͍໨ͰݟΔͱແҙຯͩͬͨΓ͢Δɻ • ࢦඪ΋มΘΔ͠ɺྼԽ͢ΔϙΠϯτ΋มΘΔ • ͣͬͱ௕͍ظؒΛ௨ͯ͠αʔϏεͷঢ়گΛϞχλϦϯά͠ ଓ͚Δඞཁ͕͋Δɻ • ͜͏͍͏νʔϜΛ࡞Γɺࣾ಺ͷจԽʹ͢Δඞཁ͕͋Δɻ

Slide 48

Slide 48 text

·ͱΊ

Slide 49

Slide 49 text

·ͱΊ • Ϋϩʔϥ͔ΒݟΔͱ࣮͸৭ʑͱݕ౼͠ͳ͍ͱ͍͚ͳ͍͜ͱ͕ଟ͍ • ΫϩʔϦϯάόδΣοτ • ϨϯμϦϯάόδΣοτ • Core Web Vitals • ͦͷ্Ͱ࠷దԽΛ͖ͯͨ͠ɻ • ੑೳվળ͕࣮ࢪͰ͖ͨ • ͨͩ͠ɺ·ͩಓ൒͹ɺಛʹٕज़తͳϨΠϠҎ্ͷͱ͜ΖͰ͸ࠓޙ΋վળͷ༨஍͕͋Δ • ੑೳվળ͸୹ظεύϯͰऴΘΔΑ͏ͳ࿩Ͱ͸ͳ͘ɺத௕ظΛݟਾ͑ͯ௕͍εύϯͰ΍ͬͯ ͍͘ඞཁ͕͋Δ

Slide 50

Slide 50 text

ࢀߟจݙ • 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