Total Blocking Time (TBT) là gì? Cách tối ưu cho INP & SEO

Bạn đã bao giờ kiểm tra tốc độ website và thấy một chỉ số màu cam hoặc đỏ chói mang tên Total Blocking Time (TBT) nhưng không rõ nó là gì? Bạn không hề đơn độc. Đây là một “kẻ ngáng đường” thầm lặng, khiến trang web của bạn có cảm giác chậm chạp, ì ạch dù các yếu tố khác đã tối ưu. Việt Thắng hiểu rõ sự bối rối này, và trong bài viết hôm nay, chúng tôi sẽ cùng bạn tìm hiểu tường tận về Total Blocking Time (TBT) là gì và cách “thuần hóa” nó để mang lại trải nghiệm mượt mà cho người dùng và ghi điểm SEO.

Total Blocking Time (TBT) là gì?

Hãy tưởng tượng bạn đang ở trong một quán cà phê. Bạn đã sẵn sàng gọi món, nhưng người phục vụ (trình duyệt) lại đang bận rộn xử lý một đơn hàng cực kỳ phức tạp (thực thi một đoạn code lớn) và không thể tiếp nhận yêu cầu của bạn. TBT chính là tổng thời gian bạn phải đứng chờ trong tình trạng “đóng băng” đó. Nó đo lường mức độ không phản hồi của một trang trước khi người dùng có thể tương tác thực sự.

Định nghĩa TBT

Một cách kỹ thuật hơn, Total Blocking Time là một chỉ số hiệu suất trong môi trường “phòng thí nghiệm” (lab data), được đo bởi các công cụ như Google Lighthouse. Nó tính tổng thời gian mà luồng chính (main-thread) của trình duyệt bị chặn, không thể đáp ứng các tương tác của người dùng như nhấp chuột, cuộn trang, hay nhập liệu. Khoảng thời gian này xảy ra giữa hai mốc quan trọng: First Contentful Paint (FCP) và Time to Interactive (TTI).

Hiểu rõ về “Long Tasks” (>50ms)

Để hiểu cách tính TBT, chúng ta cần làm quen với khái niệm Long Tasks. Trình duyệt xử lý mọi thứ trên một luồng chính duy nhất. Bất kỳ tác vụ nào chiếm dụng luồng chính này quá 50 mili giây (ms) đều được coi là một “Long Task”.

Tại sao lại là 50ms? Vì đó là ngưỡng mà người dùng bắt đầu cảm nhận được sự chậm trễ. Trình duyệt cần phải phản hồi tương tác trong vòng 100ms để tạo cảm giác tức thì. Việc xử lý một tác vụ dài hơn 50ms sẽ khiến trình duyệt không đủ thời gian để làm việc đó.

Phần thời gian của một Long Task vượt quá 50ms được gọi là “thời gian chặn” (blocking time). TBT chính là tổng của tất cả các “thời gian chặn” này.

Ví dụ đơn giản:

• Trang của bạn có 2 Long Tasks.
• Task 1: Kéo dài 120ms. Thời gian chặn là 120ms – 50ms = 70ms.
• Task 2: Kéo dài 80ms. Thời gian chặn là 80ms – 50ms = 30ms.
• Vậy, Total Blocking Time của trang là: 70ms + 30ms = 100ms.

Tại sao TBT là chỉ số quan trọng đối với SEO & Trải nghiệm người dùng?

TBT không chỉ là một con số kỹ thuật khô khan. Nó là thước đo trực tiếp cho sự thất vọng của người dùng. Một chỉ số TBT cao đồng nghĩa với việc website của bạn đang tạo ra những rào cản vô hình, ảnh hưởng tiêu cực đến cả trải nghiệm người dùng lẫn thứ hạng SEO.

TBT ảnh hưởng đến chỉ số nào trong Core Web Vitals?

Mặc dù TBT không phải là một chỉ số Core Web Vitals, nó lại là “người bạn đồng hành” và là chỉ số chẩn đoán quan trọng cho một trong số đó. Cụ thể, TBT có mối liên hệ mật thiết với khả năng phản hồi tương tác của trang, vốn được đo lường bởi các chỉ số Core Web Vitals.

Mối quan hệ mật thiết giữa TBT, FID và INP (Interaction to Next Paint)

Trước đây, TBT là công cụ chẩn đoán chính cho First Input Delay (FID) – một chỉ số Core Web Vitals cũ. Một TBT cao thường dẫn đến FID kém.

