ページ表示速度・LCP改善に向けてSlickスライダーの最適化をやってみた
最近、弊社のコーポレートサイトを改修する機会があり、その中でTOPページのファーストビューで使われている画像スライダーを最適化したので、その方法を備忘録としてまとめます。
目次
元のソースコード
WordPressサイトなのでWPタグが一部含まれていますが、スライダー部分のソースコードを抜粋しました。
<div class="slider-area">
<ul class="slider">
<li><img src="<?php echo esc_url(get_theme_file_uri('img/mv01.jpg')) ?>"></li>
<li><img src="<?php echo esc_url(get_theme_file_uri('img/mv02.jpg')) ?>"></li>
<li><img src="<?php echo esc_url(get_theme_file_uri('img/mv03.jpg')) ?>"></li>
</ul>
</div>何の変哲もないスライダーで、Slick.jsというプラグインを使っています。
改修後のソースコード
imgタグに4つの属性を追加しました。後でそれぞれ解説します。
<div class="slider-area">
<ul class="slider">
<li><img src="<?php echo esc_url(get_theme_file_uri('img/mv01.jpg')) ?>"
fetchpriority="high"
loading="eager"
width="1204"
height="734">
</li>
<li><img src="<?php echo esc_url(get_theme_file_uri('img/mv02.jpg')) ?>"
loading="lazy"
decoding="async"
width="1204"
height="734">
</li>
<li><img src="<?php echo esc_url(get_theme_file_uri('img/mv03.jpg')) ?>"
loading="lazy"
decoding="async"
width="1204"
height="734">
</li>
</ul>
</div>こちらはheader.php。headタグ内にpreloadの記述を追加しました。こちらも後ほど解説を。
<head>
...
<link rel="preload" as="image" href="<?php echo esc_url(get_theme_file_uri('img/mv01.jpg')) ?>">
</head>スライダー画像1枚目の対応
ファーストビューに使われるスライダー画像1枚目は、ほとんどのケースでLCP要素となります。
LCPとはページ内で最大サイズのコンテンツで、ユーザーのビューポートに表示されるまでの時間を測定する指標で、表示速度やUXの改善に直結し、SEOの観点からも重要視されています。
改修前の課題
- スライダー画像はJSで後から表示されるのでブラウザがどの画像を優先すべきかわからない
- すべての画像を同じ優先度で読み込むので1枚目が遅れてしまいLCP悪化につながる
施策1: preloadで先読み
header.phpのheadタグ内で、1枚目の画像をpreloadで先読み指定します。
<head>
...
<link rel="preload" as="image" href="<?php echo esc_url(get_theme_file_uri('img/mv01.jpg')) ?>">
</head>施策2: fetchpriority=”high”
これをimgタグに設定することでネットワーク優先度が上がります。
preloadとの併用で、ほぼ確実に最速で読み込みにいってくれるようになります。
施策3: loading=”eager”
imgタグには通常、loading=”lazy”を付けることが多いですが1枚目だけは遅延させてはいけません。
初期表示時に必ず読み込むよう指定します。
施策4: width / heightを指定
明示的に指定することで、描画前に「この枠の大きさはこれくらい」とブラウザが判断できるようになります。
これによりCLS（読み込み時のレイアウトのズレ）を防げます。
スライダー画像2枚目以降の対応
2枚目以降は以下の施策をおこないます。
割愛しますが先述の「width / height」指定はここでも行ってください。
施策1: loading=”lazy”
スライダー2枚目以降は初期表示されない画像なので、lazy指定で遅延読み込みを行います。
施策2: decoding=”async”
画像のデコード処理を指定する属性で、2枚目以降の画像はasync（非同期）を指定します。
ブラウザはまず画像データをネットワークから取得し、jpgやpngなどのデータをデコードしビットマップに変換、そして最後にページに表示という流れを取ります。
主に使い分けとしては、LCP対象のヒーロー画像や、スライダー画像1枚目などはsyncまたはdecoding省略、サブ画像はasyncと覚えておくと良いでしょう。
まとめ
今回、久しぶりにHTMLタグをガッツリ改修する作業をしましたが、私の知らない間に様々な属性が追加されており、作業を通して得られるものが多くありました。
たかがimgタグ一つ取っても細かく気を配ってコーディングするとなると、HTMLも難しく奥が深いものだと感じました。
TEXT BY
SAKAMOTO
Webエンジニア
Web制作会社にて2年勤務後、2016年にタイガーラック株式会社へ入社。 入社後、フロントエンドからバックエンド、デザイン、広告運用まで幅広く担当。広く満遍なく対応できるのが強み。趣味はポケモンカードとブラジリアン柔術。対戦よろしく
このカテゴリの最新記事
2025.02.06
2024.05.30
2023.09.04
2025.06.04
