ウェブサイトの表示速度を改善するには、様々なアプローチがありますが、ここでは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」に記述する必要があります。

プラグインでページ全体をgzip圧縮してレスポンスを向上

「WP HTTP Compression」というプラグインを利用することで、WordPressで表示するページ自体をgzipに圧縮して転送量を減らすことができます。

サイト全体をgzip圧縮して表示速度を劇的に速くしてくれるプラグイン「WP HTTP Compression」

WordPressを利用していて、記事数が多くなってきたり、プラグインやサイドバーコンテンツも増えてくるとページの表示が遅くなってきます。 また、アクセスが増えることによってサーバーへの負荷も高くなり、せっかくアクセスしてきてくれた訪問者がストレスを感じて、すぐに離れていってしまうことになります。 ページの表示速度のパフォーマンスを改善する方法は多岐に渡りますが、今回はページ全体をgzip圧縮してブラウザに読み込ませることで、劇的に表示速度を速くしてくれるとてもシンプルなWordPressのプラグインをご紹介したいと思います。 ※gzip圧縮したページの読み込みは、ブラウザによって未対応の場合…

DigiPress