ウェブサイトの表示速度を改善するには、様々なアプローチがありますが、ここでは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を読み込ませる
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
<filesmatch ".(js|css|xml|gz)$">
Header append Vary Accept-Encoding
<filesmatch ".js.gz$">
ForceType application/x-javascript
AddEncoding x-gzip .gz
<filesmatch ".css.gz$">
ForceType text/css
AddEncoding x-gzip .gz
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
上記の.htaccessの内容は、WordPressのインストールフォルダの「.htaccess」に記述する必要があります。
- サイトURLとWPインストールディレクトリが同じ場合の例
-
/public_html/.htaccess
「public_html」がサイトのドキュメントルートを表す場合
- サイトURLとWPインストールフォルダが異なる場合の例
-
/public_html/wordpress/.htaccess
サイトのルートが「public_html」で、WordPressのインストールフォルダが「wordpress」フォルダの場合
プラグインでページ全体をgzip圧縮してレスポンスを向上
「WP HTTP Compression」というプラグインを利用することで、WordPressで表示するページ自体をgzipに圧縮して転送量を減らすことができます。