Từ tháng 3 năm 2024, Google đã thay thế FID bằng một chỉ số toàn diện hơn: Interaction to Next Paint (INP). INP đo lường độ trễ của tất cả các tương tác trên trang, không chỉ tương tác đầu tiên. Mối quan hệ giữa TBT và INP thậm chí còn chặt chẽ hơn. TBT cao là một dấu hiệu cảnh báo sớm cho thấy trang của bạn có khả năng phản hồi chậm với mọi tương tác, dẫn đến điểm INP thấp. Cải thiện Total Blocking Time chính là bước đi vững chắc nhất để tối ưu chỉ số INP.

Tác động của điểm TBT cao đến thứ hạng website của bạn

Google luôn ưu tiên những website mang lại trải nghiệm tốt nhất cho người dùng. Một trang web có TBT cao sẽ khiến người dùng cảm thấy bực bội. Họ có thể rời đi ngay lập tức, làm tăng tỷ lệ thoát (bounce rate). Những tín hiệu tiêu cực này cho Google thấy rằng trang của bạn không đáp ứng được mong đợi của người dùng. Về lâu dài, điều này chắc chắn sẽ ảnh hưởng xấu đến thứ hạng từ khóa của bạn.

Đánh giá chỉ số TBT: Bao nhiêu là tốt?

Sau khi hiểu tầm quan trọng của TBT, câu hỏi tiếp theo là: “Làm sao để biết điểm số của mình đang ở mức nào?”. Rất may, Google đã cung cấp các ngưỡng đánh giá rất rõ ràng, giúp bạn dễ dàng xác định tình trạng website của mình.

Các ngưỡng điểm TBT theo khuyến nghị của Google Lighthouse

Khi bạn sử dụng các công cụ như PageSpeed Insights, kết quả TBT sẽ được phân loại theo hệ thống màu sắc quen thuộc. Các ngưỡng này được xác định như sau:

Điểm số	Đánh giá	Màu sắc
Dưới 200 ms	Tốt	Xanh lá
Từ 200 ms đến 600 ms	Cần cải thiện	Cam
Trên 600 ms	Kém	Đỏ

Cách đọc và hiểu kết quả: Tốt (Xanh), Cần cải thiện (Cam), Kém (Đỏ)

• Xanh (Tốt): Xin chúc mừng! Luồng chính của bạn khá “thông thoáng”. Người dùng có thể tương tác với trang một cách mượt mà gần như ngay lập tức.
• Cam (Cần cải thiện): Website của bạn có dấu hiệu chậm chạp. Người dùng có thể cảm nhận được độ trễ khi nhấp vào một nút bấm hoặc menu. Đây là lúc bạn cần bắt đầu hành động.
• Đỏ (Kém): Đây là mức báo động. Trang của bạn bị “đóng băng” trong một khoảng thời gian đáng kể. Trải nghiệm người dùng đang bị ảnh hưởng nghiêm trọng và cần được ưu tiên khắc phục ngay lập tức.

Nguyên nhân phổ biến khiến chỉ số Total Blocking Time cao

Để giải quyết vấn đề, trước tiên chúng ta phải xác định được gốc rễ của nó. Điểm TBT cao thường không xuất phát từ một nguyên nhân duy nhất, mà là sự cộng hưởng của nhiều yếu tố. Dưới đây là những “thủ phạm” phổ biến nhất mà Việt Thắng thường gặp trong quá trình tối ưu website cho khách hàng.

JavaScript nặng và thời gian thực thi kéo dài

Đây là nguyên nhân số một. Các file JavaScript phức tạp, không được tối ưu cần rất nhiều thời gian để trình duyệt tải, phân tích cú pháp và thực thi. Mỗi mili giây mà trình duyệt dành cho JavaScript là mỗi mili giây nó không thể làm việc khác, bao gồm cả việc phản hồi bạn. Các framework JavaScript hiện đại cũng có thể góp phần vào vấn đề này nếu không được cấu hình đúng cách.

Script của bên thứ ba (Third-party scripts) làm tắc nghẽn luồng chính

Các đoạn mã từ bên thứ ba như tracking (Google Analytics, Facebook Pixel), quảng cáo, A/B testing, hay các widget chat… là những con dao hai lưỡi. Chúng mang lại nhiều chức năng hữu ích nhưng cũng có thể là nguyên nhân gây ra các Long Tasks. Bạn không thể kiểm soát được mã nguồn của chúng, và nếu chúng được viết không tốt, chúng sẽ “chiếm dụng” luồng chính và làm tăng TBT của bạn.

