PageSpeed Insightsの「キーリクエストのプリロード」にちゃんと対応する方法

SEO対策のために、サイト所有者が悪戦苦闘してるPageSpeed Insights。

一つ一つがほんとにややこしくて嫌になりますね。
3秒くらいいいやん!!
とか思ってしまいますが、サイト制作者としては対応しないといけません。

今回は、キーリクエストのプリロード という警告と戦いました。

キーリクエストのプリロードに対応する

お客様のサイトで、スクショ撮るの忘れたんだけど
PageSpeed Insightsの分析結果画面で「キーリクエストのプリロード」
という警告がトップに出てきてました。

調べると、割と簡単に解決できそうでした。
これに関しては記事を書いてくれてる方がたくさんいるので、参考にしてください。
ゆうやの雑記ブログ
コアラの更新ブログ

あ、気をつけなきゃいけないのは、

type=”font/woff” のところは
問題のURLのフォントと合わせなきゃいけないというところ。

woff2やttfの場合もあります。

で、この通りにやったんだけど、警告が消えない。

この方と全く同じ現象でした。

PageSpeedInsightsで「キーリクエストのプリロード」という問題が起こり、他の方のサイトを参考にheader.php内の<head>タグにコードを記述したのですが、何度やっても合格しません。

恐らく何かのコードが間違っているのだと思いますが、わかる方おられましたら是非ともお力添えをお願い致します。

問題のURL
https://(省略)/wp-content/themes/lionmedia/fonts/icomoon.ttf?gizg5m

貼り付けたコード

「link rel=”preload” href=”https://(省略)/wp-content/themes/lionmedia/fonts/icomoon.ttf?gizg5m” as=”font” type=”font/ttf” crossorigin」
です。

ウェブフォントの種類がテンプレートだとwoffやwoff2だったのですが、自分のサイトではicomoon.ttfなのでフォントの拡張子は「font/ttf」としました。

上のコードはどこかおかしいのでしょうか?

出典:teratail

ちなみに上記の質問に回答はひとつもついてませんでした。

コードが反映されてるのか確認する

そもそも、ちゃんとこの記述はheadの中に反映されてるのか?(ページのソースで確認)
エラーを起こしてないのか?(デベロッパーツールで確認)

まずはページのソースを確認しました。

するとどこにも記述がない!!

そう。テーマによって、またautoptimizeなどのプラグインを入れてる場合、header.phpに記述しても反映されないっぽいのです。

そういうときはfunctions.phpに書くべし!

functions.phpでheadに反映させる

以下のコードにlinkのタグを記入してfunctions.phpに貼り付けてください。
もちろん、作業の前にバックアップは必須です。

// head内にカスタム用のコードを追加する
function meta_headcustomtags() {
$headcustomtag = <<<EOM

<!-- headに表示させたいコードをここに書く-->

EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

そしたらちゃんと反映されました。
警告も消えた。

しかし、PageSpeed Insightsのスコアは、60から55に、なぜか落ちてしまいました。
ほかのも対応しないといけないってことですね。
いやそれはわかってるんだけど、この3.88sは確実に消えたわけでしょ〜
Googleほんとに嫌い。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

one × 4 =