1. ページ表示速度最適化について
( 1 ) 表示速度を確認する方法
Google が公式提供しているウェブページの表示速度計測ツール Page Speed Insights （ ページスピードインサイト ）で確認してください。
URL を入力するとモバイル・PC 共にページを読み込んで、表示速度の下落要因のチェック・スクロールせずに見える範囲（ ファーストビュー ）の画像出力などをしてくれます。また、改善項目や診断結果を提示してくれるのでサイトの問題点を掴みたいときに便利です。
( 2 ) 表示速度が下がる主な要因
Page Speed Insight で頻繁に挙がる項目は次です。
- レンダリングを妨げるリソースの除外
- 次世代フォーマットでの画像の配信
- オフスクリーン画像の遅延読み込み
- 適切なサイズの画像
- サーバー応答時間の短縮（ TTFB ）
- 静的なアセットと効率的なキャッシュポリシーの配信
上記が挙がる主な要因はプラグインと画像です。
それぞれの数が増えれば表示速度が下がります。
- プラグイン：プラグインのスクリプト・スタイルシートがレンダリングを妨げるため
- 画像：そのページで表示している画像の数・サイズ・仕様が読み込み速度に影響するため
( 3 ) 当テーマの考え・仕様
当テーマの考え
100点が取れることに越したことはありませんが、
次の二つが最も大事だと考えてテーマの仕様を決めています。
- 初めてページが表示されたときの閲覧者の印象を良くする
スタイルシート読み込み完了までの画面ちらつきを最小限に抑える
- スクリプトが正しく動作する
そのため、次の改善項目が挙がる場合がありますので予めご了承ください。
- レンダリングを妨げるリソースの除外：WordPress 本体【 jquery 】が該当
- 使用していない CSS を削除してください：テーマのスタイルシートが該当
当テーマの仕様
テーマでは主に レンダリングを妨げるリソースの除外 オフスクリーン画像の遅延読み込み を改善する設定ができます。他の項目の改善はお勧めのプラグインを紹介します。
2. ページ表示速度最適化の設定方法
( 1 ) テーマで設定すること
次で設定してください。
新規設定や変更後は必ず [ 保存して公開 ] をしてください。
- 外観 ＞ カスタマイズ ＞ テーマ基本設定＞ ページ表示速度最適化
- 各項目
- チェック・入力する
次の 項目 を設定できます。設定する項目をチェック・入力してください。
画像 / iframe 非同期の設定
そのページのオフスクリーン画像 / iframe が遅延読み込みになります。次から選択してください。
- 設定しない
- テーマ機能
- WordPress 機能
テーマ機能のとき
WordPress 本体バージョンに関係無く非同期設定が適用されます。
-
画像
対象画像タグ全てに
loading="lazy"が付加されます。非同期にしない画像タグにloading="lazy"やloading="eager"は付加されません -
iframe
width 属性 / height 属性の記述がある iframe タグ全てに
loading="lazy"が付加されます
WordPress 機能のとき
次の WordPress 本体バージョンのときに非同期設定が適用されます。
-
画像：WordPress 5.5 以上
対象画像タグ全てに
loading="lazy"が付加されます。非同期にしない画像タグはテーマ側でloading="eager"に書き替えします -
iframe：WordPress 5.7 以上
width 属性 / height 属性の記述がある iframe タグ全てに
loading="lazy"が付加されます
プラグインで設定するとき
設定するときは WordPress 機能 を選択してください。
次の箇所で直接入力する画像は非同期にしない設定ができます。
対象画像
- 記事 に直接入力した画像
- ウィジェット テキスト カスタムHTML に直接入力した画像
- フリースペース ( 外観 ＞ カスタマイズ ＞ フリースペース ) の コンテンツ に直接入力した画像
非同期にしない設定方法
画像タグの class 属性に skip-lazy を追加してください。
|
1 |
<img src="画像URL" alt="" width="250" height="100" class="skip-lazy alignnone size-full wp-image-001" /> |
iframeタグに loading="eager" を追加してください。
|
1 |
<iframe loading="eager" src="https://www.youtube.com/embed/xxxxx" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> |
スクリプトを非同期
WordPress 本体【 jquery 】以外とプラグインが対象です。
- WordPress 本体の【 jquery 】は他のスクリプトを動作させる 大本のスクリプト のため同期読み込みにしています
- プラグインは defer 読み込みになります
- WordPress 本体とテーマの一部は async 読み込みになります
- 大体のプラグインのスクリプトは非同期読み込みにしても正しく動作すると思われますが、プラグインによっては不具合が起こる場合もありますので設定後は十分に確認してください
テーマ以外のスタイルシートを非同期
WordPress 本体とプラグインが対象です。
WordPress 本体とプラグインのスタイルシートを非同期読み込みにします。
テーマのスタイルシートを非同期
テーマのスタイルシートを非同期読み込みにします。
別途にスクロールせずに見える範囲に使用している CSS【 クリティカル CSS 】をインライン化します。
- スクロールせずに見える範囲に使用している CSS は クリティカル CSS と呼びます
（ 予備 ）追加するクリティカル CSS
追加するクリティカル CSS を設定できます。
- スタイルシートを非同期読み込みにすると読み込み完了まで 画面ちらつき（ 一瞬だけデザインが崩れたように表示される現象 ）が起こります
- 個別にカスタマイズしていて、画面ちらつきが特に気になるときは、個別カスタマイズに利用している CSS を入力してください
（ 予備 ）先読みする <link rel="preload"> タグ
コンテンツの先読みができる preload タグを設定できます。
-
preload タグの詳細は次のサイト様を参考にしてください。
参考サイト： rel="preload" によるコンテンツの先読み
PC で表示速度より画面ちらつき軽減を優先する
PC だけテーマのスタイルシート等を先読みにして画面ちらつき軽減を優先します。
- PC はモバイルより画面が大きいので画面ちらつきが目立つ場合があります。画面ちらつきが特に気になるときは設定してください
- 余談ですが、Google はモバイルファーストインデックス採用中のため PC の表示速度はページ評価基準と無関係だろうと推測します
表示速度チェックボタンを表示
WordPress にログインしているときは、サイト左側中央に、表示速度チェックボタンが表示されます。閲覧者には表示されませんのでご安心ください。
( 2 ) プラグインで設定すること
他の項目の改善にお勧めのプラグインを紹介します。
EWWW Image Optimizer
画像のファイルサイズを圧縮・画像の遅延読み込み・次世代フォーマット ( WebP ) 変換などができるプラグインです。
改善できる項目
- 次世代フォーマットでの画像の配信
プラグインのインストール・設定・使い方など詳細は次のサイト様を参考にしてください。
参考サイト： EWWW Image Optimizer
Webp 対応方法は次のサイト様を参考にしてください。
参考サイト： EWWW Image Optimizer
WP Fastest Cache
キャッシュシステムの設定でサイト表示速度の改善ができるプラグインです。
改善できる項目
- 静的なアセットと効率的なキャッシュポリシーの配信
全般的な表示速度の改善ができますが、個人的には Gzip 圧縮・ブラウザキャッシュ だけ設定をしています。
プラグインのインストール・設定・使い方など詳細は次のサイト様を参考にしてください。
参考サイト： WP Fastest Cache
( 3 ) その他の設定
PHP バージョン
PHP バージョンが低いと処理速度が落ちますのでサーバー推奨のバージョンに設定することをお勧めします。
改善できる項目
- サーバー応答時間の短縮（ TTFB ）
記事に直接入れる画像サイズ
PC の記事欄の横幅に合わせた画像は、モバイルで大き過ぎる指摘が挙がるときがありますので、PCとスマホで表示を区分するショートコードを利用して画像を分けることをお勧めします。
改善できる項目
- 適切なサイズの画像