ウェブサイトの表示速度を改善するには、様々なアプローチがありますが、ここではWordPressとDigiPressテーマによる、ページ表示速度の改善(データ転送量の削減)方法について解説します。
DigiPressテーマでは、構造上、多くのCSSやJavascriptを読み込んでいますが、ページの表示速度を短縮するために、DigiPressテーマでは読み込まれるCSSとJavascriptの最軽量化を施しています。
具体的には、DigiPressで実際に読み込まれるCSS、Javascriptには、人が見やすいように整形されたスペースと改行を全て排除して、ファイルサイズを縮小しています。
さらに、DigiPressには最軽量化されたCSSやJavascriptをgzip圧縮したファイルも梱包されており、ブラウザにはこれらのCSSとJavascriptの圧縮ファイルを読み込ませる事によって、さらに飛躍的にページの転送量を削減することができます。
DigiPressのビジュアル設定にて保存した値がプログラムによって記録される「visual-custom.css」も、自動的に軽量化されてgzipに圧縮されます。
ブラウザにgzip形式の圧縮ファイルを読み込ませるようにするには、WordPressのインストールフォルダ内の「.htaccess」に、以下を追記してください。
.htaccessにてgzip形式のCSSとJavascriptを読み込ませる
<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} .js$ [OR]
RewriteCond %{REQUEST_FILENAME} .css$
RewriteCond %{REQUEST_FILENAME} !.gz$
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
</ifmodule>
<ifmodule mod_headers.c>
<filesmatch ".(js|css|xml|gz)$">
Header append Vary Accept-Encoding
</filesmatch>
</ifmodule>
<filesmatch ".js.gz$">
ForceType application/x-javascript
AddEncoding x-gzip .gz
</filesmatch>
<filesmatch ".css.gz$">
ForceType text/css
AddEncoding x-gzip .gz
</filesmatch>
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifmodule>
上記の.htaccessの内容は、WordPressのインストールフォルダの「.htaccess」に記述する必要があります。
対象の「.htaccess」
- サイトURLとWPインストールディレクトリが同じ場合の例
- /public_html/.htaccess
※「public_html」がサイトのドキュメントルートを表す場合 - サイトURLとWPインストールフォルダが異なる場合の例
- /public_html/wordpress/.htaccess
※サイトのルートが「public_html」で、WordPressのインストールフォルダが「wordpress」フォルダの場合
注意事項
プラグインでページ全体をgzip圧縮してレスポンスを向上
「WP HTTP Compression」というプラグインを利用することで、WordPressで表示するページ自体をgzipに圧縮して転送量を減らすことができます。