Improving Homepage Performance

Zillow · 2015 · 2. Tăng trưởng · Độ khó: Dễ — bài gốc

Bối cảnh

Làm lại trang chủ Zillow (2015, do một thực tập sinh làm). Chỉ số hiệu năng chọn theo cảm nhận: một mốc User Timing khi ảnh hero vẽ xong.
Trang chủ desktop cũ nạp ảnh hero bằng module JS (để có hiệu ứng marquee), nên phải chờ document xong.

Ảnh hero thành background tĩnh (như bản mobile), bỏ marquee.
Đặt style background inline trong HTML thay vì trong file CSS, để trình duyệt yêu cầu ảnh mà không chờ parse CSS.
Thêm một thẻ <img> ẩn trỏ cùng ảnh để trình duyệt ưu tiên tải (ảnh trong thẻ img được ưu tiên hơn background): thời gian tới lúc yêu cầu ảnh giảm 85%.
Nén ảnh ở mức khoảng 85%: số byte ảnh giảm 50%.
Phần dưới màn hình và các tab khác tải bất đồng bộ sau khi phần chính xong; chỉ gọi AJAX cho tab có nội dung khác (giảm một nửa số request).
Kết quả: mốc hero nhanh hơn 67% (mục tiêu 25%).

Đo theo thứ người dùng thấy, rồi dồn tối ưu vào đường găng của đúng thứ đó (Kiến trúc frontend).

Chọn một chỉ số cảm nhận cụ thể cho từng trang trước khi tối ưu.
Biết trình duyệt ưu tiên tài nguyên ra sao có thể đem lại cải thiện lớn hơn mọi tối ưu server.