Total Blocking Time: Vai trò, tác động và cách tối ưu

Khách hàng truy cập vào website, nhìn thấy nút “Mua ngay” hoặc “Đăng ký tư vấn” nhưng khi bấm vào lại không có phản hồi gì trong vài giây đầu tiên. Họ nghĩ trang web bị lỗi và lập tức thoát ra để tìm đến đối thủ. Đó chính là kịch bản tồi tệ nhất mà bất kỳ người làm kinh doanh online nào cũng muốn tránh. Nguyên nhân sâu xa của vấn đề này thường nằm ở một chỉ số kỹ thuật mà nhiều người bỏ qua: Total Blocking Time (TBT).

Trong bối cảnh Google ngày càng siết chặt các tiêu chuẩn về Core Web Vitals để đánh giá thứ hạng SEO, việc website tải nhanh là chưa đủ. Website còn cần phải phản hồi tức thì với tương tác của người dùng. Tại Xuyên Việt Media, chúng tôi luôn nhấn mạnh với các đối tác rằng trải nghiệm mượt mà chính là chìa khóa của tỷ lệ chuyển đổi.

Bài viết này sẽ là tài liệu chuyên sâu giúp bạn hiểu rõ Total Blocking Time là gì, cơ chế hoạt động của nó và cung cấp lộ trình kỹ thuật cụ thể để tối ưu hóa chỉ số này, giúp website của bạn không chỉ thăng hạng trên Google mà còn giữ chân khách hàng hiệu quả.

Total Blocking Time là gì?

Total Blocking Time (Tổng thời gian ngăn chặn) là một chỉ số hiệu suất quan trọng trong bộ công cụ Lighthouse và PageSpeed Insights. Nó đo lường tổng thời gian mà trang web bị chặn không thể phản hồi lại các thao tác của người dùng (như click chuột, chạm màn hình hoặc gõ phím) trong quá trình tải trang.

Cụ thể hơn, TBT tính tổng thời gian của tất cả các Long Tasks (tác vụ dài) xảy ra trong khoảng thời gian giữa First Contentful Paint (FCP) và Time to Interactive (TTI).

Tại sao gọi là Blocking

Hãy tưởng tượng trình duyệt web (Main Thread) giống như một quầy thu ngân duy nhất tại siêu thị. Nếu quầy thu ngân đang bận xử lý một đơn hàng khổng lồ (tải và thực thi một đoạn JavaScript nặng), những khách hàng phía sau (các thao tác click của người dùng) buộc phải chờ đợi. Khoảng thời gian chờ đợi tích lũy đó chính là Total Blocking Time.

Theo Google Developers: “Total Blocking Time (TBT) là một chỉ số phòng thí nghiệm (Lab Metric) quan trọng để đánh giá khả năng phản hồi khi tải trang, vì nó giúp định lượng mức độ nghiêm trọng của việc trang không tương tác được trước khi nó trở nên hoàn toàn tương tác.”

Phân biệt TBT, FID và INP

Rất nhiều Marketer nhầm lẫn giữa các chỉ số đo lường độ trễ. Để tối ưu đúng, bạn cần phân biệt rõ:

• Total Blocking Time (TBT): Là chỉ số Lab Metric (đo trong môi trường giả lập). Nó dự đoán khả năng trang web bị đơ trước khi người dùng thực sự tương tác. Đây là chỉ số tốt nhất để debug và tối ưu hóa trước khi đưa website ra thực tế.
• First Input Delay (FID): Là chỉ số Field Metric (đo từ người dùng thực). Nó đo thời gian trễ trong lần tương tác đầu tiên. Tuy nhiên, FID hiện đã lỗi thời và không bắt trọn được toàn bộ vấn đề về độ trễ.
• Interaction to Next Paint (INP): Là chỉ số thay thế FID trong Core Web Vitals (chính thức từ tháng 3/2024). INP đo lường độ trễ của tất cả các tương tác trong suốt vòng đời của trang, không chỉ lần đầu tiên.

Mối liên hệ ở đây rất chặt chẽ: Cải thiện TBT trong phòng Lab thường sẽ dẫn đến cải thiện INP và FID trong thực tế.

Cơ chế tính toán Total Blocking Time

Để giải quyết vấn đề, chúng ta phải hiểu cách Google tính toán con số này. Mấu chốt nằm ở khái niệm Main Thread (Luồng chính) và Long Tasks (Tác vụ dài).

Quy tắc 50ms

Mọi tác vụ thực thi trên trình duyệt (phân tích HTML, thực thi CSS, chạy JavaScript) đều diễn ra trên Main Thread. Google quy định bất kỳ tác vụ nào kéo dài hơn 50 mili giây (ms) đều được coi là một Long Task.

