HOME → 3 WordPress → 03 カスタマイズ → 

Simple GA Ranking サムネイル表示速度の改善

WordPress Twenty Seventeen
Simple GA Ranking のカスタマイズ
サムネイル表示速度の改善
 
【PageSpeed Insights】を実行すると、改善できる項目のトップに「適切なサイズの画像」項目があり、対象になっている画像の全てが『Simple GA Rankinng』で人気記事一覧を表示している【サムネイル画像】であることに気付く。
 
改善できる項目のトップに、「適切なサイズの画像」項目があり、内容を見ると全ての画像が、『Simple GA Rankinng』で人気記事一覧を表示している【サムネイル画像】であることに気付く。
 
以下、『Simple GA Rankinng』で表示する【サムネイル画像】のサイズを変更した記録。
 

 

スポンサー リンク

 

 
 
 
 
 
1. 「LCPの問題:2.5秒超(モバイル)」が発生する
 
【Search Console】の「ウェブに関する主な指標」を開くと、突如【改善が必要なURL】が増加している。
【Search Console】の「ウェブに関する主な指標」を開くと、突然【改善が必要なURL】が増加している。
 
「レポートを開く」と、【改善が必要】なURLが「253件」もある。
「レポートを開く」と、【改善が必要】が「253件」もある。
 
詳細を見ると、「LCPの問題:2.5秒超(モバイル)」が「232件」となっている。
詳細を見ると、「LCPの問題:2.5秒超(モバイル)」が「232件」となっている。
 
更に「例の詳細」に進むと、該当URLと【PAGESPEED INSIGHTS】へのリンクが表示される。
更に、「例の詳細」に進むとURLと【PAGESPEED INSIGHTS】へのリンクが表示される。
 
 

 LCP (Largest Contentful Paint)の問題:2.5秒超(モバイル)とは
簡単に言うと、ページの読込み速度が遅いという事。
ページ全体の読込み速度ではなく、 該当ページ内で1番大きなサイズのコンテンツ(主に動画や画像)が表示されるまでの時間が 、Googleの推奨する時間(2.5秒)を超えているという事。

 
 
 
2. 【PageSpeed Insights】の実行
 
【PageSpeed Insights】を実行する。
【PageSpeed Insights】を実行する。
 
ラボデータの「Largest Contentful Paint」が「5.8秒」になっている。
ラボデータの「Largest Contentful Paint」が「5.8秒」になっている。
 
改善できる項目のトップに、「適切なサイズの画像」項目があり、内容を見ると全ての画像が、『Simple GA Rankinng』で人気記事一覧を表示している【サムネイル画像】であることに気付く。
改善できる項目のトップに、「適切なサイズの画像」項目があり、内容を見ると全ての画像が、『Simple GA Rankinng』で人気記事一覧を表示している【サムネイル画像】であることに気付く。
 
 
 
3. Simple GA Ranking サムネイルとランキング順位の表示
 
Simple GA Ranking サムネイルとランキング順位の表示要領:
 
【サムネイル画像】を表示している【functions.php】。
【サムネイル画像】を表示している【functions.php】
 
画像IDを指定して、アイキャッチ画像のURLを取得する関数を使っている。
wp_get_attachment_image_src( get_post_thumbnail_id( $id ) )
 
この関数で取得した画像のURLは、画像サイズが「フルサイズ」のURLになっており、これをCSSで「128 x 68」にして表示している。
 
 
 
4. Simple GA Ranking サムネイル表示の改善
 
この関数には、第二引数に画像サイズを指定することができるので【array( 100, 100 ) 】を指定して「最小サイズ」の画像を取得するよう変更して見る。CSSも「100 x 57」に変更。
 
第二引数に画像サイズを指定。
wp_get_attachment_image_src( get_post_thumbnail_id( $id ),array( 100, 100 ) );
 
「外観」→「テーマエディター」で【functions.php】を編集しようとすると、
エラーが表示され編集できない。
「外観」→「テーマエディター」で【functions.php】を編集しようとすると、 エラーが表示され編集できない
 
 
エラーメッセージ:
Scrape key check failed. Please try again.
 
 
やむなく、SSH接続で子テーマの【functions.php】を編集する。
やむなく、SSH接続で【functions.php】を編集する。
 

元は「フルサイズ」の画像URLが指定されていたが、修正後は「xxx-100x100」と言うサイズ付きの画像URLが指定されるようになった。

元は「フルサイズ」の画像が指定されていたが、修正後は「xxx-100x100」と言うサイズ付きの画像が指定されるようになった

 
 
Simple GA Ranking による、サムネイル表示の変化。
Simple GA Ranking による、サムネイル表示の変化。
 
 
 
5. サムネイル表示の改善結果
 
【PageSpeed Insights】での測定結果、スコアが上がる。
【PageSpeed Insights】での測定結果、スコアが上がる。
 
ラボデータの「Largest Contentful Paint」が「3.4秒」に改善される。
ラボデータの「Largest Contentful Paint」が「3.4秒」に改善される。
 
改善できる項目から、「適切なサイズの画像」の項目が消える。
改善できる項目から、「適切なサイズの画像」の項目が消える。
 
 
以上。
(2021.08.29)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください