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

WSOの現状とすすめかた

 WSOの現状とすすめかた

"速い"Webアプリケーションの作り方 -『Software Design』コラボ- 登壇:20分
https://raccoon-holdings.connpass.com/event/145330/

Web表示スピードの高速化について、SoftwareDesign 2019年10月号に寄稿させていただきました。
そのコラボ企画で登壇させていただいております。

モバイルユーザの増加、リッチコンテンツの増加、GoogleのSpeed UpdateによりWeb高速化はより重要視されつつあります。
昨今のWSO対策でなにが起こっているのかをご紹介しつつ、表示スピードを最適化する為の考え方と手順、最近の高速化に関する技術をご紹介します。

泰 昌平@ShoheiTai

September 26, 2019
Tweet

More Decks by 泰 昌平@ShoheiTai

Other Decks in Programming

Transcript

  1. WSOの現状とすすめかた
    泰 昌平 @ShoheiTai

    View Slide

  2. 2
    shouhei.tai
    @ShoheiTai
    泰 昌平
    スパイスファクトリー株式会社
    General Manager
    CakePHP/ PHP / Wordpress / Rails /
    React.js / Node.js / GCP / SEO / WSO
    ダーツ / バイク / VR / サバゲー / バー巡り
    tai-sho

    View Slide

  3. Software Design
    何度か寄稿させていただきました!

    View Slide

  4. CMS高速化
    CMSの高速化を競う大会(ロフトワーク主催:CMSプロレス)
    Redboxの小川社長と共同参戦し優勝。
    MovableTypeやConcrete5チームが立ち並ぶ中、単独Wordpressで勝利

    View Slide

  5. WSO Service
    スパイスファクトリーとRedbox社の共同でWebサイトの高速化・
    コンサルティングを行う、WSOサービスを2018年2月に開始

    View Slide

  6. 今日覚えて帰っていただきたいこと
    ▷ WSO (Website Speed Optimization)
    ▷ 表示速度との向き合い方
    ▷ Webの表示速度に何が起こっているか
    ▷ 高速化のための最新技術

    View Slide


  7. WSO
    Website Speed Optimization

    View Slide

  8. WSOのいま
    Webサイトスピードの傾向と最新事情

    View Slide

  9. 表示速度に関する世の中の動き
    ▷ モバイルユーザの比率が増加
    ▷ 表示速度がページランクの評価指標に採用
    ▷ フロントエンドの進歩により
    よりリッチな表現やコンテンツの実装が可能

    View Slide

  10. ユーザは
    もう待ってくれない
    速いことが当たり前になり
    リッチなコンテンツを
    より速く提供する必要がある
    10

    View Slide

  11. Googleもモバイルを意識
    ▷ 計測ツールの対象もモバイル主体に
    ○ TEST MY SITE
    ○ モバイルフレンドリーテスト
    ▷ モバイルファーストインデックス
    ▷ (Speed Update)

    View Slide

  12. 表示速度が与える影響
    ビジネスとの繋がり

    View Slide

  13. 表示速度がビジネスに与える影響
    ▷ WSOのプロジェクトを動かす為の前提
    ▷ Test My Site
    ○ 高速化によるビジネスへの影響や競合調査
    ○ レポートが出力できる

    View Slide

  14. $100,000 / day
    ECサイトの売上
    $2,500,000 / year
    年間損失額
    1 second delay / page
    1秒の表示遅延
    14
    Source:
    How Loading Time Affects Your Bottom Line
    https://blog.kissmetrics.com/loading-time/

    View Slide

  15. 直帰率と表示速度の相関
    ● 2018年2月の調査
    ● 表示速度が落ちる事により
    直帰率が上がる
    Source:
    https://www.thinkwithgoogle.com/marketing
    -resources/data-measurement/mobile-page-s
    peed-new-industry-benchmarks/

    View Slide

  16. WSOのすすめかた

    View Slide

  17. WSOのすすめかた
    評価
    ツールによる計測
    モニタリング
    アクセス解析
    計測・調査
    ツールによる計測
    モニタリング
    問題箇所の切り分け
    実行
    フロントエンド
    バックエンド
    インフラ
    17

    View Slide

  18. 計測・調査の方法
    ▷ 計測ツールによるモニタリング
    ○ 時間帯によって変動する可能性もあるため
    継続的にモニタリングを行う

    View Slide

  19. ツール
    ▷ GTmetrix
    ○ 非エンジニアでもある程度は扱いやすい
    ○ モニタリング機能が便利(有料)
    ○ 日本リージョンがない (最寄りはChina)
    ▷ Web Page Test
    ○ リソース周りのレポートが詳細に出る

    View Slide

  20. ツール
    ▷ Page Speed Insights
    ○ LightHouseを使用したより詳細な分析
    ○ Chrome Dev Toolでも利用可能

    View Slide

  21. 問題の切り分け
    ▷ インフラ?
    ○ サーバスペック、ミドルウェアチューニング
    ▷ フロントエンド?
    ○ 静的リソース最適化、遅延読み込み
    ▷ バックエンド?
    ○ ネックとなる処理がないか、外部連携など

    View Slide

  22. View Slide

  23. WSO関連の注目技術
    表示速度に関わる新しめの技術

    View Slide

  24. imgタグのloading属性

    ▷ imgタグにloading属性を付与することで
    遅延ロードが可能
    ▷ ブラウザが通信状態など様々な状況を見ながら、
    遅延ロードタイミングなどを制御できる

    View Slide

  25. Service WorkerによるCache
    ▷ ブラウザの裏側で動くjavascript
    ▷ リソースの事前取得やコンテンツのキャッシュを
    プログラマブルに制御できるようになる
    ▷ 爆速で有名なdev.toでも利用されている

    View Slide

  26. AMPの進歩
    ▷ AMP周辺技術や表示が次々リリース
    ▷ AMP for Email
    ▷ のリリース
    ▷ AMPとGoogle Discoverの相性

    View Slide


  27. 表示速度は
    ”最低限の”UXである

    View Slide

  28. THANKS!
    Any questions?
    You can find me at
    shouhei.tai
    @ShoheiTai

    View Slide