ver1.1から実装された機能です。

Emanon Proには、ページの表示速度を向上するための設定機能があります。この機能は、Googleの「PageSpeedInsights」の基準に沿っており、CSSの圧縮、HTMLの圧縮や、読み込み遅延を可能とします。

ページ表示速度の設定

WordPress管理画面 > 外観 > カスタマイズ > ページ表示速度設定> をクリックすると、下記画面が表示されます。

ページ表示速度設定

以下の設定は、「Head Cleane」や「W3 Total Cache」などの圧縮・キャッシュ関連のプラグインと機能が重複しますのでご注意ください。また、デザインが崩れる場合、Emanon Proのページ表示速度設定を無効に戻してください。

Jqueryの最適化

Emanon Proは、WordPressのデフォルトで読み込むjQueryをGoogleのCDNに変更しています。CDNとは「Contents Delivery Networ」の略で、CSSや画像、Javascriptファイル等を、CDNサーバーにキャッシュすることでサーバー負荷を分散させる仕組みです。

「Jqueryの最適化」を有効にすると、通常headタグ内で読み込んでいるJqueryをfooterに移動することができ、レンダリングをブロックを回避することができます。結果、ページの表示速度改善につながります。

レンダリングとは、ブラウザがHTML、CSS、JavaScriptなどのデータをサイトとして表示させる処理のことです。レンダリングの処理改善がページの表示スピード改善につながります。

CSSの最適化

Emanon Proでは、デザインに関係する一部のCSSや外部cssファイルをインライン化の処理を施しています。具体的には、lib/theme-inline-styles.phpをheadタグ内に出力しています。

「CSSの圧縮」を有効にすると、親テーマ・子テーマのCSS、animate.min.cssを圧縮し、style-min.cssに統合されます。「CSSの圧縮」は、YUI Compressor(lib/theme-cssmin.php)を使って処理をしています。

「font-awesome.cssの読み込み遅延」を有効にすると、rel=subresourceの設定により、font-awesome.cssを事前読み込みを行い、body下部の$(‘#font-awesome-css’).attr(‘rel’, ‘stylesheet’)により、font-awesome.cssを読み込む処理をしています。

親テーマ、子テーマのstyles.cssを編集した場合(classの追加や変更など)、「CSSの圧縮」設定を無効に戻し、再び有効にすることでCSSがサイトに反映されます。

HTMLの圧縮

「HTMLの圧縮」を有効にすると、HTML内のtabや改行などを除去し、ファイルサイズを圧縮します。

プラグイン「Plugin Load Filter」

WordPressには、様々な機能を追加できるプラグインがあります。便利な反面、プラグインの使用はページの表示速度に影響を与えます。そこで、おすすめしたいのが、「Plugin Load Filter」です。

「Plugin Load Filter」は、プラグインによる処理を必要なページに限定することで、Webサイト全体の表示速度を最適化することができます。

「Plugin Load Filter」の使い方については、セルティスラボ様のサイトをご覧下さい。

mod_expiresを使った高速化

mod_expiresとは、キャッシュを.htaccessに設定することで同じファイルの読み込みを制御し、ページ表示を高速化するApacheのモジュールです。WordPressのルートフォルダにある .htaccessをデスクトップなどに保存した上で下記のコードを追記します。

上書きではなく、追記です。ご注意ください。万が一、WordPressが表示されなくなった場合が、保存した.htaccess
に戻しましょう。

mod_deflateを使った高速化

mod_deflateとは、ファイルを圧縮することで、画面表示を高速化するためのApacheのモジュールです。mod_expiresを使った高速化と同様に.htaccessに下記のコードを追記します。