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