Công thức tính TBT dựa trên phần thời gian vượt quá 50ms của mỗi tác vụ dài. Ví dụ:

• Tác vụ A mất 40ms -> Không tính (dưới 50ms).
• Tác vụ B mất 70ms -> Thời gian bị chặn là 20ms (70 – 50).
• Tác vụ C mất 120ms -> Thời gian bị chặn là 70ms (120 – 50).

Total Blocking Time = 20ms + 70ms = 90ms.

Nếu website của bạn có quá nhiều đoạn mã JavaScript nặng nề, Main Thread sẽ liên tục bị chiếm dụng bởi các Long Tasks, khiến TBT tăng cao vọt. Một website có điểm hiệu suất tốt cần duy trì TBT dưới 200ms.

Tác động của TBT đến SEO và Doanh thu

Tại sao một chủ doanh nghiệp cần quan tâm đến một chỉ số kỹ thuật khô khan như vậy? Câu trả lời nằm ở trải nghiệm người dùng và túi tiền của bạn.

1. Ảnh hưởng trực tiếp đến Ranking SEO

Total Blocking Time chiếm trọng số lên tới 30% trong tổng điểm hiệu suất của Lighthouse. Điều này có nghĩa là nếu TBT kém, điểm Performance tổng thể của bạn sẽ thấp, ảnh hưởng tiêu cực đến khả năng xếp hạng trên Google Search.

2. Tỷ lệ thoát trang và Chuyển đổi

Trong thương mại điện tử tại Việt Nam, sự kiên nhẫn của người dùng rất thấp. Hãy hình dung một khách hàng đang săn sale trên Shopee hay Tiki. Nếu họ bấm “Thêm vào giỏ” mà giao diện bị đơ trong 2 giây do TBT cao, cảm giác ức chế sẽ xuất hiện.

Theo nghiên cứu từ Deloitte, độ trễ tải trang chỉ cần cải thiện 0.1 giây có thể tăng tỷ lệ chuyển đổi lên đến 8.4% đối với các trang bán lẻ. Ngược lại, TBT cao đồng nghĩa với việc bạn đang từ chối phục vụ khách hàng ngay tại thời điểm họ muốn mua hàng nhất.

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

Dựa trên kinh nghiệm audit hàng trăm website tại Xuyên Việt Media, chúng tôi nhận thấy các “thủ phạm” chính gây ra tình trạng TBT cao thường bao gồm:

1. Thực thi JavaScript quá mức

Đây là nguyên nhân phổ biến nhất. Các website hiện đại lạm dụng JavaScript để tạo hiệu ứng, render nội dung, khiến trình duyệt phải tốn quá nhiều sức lực để xử lý code trước khi cho phép người dùng tương tác.

2. Code của bên thứ ba

Các công cụ Marketing mà bạn cài cắm vào website như: Facebook Pixel, Google Analytics, Live Chat (Zalo, Messenger), các pop-up quảng cáo… Mỗi đoạn script này đều chiếm dụng Main Thread. Nếu không được kiểm soát, chúng sẽ tạo ra hàng loạt Long Tasks.

3. Hydration trong các Framework hiện đại

Với các website sử dụng React, Vue hay Angular (CSR hoặc SSR), quá trình “Hydration” (biến trang web tĩnh thành trang web động có thể tương tác) thường tốn nhiều tài nguyên xử lý, gây ra TBT cao ở giai đoạn đầu khi tải trang.

7 Cách tối ưu Total Blocking Time hiệu quả nhất

Dưới đây là các giải pháp kỹ thuật từ cơ bản đến nâng cao để xử lý triệt để vấn đề TBT. Lưu ý, bạn có thể cần sự hỗ trợ của đội ngũ lập trình viên để thực hiện các thay đổi này.

1. Chia nhỏ các Long Tasks

Thay vì bắt trình duyệt nuốt trôi một cục code JavaScript khổng lồ, hãy chia nhỏ chúng thành các đoạn code (chunks) nhỏ hơn.

Về mặt kỹ thuật, hãy đảm bảo không có hàm (function) nào chạy quá 50ms. Bạn có thể sử dụng `setTimeout` hoặc `requestIdleCallback` để chia nhỏ các tác vụ, nhường Main Thread lại cho các tương tác ưu tiên của người dùng.

2. Trì hoãn JavaScript không quan trọng

Không phải đoạn script nào cũng cần chạy ngay khi trang vừa tải. Hãy rà soát lại toàn bộ mã nguồn:

• Sử dụng thuộc tính `defer` hoặc `async` cho các thẻ script để chúng không chặn quá trình phân tích HTML.
• Với các thành phần nằm dưới màn hình (below the fold) hoặc các tính năng phụ (ví dụ: phần bình luận, widget bài viết liên quan), hãy chỉ tải JavaScript của chúng khi người dùng cuộn tới.

