Emanon設定表示速度 | WordPress 有料テーマ Emanon Pro

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

ページ表示速度の設定
PageSpeed Insightsのスコア改善

ページ表示速度の設定

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 week"
    ExpiresByType application/javascript "access plus 1 week"
    ExpiresByType image/gif "access plus 1 week"
    ExpiresByType image/jpeg "access plus 1 week"
    ExpiresByType image/png "access plus 1 week"
    ExpiresByType image/webp "access plus 1 week"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 week"
    ExpiresByType application/x-shockwave-flash "access plus 1 week"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/font-woff "access plus 1 year"
    ExpiresByType application/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を使った高速化と同じくWordPressのルートフォルダにある .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 application/javascript
    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/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE font/woff
    AddOutputFilterByType DEFLATE application/font-woff
    AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>