調べ物をしていて Google などの検索結果から目的の Web サイトに移動したとき、なかなか表示されなくてイライラしたこと、ありませんか？自分のブログが訪問してくれた人にそういう思いをさせていたら心配で夜も眠れない Naokix でっす。嘘です。昨日１２時間寝てました。
なかなか表示されない Web ページは直帰率の悪化にもつながり、SEO 的にあまりよろしくありません。サイト表示が２秒遅いだけで直帰率は50％増加するなどという話もありますので、表示速度を改善してユーザービリティを向上させるようにしましょう。
測定方法
Web ページの表示速度を測定してくれる Web サービスはいくつかありますが、管理人が使っているのはこちらです。
「ウェブページの URL を入力」のところに自分のブログの URL をコピペして「分析」ボタンを押せば測定してくれます。当ブログのスコアを晒してみせましょう。
ブログを立ち上げたばかりの頃はは９０点ぐらいだったんですがね・・・。WordPress のプラグインを追加したりしたので、速度低下したようです。Google によればスコア８５点以上がパフォーマンスの高いページだそうなので、PageSpeed Insights の指摘に従って表示速度の改善をしていきたいと思います。
プラグイン「Autoptimize」
今これをいれてブログの運営してます。Autoptimize は HTML、CSS、JavaScriptを縮小してブログを高速化してくれるプラグインです。こちらからダウンロードできます。
Autoptimize ≪ WordPress Plugins
試しにこのプラグインを外して速度を測ってみると、
７９→７１点と悪化します。サイトによって効果に違いがあるようですが、ほとんど設定することなく導入できるので非常に便利なのです。
欠点がありまして、HTML のスペースや改行を圧縮により削除してしまうので、Web サイトの HTML ソースが非常に読みにくくなります。HTML の圧縮だけ解除する設定もできますので、ご自分のブログに合わせた設定をお試しください。
また一部の JavaScript が動作しなくなることがあるようなので、その場合は JavaScript の圧縮を解除してください。
圧縮を有効にする
gzip や deflate を利用し HTML、CSS、JavaScript などを圧縮することで、ネットワークで送信されるバイト数が減り、表示速度の改善をするものです。.htaccess ファイルを編集します。ただし、この方法では画像を圧縮することはできません。
レンタルサーバーによっては mod_deflate が入っていないため、圧縮が有効にならない場合があるようです。その場合はレンタルサーバーの設定をいじらなければならないようです。当ブログはエックスサーバーで運用していますが、エックスサーバーでは問題なく動作しました。
さて、編集する .htaccess ファイルですが、エックスサーバーの場合、public_html フォルダの下にあります。編集する前に .htaccess ファイルはバックアップをとっておいたほうがよいでしょう。
.htaccess ファイルに以下のソースを追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | # BEGIN Compression <ifModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE image/svg+xml </ifModule> # END Compression |
アップロードして上書きし、再度速度を測定します。
７９→８０点へ。gzip による圧縮とは、度々繰り返される文字列を置き換える手法なので、文字数の少ないトップページではあまり効果がなかったかもしれません。文字の多いコンテンツページなら表示速度アップに効果があるはず。
ただ、当ブログではアイコンフォントを使用しているため、これだけでは「圧縮を有効にする」をクリアすることができません。次のソースを .htaccess ファイルに追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | # BEGIN Compression of Web Font Icon <IfModule mod_mime.c> AddType font/opentype .otf AddType font/eot .eot AddType font/truetype .ttf AddType application/font-woff .woff </IfModule> <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE font/opentype font/eot font/truetype application/font-woff </IfModule> # END Compression of Web Font Icon |
Web ページを更新し、きちんと表示されることを確認してください。
ブラウザのキャッシュを活用する
画像、CSS、JavaScript ファイルなどのデータをブラウザ側に保存、すなわちキャッシュして、ブログに再度訪れてくれたリピーターさんの表示速度をアップする方法です。.htaccess ファイルに次のソースを追記します。
1 2 3 4 5 6 7 8 9 10 11 | # BEGIN Browser Cache On <ifModule mod_expires.c> ExpiresActive On ExpiresByType image/gif "access plus 30 days" ExpiresByType image/jpg "access plus 30 days" ExpiresByType image/jpeg "access plus 30 days" ExpiresByType image/png "access plus 30 days" </ifModule> # END Browser Cache On |
なんかコメントの英語がおかしいような。それはともかく、当ブログではこれだけの記述でクリアすることができました。他のサイトを参考にすると JavaScript や XML に対してもいろいろ書いてあるんだけど大丈夫なんでしょうか、わかりません。
これだけはどうしても残ってしまうのですが、analytics.js は Google のサーバーから送信されるものであり、キャッシュできるのは自分のサーバーから送信したものだけなので、こちらではどうすることもできません。このままになります。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
上で述べましたが、当ブログは Autoptimize プラグインを導入していますので、Autoptimize を入れる前にはわらわらとあったレンダリングをブロックする JavaScript と CSS がこれだけ整理されています。
残ったのは Autoptimize が作成したふたつの CSS ファイルですが、数百行はありそうな CSS ファイルがスペースや改行を削除されたもので、CSS のインライン化ができそうにはありません。
そこであちこちで紹介されていた、レンダリングをブロックしている js・css ファイルを wp_footer(); へ吐き出してくれるプラグイン「Async JS and CSS」をインストールしてみたのですが、画像を遅延読み込みしてくれるプラグイン「BJ Lazy Load」とは相性が悪いよ、という評判を裏切らずに画像を表示してくれなくなったので、やむなく Async JS and CSS を外すことにしました。
Autoptimize をインストールすることで表示速度が上がったことは間違いないので、Autoptimize が作成した CSS についてはそのままにしておくことにしました。いつかなんとかしたい。
画像を最適化する
プラグイン「EWWW Image Optimizer」を使って画像の一括圧縮をしておきました。こちらで操作方法を解説してくれています。
EWWW Image Optimizer の設定方法と使い方
最後に
まだ改善の余地がありそうなのですが、とりあえずここまで。なんとか Google の言う８５点はクリアすることができました。
今回はモバイル対応をまったく考えていませんが、今後はモバイルでの表示が検索順位に関係してくるようなアナウンスを Google が発表しているので、早めに何とかしたいと思います。
Comment