前回からの続きです。
高速化のための対応項目
・HTTPリクエスト減らせ
・gzip圧縮しろ
・ブラウザキャッシュ使え
・画像サイズ削減しろ
・HTML/CSS/JSを縮小化しろ
・CSS/JSの読み込み順序を最適化しろ
今回は上記太字の3点について紹介します。
画像サイズの削減
最近はPNGが便利なため何でもPNGにされがちですが、JPEGとGIFも画像形式の特長を正しく把握して使うことで画像サイズを削減できます。
下記のような画像サイズを削減するサービスも存在するので、大きい写真を使う時には効果が高いです。
http
HTML/CSS/JSの縮小化
HTMLなどのソース内から改行やスペースなどを除去して少しでもサイズを減らします。
これは1回目にも紹介したプラグイン「WP Minify」で一括して縮小・結合ができます。
CSSは改行やスペースが除去されても影響ありませんが、HTMLやJavaScriptに関しては改行・スペースの有無で表示に影響が出ることもあるので表示を確認しつつ行うのがベターです。
CSS/JSの読み込み最適化
内でCSS・JS・CSS、のような読み方をせず、CSSを先に全て読み、次にJSを読むという流れ。 前者の WP Minify などを使ってファイル結合ができていればあまり気にする必要はなくなってきます。