ୈ6ճ WSAݚڀձ Web pageͷύϑΥʔϚϯεͷଌఆख๏ BashowʢShogo Asabaʣ 2020/4/26

Agenda • ࣗݾ঺հ • എܠ • Web pageͷύϑΥʔϚϯε • Speed Index • netsimon • ܭଌ݁Ռ • ߟ࡯ • ·ͱΊ 2

Shogo Asaba • झຯɿ • ίʔώʔ • ֶੜ࣌୅ʢJAISTʣɿ • ωοτϫʔΫͷҟৗݕ஌ • ෋࢜௨ݚڀॴɿ • ࣍ੈ୅Data CenterωοτϫʔΫ • ࣍ੈ୅HCIͷݕ౼ 3

എܠ • Web pageͷඳ͕ࣸ஗͍ͱ… • ผͷWeb pageʹҠಈ • લճඳࣸͷ஗͍ͱײͨ͡Web pageΛආ͚Δ͜ͱ΋ • ఆظతʹWeb pageͷύϑΥʔϚϯεΛఆྔతʹධՁ͢Δ ͜ͱͰύϑΥʔϚϯεΛվળ͢Δ͜ͱ͸ॏཁ 4

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/

Speed Index [3] • Web pageͷՄࢹ෦෼͕දࣔ͞ΕΔ·Ͱͷฏۉ࣌ؒ • Web pageͷίϯςϯπ͕ͲΕ͚ͩૣ͘ࢹ֮తʹදࣔ͞ΕΔͷ͔ • ଌఆ஋͸௿͍΄Ͳྑ͍Web pageͰ͋Δ 6 3. https://developers.google.com/web/tools/lighthouse/audits/speed-index

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

Speed IndexͷܭࢉΠϝʔδ 8 A B ͜͜ͷ͕ࠩॏཁ

netsimon • netsimon(NET Speed Index MONitoring)Λ࡞੒ͨ͠ • ఆظతʹෳ਺ͷWeb pageͷSpeed IndexΛଌఆ͢Δͨ Ίͷπʔϧ • Web pageͷSpeed IndexΛఆظతʹଌఆ͢Δ͜ͱͰ஋ʹ มԽ͕͋Δͷ͔ௐࠪ • ࣌ؒଳʹΑͬͯมԽ͢Δͷ͔ 9 • https://github.com/bashow0316/netsimon

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

ଌఆ݁Ռ • netsimonΛ࢖ͬͯ2िؒఔ౓σʔλΛཷΊͨ݁Ռ • 5෼ʹ1ճΛ2िؒଌఆ • ଌఆαʔό͸ݻఆ 11 • https://sindan.jpcert.ccʢ1िؒ΄Ͳެ։ʣ • User : wsa • Password : wsa2020

ߟ࡯ • දࣔ͢Δίϯςϯπࣗମ͕େ͖͘มԽ͍ͯ͠ΔͱSpeed Index΋େ͖͘มԽ͢Δ • Youtube͸࠷େ஋ͱ࠷খ஋ͷ͕ࠩ2000ఔ౓ • Apple͸࠷େ஋ͱ࠷খ஋ͷ͕ࠩ1000ఔ౓ • Speed Indexͷมಈ͸CDN΍DNSͷӨڹ͕ड͚͍ͯΔͱ ߟ͑ΒΕΔ 12

·ͱΊ • ఆظతʹWeb pageͷSpeed IndexΛଌఆ͢ΔπʔϧΛ࡞੒ͯ͠2ि ؒఔ౓ଌఆͨ͠ • CDN΍DNSͷੑೳධՁʹSpeed Index͸ར༻Ͱ͖Δ͔ • ༷ʑͳҟͳΔ৔ॴ͔Βܭଌ͢Δͱྑ͍͔ • ΩϟϦΞ໢΍ݻఆճઢ͔ΒͷΞΫηεʹΑͬͯมԽ͕͋Δͷ͔ • ωοτϫʔΫঢ়ଶͱͱ΋ʹܭଌΛ͢Δ͜ͱͰো֐ΛղੳͰ͖Δ͔ • Web pageͷΞΫηε࣌ͷωοτϫʔΫͷϨΠςϯγʹΑͬͯͲͷΑ ͏ʹදࣔ͢Δྔ΍಺༰ͷมߋΛߦ͏ͷ͔ 13