Webサイトパフォーマンス最適化(ダイジェスト版)

WordPressのお手軽セキュリティ対策セミナー LT:5分
https://ex-cloud.connpass.com/event/48809/

以前SpiceTechで発表したスライドのダイジェスト版LTです。
https://speakerdeck.com/shoheitai/websaitopahuomansuzui-shi-hua-falsehua-spicetech-number-spicetech

Web担当者の方が多く参加されていたので、非エンジニア向けに作成しています。実装や高速化のテクニックなどは本編のスライドをご覧いただけたらと思います。

Transcript

1. Webサイトパフォーマンス最適化の話 SpiceTech #1 - ダイジェスト版 - 泰昌平 @ShoheiTai
2. 自己紹介 泰昌平 スパイスファクトリー株式会社 メディアインテグレーション事業部 事業部長 ・平成生まれ ・PHPがメイン。CakePHP, Wordpressなど ・フロントエンドの開発、最適化が好き ・趣味はダーツとバイク ・昨年スパイスファクトリーを立ち上げました。
3. SpiceTech #1のダイジェスト版です！
4. 本日の内容 1. 何故高速化が必要なのか 2. ブラウザとHTTP 3. Webサイトが遅くなるポイント 4. Webサイトの速度分析 5. サイト高速化実装テクニック
5. 本日の内容 1. 何故高速化が必要なのか 2. ブラウザとHTTP 3. Webサイトが遅くなるポイント 4. Webサイトの速度分析 5. サイト高速化実装テクニック
6. 何故高速化が必要なのか 高速化は誰の為にやるんだろう？
7. Webの高速化が必要な理由 • 最低限のUXを提供 ◦ ユーザにとって速い事は当たり前になっている。 • SEO対策 ◦ 表示速度がページ評価の1つとなっている。 ◦ クロールバジェット(crawl rate limit)の存在。
8. 表示速度が遅いと… • 離脱率が上がっていく • 速度に不満を持ったユーザは再訪しない • コンバージョンに悪影響 出典：How Loading Time Affects Your Bottom Line https://blog.kissmetrics.com/loading-time/
9. SEO対策 • 表示速度がページ評価の1つとなっている • クロールバジェット(crawl rate limit) ◦ クローラの活動に関わる要素 ◦ 一度のクロールで巡回する最大値
10. ユーザも検索エンジンも、もう待ってくれない
11. Webサイトが遅くなるポイント
12. Webサイトが遅くなる要因 • サーバ側の設定、環境 • クライアント側の環境 • フロントエンドの実装方法 • ブラウザの問題
13. サーバ側の設定、環境 • そもそもスペックが低くて処理が遅い • 負荷分散ができていない • キャッシュが上手く使えていない • Webサーバに適切なチューニングがされていない • サーバのロケーション
14. クライアント側の環境 • 通信環境。不安定、遅い回線。 • 端末そのもののスペックが低い。 • ブラウザのスペックが低い。
15. フロントエンドの実装方法 • リクエストが多い • 画像、js、cssなどのコンテンツの容量が多い • js,cssで負荷のかかる実装がある • レンダリングブロックの発生
16. サイトの状況を分析し、 ネックとなっている箇所を特定する
17. Webサイトの速度分析 高速化に向けた第一歩
18. Webサイトの状況を知る • ブラウザの開発者ツール ◦ サイトの状態はほぼ全て把握できる ◦ 非エンジニアには難易度が高い。。 • Webパフォーマンス計測ツールを使用する ◦ スコアが出るため高速化の指標になる。 ◦ 改善項目を共有しやすく、わかりやすい。
19. ブラウザの開発者ツール パフォーマンスの改善箇所
20. GTmetrix スコア、速度、サイズ、リクエスト数など
21. GTmetrix • 基本料金は無料。有料版もあり。 • 非常に細かい分析と改善提案。 • サイトの速度を定期的に計測、メール配信してくれる。 • 計測履歴も保持しており、過去のログも参照可。 • 言語は英語のみ。 • 日本リージョンが無く、PageLoadTimeの誤差は大きい。
22. Page Speed Insights
23. Page Speed Insights • 完全無料。 • Googleによる速度計測ツール。 • 評価項目自体は少ないが、簡潔で分かりやすい。 • レンダリングブロックを検知してくれる。 • スコアを上げることが難しい。(個人的に…)
24. 最初は気に入ったツールで 自分のWebサイトを計測してみましょう
25. Webサイトパフォーマンス改善 イメージがしやすいものを抜粋
26. ブラウザキャッシュ • js,css,font,画像等の静的リソースをブラウザでキャッシュ。 • 静的リソースは毎回リクエストする必要がない。 • 初回リクエスト時にキャッシュさせることで 2回目のリクエストは発生しなくなる。 • 当然、自サイトへの初回リクエストではキャッシュが 使えないので注意。
27. 画像の遅延ロード • 画像がブラウザの表示範囲内になったら 画像のリクエストをさせるjsの実装。 • ページ読み込み時のリクエスト数削減が可能。 • 「jQuery Lazy Load」や「Unveil.js」で 遅延ロードは比較的簡単に実装できる。
28. まとめ • 高速化の目的は最低限のUXを提供すること。 • まずはWebパフォーマンス計測ツールを利用して、 Webサイトの状況を把握する。 • 高速化は基本的に無駄を省く事で最適化を行っていく。
29. 本編はこちらから…！ https://goo.gl/i5vy5m
30. THANKS! Any questions? You can find me at ✘ facebook: shouhei.tai ✘ Twtter: @ShoheiTai