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

8db25e0b7660401e17c6488a07b47a95?s=47 bashow
April 26, 2020

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

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

8db25e0b7660401e17c6488a07b47a95?s=128

bashow

April 26, 2020
Tweet

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