Luồng chính (Main-thread) bị quá tải với các tác vụ phức tạp

Luồng chính của trình duyệt không chỉ xử lý JavaScript. Nó còn phải thực hiện các công việc khác như phân tích HTML, xây dựng cây DOM, tính toán style và layout (reflow/repaint). Nếu tất cả các công việc này diễn ra dồn dập cùng lúc, luồng chính sẽ bị quá tải, dẫn đến hiện tượng “tắc nghẽn” và làm tăng vọt chỉ số TBT.

CSS không được tối ưu (Render-blocking CSS)

Mặc dù JavaScript là thủ phạm chính, CSS cũng có thể gián tiếp gây ra vấn đề. Các file CSS lớn, phức tạp hoặc được gọi theo cách chặn hiển thị (render-blocking) có thể buộc trình duyệt phải tính toán lại style cho toàn bộ trang. Quá trình này có thể trở thành một tác vụ dài, làm tăng TBT.

Hướng dẫn cách đo lường Total Blocking Time chính xác

Biết được nguyên nhân là một chuyện, nhưng xác định chính xác điểm số TBT của trang bạn lại là chuyện khác. Rất may, có nhiều công cụ miễn phí và mạnh mẽ giúp bạn thực hiện việc này. Việt Thắng khuyên bạn nên sử dụng kết hợp các công cụ sau để có cái nhìn toàn diện nhất.

Kiểm tra nhanh với Google PageSpeed Insights

Đây là công cụ phổ biến và dễ tiếp cận nhất. Bạn chỉ cần dán URL website của mình vào và chạy phân tích. Trong báo cáo hiệu suất, bạn sẽ thấy ngay chỉ số TBT cùng với màu sắc đánh giá. Công cụ này rất tuyệt vời để có một cái nhìn tổng quan nhanh chóng.

Phân tích chuyên sâu với Lighthouse trong Chrome DevTools

Để có một báo cáo chi tiết hơn, bạn có thể sử dụng Lighthouse ngay trong trình duyệt Chrome. Hãy mở trang web của bạn, nhấn F12 để mở DevTools, chuyển đến tab “Lighthouse” và chạy một bài kiểm tra “Performance”. Báo cáo sẽ không chỉ cho bạn biết điểm TBT, mà còn chỉ ra chính xác những Long Tasks nào đang gây ra vấn đề.

Sử dụng GTmetrix để theo dõi và so sánh

GTmetrix là một công cụ phân tích hiệu suất mạnh mẽ khác. Nó cũng sử dụng Lighthouse để thu thập dữ liệu và trình bày báo cáo một cách trực quan. Một tính năng hữu ích của GTmetrix là khả năng theo dõi hiệu suất theo thời gian và so sánh kết quả sau khi bạn thực hiện các thay đổi, giúp bạn đánh giá hiệu quả của việc tối ưu hóa.

Làm thế nào để giảm Total Blocking Time? Hướng dẫn tối ưu chi tiết

Đây chính là phần quan trọng nhất: hành động. Dựa trên các nguyên nhân đã xác định, Việt Thắng sẽ hướng dẫn bạn các kỹ thuật hiệu quả nhất để cải thiện Total Blocking Time. Hãy coi đây là một checklist để “dọn dẹp” và tăng tốc cho website của bạn.

Tối ưu JavaScript: Minify, Defer, và Async

Vì JavaScript là nguyên nhân chính, chúng ta sẽ bắt đầu từ đây.

• Minify (Rút gọn): Loại bỏ tất cả các ký tự không cần thiết (khoảng trắng, dấu xuống dòng, ghi chú) khỏi file JavaScript. Việc này giúp giảm kích thước file và tăng tốc độ tải.
• Defer: Thêm thuộc tính defer vào thẻ <script>. Nó yêu cầu trình duyệt tải file script song song với việc phân tích HTML, nhưng chỉ thực thi sau khi HTML đã được phân tích xong. Kỹ thuật này rất hữu ích cho các script không cần thiết cho lần hiển thị đầu tiên.
• Async: Thuộc tính async cũng cho phép tải script song song. Tuy nhiên, nó sẽ thực thi ngay khi tải xong, có thể làm gián đoạn việc phân tích HTML. Hãy sử dụng nó cho các script độc lập như mã quảng cáo hoặc phân tích.

<!-- Tải và thực thi sau khi phân tích HTML xong --><script src="my-script.js" defer></script><!-- Tải song song và thực thi ngay khi có thể --><script src="ads.js" async></script>

