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

ページ表示速度の設定

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

注意事項

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

jQueryの最適化

 「CDNでjQueryを読み込む」を有効にすると、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)を使って処理をしています。

Styles.cssのカスタマイズ

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

注意事項

Emanon ProまたはEmanon Businessをアップデートするとデザインが崩れる場合があります。「CSSの圧縮」設定を無効に戻し、Webブラウザのキャッシュを削除した後に、「CSSの圧縮」設定を有効に切り替えてください。

HTMLの圧縮

HTMLの圧縮」を有効にすると、HTML内のtabや改行などを除去し、ファイルサイズを圧縮します。コードブロック整形済みブロックを使用する場合、HTMLの圧縮」は推奨されません。

プリフェッチ (prefetch)

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

画像のLazyload

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

PageSpeed Insightsのスコア改善

.htaccessの設定やプラグインの使用でPageSpeed Insightsのスコア改善を図ることができます。次に紹介する内容は株式会社イノ・コードの無料サポートの対象外となりますので、カスタマイズによる効果保証やトラブルの発生については自己責任となりますのでご注意ください。

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/webP "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>