プログラミング

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

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

1. はじめに

Puppeteer というツールを使い、画像を遅延読み込みしているウェブページに問題がないか確認する方法を紹介します。

大まかなやり方は、遅延読み込みコンテンツを Google が認識できるようにする | 検索 | Google Developers の「テストする」というところに載っており、これを元にして実際に試してみました。

ここでの「問題がない」というのは、あくまで「Googlebot にとって問題がない(ちゃんとコンテンツを読み込むことができる)」ということを意味しています。Googlebot のような「検索エンジンのボットプログラム」がウェブページを読み込む際、スクロール動作のイベントを使って画像を遅延読み込みしていると、ちゃんと画像が読み込めないようなのです。そのため、スクロール動作のイベントを使った遅延読み込みがされていないかチェックし、もし使っていれば「問題あり」と判定することは、ウェブ開発者にとっても有用なテストになります。

あとでも出てきますが、もし「問題あり」となった場合は、Intersection Observer APIpolyfill もあります)などを使うように修正しましょう。

2. Puppeteer とは?

Puppeteer は Chrome ブラウザを「ウィンドウを表示しなくても」使えるようにしたライブラリです(この特徴のことを Headless といいます)。Node API として提供されているので、npm コマンドを使って導入することができ便利です。

3. テストする

以下、PowerShell を使います。

PS> git clone https://github.com/GoogleChromeLabs/puppeteer-examples
PS> cd puppeteer-examples
PS> npm install

この時点でカレントディレクトリに存在している lazyimages_without_scroll_events.js ファイルが、今回のテストを実行するファイルになります。

ヘルプを表示します。

PS> node lazyimages_without_scroll_events.js -h
オプション:
  --version     バージョンを表示                                          [真偽]
  --save, -s    Save screenshots to disk                     [デフォルト: false]
  --url, -u     URL to load                                      [文字列] [必須]
  --output, -o  Output HTML file           [文字列] [デフォルト: "results.html"]
  --scroll      Filename for screenshot of scrolled page. Only worked with
                --save option.                   [デフォルト: "page_scroll.png"]
  --noscroll    Filename for screenshot of non-scrolled page. Only worked with
                --save option.                 [デフォルト: "page_noscroll.png"]
  --diff        Filename for diff screenshot between pages.
                                                   [デフォルト: "page_diff.png"]
  --help        ヘルプを表示                                              [真偽]


必須の引数が見つかりません: url

では、lazyimages_without_scroll_events.js ファイル内のコメント (Usage のところ) に記述されている URL に対してテストしてみます。

lazyimages_without_scroll_events.js を実行する際、-o オプションを指定することにより結果HTMLを生成します。

テスト1(問題ないページ)

テスト対象URL: Lazy load examples

以下のコマンドを実行します。

node lazyimages_without_scroll_events.js --url=https://rawgit.com/GoogleChromeLabs/puppeteer-examples/master/html/lazyload.html -o results.html

実際に実行すると以下のようになりました。

PS> node lazyimages_without_scroll_events.js --url=https://rawgit.com/GoogleChromeLabs/puppeteer-examples/master/html/lazyload.html -o results.html
Lazy images loaded correctly: Passed
Found 0 pixels differences.
Dimension image A: 250x684
Dimension image B: 250x684

生成された結果HTMLが以下です。

このページは問題がなかったため、PASSED と表示されています。

テスト1の結果HTML
テスト1の結果HTML

画面左側には「スクロールされていないページ」右側には「スクロールした後のページ」で、それぞれ読み込まれた画像が表示されています。このように、どちらも同じ画像が表示されていれば問題ありません。

最初に記述されている文章とその日本語訳を載せておきます。

The two screenshots below should look more or less the same. If there are missing images in the left screenshot, it’s likely they are being lazy loaded using scroll events. This can present a problem for search engines which often do not run JavaScript, and therefore, do not run scroll handlers. Images need to be fully loaded when they’re “in the viewport”, without scrolling the page. Instead of scroll events, use a more modern approach like IntersectionObserver with a polyfill. If you’re using library for lazy loading, find one that doesn’t use scroll events.