Tối ưu hóa luồng chính (Main-thread Optimization)

Mục tiêu ở đây là chia nhỏ các Long Tasks thành các tác vụ nhỏ hơn, mỗi tác vụ dưới 50ms. Thay vì bắt trình duyệt thực hiện một công việc khổng lồ trong một lần, hãy chia nó thành nhiều phần nhỏ. Kỹ thuật này cho phép trình duyệt có những “khoảng nghỉ” để xử lý các tương tác của người dùng. Việc này đòi hỏi kiến thức về lập trình JavaScript nâng cao, thường sử dụng các API như requestIdleCallback.

Giảm tác động của code từ bên thứ ba một cách thông minh

Hãy tự hỏi: “Mình có thực sự cần tất cả các script này không?”. Thực hiện một cuộc kiểm tra toàn diện các script của bên thứ ba đang chạy trên trang.

• Loại bỏ những script không còn cần thiết.
• Tải có điều kiện: Chỉ tải script chat khi người dùng thực sự nhấp vào nút chat, thay vì tải nó trên mọi trang.
• Sử dụng trình quản lý thẻ như Google Tag Manager để kiểm soát việc tải và kích hoạt các thẻ một cách hiệu quả hơn.

Áp dụng kỹ thuật chia nhỏ code (Code Splitting)

Thay vì đóng gói tất cả JavaScript của bạn vào một file “bundle.js” khổng lồ, hãy chia nó thành nhiều phần nhỏ hơn. Sau đó, chỉ tải đoạn code cần thiết cho trang hiện tại. Ví dụ, code cho trang thanh toán không cần phải được tải ở trang chủ. Các công cụ xây dựng hiện đại như Webpack hay Vite đều hỗ trợ Code Splitting rất tốt.

Tối ưu hóa việc tải và hiển thị CSS

Đối với CSS, hãy xác định các style quan trọng cần thiết để hiển thị phần đầu trang (above-the-fold) và nhúng chúng trực tiếp vào trong thẻ <style> trong file HTML của bạn. Phần CSS còn lại có thể được tải bất đồng bộ bằng cách sử dụng các kỹ thuật như thuộc tính media="print" và onload. Điều này giúp trình duyệt hiển thị nội dung chính nhanh hơn mà không bị chặn bởi việc tải file CSS lớn.

Câu hỏi thường gặp về Total Blocking Time (FAQs)

Trong quá trình tư vấn cho khách hàng, Việt Thắng nhận được rất nhiều câu hỏi về TBT. Dưới đây là những câu hỏi phổ biến nhất và câu trả lời ngắn gọn, dễ hiểu từ đội ngũ chuyên gia của chúng tôi.

Lời kết

Total Blocking Time không chỉ là một thuật ngữ kỹ thuật dành cho lập trình viên. Nó là một chỉ số cốt lõi phản ánh sự tôn trọng của bạn đối với thời gian và trải nghiệm của người dùng. Một website có TBT thấp là một website phản hồi nhanh, mượt mà và khiến người dùng muốn ở lại lâu hơn. Đây chính là nền tảng cho sự thành công trên môi trường trực tuyến.

Để giúp bạn dễ dàng ghi nhớ, đây là những việc cần làm ngay:

• Kiểm tra JavaScript: Rút gọn, trì hoãn (defer) và tải bất đồng bộ (async) các file script.
• Audit code bên thứ ba: Gỡ bỏ những script không cần thiết và tối ưu cách tải chúng.
• Chia nhỏ code: Chỉ tải những đoạn code cần thiết cho trang hiện tại.
• Giải phóng luồng chính: Phá vỡ các tác vụ lớn thành nhiều tác vụ nhỏ hơn.
• Tối ưu CSS: Ưu tiên tải các CSS quan trọng và tải bất đồng bộ phần còn lại.

Việc tối ưu hiệu suất website, đặc biệt là các chỉ số như TBT hay INP, có thể khá phức tạp và tốn nhiều thời gian. Nếu bạn cảm thấy quá tải hoặc muốn có một giải pháp chuyên nghiệp, đội ngũ của Việt Thắng luôn sẵn sàng hỗ trợ. Chúng tôi không chỉ xây dựng website, chúng tôi tạo ra những trải nghiệm số mượt mà và hiệu quả.

Bạn thấy phần tối ưu nào là khó thực hiện nhất trên website của mình? Hãy chia sẻ với Việt Thắng trong phần bình luận bên dưới nhé!