読み込み遅延 ・CSSの圧縮・prefetch（プリフェッチ：事前取得)などでWebサイトの表示読み込み速度を向上させる機能です。

目次
  1. ページ表示速度の設定
    1. jQueryの最適化
    2. CSSの最適化
    3. HTMLの圧縮
    4. プリフェッチ (prefetch)
    5. スクリプトの遅延読み込み
      1. 遅延読み込み対象にするスクリプトのキーワード
      2. 使用していない JavaScript の削減を遅延させる
      3. 遅延読み込み対象にするスクリプトのキーワード入力例と注意事項
      4. 遅延読み込みを無効にするURLのキーワード
  2. PageSpeed Insightsのスコア改善
    1. mod_expiresを使った高速化
    2. mod_deflateを使った高速化
    3. プラグイン Converter for Media

ページ表示速度の設定

WordPress管理画面 ＞ Emanon設定 ＞ 表示速度をクリックすると、下記画面が表示されます。

注意事項

以下の設定は、「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がstyle-min.cssに統合されます。

注意事項

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

Styles.cssのカスタマイズ

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

HTMLの圧縮

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

プリフェッチ (prefetch)

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

スクリプトの遅延読み込み

スクリプトを遅延読み込みさせるを有効に切り替えると、遅延読み込み対象にするスクリプトのキーワードが反映され、対象となるスクリプトの読み込みが遅延します。スクリプトを遅延することでページの読み込み速度の改善する狙いがあります。

遅延読み込み対象にするスクリプトのキーワード

遅延読み込みさせる< script >タグのコードからキーワードを抜粋します。例えば、Googleアナリティクスの場合、下記コードがHTMLに出力されます。（Webブラウザの開発者ツールでWebサイトのソースコードをご覧くださ違）

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script>

上記のコードからgtag/jsをコピーし、遅延読み込み対象にするスクリプトのキーワードの入力欄に反映、保存します。

以上の設定で、Googleアナリティクスが遅延読み込み対象となり、data-type=”lazy”が追加されます。

<script async data-type="lazy" data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script>

下記は、主なスクリプトと入力例です。

遅延読み込み対象入力例
Googleアナリティクスgtag/js
Googleアドセンスadsbygoogle.js
YouTube 動画プレーヤーをww-widgetapi.js
遅延読み込み対象

スクリプトを全て遅延読み込みするとWebサイトに動作不良が発生する可能性があります。
遅延読み込みを設定した後は、動作に異常がないかチェックしてください。
遅延読み込みさせるスクリプトは、自己責任のもと設定して下さい。

使用していない JavaScript の削減を遅延させる

https://pagespeed.web.dev/をクリックし、WebサイトURLを入力す分析をクリックします。使用していない JavaScript の項目を確認し、遅延読み込み対象にすべきスクリプトを調査します。

遅延読み込み対象にするスクリプトのキーワード入力例と注意事項

1行につきスクリプトのキーワードを１つ入力してください。複数のキーワードがある場合は下記の入力例のように改行してください。

遅延読み込みを無効にするURLのキーワード

スクリプトの読み込み遅延を無効にしたいページURLからキーワードを抜粋して入力してください。

ページURL例：https://123.jp/thanks-page/

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>

プラグイン Converter for Media

プラグイン Converter for Mediaをインストール・有効化することで、メディアにアップした画像をWebPフォーマットに変換できます。

pngやjpagと比較すると、WebPは画像の容量が小さいためページの読み込み速度を改善が期待できます。

関連記事
Converter for Media – 画像最適化 | WebP & AVIF に変換
Converter for Media – 画像最適化 | WebP & AVIF に変換
WebP &; AVIF Converter を使用して、あなたのウェブサイトをスピードアップします。画像を最適化し、標準フォーマットの代わりに W…
WordPress.org 日本語 WordPress.org 日本語