webサイトの軽量化とその効果について
検索エンジンに正しく評価される為に、
webサイトの表示スピードは重要なポイントです！
例えば、せっかく検索して検索結果から、探している内容にちかいのでは？と思われるwebサイトをクリックしました。そのサイトの表示に何十秒もかかる様でしたら、即、検索結果に戻って、次の検索結果をクリックする事になります。
検索のエンジンは、この検索結果のクリックから戻ってくるまでの時間も計測しています。つまり、検索ユーザーが検索結果をどう判断したのか？これを検索結果からの戻りの時間で察知できます。 サイトの表示が遅くあきらめたのか？サイトにアクセスしたが、内容が求めている内容ではなかったのか？こういった点を検索エンジンは、アルゴリズムとして判定基準にしています。
他にもクローラーという検索ロボットがアクセスした際のwebサイトの表示の重さ（表示に時間がかかるなど）をチェックしているのはいうまでもない事です。
webサイトの表示スピードの改善ですが、今回は、サイトの軽量化についてまとめてみました（もう一つのスピード改善の方法としてはサーバを強化する事で改善できる）。 よくあるケースとしては、wordpressなど使っていると、知らない間に大量のプラグインをインストールしている場合。あとは、webサイトの画像が必要以上に重たい、つまり、画像が最適化されていないケースです。 前者のwordpressプラグインのケースは、
- 不要なプラグインは停止させるのではなく削除する。停止した状態ですと、ページのヘッダやフッタに記述が残っている場合があります。
- さらに、ページのヘッダーの記述を確認して、cssやjavascriptの軽量化できる部分は軽量化する。cssは、不要な記述が残っているケースは多いです。この部分を削除する事で軽量化できます。javascriptは使用していない記述は削除する。複数の記述を合体させるなど。
、
- 実際に表示されるサイズの画像サイズ指定をhtml内で最適化する。よくあるのは、表示される画像サイズより大きい画像をhtmlの記述で表示サイズにリサイズしているケース。この場合は使用する画像を表示するサイズに変更する事で解決する。
- 意外と多いケースとして、画像型式が最適でない。写真をpngやgifといった画像型式で使用しているケース。また、逆に、文字やグラフなどの画像をjpgの型式で使用している。これらは、写真はjpgで、文字やグラフはpngで、さらに色数を少なくする事で微妙に軽量化できる。上記のサンプル画像をご覧いただければ、おわかりの様にテキストや図的な画像は、png形式の方が、データ量も軽くシャープで見やすい。
- さらに、先日、他社さんが制作したサイトで遭遇したのですが、使用されている画像の型式は、pngで問題がなかったのですが、レイヤーが残った状態で使用されていた。これは、極端にデータ量が大きくなるのでアクセスしただけでもちょっとした違和感を覚えるので意外と早く発見される。
さて、これら改善を一通り実行すると、
どうなるか？以下の図は計測結果です。
これは、GTmetrixというwebサイトの表示スピードを計測するツールの結果である。上が、対策前で下が弊社の対策後です。
右側のPage load timeというのは表示までにかかる時間で、6.62秒かかったのが、4.22秒に改善した。という意味です。
同様に、Total page sizeというのは、1ページのデータ量です。6.1メガが、1.1メガに改善されました。あり得ない改善ですね、約６分の１です。 こういった表示速度の改善は、まちがいなく検索ランクに影響しています。
.htaccessに追記して表示を速くする方法
mod_deflateを使って、ファイルを圧縮する事で表示を早くする。
<IfModule mod_deflate.c>
SetOutputFilter DEFLATEBrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/htmlSetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary Accept-Encoding env=!dont-varyAddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>
mod_expiresで、キャッシュを管理して表示をはやくする。以下は、画像関係を一週間で設定していますが、画像の更新タイミングで、1ヶ月にしても数日にてもよいと思います。
<IfModule mod_expires.c>
ExpiresActive OnExpiresDefault "access plus 1 seconds"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/js "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>