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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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/
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide