Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

bashow
April 26, 2020

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

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

bashow

April 26, 2020
Tweet

More Decks by bashow

Other Decks in Programming

Transcript

  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