SEO対策のために、サイト所有者が悪戦苦闘してるPageSpeed Insights。
一つ一つがほんとにややこしくて嫌になりますね。
３秒くらいいいやん！！
とか思ってしまいますが、サイト制作者としては対応しないといけません。
今回は、キーリクエストのプリロード という警告と戦いました。
キーリクエストのプリロードに対応する
お客様のサイトで、スクショ撮るの忘れたんだけど
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ほんとに嫌い。