Cải thiện hiệu suất cửa hàng trực tuyến

Cửa hàng trực tuyến của bạn bao gồm một bộ tính năng, chẳng hạn như mã chủ đề, ứng dụng, hình ảnh, video, băng chuyền, nguồn cấp dữ liệu mạng xã hội và phân tích. Những tính năng này có thể nâng cao trải nghiệm của khách truy cập và mở rộng các khả năng của trang web.

Tuy nhiên, mỗi tính năng bạn thêm vào cửa hàng trực tuyến đều có thể ảnh hưởng đến hiệu suất của cửa hàng. Một số tính năng có thể làm chậm trang web hoặc tạo ra các hành vi không mong muốn, từ đó ảnh hưởng đến trải nghiệm người dùng.

Hiệu suất web tập trung vào việc tối ưu hóa trải nghiệm người dùng. Hiện tại, hiệu suất web tập trung vào ba lĩnh vực chính và cũng được phản ánh trong Core Web Vitals:

• Tốc độ tải, đo lường bằng Largest Contentful Paint (LCP)
• Độ ổn định của bố cục, đo lường bằng Cumulative Layout Shift (CLS)
• Mức độ phản hồi với tương tác của người dùng, đo lường bằng Interaction to Next Paint (INP)

Việc tối ưu hóa hiệu suất web đồng nghĩa với việc khách hàng có khả năng sẽ ở lại trang web của bạn lâu hơn và thực hiện chuyển đổi.

Tối ưu hóa cho cửa hàng trực tuyến

Cửa hàng trực tuyến của bạn đã được tích hợp sẵn tính năng tối ưu hóa web. Bất kỳ tính năng mới nào cũng được tích hợp tính năng tối ưu hóa web. Bạn không cần làm gì thêm để tận dụng các tính năng sau:

• Cửa hàng trực tuyến của bạn được lưu trữ trên các máy chủ toàn cầu có tốc độ nhanh và không giới hạn băng thông. Bạn có thể kiểm tra trạng thái của cửa hàng Shopify trên Shopify Status.
• Cửa hàng trực tuyến có mạng phân phối nội dung (CDN) do Cloudflare điều hành, đảm bảo tải nhanh trên toàn cầu. Bạn có thể kiểm tra trạng thái CDN trên trang trạng thái của Cloudflare.
• Để duy trì thời gian tải nhanh, hình ảnh được tự động tối ưu hóa qua CDN hình ảnh. Khi kết hợp với mã chủ đề, CDN hình ảnh có thể cung cấp định dạng hình ảnh tốt nhất cũng như thay đổi kích thước và nén hình ảnh để giữ kích thước tệp nhỏ.

Các yếu tố ảnh hưởng đến hiệu suất web

Đối với cửa hàng Shopify, sau đây là các yếu tố lớn nhất ảnh hưởng đến hiệu suất web:

• Chủ đề của cửa hàng trực tuyến
• Các ứng dụng đã cài đặt
• Mọi mã bên thứ ba bổ sung mà bạn đã thêm thủ công vào cửa hàng, bao gồm cả trình quản lý thẻ và các thẻ bên trong đó

Điều này có nghĩa là bạn nên tập trung vào những yếu tố sau để cải thiện hiệu suất web:

• Sử dụng chủ đề cập nhật và được tối ưu hóa. Tất cả bộ chủ đề Horizon và các chủ đề Cửa hàng trực tuyến 2.0 của Shopify đều miễn phí và được tối ưu hóa về hiệu suất web. Ngoài ra, nhiều chủ đề của bên thứ ba cũng được tối ưu hóa về hiệu suất web. Bạn có thể xem xét dữ liệu về hiệu suất chủ đề mới nhất.
• Nếu chủ đề của bạn cung cấp hiệu ứng chuyển trang hoặc hoạt ảnh khác, hãy so sánh hiệu suất web trước và sau khi kích hoạt. Hoạt ảnh có thể làm trang tải chậm đi.
• Tránh thêm quá nhiều phần vào mẫu trang trong chủ đề của bạn. Quá nhiều phần trên trang có thể làm giảm hiệu suất web.
• Nếu bạn có các bộ sưu tập với số lượng lớn sản phẩm, hãy cân nhắc kích hoạt phân trang để giới hạn số lượng sản phẩm tải cùng lúc.
• Đánh giá các ứng dụng đã cài đặt và mã của bên thứ ba để đảm bảo chúng mang lại đủ giá trị nhằm bù đắp cho bất kỳ tổn thất nào về hiệu suất.
• Kiểm tra trình quản lý thẻ của bạn để xóa mọi thẻ không dùng hoặc ít giá trị. Tìm hiểu thêm về các phương pháp hay nhất dành cho thẻ và trình quản lý thẻ.

