LighthouseCIによるパフォーマンス測定/Performance measurement with LighthouseCI

SREチームの中岡が、ココナラ様・ソーシャルデータバンク様との合同勉強会にて登壇した際の資料となります。

Transcript

1. LighthouseCIʹΑΔύϑΥʔϚϯεଌఆ 2025/09/29ɹגࣜձࣾϫϯΩϟϦΞ தԬ ໌׮
2. Career झຯ ͻͱ͜ͱ ONE CAREER Inc . ࣗݾ঺հ Copyright © ONE CAREER Inc. All Rights Reserved. தԬ ໌׮ ॴଐձࣾɿSIer → SES → ࣄۀձࣾ ΩϟϦΞɿΠϯϑϥΤϯδχΞ → Ϛωʔδϟʔ → SRE(ࠓ) 2 εΩϡʔόμΠϏϯά SRE ຊ೔͸ΑΖ͓͘͠ئ͍͠·͢ʂ
3. ໨࣍ Copyright © ONE CAREER Inc. All Rights Reserved. 3 • Core Web Vitalsʹ͍ͭͯ • LighthouseCIͷಋೖͷഎܠ • ಋೖʹΑΔ৽ͨͳ՝୊ • ղܾࡦͱ݁Ռ • ·ͱΊ
4. ໨࣍ Copyright © ONE CAREER Inc. All Rights Reserved. 4 • Core Web Vitalsʹ͍ͭͯ • LighthouseCIͷಋೖͷഎܠ • ಋೖʹΑΔ৽ͨͳ՝୊ • ղܾࡦͱ݁Ռ • ·ͱΊ
5. Copyright © ONE CAREER Inc. All Rights Reserved. 5 Core Web VitalsΛ͝ଘ͡Ͱ͔͢ʁ
6. Copyright © ONE CAREER Inc. All Rights Reserved. ࠷େίϯςϯπͷදࣔ࣌ؒ 2.5ඵҎ಺͕ཧ૝ ϢʔβʔΞΫγϣϯޙͷදࣔ଎౓ 200ϛϦඵະຬ͕ཧ૝ ૢ࡞࣌ͷදࣔζϨ౓߹͍ 0.1ະຬ͕ཧ૝ Core Web Vitalsͱ͸ 6 ϢʔβʔମݧʢUXʣΛΑΓྑ͘͢ΔͨΊGoogleͰఏএ͞ΕͨҎԼ3ͭͷࢦඪ ϫϯΩϟϦΞͰ͸ɺϢʔβʔମݧʹ௚݁͢ΔLCPΛɺSLOͷࢦඪͷͻͱͭͱͯ͠ܭଌ ը૾ࢀরݩɿhttps://www.debugbear.com/blog/hardest-core-web-vitals-metric
7. Copyright © ONE CAREER Inc. All Rights Reserved. ϫϯΩϟϦΞͰ͸ɺChromeͷ։ൃπʔϧʹ಺ଂ͞Ε͍ͯΔʮLighthouseʯΛ༻͍ͯଌఆ Core Web VitalsΛଌఆ͢Δπʔϧ 7 LighthouseɿҎԼ5ͭͷࢦඪ͔Β Core Web Vitals ΛଌఆͰ͖ΔΦʔϓϯιʔεͷπʔϧ ɹ࠷େίϯςϯπͷදࣔ࣌ؒ ɹૢ࡞࣌ͷදࣔζϨ౓߹͍ ɹϢʔβʔૢ࡞ʹϖʔδ͕Ԡ౴Ͱ͖ͳ͍࣌ؒͷ߹ܭ ɹϒϥ΢β͕࠷ॳͷDOMίϯςϯπඳըʹ͔͔Δ࣌ؒ ɹϖʔδͷಡΈࠐΈதʹίϯςϯπ͕ࢹ֮తʹදࣔ͞ΕΔ࣌ؒ ɹLCPʢLargest Contentful Paintʣ ɹCLSʢCumulative Layout Shiftʣ ɹTBTʢTotal Blocking Timeʣ ɹFCPʢFirst Contentful Paintʣ ɹSI ʢSpeed Indexʣ ब׆αΠτʮϫϯΩϟϦΞʯͷ Topϖʔδ΍ॏཁը໘ͳͲΛର৅ʹ ܭଌ
8. ໨࣍ Copyright © ONE CAREER Inc. All Rights Reserved. 8 • Core Web Vitalsʹ͍ͭͯ • LighthouseCIͷಋೖͷഎܠ • ಋೖʹΑΔ৽ͨͳ՝୊ • ղܾࡦͱ݁Ռ • ·ͱΊ
9. Copyright © ONE CAREER Inc. All Rights Reserved. LighthouseͰ͸ଌఆ݁Ռ͕҆ఆͤͣɺLighthouseCIͷಋೖΛ࣮ࢪ LighthouseCIͷಋೖͷഎܠ 9 • ౰ॳͷํ๏ɿChrome಺ଂͷʮLighthouseʯͰखಈଌఆ • ௚໘ͨ͠՝୊ɿ݁Ռ͕҆ఆ͠ͳ͍ ◦ ଌఆ͢ΔPCͷੑೳ΍ωοτ؀ڥʹΑͬͯ਺஋͕ҟͳΓɺ݁ՌΛਖ਼֬ʹൺֱͰ͖ͳ͍ঢ়گʹ • ղܾࡦɿࣗಈԽπʔϧͷʮLighthouseCIʯΛಋೖ • ໨తɿ͍ͭɾ୭͕΍ͬͯ΋ʮಉ͡؀ڥʯͰଌఆͰ͖ΔΑ͏ʹ͢Δ
10. Copyright © ONE CAREER Inc. All Rights Reserved. WebαΠτͷύϑΥʔϚϯεΛܧଓతʹ؂ࢹɾվળ͢ΔͨΊͷࣗಈԽπʔϧ LighthouseCIͱ͸ʁ 10 • Github ActionsͳͲͷCI/CD؀ڥͰ࣮ߦ • ࣮ߦ؀ڥ͕ಉҰͳͷͰɺϒϨ͕ى͜Γʹ͍͘͸ͣ • ࢀߟɿLighthouseCIͷϦϙδτϦ ◦ https://github.com/GoogleChrome/lighthouse-ci
11. Copyright © ONE CAREER Inc. All Rights Reserved. 11 ࢀߟɿLighthouseCIͷઃఆ (Github Actionsͷ৔߹) name: Lighthouse CI on: workflow_dispatch: # खಈ࣮ߦ jobs: lighthouse: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v5 - name: Setup Node.js uses: actions/setup-node@v5 with: node-version: '22' - name: Install dependencies run: | npm install -g @lhci/cli@0.15.x - name: Run Lighthouse CI # ConfigϑΝΠϧͷఆٛʹै࣮ͬͯߦ run: lhci collect --config=.lighthouseci/lighthouserc.js env: LHCI_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Prepare artifacts if: always() run: | mkdir -p lighthouse-reports cp .lighthouseci/lhr-*.html lighthouse-reports/ || echo "No HTML files to copy" cp .lighthouseci/lhr-*.json lighthouse-reports/ || echo "No JSON files to copy" ls -la lighthouse-reports/ - name: Upload Lighthouse reports # ݁ՌΛGithub্͔Βμ΢ϯϩʔυՄೳʹ͢Δ uses: actions/upload-artifact@v4 if: always() with: name: lhci-report path: lighthouse-reports/ retention-days: 30 “.github/workflows/lighthouse-ci.yml” ͱ͍͏ϑΝΠϧ໊Ͱ࡞੒
12. Copyright © ONE CAREER Inc. All Rights Reserved. ࢀߟɿLighthouseCIͷઃఆ (Github Actionsͷ৔߹) 12 collect: { url: [ 'https://onecareer.jp/', // ଌఆ͍ͨ͠URL ], numberOfRuns: 3, // ࢼߦճ਺ settings: { preset: 'desktop', formFactor: 'desktop', // σεΫτοϓ؀ڥΛ໌ࣔతʹࢦఆ onlyCategories: ['performance'], // ύϑΥʔϚϯεଌఆʹूத ConfigϑΝΠϧ: “lighthouserc.js“ ͱ͍͏ϑΝΠϧ໊Ͱهड़ʢҎԼɺઃఆ಺༰Λൈਮʣ
13. Copyright © ONE CAREER Inc. All Rights Reserved. ࢀߟɿLighthouseCIͷઃఆ (Github Actionsͷ৔߹) 13 throttling: { rttMs: 10, // ϥ΢ϯυτϦοϓλΠϜ(ms) requestLatencyMs: 0, // ϦΫΤετϨΠςϯγ downloadThroughputKbps: 9000, // μ΢ϯϩʔυ଎౓ɿ9Mbps uploadThroughputKbps: 9000, // Ξοϓϩʔυ଎౓ɿ9Mbps cpuSlowdownMultiplier: 0.1 // CPUੑೳ10ഒԽʢM4 Pro/Max૬౰ʣ }, throttlingMethod: 'simulate', // ࣮ࡍͷ௨৴͸ߦΘͣܭࢉͰ༧ଌ } ConfigϑΝΠϧ: “lighthouserc.js“ ͱ͍͏ϑΝΠϧ໊Ͱهड़ʢҎԼɺઃఆ಺༰Λൈਮʣ
14. Copyright © ONE CAREER Inc. All Rights Reserved. 14 ͜ΕͰҰ؏ͨ͠ج४Ͱ ൺֱͰ͖ΔΑ͏ʹͳͬͨ… ͸ͣͩͬͨɻ
15. ໨࣍ Copyright © ONE CAREER Inc. All Rights Reserved. 15 • Core Web Vitalsʹ͍ͭͯ • LighthouseCIͷಋೖͷഎܠ • ಋೖʹΑΔ৽ͨͳ՝୊ • ղܾࡦͱ݁Ռ • ·ͱΊ
16. Copyright © ONE CAREER Inc. All Rights Reserved. LighthouseCIͱखݩͷPCͷܭଌʹେ͖ͳ͕ࠩ... ಋೖʹΑΔ৽ͨͳ՝୊ 16 • ৽ͨͳ໰୊ɿࣗಈπʔϧͱखݩͷPCͰɺ݁Ռʹେ͖ͳ͕ࠩੜ·Εͯ͠·ͬͨ ◦ ಛʹɺ ಡΈࠐΈ଎౓ʢLCPʣ͕ ࣮ࡍΑΓ͔ͳΓ஗͍਺஋Ͱࢉग़͞Εͯ͠·͏ ࣮ػʢMacBook pro M4ʣ+ Chrome LighthouseCI
17. Copyright © ONE CAREER Inc. All Rights Reserved. Lighthouseʹ͓͚Δܭଌํ๏ͷҧ͍ͷେ͖͕͞ɺ݁ՌͷࠩΛੜΜͰ͍ͨ ͳͥ͜ͷΑ͏ͳ݁ՌʹͳΔͷ͔ʁ 17 • LighthouseCIɿSimulateϞʔυ ◦ ཧ࿦ܭࢉͰείΞΛࢉग़͢Δ ◦ WebϖʔδΛղੳ͠ɺઃఆͨ͠ύϥϝʔλͰ਺ֶతʹܭଌ͢Δ ▪ ࣮ࡍʹWebʹΞΫηε͍ͯ͠Δ݁ՌͰ͸ͳ͍ • ࣮ػɿDevToolsϞʔυ ◦ Chrome্ͰଳҬ੍ݶ΍ɺCPU࢖༻཰ͷ੍ݶΛߦ্ͬͨͰɺ࣮ࡍͷΞΫηεΛߦ͏ ◦ Πϯλʔωοτ؀ڥ΍୺຤ੑೳʹґଘ͢Δ
18. ໨࣍ Copyright © ONE CAREER Inc. All Rights Reserved. 18 • Core Web Vitalsʹ͍ͭͯ • LighthouseCIͷಋೖͷഎܠ • ಋೖʹΑΔ৽ͨͳ՝୊ • ղܾࡦͱ݁Ռ • ·ͱΊ
19. Copyright © ONE CAREER Inc. All Rights Reserved. LighthouseCIͷܭࢉ৚݅Λௐ੔͠ɺܭࢉ݁Ռ͕࣮ࡍͷ؀ڥͷ஋ʹۙ͘ͳΔΑ͏ʹνϡʔχϯά ղܾࡦ 19 είΞʹେ͖͘Өڹ͢ΔύϥϝʔλʢεϩοτϦϯάઃఆपΓʣ ߲໨ rttMS ʢϥ΢ϯυτϦοϓλΠϜʣ requestLatencyMs ʢϦΫΤετ։࢝ϨΠςϯγʣ ֓ཁ αʔόʔͱΫϥΠΞϯτؒͰɺ ύέοτ͕ԟ෮͢Δͷʹ͔͔Δ࣌ؒʢϛϦඵʣ ϒϥ΢β͕ϦΫΤετΛ։͔࢝ͯ͠Β ࣮ࡍʹωοτϫʔΫૹ৴͕࢝·Δ·Ͱͷ஗Ԇ ௐ੔ํ਑ DevToolsϞʔυͰ͸140msʹઃఆ͞Ε͍ͯΔ͕ SimulateϞʔυͰಉ͡஋Λ࢖͏ͱείΞ͕ஶ͘͠௿Լ → ࠷ऴతʹ10msʹௐ੔ɹɹ جຊతʹ0msͰ໰୊ͳ͍ͱ൑அ
20. Copyright © ONE CAREER Inc. All Rights Reserved. LighthouseCIͷܭࢉ৚݅Λௐ੔͠ɺܭࢉ݁Ռ͕࣮ࡍͷ؀ڥͷ஋ʹۙ͘ͳΔΑ͏ʹνϡʔχϯά ղܾࡦ 20 CPUॲཧೳྗઃఆ ߲໨ cpuSlowdownMultiplier CPU੍ݶഒ཰ʢεϩοτϦϯά܎਺ʣ ֓ཁ ࣮ࡍͷCPUੑೳʹର͢Δ੍ݶഒ཰ 1.0͕ඪ४Ͱɺ਺஋Λ্͛Δͱ௿଎ʹɺ਺஋ΛԼ͛Δͱߴ଎ʹͳΔ benchmarkindexͷ஋Λݩʹഒ཰Λܾఆ͢Δ ɾ஋͕2.0ɿCPUͷ଎౓͕஗͍ʢCPU଎౓Λ൒෼ʹͯ͠ܭࢉʣ ɾ஋͕0.1ɿCPUͷ଎౓͕࠷଎ʢCPU଎౓Λ10ഒʹͯ͠ܭࢉʣ ௐ੔ํ਑ ࣮ߦ͢Δrunnerͷੑೳʹґଘ͢ΔͨΊɺCPUΛ࠷଎ʹͯ͠ܭଌ → ஋Λ0.1ʢCPUੑೳΛ10ഒͱͯ͠ܭࢉ) ʹௐ੔
21. Copyright © ONE CAREER Inc. All Rights Reserved. ύϥϝʔλௐ੔ޙͷείΞൺֱ ݁Ռ 21 LighthouseCI ࣮ػʢMacBook pro M4ʣ+ Chrome • ௐ੔લͱൺֱͯ͠ɺ࣮ػʹ͍ۙείΞ͕ग़ΔΑ͏ʹͳͬͨ • ͕ɺ࣮ػͱಉ౳ͷείΞʹ͸ͳΒͣ
22. ໨࣍ Copyright © ONE CAREER Inc. All Rights Reserved. 22 • Core Web Vitalsʹ͍ͭͯ • LighthouseCIͷಋೖͷഎܠ • ಋೖʹΑΔ৽ͨͳ՝୊ • ղܾࡦͱ݁Ռ • ·ͱΊ
23. Copyright © ONE CAREER Inc. All Rights Reserved. LighthouseCIʹΑΔύϑΥʔϚϯεଌఆ ·ͱΊ 23 ͨͩ͠ܭࢉ஋ͱ࣮ଌ஋ͷࠩΛຒΊΔͨΊ CPUͳͲͷεϩοτϦϯάઃఆΛௐ੔͢Δ͜ͱ͕ॏཁ LighthouseCI͸ɺ؀ڥʹґΒͣ CoreWebVital Λܭଌ͢Δ͜ͱ͕Ͱ͖Δ ଌఆํ๏ʹΑͬͯ਺஋͸มΘΔͨΊɺ਺஋ͷઈର஋ΑΓ΋ ܧଓͯ͠ܭଌͨ͠஋ͷਪҠΛݟΔ͜ͱ͕େ੾ʂ