コンテンツへスキップ

画像のWidthとHeightを明示してサイト高速化を実現

PageSpeed Insightsで、「画像のwidth と height を明示的に指定」するよう求められたことはありませんか？Swiperを使った投稿一覧をトップページに設置する事例を使って、WordPressで画像の幅と高さを明示する方法を纏めました。スライダー設置等に伴い表示される改善項目用施策のお役に立てば幸いです。

目次を開く

Originale Table of Contents

Swiper トップページ設置に
あたって

トップページに投稿一覧のスライダーを設置する際、度々、お目にかかるのが「画像要素で width と height を明示的に指定」するようにとの、PageSpeed Insightsからの改善項目表示。トップページにSwiperスライダーを設置する際などは、事前に施策しておく必要があります。

因みに、当サイトでは、トップページのスライダーは設置していませんが、この投稿記事の作成にあたって本番環境でテストしてみました。結果は、施策が上手くはまり、一切の改善項目は表示されませんでした。大した施策ではありませんが、備忘録として投稿いたします。

画像の幅と高さを明示する理由

一言で言えば、「レイアウトシフト」を防ぐためです。レイアウトシフトとは、画像の読み込みによって生じるレイアウトのズレのことです。

路面電車を例に説明しますね。現在の居住地から車で３０分ほど走ると鹿児島市街地に入りますが、長年、市民の足として愛されている路面電車が走っています。この電車の座席は対面席になっていて、混み合う中、後から乗ってきたお客さんが狭い隙間に割り込んできます。

すると、左右の乗客は嫌な顔ひとつせず、一斉に中腰になってスペースを開けてくれます。これが所謂「レイアウトシフト」です。温厚な鹿児島の方々は快くスペースを開けてくださいますが、ウェブページの場合そうはいきません。PageSpeed Insightsから、結構シビアな対応が返って来ます。

「画像を割り込ませるおつもりなら、それがどのくらいの幅と高さの画像なのか事前通告してくださらないと困りますっ！」というわけです。何もそんなに目くじら立てなくても…とお考えかもしれませんが、実はそれなりの理由があります。

例えば、画像が割り込んだ結果、前後左右のレイアウトがズレてしまい、「クリックが効かないよ！」といったトラブルが発生することもあり得ます。また、「レイアウトの設定サクッと済ませたいのに、画像の読み込みでなにまごついてんの?!」というトラブルも発生します。こうしたトラブルを未然に防ぐため、幅と高さの事前連絡が求められているのです。

画像の幅と高さを明示する方法

では、どのような方法で、これから読み込む画像の幅と高さを事前に連絡できるでしょうか？静的ウェブコンテンツ、動的ウェブコンテンツそれぞれのケースをご紹介します。あと、レスポンシブデザインであっても、PCサイズを明示しておけばOKです。

静的ウェブコンテンツで画像の幅・高さを明示

静的ウェブサイトの場合は、比較的簡単です。基本通りにソースに幅と高さを明示すればOKです。下図をご覧ください。

HTMLとCSSの合せ技で明示する方法は以下です。

HTML

<img src="sample.png" width="960" height="480" alt="サンプルイメージ">

CSS 

img{
  width:100%;
  height:auto;
}

CSSのみで明示する方法は以下です。

画像のアスペクト比を明示する方法です。この場合は、どの画像に３：２等のアスペクト比を適用するのか、#sampleblockのように、idを明示しておきます。

CSS

#sampleblock img {
  aspect-ratio: 3 / 2;
  width: 100%;
}

動的ウェブコンテンツで画像の幅・高さを明示

WordPressを例に、明示する方法をご紹介します。Swiper等のスライダーで投稿一覧を表示する場合などは、予めサブループを回す必要がありますが、PHPファイル作成時に画像の幅と高さを明示しておくことができます。詳しくは以下のとおりです。当サイトの「ministry」カテゴリ出力の事例です。

<?php
$slideargs = array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'category_name' => 'ministry',
  'orderby' => 'rand',
  );
  $the_query = new WP_Query($slideargs);
?>
<div class="swiper slider2">
    <div class="swiper-wrapper easeInOutBack">
    <!-- スライダー用のループ -->
    <?php if ($the_query->have_posts()): while ($the_query->have_posts()): $the_query->the_post(); ?>
      <div class="swiper-slide m-slider-child">
        <div class="m-slider-desc">
          <?php if(has_post_thumbnail()): ?>
          <a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url(array(375,250)); ?>" alt="<?php the_title(); ?>">
          <?php endif; ?>
          <div class="m-slider-text">
          <div class="m-slider-date"><?php echo get_the_date(); ?></div>
            <h3 ><?php the_title(); ?></h3>
          </div>
        </div></a>
      </div>
    <?php endwhile; ?>
    <!-- // スライダー用のループ -->
    <?php wp_reset_postdata(); ?>
    <?php endif; ?>
    </div><!-- pair of swiper-wrapper -->
    <!-- ページネーション用 -->
    <div class="swiper-pagination"></div>
    <!-- ナビゲーションボタン用 -->
    <div class="swiper-button-prev silver"></div>
    <div class="swiper-button-next silver"></div>
</div><!-- pair of swiper-->
  • （17行目）
    <img src=”<?php the_post_thumbnail_url(array(375,250));
    ?>” alt=”<?php the_title(); ?>“
    上述の配列で、width:375pxとheight:250pxを指定しています。

加えてSwiperカスタマイズ用のswiper-〇〇.css内で以下の記述も含めておきました。「アスペクト比は３：２。どのデバイスでも同じ比率でお願いしますね。念のため。」という意味です。

3:2のアスペクト比は当サイトのために採用したものですから、黄金比でも、白銀比でも任意の比率でどうぞ。

.slider2 .m-slider-desc img{

  aspect-ratio: 3 / 2;
  width: 100%;
}

Swiper設置
完了

画像の幅と高さを明示することによって、トップページに「ministry」カテゴリの投稿記事を自動表示するスライダーをスムーズに設置できました。デスクトップPCでは4枚、タブレットでは3枚、スマホでは1枚、いずれもアスペクト比３：２のスライドが表示されました。下図のとおりです。PageSpeed Insightsからのご指摘もありませんでした。

只、当サイトのトップページには、わざわざスライダーを使うまでもないと思いましたので、Swiperは取り下げ、クエリーループブロックの簡易的な表示に切り替えた次第です。

Swiper.jsは本当に使いやすく柔軟性に富んだスライダーです。その一方では容量の大きさが気に掛かるところでもあります。一つのサイトに複数のスライダーを設置する場合、とりわけ異なるスタイルのスライダーを設置する場合、しっかりとした設計が求められるのではないかと思います。

to page top