Google PageSpeed InsightsではSEOの対策にもなるページのレンダリングや実行時間などを総合的に評価した点数を確認することができる.
ここで直近立ち上げたブログの速度を計測しているが、かなり低かった.
今回はそのうち
Preload key requests
を対応する
このエラーはどうも特定のコンテンツを先読み(preload)するように設定しろと伝えようとしているみたい.
使っているテンプレートやデザインによって出てくる文言は異なるみたい.
今回は、下記の二つがPreload key requestsのエラー下に対応するように記載されていた.
http://urusulambda.com/wp-content/themes/dosislite/libs/font-awesome/webfonts/fa-brands-400.woff2
http://urusulambda.com/wp-content/themes/dosislite/libs/font-awesome/webfonts/fa-solid-900.woff2
なので、上記二つをWordPressの設定を変更してPreloadするように変更する.
ここでは、header.phpを編集して、そこに上記のpreload設定を加えます.
加えるべき文言の構文は以下です. 今回はfont-awesomeを使ったフォントなのでfontのタイプとして設定しています.
<link rel="preload" as="font" href="指摘されたアドレス" crossorigin/>なので、今回の場合は、以下のようになります.
<link rel="preload" as="font" href="https://d1rldwchxlz3kf.cloudfront.net/wp-content/themes/dosislite/libs/font-awesome/webfonts/fa-brands-400.woff2" crossorigin/>
<link rel="preload" as="font" href="https://d1rldwchxlz3kf.cloudfront.net/wp-content/themes/dosislite/libs/font-awesome/webfonts/fa-solid-900.woff2" crossorigin/>上記の2行をheader.phpに加えます.
wordPressの管理画面で[Appearence] > [Theme Editor] > [Theme Header (header.php)]を開いて、metaタグの次ぐらいに記入します.
以下のような感じになるかと思います.
もしcrossoriginを飛ばすと
Warnings : A preload <link> was found for http://XXXXX but was not used by the browser. Check that you are using the ‘crossorigin’ attribute properly
と怒られてしまいます.
