Bulblub

Drupal8での画像遅延読み込み(lazy loading)のサンプルとUXとSEO

February 21, 2019

Optimizing site performance by “lazy loading” images | Dries Buytaertで画像遅延読み込み(lazy loading)についての投稿があり、僕も過去に手間をかけずにDrupalで対応したことがあったので紹介します。

利用したライブラリ

Lozad.js:約1kbの超軽量ライブラリ。Intersection Observer APIを利用しているので、動作も軽い。古いブラウザではpolyfillが必要。

サンプルコード

JSとCSSのコードは省きますが、テーマ(.theme)内に以下のように書きました。

/**
 * Template_preprocess_image().
 */
function THEMENAME_preprocess_image(&$variables) {
  if ($variables['style_name'] !== STYLE_NAME) {
    $variables['attributes']['data-src'] = $variables['attributes']['src'];
    $variables['attributes']['src'] = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
    if (!isset($variables['attributes']['class'])) {
      $variables['attributes']['class'] = [];
    }
    $variables['attributes']['class'] = array_merge($variables['attributes']['class'], ['lozad']);
  }
}

画像SEO対策

if ($variables['style_name'] !== STYLE_NAME) {

ここで特定の画像スタイルを除外しています。全ての画像に適用したいなら不要。画像遅延読み込みはGoogleBotなどが対応できなくて画像検索SEOには不利との話もあるので、メイン画像だけ除外してます。

画像プレースホルダ

$variables['attributes']['data-src'] = $variables['attributes']['src'];
$variables['attributes']['src'] = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';

出来るだけ軽量にしたかったのと手間を省きたかったので、プレースホルダは決め打ちにしました。https://dri.esではMediumなどと同様にそれぞれの画像ごとにプレースホルダを生成しています。

ライブラリ向けにClassの付与

$variables['attributes']['class'] = array_merge($variables['attributes']['class'], ['lozad']);

まとめ

僕の場合ファーストビューに必ず入ってくるメイン画像以外は遅延読み込みさせていますが、画面の表示エリアに入る前に読み込みが開始するように調整しているのでそもそも遅延読み込みしていることを閲覧者に気づかせないようにしています。また前述の通りSEO的にもトレードオフがありますので、実装時はそのあたりの考慮も必要ですね。どちらのUXが良いかは考え方次第だと思います。

また、レイジーロードがブラウザネイティブでサポートされそうって話もあるのでそれはそれで興味あります。

Tags:

Tomotsugu Kaneko

Webのフロントエンドからバックエンド、プロトタイピングからプロダクションまで。定額の開発サービスも。詳しくはAboutページで。