Chào anh em! Việc tăng tốc độ load trang là rất quan trọng, giúp tăng trải nghiệm tích cực cho khách hàng, tăng tỉ lệ chuyển đổi mua hàng và cũng có ích trong SEO (tôi từng nhiều năm làm SEO global nên cảm nhận được tác dụng này).
Dưới đây là 2 cách làm để anh em lựa chọn, cách 1 dành cho anh em không phải dân tech cũng tự triển khai được với site Woo, cách 2 chỉ dành cho dev fullstack
Tôi sử dụng 2 site đặt cùng trên 1 server với cùng 1 lượng sản phẩm <100 để tiện so sánh.
Tôi chỉ tối ưu TTFB (tìm hiểu TTFB tại đây https://viblo.asia/…/toi-uu-thoi-gian-phan-hoi-dau-tien…), việc tối ưu đạt 100 điểm Google Pagespeed cho Woo tôi không làm. Đồng thời, 2 website demo trong bài này không áp dụng cache cho page Checkout, view card, add to card, chỉ làm cho page home, list và sản phẩm
Cách 1:
Tăng speed cho site Woo chỉ sử dụng tính năng cache từ các dịch vụ CDN (Tôi chọn Fastly, không chọn CloudFlare vì những ưu điểm tôi ghi ở cuối bài, không phải chỉ vì Etsy, Shopify… cũng đang dùng) (CDN là một nhóm máy chủ được đặt tại nhiều khu vực khác nhau trên khắp thế giới,… đọc thêm tại đây https://vnexpress.net/hang-loat-website-lon-tren-the-gioi…) ⇒ Đăng ký dịch vụ Fastly.com cho tên miền của mình ⇒ Cấu hình
Bước 1 : vào phần config chọn cache setting
Bước 2 : Chọn create cache setting (ảnh)
Bước 3 : Điền tên, thời gian cache tồn tại , phần action chọn Pass ( ko cache ), Deliver (cache )
Bước 4: Chọn Attach a condition
Thêm các rule cho cache theo cheat sheet. Sau khi hoàn tất, các bạn ra trang của mình và test nhấp vào các page sẽ thấy có sự thay đổi. Dùng dịch vụ cache này của Fastly các bạn lưu ý là khi test phải truy cập lần thứ 2 một URL mới thấy tốc độ load trang nhanh hơn.
#####Ưu nhược điểm của cách 1: anh em không phải dân tech cũng làm được, chi phí rẻ. Nhược điểm là những khách vào lần đầu 1 URL (trong 1 ngày) không được nhận tốc độ cao (mà tối tượng này lại là chính), với Bot Google cũng sẽ tương tự như vậy. Do tôi đặt thời hạn cache là 1 tiếng vì muốn Bot Google mỗi khi quay lại page sẽ nhận được nội dung mới từ comment, sản phẩm liên quan hay đánh giá…)
Chi phí cách 1: 50 usd cho Fastly + 20 usd vps Vultr = 70usd/tháng
Cách 2:
Cache trên máy chủ của tôi, (chỉ sử dụng cdn Fastly làm geolocation steering) Sử dụng hệ thống cache độc lập, ko liên quan đến server gốc , khi khách hàng checkout và add to cart thì mới sử dụng đến tài nguyên server gốc. Sử dụng Load Balancing (của Fastly) để lựa chọn máy chủ gần nhất với khách hàng (ví dụ khách từ Dallas -> server Dallas).
Tôi hiện đang dùng 1 server chính loại 4G Ram 20 usd/tháng và 5 server con (server node) US 3, EU 1, SG 1, tất cả server node cấu hình đều 2G Ram loại 10 usd/tháng đều của Vultr ⇒ tổng chi phí 70usd/tháng (hiện tại là data demo nhưng tôi nghĩ sẽ vẫn ổn nếu site <5.000 sp) (ảnh mô hình Load Balancing)
Công nghệ sử dụng cho mỗi server node: centos 7 , openresty (https://openresty.org/en/), lua script ( https://github.com/openresty/lua-nginx-module), redis (cache trên ram), không cài đặt php, database hay Woo.
Sử dụng cơ chế master slave của redis để đồng bộ cache giữa các server: https://redis.io/topics/replication
Server chính vẫn cấu hình như bình thường mọi web server khác.
Tổng chi phí cách 2: 70usd Vultr + 50 usd Fastly = 120 usd/tháng
Ưu nhược điểm của cách 2:
Nhược điểm: tốn chi phí hơn cách 1, đòi hỏi dev fullstack mới làm mượt mà được. Ngoài ra, khi data sản phẩm lớn phát sinh cần làm tốt “fresh cache” cũng như tối ưu page Checkout
Ưu điểm: khách/Google bot vào dù lần đầu cũng luôn được hưởng tốc độ cao
KẾT LUẬN
Cách thứ 2 ưu điểm hơn hẳn cách 1 (kiểm tra qua tool https://tools.keycdn.com/performance )
Nên chọn cả 2 cách cùng lúc để giảm tải cho server của mình, phòng tránh ddos
Nên chọn Fastly so với CloudFlare vì nếu làm hơn 2 site thì dùng Fastly sẽ rẻ hơn, ngoài ra Fastly còn cho phép cài đặt tính năng điều hướng giúp user tại 1 thành phố như NewYork sẽ chỉ có server tại Newyork (của Fastly) trả data thay vì có thể lấy ngẫu nhiên các server tận châu âu như CloudFlare (có thể do tôi không tìm ra)
Cả 2 cách trên chỉ áp dụng cho page home, page sản phẩm (hoặc cả page blog, about us) và KHÔNG làm với các page Checkout, Add to card
#####ĐẶC BIỆT LƯU Ý: Phương pháp bên trên chỉ phù hợp để tăng chỉ số TTFB, nếu các bạn muốn đạt điểm 100 Google Page Speed và điểm cao GTMetrix thì phải làm thêm nhiều việc khác nhé. #woo, #woocommerce
Cảm ơn bạn đã trả lời.