ブログ内検索

プログラミング教材開発
大阪府高槻市原地区で肥料教室を開いています
検索キーワード:「content-visibility:auto;」
 

php-webdriverでcontent-visibility:auto;を利用しているページのリンクをクリックする

/** Geminiが自動生成した概要 **/
php-webdriverで`content-visibility:auto;`を使用したサイトのリンクをクリックする際、遅延読み込みにより要素が見つからない問題が発生する。`getLocationOnScreenOnceScrolledIntoView()`だけでは不十分で、一度スクロール後にページトップに戻り、再度徐々にスクロールすることで要素を確実に表示させクリックを成功させる方法を紹介。これはページ表示速度の高速化と遅延読み込みによる影響への対策。また、SeleniumによるアクセスをGoogle Analyticsから除外する方法についても言及し、誤った計測を防ぐための設定についても触れている。さらに、関連するelement click interceptedエラーへの対処法の記事へのリンクも提供。

 

【SEO対策】Core Web Vitals

/** Geminiが自動生成した概要 **/
Google Analyticsのスクリプトをページ読み込み直後に移動することで、Core Web Vitals、特にFID(First Input Delay)を改善する方法を解説しています。通常、Google Analyticsのスクリプトは</body>直前に配置されますが、これだとスクリプトのダウンロードと実行が完了するまでブラウザが他の操作を受け付けず、FIDが悪化します。記事では、async属性を追加し<head>内に移動することで、スクリプトを非同期で読み込み、ブラウザのレンダリングを妨げないようにする方法を紹介。async属性はIEでは機能しないため、IE用に条件分岐で対応する必要性も説明しています。さらに、Google Tag Managerを使用している場合は、設定変更だけで対応可能であることも解説しています。これらの修正により、FIDが大幅に改善され、ユーザーエクスペリエンスの向上が期待できます。

 

【SEO対策】content-visibility:auto;でコンテンツの遅延読み込み

/** Geminiが自動生成した概要 **/
Chrome 85からCSSの`content-visibility: auto;`が導入され、画面外コンテンツの遅延読み込みが可能に。表示速度向上とSEO対策が目的です。筆者は自身のサイトで、`.content-lazy-always`で常時遅延、`.content-lazy`でPCとスマホで表示/遅延を切り替える形で実装。記事一覧の下部や詳細ページのフッターなどに適用しました。しかし、元々読み込みが速かったため、具体的な速度改善効果は確認できなかったとのことです。


Powered by SOY CMS   ↑トップへ