フォーラムをリニューアルしました！
今後は、新フォーラムをご利用ください。
PageSpeed InsightsでLCPエラーが起きる（パソコン）：SWELL設定 > 高速化 > 遅延読み込み機能 > 画像等のLazyload で「loading="lazy"を使用する」を選択した場合 < 不具合報告
通知
すべてクリア
不具合報告
18
投稿
2
ユーザー
6
Likes
1,075
表示
Topic starter
PageSpeed Insightsのバグの可能性がありますが報告します。タイトルのとおり、遅延読み込み機能の設定によっては下記の状況で「パソコン」についてのみ、LCPエラーが起きるようです。
- バナーリンクブロックを設置して画像とリンク先を設定
- バナーリンクブロックがファーストビュー内になくてもLCPエラーが起こる（この場合、スコアは「？」と表示される）
- 画像等のLazyload で「スクリプト(lazysizes.js)を使って遅延読み込みさせる」を選択するとLCPエラーは起こらない（この場合のスコアは100点）
使用中のSWELLのバージョンは2.5.3.5で、使用中のサーバーはエックスサーバー（PHP: 7.4.23、DB: MariaDB10.5）です。
なお、この他の高速化設定は下記のようにしてある状況です。
- キャッシュ機能：動的なCSSをキャッシュする、外部リンクのブログカードをキャッシュする のみチェック
- 遅延読み込み機能：記事下コンテンツを遅延読み込みさせる、フッターを遅延読み込みさせる、ともにチェックなし
- ファイルの読み込み：SWELLのCSSをインラインで読み込む のみチェック
- ページ遷移高速化：高速化の種類は「使用しない」を選択
公開前のWebサイトでの現象なのでURLは現時点でご連絡できませんが、11月中旬以降であれば追加連絡できると思います。
以上です。
This topic was modified 3年前 by shinichikuroda
投稿済 : 27/10/2021 4:06 am
ChromeのLighthouseで実施した場合がどうなるか教えてください。
SWELL高速化アドバイザー
個別サイト高速化のご依頼は販売サイトのお問い合わせからお願いします。
投稿済 : 27/10/2021 9:52 am
Topic starter
ChromeのLighthouseでの結果概要をまず、ご報告します。
- Performace: 66
- Accessiblity: 100
- Best Practices: 100
- SEO: 92
順を追って項目別スクショを添付していきます。
投稿済 : 27/10/2021 10:56 am
Topic starter
投稿済 : 27/10/2021 11:12 am
Topic starter
Largest Contentful Paint elementについてのスクショです。
ロゴは画像出力をSVGにしたかったため、function.php内に下記コードを記述しています。
/**
* ヘッダーロゴ
*/
function swl_parts__head_logo( $args ) {
// $use_top_logo = $args['use_top_logo'] ?? false;
$logo = S_DIRE_URI . '/images/common/logo.svg';
// トップページのヒーロヘッダーを利用するかどうか。
$use_overlay_header = \SWELL_Theme::is_use( 'top_header' );
if ( $use_overlay_header ) {
// ヘッダーオーバーレイがオンの時
echo '<img width="93" height="40" src="' . esc_url( $logo ) . '" alt="' . esc_attr( \SWELL_Theme::site_data( 'title' ) ) . '" class="c-headLogo__img -top" decoding="async">' .
'<img width="93" height="40" src="' . esc_url( $logo ) . '" alt="" class="c-headLogo__img -common" aria-hidden="true">';
} else {
// 通常時
echo '<img width="130" height="56" src="' . esc_url( $logo ) . '" alt="' . esc_attr( \SWELL_Theme::site_data( 'title' ) ) . '" class="c-headLogo__img" decoding="async">';
}
}
投稿済 : 27/10/2021 11:21 am
@shinichikuroda ChromeのLighthouseで正常に計測できているのであれば特段SWELLの不具合ではないと思います。
SWELL高速化アドバイザー
個別サイト高速化のご依頼は販売サイトのお問い合わせからお願いします。
投稿済 : 27/10/2021 11:22 am
Topic starter
さいごに、
Avoid long main-thread tasks のスクショを添付します。
なお、今回のご報告はトップページで起こっている内容です。
また、トップページの設定について連絡漏れがありましたので追記します。下記の設定をしています。
- メインビジュアルをOFF
- swiperをトップページで別の用途に使用したかったため、改めて読み込み設定をしています。（ https://swell-theme.com/update/8814/ を参考）
報告は以上です。
投稿済 : 27/10/2021 11:30 am
Topic starter
> ChromeのLighthouseで正常に計測できているのであれば特段SWELLの不具合ではないと思います。
であればPageSpeed Insightsのバグのようですね。お手数をお掛けしました。
投稿済 : 27/10/2021 11:33 am
@shinichikuroda あとスクショで気になったのですがサイトのパフォーマンスを確認する時はシークレットモード使わないとサイトとは無関係な拡張のパフォーマンスまで反映されてしまうので正しいデータの確認ができません。
SWELL高速化アドバイザー
個別サイト高速化のご依頼は販売サイトのお問い合わせからお願いします。
投稿済 : 27/10/2021 11:36 am
了(開発者) reacted
Topic starter
パフォーマンスの正しい確認方法について教えていただき、ありがとうございます。おっしゃる通りchrome拡張関連の記述もなくなり、Lighthouseでも正しい結果を見ることができたようです。
今後はこの方法で検証します。
投稿済 : 27/10/2021 11:48 am
@shinichikuroda 更に言うと殆どの場合はモバイル環境をテスト対象とします。もちろんデスクトップのアクセス割合が多い場合は両方確認した方が良いです。
あとラボデータは上がったか？下がったか？くらいの確認で十分なのでサイト公開してCrUXが揃い始めたら実際のユーザーデータを重視してください。Googleが説明する通りスコアが高いから高速という訳でもないです。
SWELL高速化アドバイザー
個別サイト高速化のご依頼は販売サイトのお問い合わせからお願いします。
投稿済 : 27/10/2021 11:53 am
了(開発者) reacted
Topic starter
投稿済 : 27/10/2021 12:06 pm
@shinichikuroda 不具合かどうか確証がない時は
https://u.swell-theme.com/community/swell-forum/
に投稿するのがおすすめです。
もちろん検証を重ねた結果どうしてもSWELLだけで発生するのであれば不具合報告は歓迎されます。
SWELL高速化アドバイザー
個別サイト高速化のご依頼は販売サイトのお問い合わせからお願いします。
投稿済 : 27/10/2021 12:10 pm
了(開発者) and shinichikuroda reacted
Topic starter
不具合だと確証が持てない場合は、今後、「質問」フォーラムで投稿することにします。
なんか、いろいろスイマセン（汗）。
投稿済 : 27/10/2021 12:15 pm
了(開発者) and skillsharejp reacted