速くする
この場面の困り事と、そのまま使えるコード。全9件。 足りなければ、行末のページへ進む。
このページの中だけを絞ります。ページは移りません。
表示が遅い
画像から。表示寸法の2倍以下に縮め、AVIFかWebPにし、最初の画面より下は lazy にする。速くする
<img src="photo.webp" width="800" height="600" loading="lazy" alt="">何から手を付けるか分からない
画像、読み込みを止めるもの、JavaScriptの量の順。上から3つでたいていの遅さは解ける。速くする
1. 画像をAVIF/WebPに
2. script に defer
3. 使わないJSを送らない読み込み中に画面が飛ぶ
img に width と height を書く。ブラウザが場所を先に確保する。速度の指標
img に width と height を書く。場所を先に確保する。
HTML
<img src="photo.webp" width="800" height="600" alt="説明">
最初の表示が遅い
head の同期scriptとCSSが表示を待たせている。script に defer を付ける。速くする
<script src="app.js" defer></script>画像をどの形式で書き出すか
写真はAVIFかWebP、図はSVG。透過が要るPNGは、AVIFで置き換えられることが多い。速くする
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" width="800" height="600" alt="">
</picture>srcset の書き方が分からない
幅の候補を w で並べ、sizes に表示幅を書く。sizes を省くと100vwとみなされ、大きすぎる画像が選ばれる。速くする
幅の候補を w で並べ、sizes に表示幅を書く。
HTML
<img src="photo-800.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w" sizes="(max-width: 48rem) 100vw, 50vw" width="800" height="600" alt="">
速度を測ったが数値が毎回違う
Lighthouseのスコアは上がったのに体感が変わらない
ラボの数値と実利用者の分布は別物。Search Console のウェブに関する主な指標を見る。速度の指標
Search Console の Core Web Vitals を確認
操作しても反応がない時間がある
INPが悪い。長く走るJavaScriptを分割し、その画面で使わないコードを送らない。速度の指標
// 長い処理を分割
await yieldToMain();
function yieldToMain() { return new Promise(r => setTimeout(r, 0)); }この場面で貼れるもの#
答えを読んだら、ここから完成形を持ち帰れます。
