photo credit: C3GZ / Symic

Googleアナリティクスでブログへのアクセス状況を眺めて気付いたこと。
スマートフォンからのアクセスが全体の15%ほどを占めているということ。
これは比率としては小さくはないわけですが、このブログでは何も対応をしていません。
PCから見てもスマートフォンから見ても同じものが表示されています。

ということでちょっと気になり、ブログの表示スピードなどをチェックしてみました。
LTEでのダウンロードが速くて、最新のスマートフォンが高スペックなんだとしても。
ちょっと申し訳なくなる評価結果にちょっと苦笑いが溢れ出したり。
だがしかし、コストをかけなくても改善できる部分が多々あるらしく。

『ゼロコストでも工夫次第で』という当ブログの主旨そのものがここにあった！
ということで、crocodile notebookも4年目なので、ユーザビリティについて少し考えてみることに。

131205-0002

Googleの開発者向けサービス『Google PageSpeed Insight』の評価結果がこちら。
これは改善後（現状）の評価ポイントですが、改善前はモバイルが50台、PCでも60台でした。

Google PageSpeed Insightでは具体的な表示速度についてより、改善点についてのアドバイスが重要。
あくまで理想としての指摘なのですべてを満たす必要はありませんが、満たすほどに快適な閲覧が可能になります。
改善すべき項目は2段階で指摘され、赤い感嘆符の項目だけはなくなるようがんばってください。

131205-0001

評価につかったのはGoogle PageSpeed Insightと、この『GTmatrix』です。
GTmatrixはたくさんの項目をA〜Fの7段階で評価してくれます。
GTmatrixでは表示に要する時間も表示されますが、EとFの評価を減らすことを目標にしたほうが良いかも。
『Use a CDN』や『Add Expires headers』などはF評価を解決できないかもしれません。

改善が困難ではない範囲で、可能な限り対応する。
Google PageSpeed InsightもGTmatrixも、それくらいの気持ちで対応すれば十分だと思います。
今回は指摘されやすい項目の中でも、改善しやすい部分についてまとめてみました。
まだ実践していない方はいちどお試しあれ！

JavaScriptやCSSはできるだけ圧縮しよう

JavaScriptやCSSファイルは圧縮した状態で送ることが可能です。
圧縮することで転送（ダウンロード）に要する時間が短縮されるので効果的。
特に3G回線などを利用した訪問者には大きな効果が期待できます。

圧縮方法は主に2種類。
あらかじめ圧縮したファイルを用意する方法（gzip）と、アクセスのたびに圧縮する方法（deflate）があります。
もちろんあらかじめ圧縮しておいたほうがムダがありません。
圧縮は『gzip』という形式を利用します。
これはオンラインサービス『Online YUI Compressor』で圧縮することが可能なので活用しましょう。

圧縮処理すると末尾に『.min.gz』と追記されたファイルがダウンロードできます。
.gzより前のファイル名は元のファイルと同じに修正してください。
圧縮したファイルは元のJavaScriptやCSSファイルと同じフォルダに保存します。

圧縮したファイルに対応しているブラウザを利用している場合のみ、圧縮ファイルを送るように設定します。
レンタルサーバーの場合は『.htaccess』に、VPSの場合は『httpd.conf』に記述します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
</IfModule>


<files *.html.gz>
AddType "text/html;charset=utf-8" .gz
</files>
<files *.js.gz>
AddType "text/javascript;charset=utf-8" .gz
</files>
<files *.css.gz>
AddType "text/css" .gz
</files>
AddEncoding x-gzip .gz

ファイルの有効期限を設定しよう

ブラウザにダウンロードされたファイルの保存期間を設定します。
この期間中に再訪された場合、ファイルはダウンロードされずにブラウザ内のものを再利用します。
ダウンロードしないことでの時短効果はとても大きいため、これは必ず設定しましょう。

レンタルサーバーの場合は『.htaccess』に、VPSの場合は『httpd.conf』に記述します。

ExpiresActive On
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"


<FilesMatch ".(gif|jpe?g|png|js|css)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>


