Tối ưu hóa tốc độ của cửa hàng Shopify có thể tác động đáng kể đến trải nghiệm mua sắm của khách hàng và có thể cải thiện tỷ lệ chuyển đổi của cửa hàng. Trong bài viết này, tôi sẽ chia sẻ 12 tips hữu ích để tối ưu hóa tốc độ tải trang cửa hàng Shopify. Trước tiên, chúng ta sẽ tìm hiểu về các định nghĩa liên quan và cách thức tốc độ tải trang trên cửa hàng Shopify hoạt động.
Điểm tốc độ trên cửa hàng Shopify (Shopify Site Speed Score) là gì?
Điểm tốc độ Shopify của bạn là tốc độ hoạt động của cửa hàng trong môi trường thử nghiệm bằng cách sử dụng số liệu hiệu suất của Google Lighthouse. Điểm tốc độ Shopify tốt là trên 50, trên thực tế, site speed score trên 70 được coi là tuyệt vời! Nếu site speed dưới 50, bạn cần cân nhắc cải thiện.
Shopify Site Speed hoạt động như thế nào?
Shopify sử dụng công cụ mã nguồn mở (open source) Google Lighthouse để kiểm tra các cửa hàng của người bán và cải thiện chất lượng trang web. Lighthouse tính toán điểm Hiệu suất tổng thể dựa trên năm chỉ số chính, bao gồm:
- First Contentful Paint (FCP): Đây là thời điểm khi trình duyệt hiển thị phần nội dung đầu tiên từ mô hình đối tượng tài liệu (DOM), cung cấp phản hồi cho người dùng rằng trang đang load.
- Largest Contentful Paint (LCP): LCP ước lượng thời điểm nội dung chính của trang trở nên hiển thị rõ ràng với người dùng.
- Speed Index: Chỉ số này đo lường tốc độ mà nội dung được hiển thị trực quan trong quá trình tải trang. Lighthouse ghi lại một video của trang tải trên trình duyệt và tính toán sự tiến triển hình ảnh giữa các khung hình.
- Total Blocking Time (TBT): TBT đo lường khoảng thời gian mà trang bị chặn không thể phản hồi đầu vào của người dùng, chẳng hạn như nhấp chuột, chạm màn hình hoặc nhấn phím.
- Cumulative Layout Shift (CLS): CLS đo lường mức độ thường xuyên người dùng gặp phải sự thay đổi bố cục không mong muốn—một CLS thấp giúp đảm bảo trang web ổn định về mặt hình ảnh.
Tips để tối ưu tốc độ tải trang Shopify Store
Hạn chế hình ảnh và video
Hình ảnh và video lớn có thể làm chậm tốc độ tải trang trên Shopify. Mặc dù Shopify tự động nén hình ảnh mà bạn tải lên, nhưng có một số yếu tố bạn nên xem xét để đảm bảo rằng hình ảnh của bạn không làm giảm tốc độ tải trang.
- Loại hình ảnh: Lựa chọn tốt nhất cho hình ảnh trên Shopify là JPEG, vì nó cung cấp chất lượng tốt nhất với kích thước tệp nhỏ hơn. PNG sẽ giảm chất lượng khi được nén, dẫn đến hình ảnh kém sắc nét. Ngoài ra, PNG có kích thước lớn hơn nhiều so với JPEG.
- Hình ảnh trang trí: Hạn chế kích thước tệp của các hình ảnh không liên quan đến sản phẩm (như hình nền, nút bấm, viền) để không ảnh hưởng nhiều đến chất lượng (cố gắng giữ kích thước tệp ở mức tối thiểu)
- Mục đích của hình ảnh: Chỉ nên sử dụng hình ảnh nếu chúng thực sự cần thiết để trưng bày sản phẩm hoặc thể hiện thương hiệu. Không nên thêm hình ảnh không có mục đích rõ ràng.
Đối với những phần trên website cần có video, bạn nên nhúng video kết hợp với tải chậm (lazy loading). Nhúng video là lưu trữ video trên một nền tảng bên ngoài như YouTube (trước tiên bạn cần tải video lên nền tảng đó và lấy mã nhúng (embed code), sau đó chèn code vào các trang sản phẩm của mình.
Nén ảnh
- Sử dụng một số App hỗ trợ giảm size ảnh mà không mất đi chất lượng ảnh như Kraken.io, ShortPixel, or TinyPNG.
- Đảm bảo bạn đang sử dụng đúng kích thước ảnh tương ứng với tiêu chuẩn của các phần như ảnh banner, ảnh blog,..
Nếu bạn dùng GIF, hãy cân nhắc thay thế chúng bằng hình ảnh tĩnh. GIF động thường có kích thước tệp lớn hơn và có thể làm chậm các trang của bạn.
Giảm thiểu yêu cầu HTTP
Yêu cầu HTTP là các thông báo mà trình duyệt web gửi đến máy chủ web bất cứ khi nào ai đó muốn xem trang web của bạn. Giảm số lượng yêu cầu HTTP bằng cách sử dụng mạng phân phối nội dung (CDN) và kết hợp các tệp nếu có thể. Những yêu cầu này có thể dành cho hình ảnh, tệp JavaScript, v.v.
Càng nhiều tệp trên trang web, trình duyệt càng cần thực hiện nhiều yêu cầu HTTP hơn để tải tất cả chúng, trang web càng trở nên chậm hơn. Do vậy, bạn có thể xóa các nút không cần thiết để giảm số lượng yêu cầu HTTP.
Ví dụ: nếu bạn dùng quá nhiều nút CTA (Call To Action) như “Mua ngay/Buy now”, “Tìm hiểu thêm”/ “View more” hoặc “Đăng ký”/ “Register”.. trên một trang, hãy xóa ở những trang không ưu tiên.
Tuân thủ theo các thiết kế đơn giản cho trang Shopify bởi vì các hoạt ảnh hoặc thành phần thiết kế phức tạp đòi hỏi phải có mã và tài nguyên bổ sung.
Loại bỏ các ứng dụng và tính năng không sử dụng
Khi bạn tải ứng dụng và tính năng về cửa hàng của mình, chúng sẽ kết hợp một số mã code và tập lệnh (script) vào trang web của bạn để chúng có thể hoạt động mượt.
Nhưng nếu bạn không sử dụng những thứ này thì code sẽ chỉ chạy ở chế độ nền mà không có lý do, điều này làm cho hiệu suất trang web của bạn chậm hơn.
Shopify khuyến nghị sử dụng tối đa khoảng 20 apps. Nếu bạn có nhiều hơn thế, thi thoảng hãy kiểm tra và xóa bớt các ứng dụng không còn dùng nữa.
Để quyết định nên giữ lại những ứng dụng hoặc tính năng nào, bạn nên cân nhắc apps hoặc tính năng nào sẽ giúp ích nhiều nhất cho khách hàng khi họ truy cập vào trang web của bạn cho đến khi mua hàng.
Giảm thiểu chuyển hướng link
Chuyển hướng định hướng cho trình duyệt đi đến một URL khác với URL được yêu cầu ban đầu. Tuy nhiên, mỗi lần chuyển hướng đều làm tăng thời gian tải trang, vì vậy, quá nhiều lần chuyển hướng có thể khiến trang bị chậm hơn đáng kể.
Bạn cũng không nên bỏ hoàn toàn các chuyển hướng vì nó cũng có vai trò cho trải nghiệm của khách hàng và tối ưu hóa SEO, thử triển khai chúng theo các cách sau:
- Tránh các chuyển hướng không cần thiết: chỉ sử dụng các chuyển hướng ở những nơi cần thiết. Ví dụ: nếu cửa hàng của bạn có thiết kế responsive (nó sẽ tự thích ứng với thiết bị di động) thì bạn không cần phải thiết lập chuyển hướng để xem trang web trên thiết bị di động.
- Dọn dẹp các chuyển hướng của bạn: rà soát tất cả các chuyển hướng mà bạn đã thiết lập và xác minh tính cần thiết của chúng. Loại bỏ những chuyển hướng cũ nếu chúng không còn mang lại nhiều lưu lượng truy cập đến trang web của bạn từ các nguồn bên ngoài mà không thông qua các công cụ tìm kiếm.
- Sử dụng chuyển hướng 301 thay vì chuyển hướng 302 khi cần thiết.
Loại bỏ các link không còn hoạt động
Chúng không chỉ ảnh hưởng tiêu cực đến trải nghiệm của khách hàng mà còn có thể làm chậm các trang của bạn vì chúng lãng phí tài nguyên, gây hao băng thông.
Bạn có thể sử dụng Google Search Console (miễn phí) để xác định tất cả các liên kết bị hỏng. Công cụ này sẽ thu thập thông tin về các lỗi để cung cấp danh sách tất cả các liên kết dẫn đến lỗi 404. Sau khi xác định được những điều này, hãy quay lại tài khoản Shopify của bạn để xóa liên kết theo cách thủ công.
Sử dụng và tối ưu Theme
Có nhiều yếu tố ảnh hưởng tới tốc độ load của Theme như:
- Số lượng code chứa trong theme, ít code có nghĩa là thời gian phản hồi từ máy chủ ít hơn.
- Kích thước của các files cần tải khi load một website (phông chữ, video..)
- Theme không dựa vào Thư viện JavaScript jQuery.
- Theme có CSS gọn gàng, sạch sẽ giúp chúng hiển thị nhanh hơn. Do vậy, mỗi theme sẽ có hiệu suất tải trang khác nhau một chút.
- Tinh gọn trang chủ của bạn: Một trang chủ lộn xộn sẽ mất nhiều thời gian tải hơn và có thể khó điều hướng. Hãy xem xét chỉ hiển thị các yếu tố thiết yếu (như sản phẩm) quan trọng đối với cửa hàng của bạn.
- Cập nhật giao diện thường xuyên: Hãy giữ cho giao diện của bạn luôn được cập nhật lên phiên bản mới nhất. Các bản cập nhật thường đã được tối ưu hóa.
Bạn nên chọn theme nhanh và giao diện hoặc thiết kế trang web có khả năng tự động điều chỉnh và hiển thị nội dung một cách tối ưu trên nhiều thiết bị khác nhau, bao gồm máy tính để bàn, máy tính bảng và điện thoại di động (gọi là “responsive theme”).
Kiểm tra phông chữ của cửa hàng
Phông chữ thường có thể được phân thành hai loại: phông chữ hệ thống và phông chữ web.
Phông chữ có thể làm giảm tốc độ tải trang của bạn bởi một số lý do sau:
- Thêm yêu cầu bổ sung: Khi bạn sử dụng phông chữ tùy chỉnh trên trang web của mình, bạn cần tải phông chữ đó từ một nguồn—từ máy chủ của riêng bạn hoặc dịch vụ của bên thứ ba như Google Fonts. Điều này thêm các yêu cầu bổ sung, có thể làm chậm thời gian tải.
- Chặn hiển thị: Trình duyệt cần đợi phông chữ web được tải xuống trước khi có thể hiển thị văn bản. Điều này có thể gây ra sự chậm trễ trong quá trình hiển thị, ảnh hưởng tiêu cực đến trải nghiệm người dùng.
Để tránh làm chậm trải nghiệm của người mua hàng, bạn có thể sử dụng phông chữ hệ thống. Một số ví dụ bao gồm: Gruzia, Monaco, menlo, Times New Roman.
Quản lý tracking code với Google Tag Manager
Ngày nay, việc sử dụng tracking code trên trang web là điều cần thiết, từ các công cụ cơ bản như Google Analytics đến các công cụ nâng cao như Hotjar.
Mỗi khi bạn thêm một công cụ theo dõi, bạn phải chèn thêm mã JavaScript, điều này làm tăng thời gian xử lý và khiến trang tải chậm hơn do các mã phải xử lý tuần tự.
Google Tag Manager giúp giải quyết vấn đề này bằng cách quản lý tất cả tracking code ở một nơi và cho phép chúng xử lý đồng thời, độc lập với nhau, giúp trang web của bạn tải nhanh hơn.
Triển khai Accelerated Mobile Pages (AMP)
AMP là một nền tảng web nguồn mở giúp cải thiện hiệu suất của nội dung web. AMP có tính năng hỗ trợ được tích hợp sẵn cho Trình quản lý thẻ của Google, được thiết kế để giúp các trang trên thiết bị di động tải nhanh hơn. Bằng cách triển khai AMP cho các trang sản phẩm và bài viết blog của bạn, bạn có thể cải thiện đáng kể thời gian tải cho người dùng di động, mang lại trải nghiệm tốt hơn và xếp hạng tìm kiếm cao hơn.
Tối ưu hóa thiết bị di động (mobile) để cải thiện hiệu suất
Tập trung vào thiết kế ưu tiên cho mobile đảm bảo rằng trang web của bạn được tối ưu hóa cho các thiết bị di động. Điều này giúp ưu tiên trải nghiệm trên thiết bị di động và đảm bảo trang web của bạn hoạt động tốt trên các màn hình nhỏ hơn.
Tối ưu hóa điều hướng trên thiết bị di động (navigation) bằng việc sử dụng menu thu gọn, nút dễ bấm và nội dung đơn giản.
Giảm tài nguyên trên mobile như loại bỏ hình ảnh, video và tập lệnh không cần thiết cho phiên bản di động.
Tận dụng Cache của Shopify để tối ưu tốc độ tải trang
Cache là nơi lưu trữ tạm thời cho dữ liệu bạn truy cập thường xuyên, cho phép các trang web và ứng dụng tải nhanh khi bạn mở chúng nhiều lần. Do Shopify tự động xử lý một số khía cạnh của việc lưu trữ bộ nhớ đệm nên bạn có thể tận dụng bộ nhớ đệm tích hợp sẵn của Shopify (như sử dụng các ứng dụng như Cache Killer để quản lý và mở rộng khả năng lưu trữ bộ nhớ đệm).
Sử dụng dịch vụ mạng phân phối nội dung (Content Delivery Networks - CDNs) như Cloudflare phân phối nội dung trang web của bạn trên nhiều máy chủ trên toàn thế giới. Điều này giúp giảm khoảng cách truyền dữ liệu, tăng tốc độ tải trang cho khách hàng toàn cầu.
Đặt thời gian lưu trữ cho bộ nhớ đệm lâu hơn cho các tài nguyên tĩnh không thay đổi thường xuyên. Điều này giúp khách truy cập quay lại trang web của bạn nhanh hơn vì trình duyệt của họ có thể sử dụng lại các tài nguyên đã được lưu trữ trong bộ nhớ đệm.
Thường xuyên giám sát và kiểm tra hiệu suất
Việc giám sát và kiểm tra liên tục rất quan trọng để duy trì tốc độ trang web tối ưu. Sử dụng các công cụ như Google PageSpeed Insights, GTmetrix và Shopify's Speed Score để thường xuyên kiểm tra hiệu suất của cửa hàng. Xác định các điểm nghẽn traffic và các khu vực cần cải thiện, và thực hiện các thay đổi khi cần thiết để giữ cho trang web của bạn hoạt động mượt mà.
Kết luận
Tối ưu hóa tốc độ cho cửa hàng Shopify của bạn rất quan trọng để mang đến trải nghiệm người dùng mượt mà, cải thiện thứ hạng trên các công cụ tìm kiếm và tăng doanh số bán hàng. Bằng cách thực hiện 12 tips đơn giản này, bạn sẽ thấy hiệu suất cửa hàng của mình được cải thiện rõ rệt, thời gian tải trang giảm xuống và khách hàng sẽ có trải nghiệm duyệt web dễ chịu hơn. Đừng quên thường xuyên kiểm tra và áp dụng các chiến lược này để giữ cho cửa hàng Shopify của bạn luôn nhanh chóng, hoạt động tốt và thân thiện với người dùng.
Hy vọng bài viết này hữu ích với bạn!