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

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

Mynavi System
September 25, 2019

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

Mynavi System

September 25, 2019
Tweet

More Decks by Mynavi System

Other Decks in Technology

Transcript

  1. WebPagetestを使う理由 ❖ 安定した計測指標 ➢ Load Time リソースのロード完了時間(サーバ側の処理からの最初の応答) ➢ Start Render

    白くないコンテンツが表示されるまで ➢ Speed Index コンテンツがいかに速くレンダリングされたか 参考:https://ux.concurro.net/website/userbility/webpagetest/ ❖ リクエスト、送信データ量の割合が確認可能 6
  2. ジョブ20’sのLPのスピード分析・対応 • バックエンドの処理が遅い • 画像が重い(最適化されていない) • 広告タグがheader、body直後による遅延 ボトルネック 対応 •

    拡張子の変更 index.php → index.html • 画像の圧縮 imageoptimを使用:https://imageoptim.softonic.jp/mac • body閉じの付近に広告タグを集約 ※GTMの推奨はbody直後だがbody内であれば問題ない 8
  3. 今後 • 継続的なパフォーマンス監視 ◦ Webpagetestと連携しGASまたはDataStudioと連携 • バックエンドの処理を更に早く ◦ .htaccessの高速化 参考:https://cruw.co.jp/blog/2018/08/page_speed_with_htaccess/

    ◦ ページで使用していないクラスファイルを読み込まない • サイト全体の画像の最適化 • 広告タグの位置 • 使用していないリソースを削除 • Nuxt.js でリニューアル 13
  4. まとめ・その他情報 14 • 画像の最適化 ◦ 画像の圧縮 ◦ CDNに画像を置き使用 ◦ CSSスプライト

    • リソースの整理 ◦ 広告で使用しているjavascriptの位置 ◦ 使用していないリソースの削除 ◦ CSSの最適化 • 継続的なパフォーマンス監視 ◦ Webpagetest ◦ PageSpeed Insights ◦ Light House ◦ パフォーマンスバジェット 参考:https://developers-jp.googleblog.com/2019/03/blog-post_15.html