WordPressテーマ「Simplicity」の高速化チューニング(.htaccess編)

カテゴリー別今日の人気ランキング
スポンサーリンク

チューニング前のサイト診断をする

WordPressの高速化チューニング には、さまざまな手法がありますが、.htaccessで簡単に設定できる方法を備忘録としてまとめます。

最初に、チューニング前の状況を把握するため、ウェブページの読み込み時間の診断を、次の3サイトで行います。いずれも、高速化の状態を診断し改善点を提示してくれます。

  • GTmetrix:GoogleとYahoo! 両方の診断結果を調べられます
  • PageSpeed Insights:Googleのサービスで、パソコンとモバイルの診断結果を見れます
  • Website speed test:Webサイトのスピードテストができるオンラインサービス

GTmetrixで診断

GTmetrixチューニング前

PageSpeed Insightsで診断

PageSpeed Insightsチューニング前

Website speed testで診断

Website speed testチューニング前

高速化チューニングが必要な項目

診断結果は、GTmetrix(Google:F,Yahoo!:C)、PageSpeed Insights(パソコン:63点,モバイル:52点)、Website speed test(75点)です。

高速化チューニングが必要な項目は、

GTmetrixは、上位から以下のものです。

  1. ブラウザのキャッシュを活用する(Leverage browser caching)
  2. gzip圧縮を有効化(Enable gzip compression)
  3. CSSファイルを縮小する(Minify CSS)
  4. Keep-Alive 応答ヘッダーの有効化(Enable Keep-Alive)
  5. Vary: Accept-Encoding ヘッダー(Specify a Vary: Accept-Encoding header)
  6. CSS @importの使用をやめる(Avoid CSS @import)

PageSpeed Insightsは、修正が必要:3項目、修正を考慮:3項目でした。

  1. ブラウザのキャッシュを活用する(要修正)
  2. 圧縮を有効にする(要修正)
  3. スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する(モバイルのみ要修正)
  4. サーバーの応答時間を短縮する(考慮)
  5. CSS、JavaScript、HTMLを縮小する(考慮)
  6. 画像を最適化する(考慮)

Website speed testは、グレードの低いものは、3項目でした。

  1. Vary: Accept-Encoding ヘッダー(Specify a Vary: Accept-Encoding header)
  2. ブラウザのキャッシュを活用する(Leverage browser caching)
  3. Serve static content from a cookieless domain

.htaccessファイルによる高速化チューニング

この.htaccessファイルは、作者の「Thought is free」さんがSimplicityに付属の htaccess.txt を見直して、足りなかったものを追加して、さらなるWebページ高速化を計ったものです。チューニングが必要な項目のうち、以下の項目に対応しています。

  • Enable Keep-Alive を設定
  • ブラウザキャッシュの設定
  • gzip圧縮の設定

.htaccessの設定

(出典)Thought is free「.htaccess の見直しでWebページ高速化」

設定は簡単で、トップディレクトリにある .htaccessファイルの最終行に、次のコードを追加してサーバーに転送すれば終わりです。

.htaccessチューニング後のサイト診断

チューニング後の結果は、GTmetrix(Google:D,Yahoo!:C)、PageSpeed Insights(パソコン:68点,モバイル:57点)、Website speed test(81点)です。

GTmetrix、PageSpeed Insights、Website speed testの設定前後の比較

測定結果比較

設定後のGTmetrix結果の詳細

GTmetrixチューニング後

.htaccessチューニングの評価

チューニング項目の改善結果をみると、
gzip圧縮チェック

  • 「ブラウザのキャッシュ」と「Keep-Alive 応答ヘッダー」は効果がありました。
  • 「gzip圧縮を有効化」は設定前後で値はまったく同じ。念のため、GIDZipTestで圧縮が行われているかをチェック(右図)したところ、設定前後とも圧縮率83%で同じでした。
  • Keep-Alive 応答ヘッダーの、残1%は、XREAの広告タグが未対応のため。
チューニング項目 GTmetrix WST
Leverage browser caching 0%→ 52% 0%→ 52%
Enable gzip compression 19%→ 19%
Minify CSS 33%→ 32%
Enable Keep-Alive 53%→ 99%
Specify a Vary: Accept-Encoding header 54%→ 54% 50%→ 48%
Avoid CSS @import 55%→ 55%

まとめと今後のチューニング

結果は、期待してたより良くないですが、さらなるチューニングを考えていこうと思います。
テーマのコードを細かく修正・変更するのは困難なので、プラグインで対応できる次の項目を計画しています。

  • EWWW Image Optimizerで画像を最適化(ロスレス圧縮)
  • WP Super Cache or W3 Total Cacheでページキャッシュ(Simplicityはページキャッシュとは相性が悪いそうだが・・)

(参考)Simplicityと相性の悪いWordPressプラグインまとめ

Google PageSpeed Insightsの「スピード診断」のさらなる改善についてはこちらもご覧ください。

基本編の改善結果 前回記事「基本編」で行った、 スピード診断:.htaccessによる「ブラウザのキャッシュの活用」 エクスペ...
スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする