WSOの現状とすすめかた

 WSOの現状とすすめかた

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

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

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

9e83432930264c9c0a0d83d2e18b8280?s=128

泰 昌平@ShoheiTai

September 26, 2019
Tweet

Transcript

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

  2. 2 shouhei.tai @ShoheiTai 泰 昌平 スパイスファクトリー株式会社 General Manager CakePHP/ PHP

    / Wordpress / Rails / React.js / Node.js / GCP / SEO / WSO ダーツ / バイク / VR / サバゲー / バー巡り tai-sho
  3. Software Design 何度か寄稿させていただきました!

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

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

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

    ▷ 高速化のための最新技術
  7. “ WSO Website Speed Optimization

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

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

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

  11. Googleもモバイルを意識 ▷ 計測ツールの対象もモバイル主体に ◦ TEST MY SITE ◦ モバイルフレンドリーテスト ▷

    モバイルファーストインデックス ▷ (Speed Update)
  12. 表示速度が与える影響 ビジネスとの繋がり

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

    レポートが出力できる
  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/
  15. 直帰率と表示速度の相関 • 2018年2月の調査 • 表示速度が落ちる事により 直帰率が上がる Source: https://www.thinkwithgoogle.com/marketing -resources/data-measurement/mobile-page-s peed-new-industry-benchmarks/

  16. WSOのすすめかた

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

    フロントエンド バックエンド インフラ 17
  18. 計測・調査の方法 ▷ 計測ツールによるモニタリング ◦ 時間帯によって変動する可能性もあるため 継続的にモニタリングを行う

  19. ツール ▷ GTmetrix ◦ 非エンジニアでもある程度は扱いやすい ◦ モニタリング機能が便利(有料) ◦ 日本リージョンがない (最寄りはChina)

    ▷ Web Page Test ◦ リソース周りのレポートが詳細に出る
  20. ツール ▷ Page Speed Insights ◦ LightHouseを使用したより詳細な分析 ◦ Chrome Dev

    Toolでも利用可能
  21. 問題の切り分け ▷ インフラ? ◦ サーバスペック、ミドルウェアチューニング ▷ フロントエンド? ◦ 静的リソース最適化、遅延読み込み ▷

    バックエンド? ◦ ネックとなる処理がないか、外部連携など
  22. None
  23. WSO関連の注目技術 表示速度に関わる新しめの技術

  24. imgタグのloading属性 <img src="/hoge.jpg" loading="lazy" alt="hoge"> ▷ imgタグにloading属性を付与することで 遅延ロードが可能 ▷ ブラウザが通信状態など様々な状況を見ながら、

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

  26. AMPの進歩 ▷ AMP周辺技術や表示が次々リリース ▷ AMP for Email ▷ <amp-script>のリリース ▷

    AMPとGoogle Discoverの相性
  27. “ 表示速度は ”最低限の”UXである

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