Shopify nói TTFB (thời gian tới byte đầu tiên) của store ở mức trung vị giảm khoảng 29% ở p75

Ngày 22/9, Shopify cho biết trên blog performance rằng họ đã bắt đầu streaming cho các storefront Liquid (store có trang được render từ template theme viết bằng Liquid, ngôn ngữ template của Shopify). Streaming nghĩa là trình duyệt nhận được phần đầu trang trong lúc phần còn lại của template vẫn đang render.

Trang nào đã đáp ứng điều kiện của Shopify thì được tải sớm hơn mà không cần sửa code. Số liệu của Shopify là của store ở mức trung vị, nên chỉ cho thấy mức cải thiện điển hình và không nói được một store cụ thể sẽ nhanh hơn bao nhiêu.

• Thay đổi gì: Shopify giờ gửi ngay mọi thứ trong layout của theme tính tới content_for_header, không chờ phần còn lại của trang. Phần còn lại đi tiếp trong cùng phản hồi khi template render xong, theo blog performance của Shopify và @krzksz. content_for_header là thẻ theme Shopify nào cũng có trong phần head để Shopify tải script riêng.

• Shopify đo được gì: Ở store mức trung vị, TTFB (time to first byte, thời gian chờ server phản hồi lần đầu) giảm khoảng 29% ở p75 và 21% ở p90. p75 nghĩa là 75% lượt xem trang có TTFB không quá mốc đó; p90 là 90%. FCP và LCP (First Contentful Paint, Largest Contentful Paint: lúc nội dung đầu tiên và lớn nhất hiện ra) tốt hơn 2–6%. Shopify coi hai chỉ số này sát nhất với trải nghiệm người mua.

• Áp dụng cho trang nào: Theo bài của Shopify, streaming áp cho các trang render từ JSON template (định dạng template của các theme dùng section) có content_for_header đặt đúng chỗ. Trang render từ template .liquid, theme preview và theme editor chưa được streaming.

• Vì sao theme quyết định mức cải thiện nhìn thấy được: Shopify cho biết khi stylesheet của theme nằm sau content_for_header, trình duyệt không tận dụng được phần đầu trang đến sớm để bắt đầu tải stylesheet. Những theme này vẫn được streaming, nhưng FCP và LCP cải thiện ít hơn.

• Nên kiểm gì: Gợi ý của bài, dựa trên điều kiện của Shopify: trong trình sửa code theme, xem template các trang chính có đuôi .json hay .liquid, và thẻ stylesheet trong file layout nằm trước hay sau {{ content_for_header }}. Kết quả chỉ cho biết trang có đủ điều kiện, không đo được mức cải thiện. Đổi thứ tự thẻ trong layout là sửa theme, nên theme đã chỉnh sửa thì hỏi người bảo trì trước.

Người bán có cần sửa theme để trang bắt đầu tải sớm hơn không?

Không, với các trang đã đủ điều kiện. Bài của Shopify ghi trang .liquid là chưa được streaming, nên vẫn chưa rõ sau này chúng có được áp dụng mà không cần sửa theme hay không.

Vì sao FCP và LCP cải thiện ít hơn TTFB?

Streaming làm byte đầu tiên đến sớm hơn, và TTFB đo đúng thời điểm đó. FCP và LCP còn phải chờ stylesheet, ảnh và script tải sau byte đầu tiên.

Streaming có chạy trong theme editor không?

Không. Theo bài của Shopify, theme preview và theme editor chưa được streaming, nên đo tốc độ trong editor sẽ không thấy thay đổi. Hãy so tốc độ trên storefront đang chạy thật.