【高速化】ブラウザのキャッシュを活用する

GoogleDevelopers”PageSpeedInsights“の「ブラウザのキャッシュを活用する」を対応する。

pagespeed01

PageSpeedInsightsの分析結果「ブラウザのキャッシュを活用する」を見るとキャッシュが利用されてないファイルの一覧が表示される。

ここでは特に画像・CSSファイルが指摘され、HTMLファイルは含まれていないので、
画像(jpg/gif/png)・CSSファイルを対象とする。

Webサーバー”Apache”のモジュール”mod_expires”は、ブラウザキャッシュの有効期間を管理する事ができる。

このモジュール”mod_expires”を利用して、キャッシュを有効活用することによりサーバーへの通信を減少し、
転送量や負荷が軽減される事でWebサイトの高速化につなげる。

.htaccessに下記コードを記述し、対象ファイルの拡張子と有効期間を設定する。

【.htaccess】

ExpiresActive On
ExpiresDefault "access plus 1 weeks"
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"

1週間以上先の有効期間を指定する。

ファイルを更新した場合はファイルのURLにパラメータを付けて、キャッシュにないファイルと認識させる。

例)
img/xxx.jpg
 ↓
img/xxx.jpg?130722

ファイルを更新した場合、古いキャッシュによってあたらしいファイルが反映されなくなるデメリットもある。
URLにパラメータを付けて、キャッシュにないファイルと認識させる。

【jQuery】何番目(n番目)の要素かを取得する

今回は、何番目(n番目)の要素がクリックされたかを取得します。

$(セレクタ).index(this);

index()関数で取得する値(リストの中のクリックした要素の番数)を変数に入れてアラートで表示します。

<script>
$(function(){
	// 要素を指定
	var sel = "ul#navi li";

	// 関数実行
	putNumber(sel);

	function putNumber(sel){
		$(sel).click(function(){
		  var index = $(sel).index(this);
			alert((index+1)+"番目");
		})	
	}
});
</script>
<ul id="navi">
	<li>block01</li>
	<li>block02</li>
	<li>block03</li>
	<li>block04</li>
	<li>block05</li>
	<li>block06</li>
	<li>block07</li>
	<li>block08</li>
	<li>block09</li>
	<li>block10</li>
</ul>

js_n_number

(index+1)としているのは、要素の開始が0番目からなので、わかりやすいように”+1″しています。

こっちの方が使いまわせるかも…(結果は同じです)

<script>
$(function(){
	var sel = "ul#navi li";
	
	$(sel).click(function(){
		// 関数実行
		var n_number = getNumber(sel, this);
		alert((n_number+1)+"番目");
	})	
	
	function getNumber(sel, target){
		var index = $(sel).index(target);
		return index;
	}
});
</script>