Công cụ kiểm tra

Bạn có thể sử dụng các công cụ sau để kiểm tra hiệu suất của cửa hàng trực tuyến:

• Báo cáo Hiệu suất web: Báo cáo Hiệu suất web của Shopify sử dụng Core Web Vitals để đo lường trải nghiệm thực tế của người dùng với cửa hàng trực tuyến.
• PageSpeed Insights: Bạn có thể tự chạy báo cáo bằng PageSpeed Insights của Google để xem số liệu chi tiết hơn cho các trang trong cửa hàng.

Hiểu về đề xuất hiệu suất của bên thứ ba

Các công cụ quét hiệu suất của bên thứ ba có thể đề xuất một số thay đổi để cải thiện tốc độ của cửa hàng. Tuy nhiên, nhiều đề xuất trong số này đã được Shopify triển khai hoặc không áp dụng cho cửa hàng Shopify.

Các tính năng tối ưu hóa đã có trong Shopify

Cửa hàng Shopify tự động bao gồm các tính năng tối ưu hóa hiệu suất sau:

Mạng phân phối nội dung (CDN): Shopify cung cấp CDN đẳng cấp thế giới mà không tính thêm phí, đảm bảo hiệu suất nhanh trên toàn cầu. Mọi tài sản đều được phân phối bằng HTTP/2, giảm chi phí hệ thống so với các giao thức cũ hơn.

Lưu bộ nhớ đệm trên trình duyệt: Shopify thiết lập thời gian lưu bộ nhớ đệm trên trình duyệt cho các tài nguyên có thể lưu vào bộ nhớ đệm là một năm, khoảng thời gian tối đa có thể. Điều này có nghĩa là khách truy cập quay lại cửa hàng của bạn sẽ trải nghiệm thời gian tải nhanh hơn.

Nén gzip: Shopify áp dụng tính năng nén gzip cho CSS, JavaScript, tài liệu và các trang để giảm băng thông và cải thiện thời gian tải. Keep-alive cũng được bật để truy xuất nhiều tệp.

Tối ưu hóa hình ảnh: Shopify tự động nén hình ảnh JPG bằng các thuật toán nâng cao, cân bằng giữa tính năng nén và tính hấp dẫn trực quan. Hình ảnh thường được phân phối ở định dạng WebP để nén tốt hơn và tải nhanh hơn.

Giảm thiểu kích thước tệp: Shopify tự động giảm thiểu kích thước tệp CSS và JavaScript khi có yêu cầu từ cửa hàng, giúp giảm kích thước tệp mà không ảnh hưởng đến chức năng.

Khi đề xuất của bên thứ ba không áp dụng

Các công cụ quét của bên thứ ba có thể đưa ra các đề xuất thay đổi không liên quan đến cửa hàng Shopify:

• Cấu hình cấp độ máy chủ: Các đề xuất về thiết lập máy chủ, tiêu đề HTTP hoặc chính sách bộ nhớ đệm đều đã được tối ưu hóa bởi cơ sở hạ tầng của Shopify.
• Triển khai CDN: Các đề xuất thêm CDN là không cần thiết vì theo mặc định, Shopify đã tích hợp sẵn một CDN hiệu suất cao.
• Cài đặt nén: Các đề xuất về việc bật nén đã được triển khai trên toàn bộ nền tảng của Shopify.

Hành động theo các đề xuất có liên quan

Tập trung vào các đề xuất liên quan đến nội dung và tính năng cụ thể của cửa hàng:

• Tối ưu hóa hình ảnh: Đảm bảo hình ảnh bạn tải lên có kích thước phù hợp và sử dụng định dạng được đề xuất.
• Đánh giá ứng dụng: Cân nhắc xem các ứng dụng đã cài đặt có cung cấp đủ giá trị để bù đắp cho bất kỳ tác động nào đến hiệu suất hay không.
• Tối ưu hóa chủ đề: Chọn các chủ đề được tối ưu hóa về hiệu suất và giới hạn số lượng phần trên mẫu trang.

Khắc phục sự cố trang tải chậm

Nếu cửa hàng của bạn tải chậm, hãy làm theo các bước sau để xác định và khắc phục sự cố:

Bước 1: Xác minh sự cố

1. Tự kiểm tra tốc độ tải của cửa hàng từ nhiều thiết bị và kết nối internet khác nhau.
2. Nhờ người khác kiểm tra cửa hàng để xác nhận đây không phải là sự cố cục bộ với kết nối internet của bạn.
3. Sử dụng các công cụ kiểm tra như PageSpeed Insights để lấy các chỉ số hiệu suất cụ thể.

Bước 2: Xác định nguyên nhân

