Web Performance Optimization: Tối ưu hiệu suất web

Mục lục

Web Performance Optimization: Tối ưu hiệu suất web

Tuần trước, mình debug một website thương mại điện tử Việt Nam. Trang chủ load 8.2 giây trên 4G. Chủ sự nghiệp chỉ quan tâm: "Tại sao khách hàng phàn nàn là chậm?" Mình hỏi lại: "Bạn chắc chắn muốn biết lý do?" Thực tế là 53% khách đã rời đi trước khi nó load xong.

Con số ấy không phải từ đâu ra. Theo Google, mỗi giây chậm lại tương đương mất 7% conversion. Với một trang bán hàng thu 100 triệu/tháng, điều đó là mất 7 triệu mỗi tháng chỉ vì trang chậm. Nhưng không ai tính toán kiểu đó.

Vấn đề thực sự ở đâu?

Hầu hết developer Việt Nam hiểu performance optimization như là "minify code, enable gzip, cache cái gì đó". Sai hết. Performance không phải về những cái nhỏ nhặt ấy—nó là về quyết định kiến trúc sai từ đầu.

Mình từng khoá một dự án có 2.5MB JavaScript bundle. Không phải vì code dơ, mà vì team import toàn bộ lodash (65KB) chỉ để dùng 3 function. UI library nó nó lôi kéo theo 15 dependency khác. Modal popup dùng 40KB của một animation library. Và cái sai lầm chuỗi dây đó kéo dài suốt codebase.

Performance tốt phải bắt đầu từ việc nói không. Không thêm library nếu chưa cần. Không dùng framework nặng cho landing page. Không load 200KB CSS nếu trang hiển thị 50KB.

Metrics mà bạn thực sự cần quan tâm

Quên đi "load time" chung chung. Google định nghĩa Core Web Vitals gồm 3 thứ:

LCP (Largest Contentful Paint) — khi phần tử chính của trang hiển thị. Phải < 2.5 giây. Nghe dễ nhưng nó fail ở hầu hết trang Việt vì image không optimize, font chưa preload, hoặc server chậm.

FID (First Input Delay) — từ lúc user click cho đến JavaScript đủ sức response. < 100ms thì ok. Trang nào dùng 10 event listener + tracking script thường fail ở đây.

— trang có bị dịch chỗ khi load không. < 0.1 thì tốt. Nhìn vô vô hại nhưng khó optimize vãi—phải biết width/height của mọi element từ trước khi render.

Chia sẻ bài viết

Web Performance Optimization: Tối ưu hiệu suất web