画像最適化
重いのはたいてい画像
fleama の一覧ページは商品の写真が並びます。写真は文字より桁違いに大きく、ページが遅いと言われるときの原因はほとんど画像です。スマートフォンの小さな枠に、そのままの大きさの写真を送っているのがもったいないところです。
手で軽くしようとすると、幅ごとに何枚も書き出して、対応している形式を出し分けて、画面に入るまで読み込みを遅らせて、という作業が要ります。Next.js はこれを部品ひとつで肩代わりします。
Image に置き換える
next/image から Image を読み込み、img の代わりに使います。
import Image from "next/image";
<Image className="hero" src="/hero.png" alt="fleama のおすすめ" width={320} height={180} />書き味は img とほとんど同じですが、出来上がる HTML は違います。画面の幅に合った大きさの画像が選ばれ、対応していれば軽い形式に変換され、画面に入るまで読み込みが後回しになります。
width と height は必ず書く
Image は width と height を要求します。面倒に見えますが、これには理由があります。大きさが分かっていれば、画像が届く前にその場所を空けておけます。分からないと、画像が届いた瞬間に下の文字が押し下げられて、読んでいた行が飛びます。この読みづらさは表示速度と並んで嫌われるところです。
数は中かっこで囲んで width={320} と書きます。文字ではなく数として渡すためです。親の大きさに合わせて伸ばしたいときは width と height の代わりに fill を使いますが、まずは数を書く形に慣れます。
alt も忘れずに書きます。読み上げにも使われますし、画像が出なかったときに何の絵だったかが残ります。
演習
トップページの img を全部 Image に置き換えます。