How We Improved Website Performance by Evolving Our Infrastructure

Wix · 2021 · 3. Quy mô lớn · Độ khó: Trung bình — bài gốc

Bối cảnh

• Wix phục vụ hàng triệu site, nhiều site làm từ lâu và không ai sửa nữa; là môi trường quản lý nên phần lớn hiệu năng nằm trong tay nền tảng chứ không phải người dùng. Từ 6/2021 Google đưa page experience vào xếp hạng tìm kiếm.
• Họ chọn Core Web Vitals làm ngôn ngữ chung cho monitoring và thảo luận nội bộ.

Thay đổi chính

• CSR → SSR: vài năm trước Wix render ở client: một file HTML gần rỗng dùng chung, rẻ cho backend. Chuyển sang render ở server để tốt cho SEO và hiển thị sớm, nhưng mỗi request lại sinh HTML riêng, rất phí với site nhiều lượt xem.
• Cache HTML khi nó "gần như tĩnh": HTML đổi khi chủ site sửa site hay dữ liệu (kho hàng), có phần riêng cho từng khách (giỏ hàng, chat), và có trang không cache được (code tự viết in giờ hiện tại). Bước đầu an toàn: cache HTML không có dữ liệu khách, rồi chèn phần riêng của khách vào mỗi lần trúng cache. Dựng giải pháp nội bộ: Varnish để proxy và cache, Kafka để gửi invalidation, một service Scala/Netty sửa HTML và thêm cookie. Thành phần gọn nên triển khai được ở nhiều nơi: năm 2019 thêm hơn 15 region, bật cache cho hơn 90% lượt xem đủ điều kiện. Cùng cơ chế cache cả API chỉ đọc (danh sách bài blog, invalidate khi đăng/sửa).
• Bỏ hẳn dữ liệu khách khỏi HTML: chuyển dữ liệu và cookie riêng sang một endpoint JSON nhỏ gọi sau khi HTML về (cho hydration). HTML thành giống nhau cho mọi khách, nên bật được cache trình duyệt với ETag (không đổi thì trả 304, không body) và cache được ở bất cứ đâu, mở đường cho CDN.
• Mạng: HTTP/2 cho mọi domain của người dùng; Brotli thay gzip ở nginx biên, giảm 21–25% kích thước truyền trung vị; chọn CDN động theo mạng của client qua nhà cung cấp DNS cho JS và ảnh.
• HTML qua CDN: giải pháp cache tự làm ở nhiều region tốn công vận hành; tích hợp CDN để phục vụ cả HTML của domain người dùng từ biên. Khó ở chỗ phải kết thúc SSL ở biên cho số lượng domain rất lớn.

Kết quả (theo Wix)

• Tỉ lệ site Wix đạt mức tốt ở p75 cho mọi chỉ số Core Web Vitals tăng 10 lần so với năm trước (theo CrUX và HTTPArchive).

Vì sao

• Cache được hay không phụ thuộc vào việc response có giống nhau giữa người dùng không; tách phần cá nhân ra khỏi phần chung là điều kiện để cache phần chung ở mọi tầng (Cache và invalidation, Scale dọc trước khi scale ngang).
• Đưa nội dung đã cache tới gần người dùng (nhiều region, rồi CDN) vừa giảm latency vừa tăng độ tin cậy (Độ tin cậy và multi-region).

Bài học cho SWE

• Trước khi cache trang, tách dữ liệu riêng của người dùng ra một request nhỏ riêng.
• Bước an toàn trung gian (cache rồi vá phần riêng) giúp đi nhanh, nhưng để lại độ phức tạp cần dỡ sau.
• Tự vận hành cache ở nhiều region là việc tạm; khi response đã chung cho mọi người thì CDN rẻ hơn.

Liên quan

• Kiến trúc frontend
• Wix 2022 · Wix 2021 · Wix 2020
• Cache và invalidation · Scale dọc trước khi scale ngang · Độ tin cậy và multi-region