サイト速度を改善する(その1)

サイトの表示速度は(ごくわずかの効果かもしれませんが)SEOの観点からみても重要です。
a-blog cmsではキャッシュ機能を使うことで、サーバーキャッシュを作ることができます。アクセスがある度に動的にhtmlファイルを生成するところを、キャッシュしておくことで高速化しています。

キャッシュ機能を有効にしている場合、サイバーキャッシュによる高速化の他に、htmlファイルはgzip圧縮されています。これはブラウザにある開発者ツールなどを使ってそのページのレスポンスヘッダーを確認することで確認ができます。
下記のように表示されていましたらgzip圧縮されています。

Content-Encoding: gzip

Google Analyticsのサイト速度の提案に対応する


Google Analyticsのサイト速度の提案(PageSpeed Insights)を確認すると、!修正が必要圧縮を有効にする、と表示されています。内容を確認するとわかりますが、htmlファイルは圧縮されていますが、JavaScript,CSSのファイルが圧縮されておらず判定でNGを食らっています。


対応その1:JS、CSSファイルもa-blog cmsのキャッシュを利用する


/themes/使用中のテーマ/css/、/themes/使用中のテーマ/js/にあるファイルはテンプレートファイル内にありますので、キャッシュをさせることができます。
/themes/blog/css/blog.css にファイルがあるとした場合を例に説明します。

ソースコードを確認した時に、下記のパスを記述している場合は、blog.cssファイルはキャッシュされません。実体へのパスが通っているためです。

<link href="http://www.h767676764.com/themes/blog/css/blog.css" rel="stylesheet" type="text/css" media="all" />
<link href="/themes/blog/css/blog.css" rel="stylesheet" type="text/css" media="all" />

下記のパスを記述している場合は、キャッシュされます。CSSファイルですが、テンプレートファイルとして認識されていますので、CSSファイル内でモジュールやグローバル変数なども使用可能です。
この記述を利用した場合には注意点があります。a-blog cmsをシステムを介してファイルを表示しますので、CSSファイル内でモジュールなどを設置しておらず、かつキャッシュが無効の場合に、無駄にシステムを通すこととなります。

<link href="http://www.h767676764.com/css/blog.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/blog.css" rel="stylesheet" type="text/css" media="all" />

この方法だけでは、/index.js や /js/config.js などは圧縮されませんので、Google Analyticsの判定はクリアできません。

対応その2:gzipファイル(gz)ファイルを設置する

.js、.cssファイルを圧縮したgzipファイルをWebサーバーに設置して、そちらを利用するようにする方法もあります。
たとえば、/index.js を圧縮し /index.js.gz を置きます。そしてindex.js.gzを使ってもらうようにします。
gzファイルを置いたままでは以前のままindex.jsが利用されて効果がありません。HTMLに書いてあるファイルのパスを index.js.gzに直すのは現実的に考えてオススメできません。
そこで、.htaccessを使って.jsへのアクセスは、.js.gzファイルがある場合はそちらを参照するように設定します。
下記の記述をhtaccessに追記します。

# gzip圧縮対応
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
<files *.js.gz>
AddType "text/javascript;charset=utf-8" .gz
</files>
<files *.css.gz>
AddType "text/css" .gz
</files>
AddEncoding x-gzip .gz

後は全ての.jsファイル、.cssファイルをgzip圧縮して、同じ階層の場所に置いたら完了です。これでGoogle Analyticsのサイト速度の提案から、「圧縮を有効にする」が無くなり、ポイントがアップしました。

ただ…、全てのファイルを圧縮するのは手間ですよね。CSSファイルを修正するたびに圧縮しなおしたりと。
次回サイト速度を改善する(その2)では、Node.jsとgulpを使って圧縮の自動化について紹介します。


対応その3:Webサーバーで圧縮する


a-blog cmsの機能やgzipファイルを設置する方法以外に、Webサーバー(apatch)で動的に圧縮をかける方法もあります。
mod_deflateを使うことで可能です。サーバーの設定が変更できる場合、対応済みのサーバーである場合に使える方法となります。
参考:mod_deflate - Apache HTTP サーバ

同じタグ付けがされている記事