Bỏ hai đoạn intro chậm và sửa những gì chúng đang che

Trên vandatateam.com, một lớp intro che trang chủ từ ba tới sáu giây trên desktop. Nó bị gỡ ra rồi gắn lại trong lúc hydration, nên trang vừa hiện ra đã bị che tiếp. Bundle phía client còn tải cả blog cho mọi người xem.

Trên vanaxity.com, intro toàn màn hình che tiêu đề, và khi intro xong thì trang đứng yên vẫn liên tục vẽ lại.

Tôi bỏ cả hai intro rồi sửa những gì chúng đang che. Trên vandatateam.com, cảnh WebGL chuyển sang Web Worker với OffscreenCanvas, bundle phía client được tách để nội dung blog nằm lại trên server, và trang dài dùng content-visibility.

Trên vanaxity.com, intro được thay bằng một đoạn vào trang ngắn chỉ dùng CSS, chỉ animate transform và opacity, chạy trước hydration. Hiệu ứng trang trí dừng khi ra khỏi màn hình, và việc cuộn trang quay về compositor.

Hai bản build được đo như server production trên cùng một máy, xen kẽ trước sau, nên tải nền ảnh hưởng đều cả hai.

Phần đầu trang hiện ra trên máy tính sau 526 ms thay vì 4.493 ms P1, CLS trên mobile từ 0,160 về 0 P2. JavaScript tải trong 6 giây đầu từ 2.425 KB còn 695 KB P3, JavaScript ban đầu của blog từ 1.456 KB còn 272 KB P4.

Trên vanaxity.com, tiêu đề đọc được sau 716 ms thay vì 5.436 ms trên desktop P6, main thread trên phone throttle khi trang đứng yên từ 95,6% bận còn 3,7% P7, và 30/30 check hành vi pass trên ba trình duyệt P8.

Khi sửa 69 bài tiếng Việt dịch máy theo bản tiếng Anh, tôi tìm ra 8 bài bị đổi tên key frontmatter, làm mất lời kêu gọi hành động mà không báo lỗi P9. Không có gì báo lỗi; chỉ là cái nút biến mất.

Điểm Lighthouse ở đây là trung vị đo local, mô phỏng; số liệu thực tế trên điện thoại sẽ khác. Trên điện thoại, tiêu đề vanaxity giờ có một đoạn vào trang ngắn thay vì hiện ngay; LCP không đổi, và tôi giữ một kiểu vào trang cho mọi màn hình.

Anh Văn sở hữu hai site và agency. Tôi làm cả hai đợt tối ưu, viết script đo và báo cáo. Trên vandatateam.com, 403 trên 938 commit là của tôi P10.