$30 off During Our Annual Pro Sale. View Details »

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

    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