解決済PageSpeed Insights改善方法

フォーラム その他 【解決済】PageSpeed Insights改善方法

  • このトピックには6件の返信、2人の参加者があり、最後にfurutaにより2日、 17時間前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #98916
    mai
    参加者

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

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

    課題1
    ウェブフォント読み込み中のテキストの表示
    フォント表示の 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内での設定なので個々に対応する方法が解りません。
    できればフォントを必要最小限にして改善方法教えて下さい。

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

    wcVL170508

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

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

    mai 様

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

    #98962
    mai
    参加者

    furuta 様

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

    課題1:期待しています。

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

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

    #98998
    furuta
    キーマスター

    mai 様

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

    #99027
    mai
    参加者

    furuta 様

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

    #99059
    mai
    参加者

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

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

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

    #99066
    furuta
    キーマスター

    mai 様

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

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。