プログラミング

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

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

関連記事

webpack Bootstrap

Webpack 4 (もしくは 3) で Bootstrap v4.0 を利用するサンプルコード

目次1. はじめに2. サンプルコード3. 想定する環境OSその他4. 今回のディレクトリ構造5. 動作させるための手順1. 今回作業するプロジェクトのディレクトリに移動します2. npm のパッケー …

WordPress

WordPress で処理を追加したい場合、どこにコードを書けばよいのか?

自分で導入した WordPress でブログを運営していたとします。ある日、WordPress の動作を変更したくなって 調べてみると、ほんの少し PHPのコードを書けば済むことが分かりました(アクシ …

Python

定期的にツイートするbotをPythonで作る方法

Twitterでツイートを行う botプログラムを Python(プログラミング言語)で作ります。 このプログラムは、CentOS(Linuxの一種です)上で定期実行します。 スポンサードリンク 目次 …

Web Programming

Service Worker の状態変化を検証するためのウェブページを作りました

Service Worker の状態変化を検証するためのウェブページを作りました。

web development

Web Development for Beginners を読む:レッスン15, 16, 17

目次1. はじめに2. Part1: イントロダクション「継承」と「コンポジション」Pub/Sub パターン3. Part 2: canvas にヒーローとモンスターを描く4. Part 3: 動きを …