7 nguyên nhân khiến phần lớn cửa hàng Shopify chạy chậm
Gần như cửa hàng Shopify chậm nào chúng tôi mở ra cũng gặp vài vấn đề giống nhau. Đây là danh sách, xếp gần đúng theo thứ tự chúng tôi kiểm tra.
Khi khách nói cửa hàng của họ chạy chậm, việc đầu tiên chúng tôi làm là mở code theme và tab network của trình duyệt. Nguyên nhân hiếm khi lạ. Phần lớn là vài thứ dưới đây cộng lại.
1. App tải script ở mọi trang
App đánh giá chỉ cần chạy ở trang sản phẩm. App popup có khi chỉ cần ở trang chủ. Vậy mà nhiều app vẫn tải script ở khắp nơi, kể cả giỏ hàng và blog. Thử mở một bài blog với tab network: thứ gì không liên quan tới trang đó đều nên gỡ hoặc giới hạn lại.
2. Code còn sót lại từ app đã gỡ
Các app đời cũ sửa thẳng vào file theme, và gỡ app không hoàn tác những chỗ sửa đó. Cửa hàng vẫn tải script của một dịch vụ bạn đã ngừng trả tiền. Hãy tìm trong theme theo tên app và tên miền của app. Chúng tôi có một bài riêng về cách dọn phần này.
3. Ảnh lấy thẳng từ máy ảnh hoặc từ designer
Ảnh PNG 4000px dùng làm ảnh nhỏ sản phẩm là chuyện thường gặp. Shopify có thể trả về bản nhỏ hơn, nhưng chỉ khi theme yêu cầu. Trong Liquid, nghĩa là dùng image_url kèm chiều rộng, có srcset và giá trị sizes khớp với độ rộng thật của ảnh trên màn hình. Nếu theme lúc nào cũng gọi một cỡ lớn, điện thoại sẽ tải ảnh dành cho máy tính.
4. Lazy load nhầm ảnh
Lazy load tốt cho phần bên dưới trang. Ở banner đầu tiên thì ngược lại: trình duyệt chờ rồi mới tải thứ lớn nhất trên màn hình, và LCP tệ đi. Ảnh đầu tiên nên được tải ngay, tốt nhất là kèm fetchpriority="high".
5. Quá nhiều font và độ đậm
Mỗi độ đậm là thêm một file. Hai họ font, mỗi họ bốn độ đậm, nghĩa là tám lượt tải trước khi chữ hiển thị đúng. Chỉ nên chọn một hai độ đậm cho mỗi họ, và kiểm tra xem theme có còn tải font mà thiết kế đã bỏ không.
6. Slider và video tự chạy ở màn hình đầu
Slider năm ảnh tràn màn hình sẽ tải cả năm ảnh, dù khách chỉ nhìn thấy ảnh đầu. Video nền vẫn dùng được, nhưng cần ảnh poster và file nhỏ. Nhiều khi một ảnh thật tốt lại hiệu quả hơn.
7. Chat và mã theo dõi cùng khởi động một lúc
Chat, heatmap, vài pixel quảng cáo và một tag manager, riêng từng cái thì không sao. Gộp lại, chúng tranh tài nguyên với trang đúng lúc khách đang muốn cuộn. Hãy tải chat khi trang đã rảnh hoặc khi khách bấm vào, và gỡ pixel của những nền tảng bạn không còn chạy quảng cáo.
Bắt đầu từ đâu
Đo trang sản phẩm và trang collection trên mobile, đừng chỉ đo trang chủ. Nếu chưa rõ cách đọc kết quả, chúng tôi có viết về điểm tốc độ Shopify bao nhiêu là tốt và nên xem những chỉ số nào. Đi lần lượt theo danh sách trên và đo lại sau mỗi thay đổi. Ở một cửa hàng chúng tôi từng làm, chỉ dọn những điểm cơ bản này đã đưa LCP trên mobile từ 13.3s xuống 1.5s. Tôi nghĩ phần lớn cửa hàng sẽ không có bước nhảy lớn như vậy, nhưng danh sách này vẫn là nơi chúng tôi bắt đầu.