(日本語訳)

以下の2つのスクリーンショットは、多かれ少なかれ同じように見えるはずです。 左のスクリーンショットに欠けている画像がある場合、それはおそらくscrollイベントを使って遅延ロードされています。 これは、「JavaScriptを実行しないことが多く、そのためscrollイベントにセットされたハンドラ関数を実行しないことが多い」検索エンジンにとって問題となる可能性があります。 画像が viewport 内にあるときは、ページをスクロールせずに完全に読み込む必要があります。 scrollイベントの代わりに、IntersectionObserver のようなポリフィルを使ったより現代的なアプローチを使用してください。 遅延読み込みのためにライブラリを使っているのなら、scrollイベントを使わないものを見つけてください。

画面中央左の文章は以下となります。

Page without being scrolled

This is how the lazy loaded images on your page appear to a search engine. Does it look right? If images are missing, they might be lazy loaded using scroll events.

(日本語訳)

スクロールされないページ

これは、検索エンジンにとってあなたのページの遅延読み込み画像がどのように見えるかを表しています。正しく見えますか? 画像が見つからない場合は、scrollイベントを使用して遅延読み込みされている可能性があります。

画面中央右の文章は以下となります。

Page after scrolling

If there are more images in the screenshot below, the page is using scroll events to lazy load images. Instead, consider using another approach like IntersectionObserver.

(日本語訳)

スクロール後のページ

下のスクリーンショットに、左側より多く画像がある場合、そのページは画像を遅延読み込みするためにscrollイベントを使用しています。 代わりに、IntersectionObserver のような別のアプローチを検討してください。

テスト2(問題があるページ)

テスト対象URL: Lazy Loading

以下のコマンドを実行します。

node lazyimages_without_scroll_events.js --url=https://css-tricks.com/examples/LazyLoading/ -o results.html

実際に実行すると以下のようになりました。

PS> node lazyimages_without_scroll_events.js --url=https://css-tricks.com/examples/LazyLoading/ -o results.html
Lazy images loaded correctly: Failed
Found 1107424 pixels differences.
Dimension image A: 250x1664
Dimension image B: 250x1664

生成された結果HTMLが以下です。

このページは問題があったため、FAILED と表示されています。
(左側だけ表示されていない画像があります。)

テスト2の結果HTML
テスト2の結果HTML

テスト3(問題があるページ)

テスト対象URL: [be]lazy.js – A lazy loading and multi-serving images, iframes, games and videos script

以下のコマンドを実行します。

node lazyimages_without_scroll_events.js --url=http://dinbror.dk/blazy/ -o results.html

実際に実行すると以下のようになりました。

PS> node lazyimages_without_scroll_events.js --url=http://dinbror.dk/blazy/ -o results.html
Lazy images loaded correctly: Failed
Found 1458463 pixels differences.
Dimension image A: 250x1380
Dimension image B: 250x1380

生成された結果HTMLが以下です。

このページも問題があったため、FAILED と表示されています。
(左側だけ表示されていない画像があります。)

テスト3の結果HTML
テスト3の結果HTML

4. おわりに

手順に難しい部分もありませんし、結果として出力されるHTMLも見やすいです。
気になるウェブページがあれば、気軽に試すことができそうです。

要は、画像を遅延読み込みさせたい場合は、「scroll イベントは使ってはいけない」ということです。ちゃんと Intersection Observer API を使った遅延読み込み を行いましょう。

Web

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

2019.03.29
Web Programming

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

2019.02.13

📂-プログラミング

執筆者:labo


comment

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

関連記事

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

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

Web Programming

素のJavaScript と Sass で Webページを作成するための雛形

素のJavaScript と Sass で Webページを作成するための雛形を紹介します(あくまで一例です)。

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

JavaScript でスロットマシーンを作ってみました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

webpack Bootstrap

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

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

CSS Flexible Box Layout Module のサンプルページを作りました

CSS Flexible Box Layout Module のサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンシ …