【解決済】PageSpeed Insights改善方法

[mai]

現在の環境は下記の通りです。
WordPress のバージョン：6.0.2
Welcart のバージョン： 2.8.3
php 8.x.x
Welcart専用の拡張プラグイン：
ご利用のテーマ：voll(子テーマ)
画面は2カラム仕様
サーバー：（会社名、サービス名）xserver
SSLの利用：（独自　常時SSL）

宜しくお願い致します。
PageSpeed Insightsにおいて商品詳細ページを調べると下記の問題点がリストされます。

課題１
ウェブフォント読み込み中のテキストの表示
フォント表示の CSS 機能を使用して、Web フォントの読み込み中にユーザーがテキストを読めるようにしてください。
URL
…v25/Qw3PZQNVE….woff2(fonts.gstatic.com)減らせるデータ量10 ms
…font-awesome/fontawesome-webfont.woff2?v=4.3.0(themes.welcart.info)減らせるデータ量200 ms

上記の問題は、welcart basic内での設定なので個々に対応する方法が解りません。
できればフォントを必要最小限にして改善方法教えて下さい。

課題２
Largest Contentful Paint の画像が遅延読み込みされています
スクロールせずに見える範囲にある画像が遅延読み込みによってページのライフサイクルの後半にレンダリングされると、Largest Contentful Paint の遅延につながります。

上記画像以外にサムネイル画像も登録されています。
スマホ画面だと上記のメイン画像以外にもサムネイル画像の一部も
最初に表示される画面に表示されます。
loading=”lazy”はwordpressの仕様なのかもしれませんが、

内の画像に下記の設定はできないでしょうか。
loading=”eager”
対応方法を御教示下さいますようお願いします。

[furuta]

mai 様

こんにちは。
課題１ につきましてはご要望として承ります。しかしながら、すぐに対応することは難しいかと思われますのでご理解いただけますと幸いです。
課題２ につきましては、テンプレートタグ wp_get_attachment_image を使って画像表示をしていますので、
こちらのフィルターフック wp_get_attachment_image_attributes で属性値を変更できます。
詳細は WordPress のリファレンスをご確認いただけたらと思います。

[mai]

furuta　様

ご回答頂き有り難うございます。

課題１：期待しています。

課題２：wp_get_attachment_image_attributesをキーワードにして
googleするとwp_get_attachment_imageにて表示させる画像に対する
”eager”指定のコードが見つかりました。

できれば画像サイズにて判別して指定できればと希望しています。

[furuta]

mai 様

wp_get_attachment_image_attributes の引数に画像サイズが渡されるので、画像サイズで条件分岐を行うことができるかと思います。詳細は WordPress のwp_get_attachment_image_attributesのリファレンスをご確認いただけたらと思います。

[mai]

furuta 様

ご返信ありがとうございます。
早速、wp_get_attachment_image_attributesのリファレンスを調べましたが、
wp_get_attachment_image_attributesヘのフックをかけるコードはありましが
wp_get_attachment_image_attributesのsize引数を取り出すために参考となる
コードが見つかりませんでした。
sizeを変更するパターンはあったように思います。
sizeの取り出し方をご教示ください。

[mai]

解決しました。
有り難うございました。

usces_filter_main_img に
“loading”=> “eager”をフックにて掛けることで解決しました。

usces_the_itemImage( 0, XX, YY, $post )にダイレクトも可能かも？

[furuta]

mai 様

解決方法をご共有いただきありがとうございます。
なお、WordPress側で用意されているフックにつきましては、恐れ入りますがこちらで使用方法のレクチャはできかねますことをご理解いただけますと幸いです。

[投稿者]

投稿