Web pageのパフォーマンスの測定手法

第6回 WSA研究会
Web pageのパフォーマンスの測定手法

1. ୈ6ճ WSAݚڀձ Web pageͷύϑΥʔϚϯεͷଌఆख๏ BashowʢShogo Asabaʣ 2020/4/26
2. Agenda • ࣗݾ঺հ • എܠ • Web pageͷύϑΥʔϚϯε • Speed Index • netsimon • ܭଌ݁Ռ • ߟ࡯ • ·ͱΊ 2
3. Shogo Asaba • झຯɿ • ίʔώʔ • ֶੜ࣌୅ʢJAISTʣɿ • ωοτϫʔΫͷҟৗݕ஌ • ෋࢜௨ݚڀॴɿ • ࣍ੈ୅Data CenterωοτϫʔΫ • ࣍ੈ୅HCIͷݕ౼ 3
4. എܠ • Web pageͷඳ͕ࣸ஗͍ͱ… • ผͷWeb pageʹҠಈ • લճඳࣸͷ஗͍ͱײͨ͡Web pageΛආ͚Δ͜ͱ΋ • ఆظతʹWeb pageͷύϑΥʔϚϯεΛఆྔతʹධՁ͢Δ ͜ͱͰύϑΥʔϚϯεΛվળ͢Δ͜ͱ͸ॏཁ 4
5. WebϖʔδͷύϑΥʔϚϯε • Google LighthouseʹΑΔͱ[1][2] 5 ࢦඪ આ໌ First Contentful Paint PageʹΞΫηε͔ͯ͠Β͸͡Ίʹจࣈ΍ը૾͕ඳը͞ΕΔ·Ͱͷ࣌ؒ Speed Index Pageͷඳը͢Δ଎౓Λࣔ͢ࢦඪ Time to Interactive Page͕ૢ࡞Ͱ͖Δ·Ͱͷ࣌ؒ First Meaningful Paint Pageͷίϯςϯπ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒ First CPU Idle PageඳըΛߦ͏εϨου͕͸͡ΊʹΞΠυϧঢ়ଶʹͳΔ·Ͱͷ࣌ؒ Estimated Input Latency Ϣʔβͷೖྗ஗Ԇ 1. https://github.com/GoogleChrome/lighthouse 2. https://knowledge.sakura.ad.jp/21477/
6. Speed Index [3] • Web pageͷՄࢹ෦෼͕දࣔ͞ΕΔ·Ͱͷฏۉ࣌ؒ • Web pageͷίϯςϯπ͕ͲΕ͚ͩૣ͘ࢹ֮తʹදࣔ͞ΕΔͷ͔ • ଌఆ஋͸௿͍΄Ͳྑ͍Web pageͰ͋Δ 6 3. https://developers.google.com/web/tools/lighthouse/audits/speed-index
7. Speed IndexͷΠϝʔδ [4] • AͷWeb page • ͸͡Ίͷϩʔυ࣌ʹಡΈࠐΈྔ͕ଟ͘ϩʔυͷऴΘΓʹͭΕͯಡΈࠐΈྔ͕গͳ͍ • BͷWeb page • ͸͡Ίͷϩʔυ࣌ʹಡΈࠐΈྔ͕গͳ͘ϩʔυͷऴΘΓʹ͍ͭͯಡΈࠐΈྔ͕ଟ͍ 7 A B ͜͜ͷ͕ࠩॏཁ 4. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
8. Speed IndexͷܭࢉΠϝʔδ 8 A B ͜͜ͷ͕ࠩॏཁ
9. netsimon • netsimon(NET Speed Index MONitoring)Λ࡞੒ͨ͠ • ఆظతʹෳ਺ͷWeb pageͷSpeed IndexΛଌఆ͢Δͨ Ίͷπʔϧ • Web pageͷSpeed IndexΛఆظతʹଌఆ͢Δ͜ͱͰ஋ʹ มԽ͕͋Δͷ͔ௐࠪ • ࣌ؒଳʹΑͬͯมԽ͢Δͷ͔ 9 • https://github.com/bashow0316/netsimon
10. netsimonͷଌఆಈ࡞ 10 netsimon Internet www.google.com www.amazon.co.jp www.yahoo.co.jp ① ② ① ② ① ② ③, ④, ⑤ 1. Web pageʹΞΫηε 2. Web pageΛऔಘ 3. Speed IndexͳͲͷࢦඪΛܭࢉ 4. Speed IndexͳͲͷࢦඪΛσʔλϕʔεʹ֨ೲ 5. Speed IndexͳͲͷࢦඪΛ࣌ܥྻͰՄࢹԽ • 1. 2. ͸puppeteer • https://github.com/puppeteer/puppeteer • 3. ͸speedline • https://developers.google.com/web/tools/lighthouse/audits/speed-index • 4. 5. ͸ElasticsearchͱkibanaΛdockerͰಈ࡞ͤͯ͞࡞੒ • https://hub.docker.com/_/elasticsearch, https://hub.docker.com/_/kibana
11. ଌఆ݁Ռ • netsimonΛ࢖ͬͯ2िؒఔ౓σʔλΛཷΊͨ݁Ռ • 5෼ʹ1ճΛ2िؒଌఆ • ଌఆαʔό͸ݻఆ 11 • https://sindan.jpcert.ccʢ1िؒ΄Ͳެ։ʣ • User : wsa • Password : wsa2020
12. ߟ࡯ • දࣔ͢Δίϯςϯπࣗମ͕େ͖͘มԽ͍ͯ͠ΔͱSpeed Index΋େ͖͘มԽ͢Δ • Youtube͸࠷େ஋ͱ࠷খ஋ͷ͕ࠩ2000ఔ౓ • Apple͸࠷େ஋ͱ࠷খ஋ͷ͕ࠩ1000ఔ౓ • Speed Indexͷมಈ͸CDN΍DNSͷӨڹ͕ड͚͍ͯΔͱ ߟ͑ΒΕΔ 12
13. ·ͱΊ • ఆظతʹWeb pageͷSpeed IndexΛଌఆ͢ΔπʔϧΛ࡞੒ͯ͠2ि ؒఔ౓ଌఆͨ͠ • CDN΍DNSͷੑೳධՁʹSpeed Index͸ར༻Ͱ͖Δ͔ • ༷ʑͳҟͳΔ৔ॴ͔Βܭଌ͢Δͱྑ͍͔ • ΩϟϦΞ໢΍ݻఆճઢ͔ΒͷΞΫηεʹΑͬͯมԽ͕͋Δͷ͔ • ωοτϫʔΫঢ়ଶͱͱ΋ʹܭଌΛ͢Δ͜ͱͰো֐ΛղੳͰ͖Δ͔ • Web pageͷΞΫηε࣌ͷωοτϫʔΫͷϨΠςϯγʹΑͬͯͲͷΑ ͏ʹදࣔ͢Δྔ΍಺༰ͷมߋΛߦ͏ͷ͔ 13