Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

9bf461c843e7e62ad9329c61c5a7bb00?s=47 Mynavi System
September 25, 2019

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

9bf461c843e7e62ad9329c61c5a7bb00?s=128

Mynavi System

September 25, 2019
Tweet

More Decks by Mynavi System

Other Decks in Technology

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