> > ページスピードとは?計測方法と改善テクニックまとめ

ページスピードとは?計測方法と改善テクニックまとめ

2015-08-03 15:51 - NozawaTakeshi

久しぶりの投稿になってしまいごめんなさい・・・。

昨年ページスピードについて社内用にまとめたことがあったので、今日はそれをご紹介致します。

Webでビジネスをやっていく上で、ページスピードの重要性が随分高まってきましたね。SEOやらコンバージョンやら、直帰率やら・・・。

ところが、ページスピードと言っても、実際にはクライアントサイドの問題とサーバサイドの問題に大きく分けられるだけでなく、それぞれの計測方法や具体的な改善策は多岐に及びます。今回は、新人のWebデザイナーさんでも分かるようにやや簡単めにまとめてみました。

ブラウザイベントとGoogle Analyticsのページスピードの指標との対応表

ページスピードについてまとめ(PDF)

このPDFファイルに書いてあること

  • ブラウザキャッシュとは?(ブラウザキャッシュが効いているかどうかの確認方法・firebugでのhttpヘッダの見方・どれくらい転送量が下がるか?)
  • Minify(Minifyするためのツールなど)
  • gzip(firebugでのhttpdでの確認方法、jQueryを例にminifyとgzipを組み合わせた時の圧縮率の比較)
  • 画像の圧縮(ロスレス圧縮/不可逆圧縮とは?・圧縮ツールの紹介)
  • 画像の適切な呼び出し方/マークアップ方法
  • CSSとJSの読み込む順番(レンダリングブロックの問題、非同期読み込み: async属性とdefer属性)
  • Google Page Speed Insightの位置づけ
  • Google Analyticsでのページスピードの計測方法(平均ドキュメントインタラクティブタイムなど各指標の説明、ブラウザの各イベントとGoogle Analyticsの指標の対応表)
  • DOMContentLoadedなどのイベント、performance.timingの見方

※なお、資料作成当時はfirefoxとchromeにgoogle page speed insightのアドオンがありましたが、現在は使えないようです・・・。

※と、いいつつこのブログのページスピード対策はほとんどしていないですね・・・。ご了承ください・・・。