Kiểm tra xem có quá nhiều ứng dụng không: Quá nhiều ứng dụng tải tài nguyên trên cửa hàng có thể làm giảm hiệu suất. Xem lại các ứng dụng đã cài đặt và xóa ứng dụng không thực sự cần thiết cho việc bán hàng.

Xem lại hình ảnh lớn: Các trang có nhiều hình ảnh chất lượng cao có thể tải chậm. Tối ưu hóa hình ảnh hoặc giảm số lượng hình ảnh hiển thị. Tìm hiểu thêm về kích thước hình ảnh được đề xuất.

Xác định tập lệnh chậm: Nếu trang web bị treo ở dạng trang trống trước khi tải toàn bộ cùng lúc, hãy dùng công cụ dành cho nhà phát triển của trình duyệt để xác định các tập lệnh tải chậm. Liên hệ với nhà phát triển ứng dụng hoặc chủ đề để giải quyết.

Bước 3: Thực hiện hành động

Xóa ứng dụng không cần thiết: Thao tác gỡ cài đặt ứng dụng không tự động xóa mã của ứng dụng đó khỏi chủ đề. Bạn có thể cần liên hệ với nhà phát triển ứng dụng để được hướng dẫn xóa hoàn toàn.

Tối ưu hóa hình ảnh: Sử dụng định dạng tệp phù hợp (JPG đối với ảnh chụp, PNG đối với đồ họa có độ trong suốt) và đổi kích thước hình ảnh để khớp với kích thước hiển thị.

Đánh giá hiệu suất chủ đề: Cân nhắc chuyển sang chủ đề được tối ưu hóa hiệu suất nếu chủ đề hiện tại làm giảm đáng kể tốc độ.

Nhận hỗ trợ về hiệu suất cửa hàng trực tuyến

Nếu dùng chủ đề miễn phí của Shopify, Bộ phận Hỗ trợ Shopify có thể giúp bạn cải thiện các vấn đề cơ bản về hiệu suất.

Nếu dùng chủ đề của bên thứ ba và cần hỗ trợ, bạn phải liên hệ với nhà phát triển chủ đề, thuê chuyên gia hiệu suất web Shopify hoặc thuê Đối tác Shopify để cải thiện hiệu suất và tốc độ trang web. Tìm hiểu thêm về việc thuê Đối tác Shopify.

Nếu sự cố hiệu suất xuất phát từ một ứng dụng, bạn có thể liên hệ với nhà phát triển ứng dụng đó.

Nếu có nhóm phát triển hoặc đối tác đại lý, bạn cũng có thể liên hệ với họ để được hỗ trợ thêm.

Thông tin kỹ thuật và tài nguyên để khắc phục sự cố

Nếu là nhà phát triển muốn cải thiện hiệu suất cho cửa hàng, chủ đề hoặc ứng dụng Shopify, bạn có thể xem các tài nguyên sau đối với từng Chỉ số thiết yếu về trang web (Core Web Vitals). Tìm hiểu thêm về thực hành tốt nhất về hiệu suất cho Chủ đề Shopify.

Tốc độ tải

Largest Contentful Paint (LCP) đo tốc độ tải, dựa trên thời gian hiển thị phần tử lớn nhất trên màn hình. Time to first byte (TTFB) và first contentful paint (FCP) là các chỉ số hỗ trợ giúp bạn hiểu rõ hơn căn nguyên của sự cố. Bạn có thể tìm hiểu thêm về cách gỡ lỗi các nguyên nhân phổ biến gây tải chậm trong cửa hàng Liquid Shopify.

Độ ổn định hình ảnh

Cumulative Layout Shift (CLS) đo độ ổn định hình ảnh, dựa trên mức độ xê dịch nội dung ngoài dự kiến trong quá trình tải. Để tìm hiểu sâu về cách gỡ lỗi CLS, hãy đọc Cách tối ưu hóa Cumulative Layout Shift (CLS) trên trang web Shopify.

Khả năng tương tác

Interaction to Next Paint (INP) đo khả năng tương tác dựa trên thời gian cần thiết để trang phản hồi với hầu hết thao tác của người dùng. Ví dụ: thao tác của người dùng như nhấp vào liên kết hoặc nút.

Nếu INP kém, nhiều khả năng do cửa hàng có quá nhiều JavaScript từ mã chủ đề, mã ứng dụng hoặc mã của bên thứ ba/trình quản lý thẻ. Hãy xử lý các nguyên nhân gây ảnh hưởng nặng nhất. Tìm hiểu thêm về 3 cách tìm JavaScript gây ảnh hưởng nghiêm trọng nhất đến tốc độ tải trang. Nếu vẫn gặp sự cố với INP, hãy tìm hiểu thêm bằng các tài nguyên trên web.dev.