ページの表示速度を向上する機能があります。この機能は、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には適用されません。

画像のLazyload

WordPress5.5より導入された本体の機能です。loading=”lazy”という属性が画像に付与されます。これにより画像の読み込み遅延が可能になります。画像のLazyloadを使用しない場合、チェックをオフにしてください。

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

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-gzip
	BrowserMatch ^Mozilla/4 gzip-only-text/html
	BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

	# 画像など圧縮済みのコンテンツは再圧縮しない
	SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE text/js
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/rss+xml
	AddOutputFilterByType DEFLATE application/atom_xml
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE application/x-httpd-php
	AddOutputFilterByType DEFLATE application/x-font-ttf
	AddOutputFilterByType DEFLATE application/x-font-woff
	AddOutputFilterByType DEFLATE application/x-font-opentype
	AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>