Core Web Vitals là gì? Tối ưu ảnh với Astro Image cho site load nhanh

Site load chậm hay bị giật là người ta thoát liền. Google có bộ chỉ số gọi là Core Web Vitals để đo mấy chuyện này. Bài này giải thích ngắn và chỉ bạn cách xử lý phần ảnh với Astro.

3 chỉ số cần nhớ

Theo web.dev, mỗi chỉ số được đánh giá ở percentile thứ 75 của lượt xem thật của người dùng.

Chỉ số	Đo cái gì	Mức “good”	Mức “poor”
LCP (Largest Contentful Paint)	Tốc độ load cảm nhận được	≤ 2,5 giây	> 4 giây
INP (Interaction to Next Paint)	Độ phản hồi khi bấm	≤ 200 ms	> 500 ms
CLS (Cumulative Layout Shift)	Layout có bị nhảy không	≤ 0,1	> 0,25

INP thay thế FID từ tháng 3/2024. Nếu bạn đọc bài cũ còn nhắc FID thì biết là nó đã cũ nha.

Ảnh ảnh hưởng gì tới đây?

LCP: thường phần tử lớn nhất trên màn hình là một tấm ảnh. Ảnh nặng thì LCP chậm.
CLS: ảnh không khai báo kích thước thì trình duyệt không biết chừa chỗ. Ảnh load xong là nội dung bị đẩy xuống, giật cả trang.

Nên mình xử lý ảnh trước tiên.

Xài component Image của Astro

Astro có sẵn component <Image /> trong astro:assets. Ví dụ:

---
import { Image } from 'astro:assets';
import banner from '../assets/banner.png';
---

<Image src={banner} alt="Lớp học đang xài laptop" />

Mấy thứ cần biết, theo docs Astro:

src (bắt buộc): nhận file local (import tương đối hoặc alias), đường dẫn trong thư mục public, hoặc URL ảnh từ xa.
alt (bắt buộc): Astro ép bạn phải có mô tả. Tốt cho người dùng screen reader, cũng giúp SEO.
width / height: component gắn hai thuộc tính này vào thẻ <img>, trình duyệt biết chừa chỗ trước nên CLS thấp. Ảnh import local thì Astro tự lấy kích thước. Ảnh từ xa thì bạn nên tự khai báo.
format: chọn định dạng ra như webp hoặc avif. Astro tự xử lý trong asset pipeline.
loading: mặc định là lazy (kèm decoding="async"). Ảnh nằm ngay màn hình đầu (thường là ứng viên của LCP) thì đổi sang eager.

Ví dụ ảnh banner đầu trang:

<Image src={banner} alt="Lớp học đang xài laptop" format="webp" loading="eager" />

Còn ảnh phía dưới thì cứ để mặc định, lazy sẽ lo.

Checklist nhanh

Mọi ảnh đều có alt rõ ràng.
Ảnh local import qua astro:assets, không dán thẳng đường dẫn vào <img>.
Ảnh remote có khai báo width và height.
Ảnh đầu trang dùng loading="eager", ảnh còn lại để lazy.
Thử format="webp" hoặc avif cho ảnh lớn.

Cách check điểm thật

Mở site trên điện thoại thật, lướt thử xem có bị giật không. Muốn có số thì xài tool đo Core Web Vitals của Google. Mình không liệt kê tool cụ thể vì chưa check kỹ từng cái, bạn tìm trong docs web.dev nha.

Lưu ý

Các bản Astro mới có thể đổi hành vi mặc định của loading cho ảnh được đoán là LCP. Mình chưa verify điểm này. Bạn xem docs Astro của đúng phiên bản bạn đang xài.

Tóm lại

Nhớ 3 con số: LCP ≤ 2,5 giây, INP ≤ 200 ms, CLS ≤ 0,1. Với blog thì ảnh là chỗ dễ cải thiện nhất: xài <Image /> của Astro, có alt, có kích thước, ảnh đầu trang eager, ảnh dưới lazy.