サイトの表示スピードを上げるのにやったこと

ファイルの圧縮・結合

CSS、JavaScriptファイルの圧縮は単純なコーポレートサイトなら工数をってまでやる必要はないかなと思います。タスクランナーで自動で圧縮の設定しているならそれはいいことだと思います。

結合は必ずやったほうがいいですね。
以下は1つのスタイルシートの読み込みにかかる時間です。
ファイル結合

読み込み完了までに236msかかってるのですが、そのうちダウンロードにかかっている時間は4msです。それ以外の処理はこのスタイルシートをダウンロードするための接続に関する処理になります。

例えば、このスタイルシートの他に同サイズのスタイルシート2つを読み込んだ場合、
( 232 + 4 ) * 3 = 708 ms ですが、ファイルを結合した場合はおおよそ
(232 + 4 * 3) = 244ms となるでしょう。

画像の圧縮・スプライト・遅延ロード

画像の場合は圧縮もページスピード大きく改善されるので必ず圧縮しましょう。

先ほどのスタイルシートの結合と同様、画像にも同じことが言えます。
画像の場合はスプライトと呼ばれ、複数の画像をWebのツールやタスクランナーを用い1枚の画像にします。
こうすることで通信するファイルが抑えられ、スタイルシートの計算と同様、ページ表示スピードに大きな改善がみられます。

またマウスオーバー時に切り替えたい画像や、ファーストビューに表示する必要のない大きな画像はloadイベント後に読み込むことでページの表示速度が上がります。

Lazy Loadを使ったり、以下のようなload後に実行するスクリプトでも大丈夫です。

$(window).on({
	load:function(){
		preloadImg();
	},
});

function preloadImg() {
	var preloadImages = [
	'../img/bg_mv01.jpg',
	'../img/bg_mv02.jpg',
	];
	for (var i = 0; i < preloadImages.length; i++) {
		(new Image()).src = preloadImages[i];
	}
}

遅延ロードした画像をGoogleにインデックスさせる方法
http://qiita.com/ryo_hisano/items/e8554777793551c105bd

WordPressのプラグイン

WordPressのプラグインでは不要なページでもスタイルシートが読み込まれるプラグインがあります。ContactForm7。

不要なページでは読み込まないような設定をしましょう。

必要な場合だけ JavaScript とスタイルシートをロードさせるには
http://contactform7.com/ja/loading-javascript-and-stylesheet-only-when-it-is-necessary/

Apacheのチューニング

keepaliveとキャッシュ設定

HTTP2/SPDY

これらを使えばファイル数による遅延は改善できる。
HTTPS必須?

まとめ

ここまで書いたことは、PageSpeedInsight
https://developers.google.com/speed/pagespeed/insights/?hl=ja
で教えてくれるんですが、サイト完成前にチェックするとスプライト画像の作成、スタイル変更など大きな修正が発生する可能性があるので、初期の作成段階でしっかり軽量化したコーディングをしていきましょう。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD