圧縮を有効にする-WordPressを高速化「PageSpeed Insights」

2016年9月8日 2016年9月15日

花梨

最近ブログのテーマを変えたのですが、なんか重い。ページの表示に時間がかかります。

久々に「PageSpeed Insights」で測定してみました。

「PageSpeed Insights」というのは、Googleが提供するサービスでページの読み込み速度を測定してくれます。

結果… 大変です真っ赤っ赤です。

「PageSpeed Insights」でページの表示時間を測定する

PageSpeed Insightsの使い方は簡単。サイトのURLを入力してクリックするだけです。

PageSpeed Insights

モバイルが39点、PCが50点。これはいけません。

「PageSpeed Insights」は、ページの読み込み速度の測定だけでなく、速度の改善策も提案してくれるのです。

PageSpeed Insightsが示した改善策

「修正が必要」な箇所は４ヶ所

圧縮を有効にする
画像を最適化する
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
ブラウザのキャッシュを活用する

普段使うことのない用語が並んでいて、まったくわかりません。

ひとつひとつ調べながら丁寧に修正していくことにしました。

圧縮を有効化して、wordpressを高速化しよう！

gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。

とGoogleから提案されています。

つまり、圧縮を有効にすると、サーバー側でコンテンツをgzip圧縮してから送信 するので、ページの読み込み速度が劇的に速くなるのです。

wordpressの場合は、deflateを使ってコンテンツを圧縮し、通信にかかるスピードを高速化できます。

やり方は.htaccessに追記するだけなのでそう難しいものではありません。

.htaccessに mod_deflateを設定する

1.FTPソフトで.htaccessをダウンロードして、ローカルで編集する

.htaccessの場所は、私の場合、「public_html」の下にありました。

2..htaccessを編集する

下記のコードを末尾に追記して保存

# mod_deflateを利用して Gzip圧縮

  SetOutputFilter DEFLATE

  # Mozilla4系、IE7、8の古いブラウザでは無効にする
  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

  # GIF、JPEG、PNG、ICOなど圧縮済みの画像は再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  # プロクシサーバが間違ったコンテンツを配布しないようにする
  Header append Vary Accept-Encoding env=!dont-vary

  # 各コンテンツを圧縮する設定
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE text/javascript
  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