Tôi đã tối ưu TTFB như thế nào

Hôm trước mình có hỏi về tối ưu TTFB với website có xài CF ở link này: https://cafemmo.club/threads/hoi-lam-sao-giam-ttfb-khi-add-site-vao-cloudflare.3235/ Sau 2 ngày mò mẫm thì kết quả khá là khả quan nên khoe với anh em. Cũng nói trước bài này khá đặc thù vì nó chỉ áp dụng cho chính site mình tự code, không áp dụng đại trà được. Cũng không có gì là ghê gớm tuyệt chiêu, ai thấy xài dc thì xài nhé. Đầu tiên là show kết quả: bây giờ hầu hết url trong web của mình đều có điểm Google Pagespeed như 2 hình dưới đây (trên Mobile và Desktop). So với lúc trước thì điểm số tăng lên 1 chút thôi nhưng hài lòng nhất là phần Cumulative Layout Shift (CLS) cải thiện rõ rệt. Lúc trước CLS của mình gần như chạm sát mức error nhưng giờ đa số CLS = 0 --> hiện đang cảm thấy rất sướng vì điều này :D Và cách mà mình đã làm như sau: - Tối ưu lại code 1 chút: sau khi xem lại thì mình thấy code phần load data chưa tối ưu nên mình có sửa để nhanh hơn 1 xíu (không đáng kể) - Cache: chuyển web sang html tĩnh. Tối ưu CLS: - Ban đầu mình đọc ở link này để xem cách họ khuyến nghị như thế nào: https://web.dev/optimize-cls/ - Mình xác định được web mình có 2 vấn đề: #1 là image không cấu hình size cố định mà hiện mình để theo % hoặc resize động (để responsive) và #2 là các div mình cũng để % khá nhiều. Thế là sửa lại css, những chỗ nào cần cố định thì set cứng width/height vào để tránh việc layout bị thay đổi khi page load. - Update thêm đoạn này (lúc nãy quên): các file hình ảnh như logo, button, ... lúc trước đa số mình để to hơn display size thì giờ mình resize hết hình ảnh về = đúng với display size. Ví dụ: file logo ban đầu mình thiết kế có kích thước là 500x500 pixels nhưng hiển thị trên web chỉ có 300x300 thì giờ mình resize luôn file logo về 300x300 pixels. Và kết quả như đã thấy ở trên.