<FilesMatch ".(ico|swf|flv|pdf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>


<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>


FileETag MTime Size

　
時間はすべて『秒』で設定しています。
FileETag MTime Sizeも忘れずに記述してください。
『MTime（修正時刻）』『Size（サイズ）』によって保存しているファイルと同一かを確認するのに利用されます。

常に表示される画像はできるだけ圧縮しよう

記事の写真は別として、ページデザイン上の画像ファイルなどはできるだけ圧縮しましょう。
とくにPNGファイルの場合は画像作成アプリでは圧縮できないこともあります。
これもオンラインの『tiny png』で圧縮可能です。
圧縮したファイルは元の画像ファイルと同名保存して、サーバーの画像に上書き保存します。

外部JavaScriptは非同期でダウンロードしよう

WebサイトはHTMLで記述されていて、ブラウザはHTMLを読んで記述された通りに表示します。
表示は記述されている上から下へ順番に処理を行うことになります。
そのため、ダウンロードが終わらないと次の処理にすすむことができないケースがあります。
特に大きな影響を与えるのがJavaScriptとCSSの外部ファイル。

CSSについてはページの上のほうに記述することが多いです。
そうしなければ表示が崩れてしまうこともあるので、ムリに調整する必要はないと思います。
変更したいのはJavaScript。

<script type="text/javascript" src="./scripts.js"></script>
このように書かれている行に……


<script type="text/javascript" src="./scripts.js" async></script>
このように『async』を書き加えればOK！

　
ブラウザはJavaScriptのダウンロード完了を待たずに次の処理へと進みます。
ダウンロードが終わったタイミングで必要な処理も行うので問題ありません。

ただし、jQueryのような『JavaScriptを動かすために必要な大元』にはasyncを付けないでください。
読み込みの順番が狂ってしまい、正常な処理が行えなくなる可能性があります。

多すぎるアドセンスやアフィリエイト広告は逆効果ですよ

利用しているサーバーからのダウンロードについては前述の対応で良い感じになるはず。
でも、アドセンスやアフィリエイトで使うJavaScriptや画像はどうにもならないわけです。
JavaScriptは圧縮されてないし、画像はムダが多いし、保存期間も設定されていない。
そのため、アドセンスやアフィリエイトで評価ポイントが下がることはあきらめましょう！

だけど、多すぎる広告はページの表示を遅くするのも事実です。
表示が遅いと訪問者の離脱率も上がってしまうので、収益性は下がってしまうことも。
掲載する場所を絞って、訪問者のストレスにならない程度に抑えたほうが良いと思います。

不要なJavaScriptは読み込まないようにしよう

トップページと個別記事で必要になるJavaScriptが異なる場合があると思います。

例えばWordPressでブログを作っている場合。
ヘッダー用PHPなどにJavaScriptの読み込み命令を記述することが多いでしょう。
こうするとすべてのページで同じHTMLが利用できて効率的ですが、使わないJavaScriptも読み込むことになります。
これはとてもムダなことですよね。
そこで、必要なJavaScriptだけを読み込むようにPHPで切り分けるようにしましょう。

個別記事だけで必要な場合
<?php if(is_single()): ?><script type="text/javascript" src="./scripts.js" async></script><?php endif; ?>

トップページだけで必要な場合
<?php if(is_home()): ?><script type="text/javascript" src="./scripts.js" async></script><?php endif; ?>

　
is_home()やis_single()のほかに、is_tag()、is_category()、is_archive()、is_page()などが利用可能です。
PHPで仕分ければ、ダウンロードだけでなくブラウザーの処理量も減らすことができます。
　
　
　
これらの評価サイトのスコアがすべてではありませんが、改善点を知るにはとても参考になります。
ただ、すべての評価項目を満たすことは、個人ブログでは不可能に近いです。
スコアだけを気にすることなく、改善できる部分があるかを知るキッカケに活用してくださいね。

ページの評価
Google PageSpeed Insight
GTmatrix

ファイルの圧縮
Online YUI Compressor
tiny png