ページの表示速度を向上する機能があります。この機能は、CSSの圧縮、HTMLの圧縮や、読み込み遅延 、prefetch(プリフェッチ:事前取得)を可能にします。

ページ表示速度の設定

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

ページ表示速度の設定
注意事項

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

jQueryの最適化

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

JQueryの最適化」を有効にすると、通常headタグ内で読み込んでいるJQueryをfooterに移動し、レンダリングブロックを回避することができます。

CSSの最適化

Emanon Proでは、デザインに関係する一部のCSSや外部cssファイルをインライン化の処理を施しています。

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のカスタマイズ

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

HTMLの圧縮

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

プリフェッチ (prefetch)

サイトのリンクをクリックまたはタップする直前にリンク先のページ情報をprefetch(プリフェッチ:事前取得)し、ページ遷移の体感速度を向上する機能です。なおこの機能は、IEとFirefoxには適用されません。

Emanon Pro ver 2.0.8で追加

プリフェッチ機能は、Emanon Pro ver 2.0.8で追加されました。

ページ表示速度改善のためのカスタマイズ

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

mod_expiresを使った高速化

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

# ブラウザキャッシュの設定<ifModule mod_expires.c>ExpiresActive On# キャッシュ初期化 (1秒に設定)ExpiresDefault "access plus 1 seconds"# MIME Type ごとの設定ExpiresByType text/css "access plus 1 weeks"ExpiresByType text/js "access plus 1 weeks"ExpiresByType text/javascript "access plus 1 weeks"ExpiresByType image/gif "access plus 1 weeks"ExpiresByType image/jpeg "access plus 1 weeks"ExpiresByType image/png "access plus 1 weeks"ExpiresByType image/svg+xml "access plus 1 year"ExpiresByType application/pdf "access plus 1 weeks"ExpiresByType application/javascript "access plus 1 weeks"ExpiresByType application/x-javascript "access plus 1 weeks"ExpiresByType application/x-shockwave-flash "access plus 1 weeks"ExpiresByType application/x-font-ttf "access plus 1 year"ExpiresByType application/x-font-woff "access plus 1 year"ExpiresByType application/x-font-woff2 "access plus 1 year"ExpiresByType application/x-font-opentype "access plus 1 year"ExpiresByType application/vnd.ms-fontobject "access plus 1 year"</IfModule>

mod_deflateを使った高速化

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

# Gzip圧縮の設定<IfModule mod_deflate.c>SetOutputFilter DEFLATE# 古いブラウザでは無効BrowserMatch ^Mozilla/4\.0[678] no-gzipBrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html# 画像など圧縮済みのコンテンツは再圧縮しないSetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-varyAddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE text/jsAddOutputFilterByType DEFLATE image/svg+xmlAddOutputFilterByType DEFLATE application/xmlAddOutputFilterByType DEFLATE application/xhtml+xmlAddOutputFilterByType DEFLATE application/rss+xmlAddOutputFilterByType DEFLATE application/atom_xmlAddOutputFilterByType DEFLATE application/javascriptAddOutputFilterByType DEFLATE application/x-javascriptAddOutputFilterByType DEFLATE application/x-httpd-phpAddOutputFilterByType DEFLATE application/x-font-ttfAddOutputFilterByType DEFLATE application/x-font-woffAddOutputFilterByType DEFLATE application/x-font-opentypeAddOutputFilterByType DEFLATE application/vnd.ms-fontobject</IfModule>