プログラミング

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

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

関連記事

C言語のポインタを理解するためのお勧め書籍を紹介します

例え話をしないC言語のポインタの説明 | 右や左の旦那様 C言語のポインタについての記事が、はてなブックマークのトップページに載っていました。 私は業務・趣味のどちらにおいても C言語は使いません。し …

JavaScript

WebSocket を使ったサンプルプログラムを作りました

目次1. はじめに2. スクリーンショット3. 動作4. 大まかな動作イメージ 1. はじめに WebSocket を使ったサンプルページを作りました。Node.js を使っています。 ソースコードは …

Python

Python でファイルを読み込み何か加工した結果を出力するコードの雛形

Python でファイルを読み込んで、何か加工した結果を出力するコードの雛形を紹介します。

WordPress

plugin-update-checker を使って WordPress のテーマに自動更新機能を実装する

目次1. はじめに2. テーマディレクトリに対する準備作業3. テーマを更新する手順3-1. テーマ提供者側3-2. 利用者側4. おわりに 1. はじめに plugin-update-checker …

JavaScript でスロットマシーンを作ってみました(Canvas版)

JavaScript でスロットマシーンを作ってみました。 前回 とは違い、今回は Canvas を使っています。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情 …