Giảm Total Blocking Time chuẩn Lighthouse
Total Blocking Time (TBT) là một trong các chỉ số quan trọng trong việc đo lường hiệu suất của trang web theo tiêu chuẩn Core Web Vitals của Google. Đây là chỉ số phản ánh thời gian người dùng cảm thấy trang web không phản hồi do các tác vụ dài trên main thread, ảnh hưởng trực tiếp đến trải nghiệm người dùng và khả năng tương tác của trang. Hiểu rõ TBT giúp các nhà phát triển tối ưu hóa website, nâng cao trải nghiệm, đồng thời cải thiện thứ hạng tìm kiếm trên Google.
Total Blocking Time (TBT) là gì?
Total Blocking Time (TBT) đo lường khoảng thời gian từ khi người dùng bắt đầu tương tác với trang cho đến khi trang có khả năng phản hồi thực sự. Cụ thể, TBT tính tổng thời gian của tất cả các tác vụ trên main thread kéo dài hơn 50ms trong quá trình tải trang. Khi một tác vụ vượt quá giới hạn này, nó gây ra hiện tượng "block" – làm cho trang không phản hồi các tương tác của người dùng một cách immediates.
TBT đóng vai trò là thước đo về độ mượt mà của trang web, ảnh hưởng lớn đến trải nghiệm người dùng. Một TBT thấp đồng nghĩa với việc trang web phản hồi nhanh, mượt mà; trong khi đó, TBT cao sẽ gây cảm giác chậm chạp, gây khó chịu và làm giảm khả năng giữ chân khách truy cập. Đặc biệt, TBT còn liên quan mật thiết đến các trải nghiệm như nhấp chuột, cuộn trang, hoặc nhập dữ liệu form, giúp website trở nên thân thiện và hiệu quả hơn trong mắt người dùng.
TBT liên quan gì đến Core Web Vitals?
Core Web Vitals gồm ba chỉ số chính: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), và Total Blocking Time (TBT). Trong bộ ba này, TBT đặc biệt phản ánh khả năng phản hồi của trang web sau khi tải xong phần nội dung chính. Trong các yếu tố ảnh hưởng của Core Web Vitals, TBT thể hiện rõ ràng khả năng của trang đáp ứng các tương tác của người dùng một cách mượt mà.
Chỉ số này không chỉ đơn thuần đo lường tốc độ tải trang mà còn phản ánh khả năng xử lý các tác vụ chạy đồng thời và tối ưu hóa hiệu suất của code. Các nhà phát triển cần quan tâm đến TBT để duy trì trải nghiệm người dùng tốt nhất, hạn chế tình trạng trang bị treo hoặc phản hồi chậm trong thời gian dài sau khi trang chính đã load xong. Do đó, TBT là một phần quan trọng trong chuẩn SEO, giúp website dễ dàng đạt điểm cao hơn trong các báo cáo của Lighthouse.
Nguyên nhân phổ biến khiến Total Blocking Time cao
Mặc dù TBT có thể phụ thuộc nhiều yếu tố kỹ thuật, nhưng có một số nguyên nhân chính dễ gây ra các tác vụ kéo dài làm tăng TBT. Hiểu rõ nguyên nhân này giúp các coder, marketer cũng như quản trị website có thể xác định và tối ưu đúng cách.
JavaScript nặng, bundle lớn, parse/execute lâu
Một trong những nguyên nhân phổ biến nhất gây ra TBT cao là script JavaScript nặng, quá lớn hoặc không tối ưu. Khi trình duyệt tải xuống, phân tích, và thực thi các tệp JavaScript, nó phải dành nhiều thời gian cho các bước này, đặc biệt nếu các script này được viết kém hoặc chứa nhiều thư viện không cần thiết.
Không những thế, bundle lớn cũng làm kéo dài quá trình parse và execute, khiến CPU phải làm việc quá tải. Điều này gây ra các tác vụ dài trên main thread, trực tiếp gây ra TBT cao, làm chậm hoặc làm treo trang web, ảnh hưởng đến khả năng phản hồi tương tác của người dùng.
Long tasks
Long tasks (các tác vụ kéo dài trên 50ms) là nguyên nhân rõ ràng của TBT cao. Đây là các hoạt động như xử lý dữ liệu, tải hình ảnh, hoặc chạy scripts phức tạp. Khi các tác vụ này không được chia nhỏ hoặc tối ưu, chúng chiếm dụng hết thời gian của main thread, làm giảm khả năng xử lý các tác vụ nhỏ, phản hồi nhanh các tương tác của người dùng.
Thực chất, long tasks khiến cho trình duyệt không thể xử lý các hành động của người dùng một cách mượt mà, tạo ra cảm giác lừ đừ, delay hoặc đứng hình. Các vòng lặp xử lý dữ liệu lớn, tải và xử lý ảnh kích thước lớn cũng đều góp phần vào nguyên nhân này.
Third-party scripts chạy quá nhiều
Các script từ bên thứ ba như widget quảng cáo, công cụ phân tích, chat widget hoặc các plugin mạng xã hội thường gây ra các tác vụ không dự đoán trước, đa phần không tối ưu hoặc chạy đồng thời liên tục. Quá nhiều third-party scripts làm gia tăng số lượng long tasks và gián đoạn quá trình xử lý của trang.
Chính vì vậy, các website có nhiều scripts của bên thứ ba thường gặp phải vấn đề TBT cao, đặc biệt khi các script này không tối ưu, không trì hoãn hoặc tải đồng bộ gây cản trở hiệu suất của trang.
Tác vụ main thread dày đặc
Khi trang web có quá nhiều tác vụ chạy đồng thời hoặc không được phân chia khoa học, main thread trở nên quá tải. Điều này dẫn đến thời gian các tác vụ chồng chất, đẩy thời gian phản hồi lên cao. Các hoạt động như xử lý sự kiện người dùng, cập nhật DOM, hoặc tải dữ liệu đều có thể gây ra hiện tượng này.
Điều quan trọng là phải tối ưu cách tổ chức code, chia nhỏ các tác vụ lớn, sử dụng các kỹ thuật trì hoãn hoặc phân đoạn xử lý để tránh tác vụ quá dày đặc gây ra TBT cao.
Thiếu chia nhỏ tác vụ, thiếu trì hoãn
Kỹ thuật chia nhỏ các tác vụ lớn thành nhiều phần nhỏ giúp giảm tải cho main thread, giúp các tác vụ diễn ra mượt mà hơn và giảm TBT. Nếu không áp dụng đúng, các tác vụ sẽ bị trì hoãn hoặc kéo dài, làm giảm khả năng phản hồi của trang.
Không chỉ chia nhỏ, việc trì hoãn các tác vụ không cần thiết hoặc xử lý không đồng bộ cũng giúp giảm áp lực cho main thread. Các kỹ thuật như requestIdleCallback, phân phối công việc theo từng bước sẽ nâng cao trải nghiệm và duy trì điểm số tốt trong các báo cáo Web Vitals.
CDN có giúp giảm Total Blocking Time không?
Content Delivery Network (CDN) chủ yếu được sử dụng để phân phối nội dung tĩnh như hình ảnh, CSS, JavaScript, giảm thiểu khoảng cách vật lý giữa server và người dùng. Trong một số trường hợp, CDN có thể giúp giảm TBT thông qua việc tối ưu hóa quá trình phân phối nội dung.
Tuy nhiên, điều này chỉ đúng khi CDN giúp giảm thời gian tải dữ liệu về trình duyệt, từ đó giảm thời gian parse và execute các script hoặc tải nội dung quá lớn. Các nội dung JavaScript nặng hoặc không tối ưu vẫn gây ra TBT cao dù có sử dụng CDN. Do đó, CDN có thể hỗ trợ phần nào, nhưng không thể thay thế những tối ưu về code và cách tổ chức tác vụ để giảm TBT chính.
Kết luận
Total Blocking Time (TBT) chính là chỉ số quan trọng phản ánh khả năng phản hồi, mượt mà của trang web sau khi tải xong nội dung chính. TBT cao thường do các tác vụ dài, xử lý JavaScript nặng, hoặc quá nhiều hoạt động đồng thời trên main thread gây ra. Để cải thiện TBT, người phát triển cần tối ưu code, chia nhỏ các tác vụ, loại bỏ các script không cần thiết và ứng dụng các kỹ thuật trì hoãn hợp lý.
Hiểu rõ nguyên nhân và chiến lược giảm TBT không chỉ giúp nâng cao trải nghiệm người dùng mà còn nâng cao giá trị SEO của website trong bảng xếp hạng của Google. Trong bối cảnh cạnh tranh ngày càng khốc liệt, việc duy trì chỉ số TBT thấp chính là chìa khóa thành công cho mọi trang web hiện đại.
