先日から、ちょこちょこブログの高速化をしています。
この前は、ブラウザキャッシュの設定をしてPageSpeed Insightsのスコアが少し改善しました。
とりあえず、今回も1つずつ改善していきたいので、今回は「リソースを圧縮」をしてブログを高速化したいと思います。
photo by Dan DeChiaro
目次
リソースの圧縮って？
PageSpeed Insightsの提案には以下のように出ています。
圧縮を有効にする
gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。
次のリソースの圧縮を有効にすると、転送サイズを 234.5 KB（70%）削減できます。
サーバーでgzipやdeflateを用いて、リソース（HTML、CSS、JavaScript、XML、WEBフォントファイルなど）を圧縮してから送ってもらい、ブラウザ側で展開して表示させます。それによって、少しでも転送サイズ数を減らすことによって通信の負担を減らし速度を上げることが目的のようです。
僕のブログで言えば、234.5KB（70％）もサイズを削減できるようです。234.5KBといえば、ここのちょっと上で使用している画像（圧縮を有効にすると書いてある画像）が23.8KBなので、その約10倍も削減できることになります。結構なサイズですね。
リソースを圧縮する方法
リソースを圧縮するには、.htaccessを編集する方法が一般的のようです。
「DEFLATE」というアルゴリズムを使って、サーバーから出力時にフィルターをかける設定をします。
その設定をするには、.htaccessファイルに次のように記述します。
#フォントのcontent-typeの追加 AddType application/vnd.ms-fontobject .eot AddType application/x-font-ttf .ttf AddType application/x-font-opentype .otf AddType application/x-font-woff .woff AddType image/svg+xml .svg #圧縮の設定 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 application/x-font-ttf application/x-font-opentype image/svg+xml
プレーンテキスト、HTML、CSS、XML、XHTML、RSS、WEBフォントなどを圧縮しています。
.htaccessファイルは、編集に失敗するとサイトが表示されなくなることもあるので、注意してください。 エックスサーバーの場合を例にすると、「/[ドメイン]/public_html」にある.htaccessファイルを編集します。
前回のブラウザキャッシュの設定も併せて記入すると、以下のようになります。
suPHP_ConfigPath /home/[サーバID]/[ドメイン]/xserver_php/
AddHandler x-httpd-php5.3 .php .phps #PHPのバージョン指定
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
#フォントのcontent-typeの追加
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
#ブラウザキャッシュの設定
ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
#フォント
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
#圧縮の設定
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 application/x-font-ttf application/x-font-opentype image/svg+xml
一応、フォントにブラウザキャッシュも設定。ほとんど変更するもんでもないので、有効期限は1年間。
ブラウザキャッシュとリソース圧縮をあわせた追記部分は、以下に載せておきます。
#フォントのcontent-typeの追加 AddType application/vnd.ms-fontobject .eot AddType application/x-font-ttf .ttf AddType application/x-font-opentype .otf AddType application/x-font-woff .woff AddType image/svg+xml .svg #ブラウザキャッシュの設定 ExpiresActive On ExpiresByType text/css "access plus 1 days" ExpiresByType image/gif "access plus 1 weeks" ExpiresByType image/jpeg "access plus 1 weeks" ExpiresByType image/png "access plus 1 weeks" ExpiresByType application/x-javascript "access plus 1 weeks" #フォント ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" #圧縮の設定 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 application/x-font-ttf application/x-font-opentype image/svg+xml
参考 apache – Setting expire headers for fonts not working – Stack Overflow
リソース圧縮の設定前と設定後の変化
PageSpeed InsightsとGTmetrixとWebsite speed testで、リソースの圧縮前後のスコアを計測してみました。
PageSpeed Insights
だいたい同時刻に計測。
リソース圧縮設定前
リソース圧縮設定後
スコアが64→77に大幅に改善しました。
「圧縮を有効にする」の提案は完全に消えました。リソースの圧縮は完璧なようです。
GTmetrix
だいたい同時刻に計測。
リソース圧縮前
リソース圧縮後
ページスピードグレードが86％（B）→90％（A）に改善。YSlowグレードが63％（D）→67％（D）に改善しました。Aはなんか輝いて見えます。
それとともに、注目したいのは、トータルページサイズです。1.42MBだったページサイズが、1.20MBに減少しています。GoogleのPageSpeed Insightsに削減可能と提案された数字と大体同じですね。
個別指標でいうと「Compress components with gzip」が大きく改善されました。
リソース圧縮前
リソース圧縮後
グレードが0（F）→67（D）に大きく改善しています。残ったリソースは、Twitterなどの外部WEBツールのリソースなので、これ以上どうしようもできそうにないです。
Website Speed Test
だいたい同時刻に計測。
リソース圧縮前
リソース圧縮後
グレードが79→81に。読み込み時間と、ページサイズも減っています。
それでも、「他のウェブサイトより遅いよ」とは言われていますが。
以下は各パフォーマンスです。
リソース圧縮前
リソース圧縮後
なんか減っちゃった指標もあるけれど、「Specify a Vary: Accept-Encoding header」が71→91に改善して、平均値も79→81に増えています。
まとめ
今回は、サーバー側の圧縮を用いて、転送サイズの削減をしました。
おかげで、おそらく230KB弱の転送サイズを削減し、読み込み時間も減らすことができました。個人的には、GTmetrixで初めてグレードAが取れて嬉しいです。YSlowはまだまだだけど。
少しずつですけど、ブログが改善されていくのは見ていて気持ちがいいです。次回も、何か一つ改善できたらと思います。
はじめまして。いつもブログを拝見させていただいております。
Xeory Extentionを使用し、先月ブログを開設し、カスタマイズ等しておりました。
PagespeedInsightでのスコアがモバイル 49/PC 61ほどでしたので、改善しようとずっと調べていましたが全く改善されず途方に暮れていましたが、Yhiraさんのこちらの記事を参考にリソースの圧縮をしたところ、スコアが モバイル 72/PC 93 に一気に跳ね上がりました！
とても役に立つ記事をアップしてくださり、本当に有難うございます。
とても助かりました！