WordPressテーマ変更後、改めてPageSpeed Insightsで速度チェックをしてみました。

すると、変更前のスコアが「85」だったのに対し・・・

score 59
(C)Google

だいぶ遅くなっとる~~

画像サイズの調整もまだだし、lazyloadも止まってるし、仕方ないよな…(;´∀`)

と思いながら、改善項目に目をやると

1 キー リクエストのプリロード
という文字が。

キー リクエストのプリロードへの対処

調べてみると、「キー リクエストのプリロード」とは、本当はさっさと読み込んでおきたい要素がHTML上に書かれていないと、後から読み込むjsやcssなどから取得するまでのタイムラグが発生してしまいますよーという意味らしい。
おそらく。かなり噛み砕きました。

プリロード(rel="pleload")は、そういった要素をあらかじめ読み込ませるために、HTMLに記載するコードということになります。


追記:ちょっと適当に書き過ぎましてごめんなさい(;´Д`)

公式に解説が載っていました。
≫Preload key requests
≫ウェブフォントの最適化

例えば、head内で「yagomaru.js」が実行される際、子要素である「yagomaru.css」と「yagomaru-child.js」を呼び出す必要がある場合、あらかじめ「yagomaru.css」「yagomaru-child.js」を読み込んでおかないと、ページの表示が遅くなってしまいます。
(子要素のダウンロード、解析、実行が終わるまでページが開かない)

それを回避するために、「rel="pleroad"」を使って子要素をあらかじめ読み込んでおくことで、「yagomaru.js」「yagomaru.css」「yagomaru-child.js」の読み込みから実行までの時間が短縮される、ということになります。

rel=preloadを使って子要素を先に呼び出すことで、親要素の読み込み、実行が早く終わる!

対処法として、参考にさせていただいた記事がこちら。
Preload を用いたリソースプリローディングの最適化 | blog.jxck.io

このブログの場合、Glyphiconsの読み込みが引っ掛かっていたようなので、参考記事に書かれていたコードを元に、HTMLのhead内に以下のコードを記述しました。

<link rel="preload" as="font" href="<?php echo get_template_directory_uri(); ?>/fonts/bootstrap/glyphicons-halflings-regular.woff2" crossorigin>

親となるCSSより前に記述し、Glyphiconsライブラリを先に読み込ませました。

ご参考にされる場合は、該当の親要素と子要素をチェックし、子要素をあらかじめ呼び出すようにコードを記述してください。

修正後、無事にスコアアップ

修正後に再度PageSpeed Insightsでチェックしてみると、

(C)Google

スコアが72まで復活しました。

基本的にPCからしかブログをチェックしないので、スマホ表示の速度が遅くても気付かない・・・というのは怖いですね。

テーマを変えたり、コードを書き換えた時はなるべく速度チェックしておきたいです(;´∀`)

※本ブログは現在Bloggerを利用しています。
※Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。

「キー リクエストのプリロード」改善でスコア59→72に【PageSpeed Insights】

WordPressテーマ変更後、改めてPageSpeed Insightsで速度チェックをしてみました。

すると、変更前のスコアが「85」だったのに対し・・・

score 59
(C)Google

だいぶ遅くなっとる~~

画像サイズの調整もまだだし、lazyloadも止まってるし、仕方ないよな…(;´∀`)

と思いながら、改善項目に目をやると

1 キー リクエストのプリロード
という文字が。

キー リクエストのプリロードへの対処

調べてみると、「キー リクエストのプリロード」とは、本当はさっさと読み込んでおきたい要素がHTML上に書かれていないと、後から読み込むjsやcssなどから取得するまでのタイムラグが発生してしまいますよーという意味らしい。
おそらく。かなり噛み砕きました。

プリロード(rel="pleload")は、そういった要素をあらかじめ読み込ませるために、HTMLに記載するコードということになります。


追記:ちょっと適当に書き過ぎましてごめんなさい(;´Д`)

公式に解説が載っていました。
≫Preload key requests
≫ウェブフォントの最適化

例えば、head内で「yagomaru.js」が実行される際、子要素である「yagomaru.css」と「yagomaru-child.js」を呼び出す必要がある場合、あらかじめ「yagomaru.css」「yagomaru-child.js」を読み込んでおかないと、ページの表示が遅くなってしまいます。
(子要素のダウンロード、解析、実行が終わるまでページが開かない)

それを回避するために、「rel="pleroad"」を使って子要素をあらかじめ読み込んでおくことで、「yagomaru.js」「yagomaru.css」「yagomaru-child.js」の読み込みから実行までの時間が短縮される、ということになります。

rel=preloadを使って子要素を先に呼び出すことで、親要素の読み込み、実行が早く終わる!

対処法として、参考にさせていただいた記事がこちら。
Preload を用いたリソースプリローディングの最適化 | blog.jxck.io

このブログの場合、Glyphiconsの読み込みが引っ掛かっていたようなので、参考記事に書かれていたコードを元に、HTMLのhead内に以下のコードを記述しました。

<link rel="preload" as="font" href="<?php echo get_template_directory_uri(); ?>/fonts/bootstrap/glyphicons-halflings-regular.woff2" crossorigin>

親となるCSSより前に記述し、Glyphiconsライブラリを先に読み込ませました。

ご参考にされる場合は、該当の親要素と子要素をチェックし、子要素をあらかじめ呼び出すようにコードを記述してください。

修正後、無事にスコアアップ

修正後に再度PageSpeed Insightsでチェックしてみると、

(C)Google

スコアが72まで復活しました。

基本的にPCからしかブログをチェックしないので、スマホ表示の速度が遅くても気付かない・・・というのは怖いですね。

テーマを変えたり、コードを書き換えた時はなるべく速度チェックしておきたいです(;´∀`)

※本ブログは現在Bloggerを利用しています。
※Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。

次に読まれている記事