Core Web Vitals Shopify: Hướng dẫn thực tế cho cửa hàng nhỏ
Lời khuyên về tốc độ cho cửa hàng online thường đến dưới dạng một bức tường các từ viết tắt và một điểm số duy nhất từ công cụ kiểm tra. Với một cửa hàng Shopify nhỏ, cách tiếp cận bình tĩnh hơn sẽ hiệu quả hơn: hiểu ba chỉ số mà Google quan tâm, biết phần nào Shopify đã lo sẵn, và dành thời gian có hạn cho vài thứ bạn thực sự kiểm soát được.
Ba chỉ số, nói bằng ngôn ngữ đơn giản
Core Web Vitals đo trải nghiệm thực tế của khách truy cập trên một trang. Mỗi chỉ số được đánh giá ở phân vị thứ 75 của các lượt tải trang thực, và ngưỡng “tốt” mà Google công bố là:
- Largest Contentful Paint (LCP): thời gian để phần tử hiển thị lớn nhất, thường là ảnh hero hoặc ảnh sản phẩm, xuất hiện. Mức tốt là từ 2,5 giây trở xuống.
- Interaction to Next Paint (INP): trang phản hồi nhanh đến đâu khi ai đó chạm, bấm hoặc gõ. Mức tốt là từ 200 mili giây trở xuống.
- Cumulative Layout Shift (CLS): nội dung bị nhảy lung tung bao nhiêu trong lúc tải. Mức tốt là từ 0,1 trở xuống.
INP chính thức trở thành một Core Web Vital vào ngày 12 tháng 3 năm 2024, thay thế First Input Delay. Thay đổi này quan trọng với cửa hàng Shopify vì INP phạt những trang chạy nhiều JavaScript, và đó là nơi theme, app và các thẻ marketing thường chất đống.
Shopify đã lo sẵn những gì
Tài liệu trợ giúp của Shopify liệt kê một số tối ưu hóa bạn không cần làm gì: hosting nhanh phía sau CDN, cache trình duyệt một năm cho các tài nguyên cache được, nén dữ liệu, HTTP/2 và minify CSS, JavaScript. Chính trang đó cũng bảo merchant bỏ qua những lời khuyên chung chung của các công cụ quét về CDN, cấu hình server hay nén, vì những thứ này đã được xử lý. Hãy tập trung vào những gì công cụ quét nói về ảnh, app và theme.
Shopify cũng đang cải thiện tốc độ điều hướng ở cấp nền tảng. Vào tháng 6 năm 2025, họ triển khai một thiết lập speculation rules mặc định, prefetch các trang có khả năng được truy cập tiếp theo cho khách dùng trình duyệt hỗ trợ, với mức cải thiện trung bình khoảng 130 ms trên desktop và 180 ms trên mobile theo các thử nghiệm của chính Shopify. Điều này đi kèm một số lưu ý cho developer: nếu bạn thêm rule riêng, cả hai bộ rule cùng áp dụng, và nếu chọn prerender đầy đủ, các script như analytics sẽ chạy trước khi khách thực sự đến trang, có thể làm tăng số lượt xem trang.
Thứ tự làm việc hợp lý
1. Ảnh
CDN ảnh của Shopify thay đổi kích thước và nén các file tải lên, nhưng không thể sửa một file nguồn quá lớn hay một ảnh hero to hơn mức cần thiết. Hãy tải ảnh lên với kích thước gần với kích thước hiển thị, dùng JPG cho ảnh chụp và chỉ dùng PNG khi cần nền trong suốt, và hạn chế số ảnh lớn trên một trang. Một phân tích của một nhà cung cấp chỉ ra rằng một ảnh hero nặng trên mobile có thể tiêu tốn gần hết ngân sách LCP, là lý do chính đáng để chăm chút thêm cho ảnh đầu tiên trên mỗi template.
2. App
Mỗi app đã cài đặt đều phải chứng minh được chi phí của nó. Hướng dẫn của Shopify nói hãy gỡ những app không hỗ trợ bán hàng, và cảnh báo rằng gỡ cài đặt không phải lúc nào cũng xóa code mà app đã thêm vào theme của bạn. Sau khi gỡ một app, hãy hỏi developer của app về cách dọn dẹp hoặc nhờ ai đó kiểm tra các file theme xem có sót lại gì không.
3. Script và thẻ
Tài liệu của Shopify liên hệ INP kém chủ yếu với quá nhiều JavaScript từ theme, app hoặc tag manager. Hãy rà soát tag manager, xóa những thẻ không ai dùng, và bắt đầu từ những thủ phạm tệ nhất thay vì cắt giảm khắp nơi cùng lúc.
4. Lựa chọn theme
Hiệu ứng động, chuyển trang và một chuỗi dài các section đều làm tăng chi phí. Shopify gợi ý so sánh hiệu năng trước và sau khi bật chuyển trang, tránh quá nhiều section trên một template, phân trang các collection lớn, và chuyển sang một theme chú trọng hiệu năng nếu theme hiện tại là điểm nghẽn.
Đo lường mà không tự đánh lừa mình
- Ưu tiên dữ liệu người dùng thật. Báo cáo Web Performance của Shopify và báo cáo Core Web Vitals của Search Console phản ánh khách truy cập thực tế. Các công cụ lab hữu ích để gỡ lỗi, không phải để kết luận cuối cùng.
- Đừng đuổi theo một điểm số. Một bài viết của nhà cung cấp lưu ý rằng một lần chạy tổng hợp đơn lẻ có thể lệch đáng kể so với trung vị, nên hãy lấy trung bình nhiều lần chạy trước khi kết luận một thay đổi có hiệu quả.
- Mỗi lần chỉ đổi một thứ. Gỡ một app, test lại, rồi mới chuyển sang app tiếp theo.
- Làm theo quy trình INP. web.dev khuyến nghị thu thập dữ liệu field, tái hiện các tương tác chậm trong Chrome DevTools, rồi giảm khối lượng công việc cho mỗi tương tác bằng cách tách các long task và loại bỏ JavaScript không cần thiết.
Một lưu ý về nguồn: bài viết về hiệu năng của Fudge do một công ty bán page builder viết, và một số số liệu trong đó đến từ thử nghiệm của chính họ. Hướng dẫn chung của họ khớp với tài liệu của Shopify, nhưng hãy xem các benchmark của nhà cung cấp chỉ mang tính định hướng.
Khi câu trả lời là code, không phải cài đặt
Nếu cuộc rà soát chỉ ra chính theme, ví dụ một slider tải script sớm trên mọi trang, thì cách sửa thường là một việc phát triển chứ không phải một cài đặt. Nếu bạn muốn một điểm khởi đầu gọn nhẹ, hãy xem các theme của chúng tôi; nếu công việc cần phát triển tùy chỉnh, hãy xem dịch vụ của chúng tôi.