Webページの表示速度・読み込み速度を高速化

Webサイトの表示速度がSEOに関係しているのは最近では有名な話しです。 それだけでなくページの表示速度が遅ければ訪問者もストレスを感じてしまうので、機会損失につながることもあります。

ページの表示速度高速化対策

まずは、現状を把握することが大事です。私はGoogleの「PageSpeed Insights」で表示速度を計測しています。

サイト制作のレギュレーション等もあるので全てのサイトで全ての対策が行えるわけではありませんが、チェックを行うことにより対策の指標ができるメリットは大きいです。

• PageSpeed Insights

ファイルサイズを減らす・読み込み回数を減らすこと

PageSpeed Insightsなどのツールで検証すると各所改善点が示されますが、表示速度を改善する根本はファイルサイズを減らしてサーバーとの通信量を減らすことと、読み込み回数を減らしてサーバーとの通信回数を減らすことです。つまりはサーバーとのやり取りを最小限に抑えることです。

ファイスサイズを減らす

画像の圧縮、CSSの圧縮、HTMLの圧縮、jsの圧縮などがそれにあたります。映像や音声を使用する場合はそれらも含めます。

可逆圧縮（ロスレス圧縮）と非可逆圧縮

画像の圧縮には可逆圧縮と非可逆圧縮があります。可逆圧縮は画質に影響しませんので積極的に行うべきですが、非可逆圧縮は画質が劣化しますので、クオリティとの相談になります。

HTML、CSS、jsファイルの圧縮

HTMLやCSS、JavaScriptのファイルはオンラインのコンプレッサーを使うのが手軽です。私はOnline JavaScript/CSS Compressorを利用しています。こちらに関してはファイルが難読化してしまいますので、一様にやれば良いと言うわけではありません。

• Online JavaScript/CSS Compressor

SASSでCSSの圧縮

私の場合CSSはSASSで記述していますのでconfig.rbのoutput_styleをcompressedに設定して記述しています。

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
output_style = :compressed
line_comments = false

WordPressの場合はAutoptimize

WordPressでサイトを構築した場合はAutoptimizeプラグインを設定して各種ファイルの圧縮設定を行うことが可能ですが、JavaScriptファイルは 単純に圧縮してしまうと動作しない場合もありますので注意が必要です。

サーバー側での圧縮

mod_deflateが使えるサーバーでは.htaccessに以下を記述し圧縮を有効にします。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif<##>jpe?g<##>png<##>ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

読み込み回数を減らす

1. cssファイルやjsファイルは、一枚にまとめ@importを使わない
2. アイコンなどの小さな画像は一枚にまとめてCSSスプライトを利用する
3. アイコンなどの小さな画像はBase64にエンコードしてHTMLに埋め込む

などがありますが、サイト制作時のレギュレーションもありますので、こちらも一様に行えるとは限りません。

案件レベルで対策を施すためのハードル

ページ表示速度高速化のメリットはたくさん存在しましすが、デメリットも存在します。 高速化もツールで測定した数値的高速化、体感的にわかる体感的高速化とあり、体感的高速化は環境に依存しますので実証しにくかったりします。実務レベルで全てを一様に導入することはできません。

今回実験的に当Webサイトトップページに各種対策を施してみました。

1. スコアは上がったが修正に一手間かかるようになった
2. ファイル難読化やbase64の採用で担当スタッフ以外がサイトを理解しにくくなった
3. 上記問題を解決するために仕様書を作成するには費用対効果的に疑問が残る

この手のものは突き詰めれば突き詰めるほど汎用性を無くし、コストがかかってきます。 画像1つとってみても、同じ面積の画像も色数で容量は変わります。CSSやJavaScriptも記述方法で速度アップは望めます。もっと突き詰めればデータベースのテーブル設計、サーバー設計に至ります。

まぁそんなこんなでどんどん現実離れしていきますので何処かで折り合いを付けてスキームを作る必要があると常々感じております。