Tất cả bài · Hot News
Storefront Shopify vừa nhanh hơn. Nhanh bao nhiêu là do theme của bạn
Tháng 9/2026, Shopify bắt đầu áp dụng cơ chế streaming cho phần head của trang Liquid, giúp giảm 29% thời gian trung bình trả về byte đầu tiên (TTFB). Tuy nhiên, tốc độ thực tế mà khách hàng cảm nhận được chỉ tăng khoảng 2–6%.
Chia sẻ: WhatsApp · Telegram · X · Facebook · LinkedIn · Email
Hầu hết các storefront chạy Liquid đủ điều kiện đều tự động tăng tốc đôi chút. Shopify giờ gửi phần đầu trang về trình duyệt sớm hơn, nhưng tốc độ hiển thị thực tế cho khách mua hàng cải thiện nhiều hay ít lại nằm ở cách dựng theme.
- Thay đổi là gì: Ngày 22/09/2026, đội ngũ tối ưu hiệu năng của Shopify đăng bài viết của Mateusz Krzeszowiak (@krzksz) giải thích về cập nhật này. Shopify hiện sẽ gửi ngay lập tức toàn bộ phần mã trong layout của theme đứng trước thẻ
{{ content_for_header }}về trình duyệt, phần còn lại của trang sẽ nạp nối tiếp sau khi template render xong. Với các store ở mức trung bình, TTFB (thời gian phản hồi đầu tiên từ server) giảm 29% ở mốc p75 và 21% ở mốc p90. Hai chỉ số FCP và LCP (thời điểm nội dung đầu tiên và nội dung chính xuất hiện) tăng 2–6% (Performance @ Shopify). - Cái gì không thay đổi: Bài viết lưu ý: "Cập nhật này không hề làm giảm khối lượng xử lý của server"; cơ chế streaming chỉ đổi thời điểm trình duyệt nhận dữ liệu. Đó là lý do vì sao TTFB nhanh hơn 29% nhưng tốc độ hiển thị thực tế cho khách hàng chỉ tăng ở mức 1 chữ số.
- Lưu ý quan trọng ở đây là gì? Thông báo ghi "Không cần sửa theme*". Dù vậy, việc nạp sớm này chỉ thực sự giúp trang hiển thị nhanh hơn nếu file CSS và font của theme nằm trên thẻ
{{ content_for_header }}. Ở mốc p75, Horizon giảm được 29% TTFB, tăng 8% FCP và 4% LCP. Trong khi đó Dawn — vốn đặt filebase.cssbên dưới thẻ này — chỉ tăng lần lượt 25%, 3% và 2%. @sh_sakamoto cũng chỉ ra khoảng cách FCP lệch nhau tới gần 3 lần này giữa các merchant. Các trang dựng từ file template.liquidcũ và những store dùngcontent_for_headerbị lọc, đặt điều kiện hoặc lồng nhau sẽ không chạy được cơ chế streaming này. - Cần làm gì tuần này: Báo dev làm theo hướng dẫn tối ưu của Shopify, Load first-paint resources before `content_for_header`, rồi test kỹ trên một bản sao của theme (theme copy) trước khi publish. Chuyển tài nguyên lên trên thẻ này vẫn có rủi ro: Shopify cảnh báo các inline script đọc biến
Shopify.*sẽ bị lỗi ngay tại đó, còn file CSS khi chuyển vị trí có thể mất thứ tự ưu tiên hiển thị so với style do Shopify tự bơm vào. Nhớ đo lại FCP và LCP trên mobile trước và sau khi làm.
Tôi có cần làm gì để nhận đợt tăng tốc này không?
Không cần làm gì để có phản hồi đầu tiên nhanh hơn, vì Shopify tự bật cho hầu hết các trang đủ điều kiện. Nhưng để khách hàng thực sự thấy trang nạp nhanh hơn, theme của bạn phải tải các file CSS và font quan trọng trước thẻ {{ content_for_header }}. Bạn nên test thay đổi này trên bản sao của theme vì nó có thể làm vỡ script hoặc giao diện vốn đang chạy chuẩn theo thứ tự cũ.
Tại sao Horizon lại hưởng lợi nhiều hơn Dawn?
Horizon khai báo CSS và font trước thẻ {{ content_for_header }}, nên trình duyệt tranh thủ tải ngay các file này trong lúc chờ phần sau. Dawn lại đặt base.css dưới thẻ đó, khiến CSS phải chờ nạp chung với phần còn lại của trang. Đó là lý do FCP của Dawn chỉ tăng 3% còn Horizon tăng tới 8%.
Thay đổi này có giúp tăng conversion rate không?
Chưa có số liệu công khai nào chứng minh cập nhật này làm tăng conversion rate. Mức cải thiện thực tế khá nhỏ, nên hãy xem đây là một nâng cấp miễn phí từ hệ thống, chứ không phải phương án xử lý triệt để cho những trang đang bị chậm do ảnh nặng hay script bên thứ ba.
Nguồn
- https://x.com/krzksz/status/2102418718613520571
- https://performance.shopify.com/blogs/blog/liquid-storefronts-now-start-loading-29-faster
- https://x.com/sh_sakamoto/status/2102970306898149683
- https://shopify.dev/docs/storefronts/themes/best-practices/performance/load-critical-resources-before-content-for-header