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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください