【Cocoon】「キーリクエストのプリロード」の表示を解決するカスタマイズ

今回は、WordPressテーマ「Cocoon」を使用しているWEBサイトを「PageSpeed Insights」でテストしたとき、「改善できる項目」に「キーリクエストのプリロード」が表示された場合の解決方法を紹介する。

きちんと高速化の設定を行っているはずなのに、なぜか表示され続けて困っている人におすすめのカスタマイズだ。

Cocoonの「サイト高速化」のオススメ設定はコチラ！

Cocoonで「キーリクエストのプリロード」が消えない件
- 「キーリクエストのプリロード」とはなにか？
- Cocoonはデフォルトでプリロードの設定を行っているはずなのだが……
Cocoonのプリロードの不具合を解決する方法
終わりに

Cocoonで「キーリクエストのプリロード」が消えない件

私は、Cocoonの最適化を行うにあたって、サーバーやテーマの最適化の設定、そして各種の高速化プラグインを組み合わせるなどの方法を試してきた。

しかし、依然として「改善できる項目」に「キーリクエストのプリロード」が表示されたままなのだ。

これをどうしたらいいものか？

「キーリクエストのプリロード」とはなにか？

そもそも、この「キーリクエストのプリロード」とは、どういう意味なのだろうか？

これは、「WEBサイトを構成するファイルの読み込み段階を減らそう」ということを言っているのである。

具体的な例を挙げよう。下のふたつのうち、どちらが早くブラウザにページが表示されるだろうか？

「読み込み開始 → A → B → C → D → E → 表示」
「読み込み開始 → A → B C D → E→ 表示」

もちろん、後者だ。

なので、出来るだけ手前で読み込んでも良いものは、下のコードのように「rel=”preload”」を使って宣言しよう。

// プリロードの例
<link rel="preload" href="mycus-hoge.js" as="script">

こうすることで、ブラウザが「このファイルはプリロードが宣言されてるから、他のファイルとまとめて前のほうで読み込んでしまおう」と判断し、WEBサイトの読み込みにかかる時間が短縮される。

これが、「キーリクエストのプリロード」が指し示す意味だ。

Cocoonはデフォルトでプリロードの設定を行っているはずなのだが……

Cocoonのフォーラムを調べてみると、以前よりプリロードについての質問が寄せられていることを確認できる。

PageSpeed Insights　キーリクエストのプリロードの改善について

そして、ひとまずの解決策が示され、テーマ制作者の「わいひら氏」は「親テーマにpreloadの設定を実装した」と発言している。

なので、親テーマの「header.php」を確認してみよう。

確かにこの通り、全ての「FontAwesome」がリンクタグによってプリロードに宣言されている。

親テーマの「header.php」

<!-- Preload -->
<link rel="preload" as="font" type="font/woff" href="<?php echo FONT_ICOMOON_WOFF_URL; ?>" crossorigin>
<link rel="preload" as="font" type="font/ttf" href="<?php echo FONT_ICOMOON_TTF_URL; ?>" crossorigin>
<?php if (is_site_icon_font_font_awesome_4()): ?>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_4_WOFF2_URL; ?>" crossorigin>
<?php else: ?>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_5_BRANDS_WOFF2_URL; ?>" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_5_REGULAR_WOFF2_URL; ?>" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_5_SOLID_WOFF2_URL; ?>" crossorigin>
<?php endif; ?>

しかし、依然として改善項目には「キーリクエストのプリロード」が表示されてしまう。

つまり、原因は不明だが、このコードは完全な状態では動いていないということだ。

Cocoonのプリロードの不具合を解決する方法

それでは、この不具合を解決する方法を紹介したい。

原因を特定し、解決までの手順を紹介する。

原因の特定

とりあえずこのままでは意味がないので、何を「プリロードに宣言しよう」と言われているのか調べてみよう。

クリックすると、注意の内容が表示される。

そして、コードの全容はこれだ。

プリロードの警告の中身

// 例（私のサイトの場合）
// https:// は省略
mycus-tom.com/wp-content/themes/cocoon-master/webfonts/fontawesome5/webfonts/fa-regular-400.woff2
mycus-tom.com/wp-content/themes/cocoon-master/webfonts/fontawesome5/webfonts/fa-solid-900.woff2

このように、ウェブフォントである「fontAwesome5」が原因のようだ。

fa-regular-400.woff2
fa-solid-900.woff2

なぜなのかはよくわからないが、上記の二つのフォントがうまくプリロードされていない。

では、これらのウェブフォントは「どこで」設定されているのだろうか？

「fa-regular-400」を手掛かりに、親テーマ内のファイルを調べてみよう。

Cocoonの親テーマ

// cocoon/lib/_defins.php
//Font Awesome5
define('FONT_AWESOME_5_REGULAR_WOFF2_URL', get_template_directory_uri().'/webfonts/fontawesome5/webfonts/fa-regular-400.woff2');
define('FONT_AWESOME_5_SOLID_WOFF2_URL', get_template_directory_uri().'/webfonts/fontawesome5/webfonts/fa-solid-900.woff2');

そうすると、「lib」フォルダの「_defins.php」ファイル内に存在することが判明した。

このファイルが行っていることは、「define」関数を使った「名前付き定数の定義」である。各種フォルダやファイル・外部リンクに対して「名前を付けておく」ことで、ほかのファイルへの呼び出しを円滑に進める下ごしらえといったところだ。

そして、先ほどのふたつのリンクに付けられている定数がこれだ。

FONT_AWESOME_5_REGULAR_WOFF2_URL
FONT_AWESOME_5_SOLID_WOFF2_URL

これらの単語を手掛かりに親テーマの「header.php」を探すと、プリロードのコード集に、先ほどの定数が存在するふたつのリンクタグを確認することができる。

問題が起きているコード

<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_5_REGULAR_WOFF2_URL; ?>" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_5_SOLID_WOFF2_URL; ?>" crossorigin>

つまり、このふたつのリンクのプリロードが上手く行われていないということだ。

解決方法

さて、先ほど原因が特定できたので、問題の解決に移ろう。

なお、解決にあたっては「テーマエディター」を使用して親・子テーマのヘッダーファイルを編集するので、いちおうバックアップを取っておこう。

また「テーマエディター」は、管理者画面の左側サイドバーの「外観」から開くことができる。

ヘッダーファイルを開くには、右側のテーマファイルバーから「テーマヘッダー」という部分を探そう。

子テーマの「header.php」

まずは、子テーマの「header.php」の編集を行おう。

以下のコードを「＜/head＞」の直前にコピペしてほしい。

子テーマのプリロード

<!-- Preload（子テーマ） -->
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_5_REGULAR_WOFF2_URL; ?>" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_5_SOLID_WOFF2_URL; ?>" crossorigin>

そして、「ファイルを更新」を押して保存しよう。

これで子テーマのほうは完了した。

親テーマの「header.php」

次は、親テーマの「header.php」の編集に取り掛かろう。

親テーマのテーマファイルを開くには、右上の「編集するテーマを選択」から切り替えればよい。

そして、親テーマのプリロードの部分を探そう。「＜!– Preload –＞」で探すと見つけやすい。

そして、下の画像の赤枠で囲っている部分を削除しよう。

削除したのが、下のコードになる。

親テーマのプリロード

<!-- Preload -->
<link rel="preload" as="font" type="font/woff" href="<?php echo FONT_ICOMOON_WOFF_URL; ?>" crossorigin>
<link rel="preload" as="font" type="font/ttf" href="<?php echo FONT_ICOMOON_TTF_URL; ?>" crossorigin>
<?php if (is_site_icon_font_font_awesome_4()): ?>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_4_WOFF2_URL; ?>" crossorigin>
<?php else: ?>
<link rel="preload" as="font" type="font/woff2" href="<?php echo FONT_AWESOME_5_BRANDS_WOFF2_URL; ?>" crossorigin>
<?php endif; ?>

このように、不具合を起こしていたリンクタグを削除しただけだ。

そして、ちゃんと「ファイルを更新」を押して保存しよう。

これで、親テーマのほうも完了だ。

これが、Cocoonで起きているプリロードの不具合を解決する方法だ。

次は、ちゃんと直っているかどうか確認してみよう。