WSOの現状とすすめかた

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

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

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

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