プログラミング

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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Canvasでの回転

Canvas に回転した画像を表示するサンプルページを作りました

Canvas に回転した画像を表示するサンプルページを作りました。 Canvas の標準の機能では用意されていない操作なので、自分でこの処理を書く場合は少々面倒な記述が必要になります。 目次1. スク …

時間とともに風景画像の色を変化させるサンプルページを作りました

時間とともに風景画像の色を変化させるサンプルページを作りました。 夕方や夜に変化する効果を狙っています。 目次1. スクリーンショット2. デモ3. ソースコード4. メモ 1. スクリーンショット …

web development

Layout Instability API を使ってレイアウト・シフトを検出する

目次1. Layout Instability API について2. サンプルコード3. インターフェイス情報PerformanceObserver interfaceLayoutShift inte …

web development

Web Development for Beginners を読む:レッスン4と5

目次1. はじめに2. Lesson 4: JavaScript Basics: Data TypesVariables(変数)Constants(定数)Data Types3. Lesson 5: …

React Redux

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

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