プログラミング

IntersectionObserver API を使ったテストページを作成しました

投稿日:2019年2月13日 更新日:

IntersectionObserver API を使ったテストページを作成しました。

IntersectionObserver API は、ウェブページ上のある要素が見える範囲 (viewport) に入ってきた時と逆に出ていった時を監視するための API です。

遅延読み込みコンテンツを Google が認識できるようにする | 検索 | Google Developers に書いてありますが、遅延読み込みを実装する際にこの API を使うと、Googlebot は遅延されたコンテンツをちゃんと読み込んでくれるようです。それとは対称的に、スクロールイベントを使って遅延読み込みしている場合、Googlebot は正常にコンテンツを読み込むことができません。これは、SEO にも影響してきます。

作成したページ:IntersectionObserver API Test
IntersectionObserver API のテストページ
IntersectionObserver API のテストページ
Web Programming

Puppeteer を使った画像遅延読み込みテストを試してみました

2019.02.14
Web

Intersection Observer API を使った画像の遅延読み込み

2019.03.29

関連

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

React Redux

Redux + React Router を使ったサンプルページを作りました

Redux + React Router を使ったサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 動作メモ4. メモ5. ソースコード6. 参考情報 1. スクリーンシ …

no image

ウェブプログラミングの知識があるとできること(その1)

先日、あるブログを見ていたら最新の記事だけが表示されない仕組みになっていました。 ウェブプログラミングの知識があるとこんなことができますという例として、その仕組を調べた時の過程を紹介します。 目次きっ …

WordPress

WordPress のテーマ、プラグイン開発のためのデバッグ設定

WordPress のテーマ、プラグイン開発のためのデバッグ設定や Tips について、ここにまとめていこうと思います。 目次1. wp-config.php の設定WP_DEBUGWP_DEBUG_ …

Web Components

Web Components: Shadow DOM に HTML と CSS をセットするいろいろな方法

Web Components の Shadow DOM を使う場合のファイル構成やコードについて、いろいろなパターンを紹介します(最小限のコードのみです)。

web development

Web Development for Beginners を読む:レッスン1

目次1. はじめに2. Web Development for Beginners の進め方3. レッスン1「Introduction to Programming Languages and Too …