3. Tối ưu hóa mã bên thứ ba

Đây là vấn đề nhức nhối của các trang tin tức và thương mại điện tử. Giải pháp bao gồm:

• Tải chậm (Lazy load) các mã bên thứ ba. Ví dụ: Chỉ tải khung chat Zalo/Messenger khi người dùng di chuột hoặc sau khi trang đã tải xong 5 giây.
• Sử dụng Google Tag Manager để quản lý việc kích hoạt các thẻ (tag) một cách thông minh, tránh kích hoạt đồng loạt ngay khi vào trang.

4. Sử dụng Web Workers

Web Workers cho phép bạn chạy JavaScript trên một luồng nền (background thread), tách biệt hoàn toàn với Main Thread. Điều này cực kỳ hiệu quả với các tác vụ tính toán nặng mà không liên quan trực tiếp đến giao diện người dùng (UI).

“Web Workers là giải pháp mạnh mẽ để giảm tải cho Main Thread, giúp giữ cho giao diện luôn mượt mà ngay cả khi ứng dụng đang xử lý dữ liệu phức tạp.” – Tài liệu MDN Web Docs.

5. Giảm thiểu và nén Code

Sử dụng các công cụ như Terser, Webpack để loại bỏ các khoảng trắng, ghi chú và rút gọn tên biến trong file JavaScript. Đồng thời, bật nén Gzip hoặc Brotli trên máy chủ để giảm dung lượng file cần tải về, từ đó giảm thời gian phân tích code.

6. Tối ưu CSS để giảm tải cho Main Thread

Dù TBT chủ yếu do JavaScript, nhưng CSS nặng cũng góp phần làm chậm quá trình render. Hãy loại bỏ CSS không dùng đến (Unused CSS) và trích xuất Critical CSS (CSS quan trọng cho màn hình đầu tiên) để nội dung hiển thị nhanh nhất có thể.

7. Sử dụng kiến trúc Island

Đối với các website sử dụng công nghệ mới, việc áp dụng kiến trúc Island (như trong Astro Framework) giúp giảm đáng kể lượng JavaScript gửi về trình duyệt. Cơ chế này chỉ hydrate những thành phần tương tác cụ thể (như nút bấm, thanh search) thay vì toàn bộ trang web, giúp TBT gần như bằng 0.

Công cụ đo lường và kiểm tra TBT

Để biết chiến lược tối ưu có hiệu quả hay không, bạn cần theo dõi sát sao qua các công cụ:

• PageSpeed Insights: Công cụ chính thống của Google cung cấp cả dữ liệu Lab (TBT) và Field (INP/FID). Nó cũng chỉ rõ file script nào đang gây ra Long Tasks.
• Chrome DevTools (Tab Performance): Dành cho Developer muốn soi chi tiết từng mili giây hoạt động của Main Thread. Bạn có thể nhìn thấy biểu đồ dạng thác nước (waterfall) để phát hiện đoạn code nào đang chạy quá lâu.
• Lighthouse trong Chrome: Chạy audit trực tiếp ngay trên trình duyệt của bạn để kiểm tra nhanh.

Xuyên Việt Media và giải pháp Content Performance

Tại Xuyên Việt Media, chúng tôi hiểu rằng một bài Content hay là chưa đủ. Nội dung chất lượng phải được đặt trên một nền tảng kỹ thuật tối ưu. Khi triển khai dịch vụ SEO tổng thể hay PR báo chí, chúng tôi luôn tư vấn cho khách hàng về việc cân bằng giữa tính thẩm mỹ, chức năng Marketing và hiệu suất kỹ thuật.

Việc tối ưu Total Blocking Time không chỉ là công việc của đội ngũ IT mà cần tư duy của cả người làm Marketing: Quyết định xem tính năng nào thực sự cần thiết, script nào nên giữ và script nào nên loại bỏ để hy sinh cho tốc độ.

Kết luận

Total Blocking Time là kẻ thù thầm lặng giết chết trải nghiệm người dùng ngay cả khi website của bạn trông có vẻ đã tải xong. Bằng cách tập trung giải phóng Main Thread, quản lý chặt chẽ JavaScript và mã bên thứ ba, bạn sẽ tạo ra một website không chỉ nhanh về tốc độ hiển thị mà còn mượt mà trong từng cú click.

Đừng để khách hàng phải chờ đợi. Hãy bắt đầu kiểm tra chỉ số TBT của bạn ngay hôm nay trên PageSpeed Insights và áp dụng 7 chiến lược trên để cải thiện thứ hạng SEO bền vững.