Webページ・スピード改善 / Webpage speed improvement

Transcript

1. Webページ・スピード改善 Mynavi Works Corporation 斉藤 将斗 mynavi シス担Meetup#3 2019.09.25
2. 自己紹介 • 斉藤 将斗 • 株式会社マイナビワークス 若年キャリア業務推進部 • Webエンジニア（フロント、バックエンド） • マイナビジョブ20’sを担当 2
3. マイナビジョブ20’s とは マイナビジョブ20’sは、 マイナビグループ唯一の20代・第二新卒専門の人材紹介サービスです。 企業様／求職者様の双方最適なマッチングを目指すことが、 マイナビジョブ20’sのミッションです。 3
4. 4 計測方法 分析・対応
5. https://www.webpagetest.org/ 計測ツール - WebPagetest 5
6. WebPagetestを使う理由 ❖ 安定した計測指標 ➢ Load Time リソースのロード完了時間（サーバ側の処理からの最初の応答） ➢ Start Render 白くないコンテンツが表示されるまで ➢ Speed Index コンテンツがいかに速くレンダリングされたか 参考：https://ux.concurro.net/website/userbility/webpagetest/ ❖ リクエスト、送信データ量の割合が確認可能 6
7. ジョブ20’sのLPを改善 PC スマホ https://mynavi-job20s.jp/lp/161109/ https://mynavi-job20s.jp/sp/lp/161109/ 7
8. ジョブ20’sのLPのスピード分析・対応 • バックエンドの処理が遅い • 画像が重い（最適化されていない） • 広告タグがheader、body直後による遅延 ボトルネック 対応 • 拡張子の変更 index.php → index.html • 画像の圧縮 imageoptimを使用：https://imageoptim.softonic.jp/mac • body閉じの付近に広告タグを集約 ※GTMの推奨はbody直後だがbody内であれば問題ない 8
9. 改善結果
10. パフォーマンス比較 改善前 改善後 10 ※Load Time,Start Render,Speed Index共に一秒ほどの削減
11. コンテンツ内訳比較 改善前 改善後 11
12. 今後とまとめ
13. 今後 • 継続的なパフォーマンス監視 ◦ Webpagetestと連携しGASまたはDataStudioと連携 • バックエンドの処理を更に早く ◦ .htaccessの高速化 参考：https://cruw.co.jp/blog/2018/08/page_speed_with_htaccess/ ◦ ページで使用していないクラスファイルを読み込まない • サイト全体の画像の最適化 • 広告タグの位置 • 使用していないリソースを削除 • Nuxt.js でリニューアル 13
14. まとめ・その他情報 14 • 画像の最適化 ◦ 画像の圧縮 ◦ CDNに画像を置き使用 ◦ CSSスプライト • リソースの整理 ◦ 広告で使用しているjavascriptの位置 ◦ 使用していないリソースの削除 ◦ CSSの最適化 • 継続的なパフォーマンス監視 ◦ Webpagetest ◦ PageSpeed Insights ◦ Light House ◦ パフォーマンスバジェット 参考：https://developers-jp.googleblog.com/2019/03/blog-post_15.html