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

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

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

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

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

Grede(f)の画像

対策

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

お名前.comの提案

共用サーバー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を結構高速化する方法(外部リンク)

結果

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

Grede(a)の画像

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

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

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

すごい!

スポンサーリンク