wordpress高速化（Enable gzip compression）Grade(F→A)

gtmetrixでサイトの表示速度を調べたら、遅いって言われたので、改善しようと思います。

「Enable gzip compression」って何？っていう話ですが、直訳「gzip圧縮を有効にする」です。Webサイトの表示をした際、通信するのに、 どれくらい やり取りの量が大きくなるかの指標ってことですかね。対策練っていきます

サイトの状態（Enable gzip compression）Grade(F)
対策
実際に設定する
1. .htaccessの設定
結果

サイトの状態（Enable gzip compression）Grade(F)

下記のような状態です。grade(F)って！

対策

お名前.comによると、『ホームページの表示速度を早くしたい（mod_deflate、mod_expires）』で対応できるとのことです。

共用サーバーSDでは、mod_deflate、mod_expiresのモジュール使用を許可しています。
2つのモジュールを設定することで、ホームページの表示速度を上げる効果が期待できます。
使用する場合は、.htaccessファイルに記述を行ってください。
※.htaccessの設置・利用に関してはサポート対象外となります。
下記でご案内の記述内容については、あくまでご参考情報となりますことをご了承ください。
▼mod_deflate
　データを圧縮することで転送量を削減し、表示速度を早くするモジュールです。

SetOutputFilter DEFLATE
gifやjpgなど圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _.utxt$ no-gzip
htmlやcssなどは圧縮
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

▼mod_expires
ブラウザのキャッシュを利用する設定を行うことで、表示速度を早くするモジュールです。
ExpiresActive On ExpiresByType image/png “access plus 1 months” ExpiresByType image/jpeg “access plus 1 months” ExpiresByType image/gif “access plus 1 months” ExpiresByType text/css “access plus 1 months” ExpiresByType text/javascript “access plus 1 months”
引用元）お名前.com

実際に設定する

このサイトはSimplicityを使ってるのですが、テーマ改造で下記紹介がしてありました。

コピペ一発でSimplicityを結構高速化する方法（外部リンク）

ブラウザキャッシュの設定（2回目以降の表示が速くなる方法）、リソースを圧縮の設定（表示したい情報を小さく圧縮するので素早く表示される方法）を紹介しています。

期待できる高速化の対象は、

①(GIF、JPEG、PNG、CSS、JavaScript、WEBフォントファイル）→ブラウザキャッシュの設定
②(TEXT、HTML、XHTML、XML、RSS、CSS、JavaScript、WEBフォントファイル）→リソース圧縮

.htaccessの設定

.htaccessに下記設定を追加するだけです。念のためバックアップを取ってから編集しましょうね。

ETags(Configure entity tags) を無視する設定
Header unset ETag

FileETag None
Enable Keep-Alive を設定
Header set Connection keep-alive
MIME Type 追加
AddType text/cache-manifest .appcache AddType image/x-icon .ico AddType image/svg+xml .svg AddType application/x-font-ttf .ttf AddType application/x-font-woff .woff AddType application/x-font-woff2 .woff2 AddType application/x-font-opentype .otf AddType application/vnd.ms-fontobject .eot
プロクシキャッシュの設定（画像とフォントをキャッシュ）
Header set Cache-Control “max-age=604800, public” # プロキシサーバーが間違ったコンテンツを配布しないようにする Header append Vary Accept-Encoding env=!dont-vary
ブラウザキャッシュの設定

ExpiresActive On
# キャッシュ初期化（1秒に設定） ExpiresDefault "access plus 1 seconds" # MIME Type ごとの設定 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-woff2 "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/vnd.ms-fontobject "access plus 1 year"

Gzip圧縮の設定

SetOutputFilter DEFLATE
# 古いブラウザでは無効 BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html # 画像など圧縮済みのコンテンツは再圧縮しない SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary AddOutputFilterByType 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-opentype
引用元)
コピペ一発でSimplicityを結構高速化する方法（外部リンク）

結果

なんだか、、劇的改善しちゃいました。やった自分もびっくりです。

とても有効な設定なんですね。。。体感はどうでしょうか。

ミリミリ測定したわけじゃありませんが、、４秒くらい表示にかかっていたところが、、２秒くらいの表示になったようです。

『うーんまだ表示されないなぁー遅いなぁー』が、『うーん、、あ、表示された』くらいの速度に変わりました。

すごい！