Tác giả: Bùi Mạnh Đức 
0 
41 
Copy Link
Bookmark
Total Blocking Time (TBT) là gì? Hướng dẫn tối ưu cho người mới bắt đầu.
Giới thiệu
Tốc độ tải trang không chỉ là một yếu tố kỹ thuật, mà còn là nền tảng của trải nghiệm người dùng và là một tín hiệu quan trọng cho SEO. Bạn đã bao giờ truy cập một trang web và cảm thấy khó chịu vì trang bị “đơ”, không thể nhấp chuột hay cuộn trang ngay lập tức chưa? Thủ phạm đằng sau sự chậm trễ này thường là chỉ số Total Blocking Time (TBT) cao. Khi TBT tăng, trình duyệt web bị “chặn” và không thể phản hồi tương tác của người dùng, dẫn đến sự thất vọng và tỷ lệ thoát trang cao. Để giải quyết vấn đề này, việc hiểu rõ TBT và cách tối ưu hóa nó là vô cùng cần thiết. Bài viết này sẽ đi sâu vào định nghĩa, cách đo lường, ảnh hưởng và các phương pháp tối ưu TBT hiệu quả, giúp bạn nâng cao hiệu suất website một cách toàn diện.
Định nghĩa Total Blocking Time (TBT) trong tối ưu hóa hiệu suất web
Tổng quan về Total Blocking Time
Total Blocking Time (TBT) là một trong những chỉ số cốt lõi của Core Web Vitals, được Google sử dụng để đo lường khả năng phản hồi của một trang web. Cụ thể, TBT tính tổng thời gian mà trang bị “chặn” (blocked), khiến người dùng không thể tương tác với nội dung. Khoảng thời gian này xảy ra giữa hai mốc quan trọng: First Contentful Paint (FCP) – khi nội dung đầu tiên xuất hiện, và Time to Interactive (TTI) – khi trang đã sẵn sàng để tương tác. Về cơ bản, TBT đo lường khoảng thời gian mà luồng chính (main thread) của trình duyệt bận rộn xử lý các tác vụ dài (long tasks) đến mức không thể đáp ứng ngay lập tức các hành động của người dùng như nhấp chuột, cuộn trang hay nhập liệu. Một chỉ số TBT thấp cho thấy trang web của bạn phản hồi nhanh chóng và mượt mà.
Tầm quan trọng của TBT trong trải nghiệm người dùng
TBT có ảnh hưởng trực tiếp đến cảm nhận của người dùng về tốc độ và sự mượt mà của trang web. Khi một người dùng nhấp vào một nút bấm hoặc một liên kết, họ mong đợi một phản hồi ngay lập tức. Nếu luồng chính đang bận xử lý các tác vụ JavaScript nặng, trình duyệt sẽ không thể thực hiện yêu cầu đó, tạo ra một độ trễ đáng kể. Sự chậm trễ này làm cho trang web có vẻ “giật lag” và thiếu chuyên nghiệp.
Vì vậy, TBT là một thước đo quan trọng về khả năng tương tác của trang. Khác với First Contentful Paint (FCP) đo thời gian hiển thị nội dung đầu tiên hay Largest Contentful Paint (LCP) đo thời gian tải nội dung lớn nhất, TBT tập trung vào khả năng phản hồi. Trong khi đó, Cumulative Layout Shift (CLS) đo lường sự ổn định về mặt hình ảnh. TBT chính là mảnh ghép quan trọng giúp hoàn thiện bức tranh về trải nghiệm người dùng trên trang.
Cách đo lường và ý nghĩa của TBT đối với trải nghiệm người dùng
Các phương pháp và công cụ đo TBT phổ biến
Để cải thiện TBT, trước hết bạn cần biết cách đo lường nó. May mắn là có rất nhiều công cụ mạnh mẽ và miễn phí giúp bạn thực hiện việc này. Các công cụ phổ biến nhất bao gồm Google PageSpeed Insights, Lighthouse (tích hợp trong Chrome DevTools), và WebPageTest. Khi sử dụng PageSpeed Insights, bạn chỉ cần nhập URL của trang web và công cụ sẽ trả về một báo cáo chi tiết, trong đó có chỉ số TBT.
Lighthouse trong Chrome DevTools cho phép bạn phân tích hiệu suất ngay trên trình duyệt của mình, cung cấp cái nhìn sâu sắc về các tác vụ đang làm chậm trang. WebPageTest là một công cụ nâng cao hơn, cho phép tùy chỉnh nhiều thông số kiểm tra như vị trí địa lý, loại kết nối mạng để có kết quả chính xác nhất. Khi đọc kết quả, hãy chú ý đến con số TBT: dưới 200ms được coi là tốt, từ 200ms đến 600ms cần cải thiện, và trên 600ms là kém.
Ý nghĩa của TBT trong việc tối ưu trải nghiệm người dùng
Chỉ số TBT không chỉ là một con số kỹ thuật khô khan; nó phản ánh trực tiếp sự hài lòng của người dùng. Một TBT cao là nguyên nhân chính gây ra hiện tượng giật lag và chậm tương tác, khiến người dùng cảm thấy trang web của bạn không đáng tin cậy. Hãy tưởng tượng bạn đang cố gắng thêm một sản phẩm vào giỏ hàng nhưng nút “Thêm vào giỏ” không hoạt động trong vài giây. Trải nghiệm khó chịu này có thể khiến bạn từ bỏ việc mua hàng và tìm đến một đối thủ cạnh tranh. Có một mối liên hệ chặt chẽ giữa TBT cao, tỷ lệ thoát trang (bounce rate) tăng và tỷ lệ chuyển đổi giảm. Bằng cách tối ưu hóa TBT, bạn đang trực tiếp cải thiện hành trình của khách hàng trên trang, giúp họ tương tác một cách liền mạch và dễ dàng. Điều này không chỉ giữ chân người dùng ở lại lâu hơn mà còn xây dựng lòng tin và thúc đẩy họ thực hiện các hành động quan trọng như đăng ký, liên hệ hoặc mua hàng.
Ảnh hưởng của JavaScript và các tác vụ trên luồng chính đến TBT
Vai trò của JavaScript trong tăng TBT
JavaScript là ngôn ngữ lập trình mạnh mẽ giúp tạo ra các trang web động và tương tác, nhưng nó cũng là nguyên nhân hàng đầu gây ra TBT cao. Khi trình duyệt tải một trang web, nó sử dụng một luồng xử lý duy nhất gọi là “luồng chính” (main thread) để thực hiện hầu hết các công việc, bao gồm phân tích HTML, xây dựng cây DOM, áp dụng CSS và thực thi JavaScript.
Nếu có các tệp JavaScript lớn hoặc các đoạn mã được viết không hiệu quả, chúng sẽ chiếm dụng luồng chính trong một thời gian dài. Những tác vụ kéo dài này (long tasks) – được định nghĩa là bất kỳ tác vụ nào mất hơn 50ms để hoàn thành – sẽ “chặn” luồng chính, ngăn cản trình duyệt phản hồi các tương tác của người dùng. Các loại tác vụ phổ biến gây ra sự chậm trễ này bao gồm việc phân tích (parsing) và biên dịch mã JavaScript, thực thi các script phức tạp, và các hoạt động cập nhật giao diện người dùng (re-painting) do JavaScript điều khiển.
Cách xác định và xử lý các tác vụ trên luồng chính
Để giảm TBT, bạn cần xác định chính xác những tác vụ nào đang chiếm dụng luồng chính. Công cụ Performance Panel trong Chrome DevTools là trợ thủ đắc lực cho việc này. Bằng cách ghi lại quá trình tải trang, bạn có thể thấy một biểu đồ chi tiết về tất cả các hoạt động trên luồng chính. Các tác vụ dài sẽ được đánh dấu bằng một hình tam giác nhỏ màu đỏ, giúp bạn dễ dàng nhận diện.
Khi đã xác định được thủ phạm, có một số giải pháp hiệu quả bạn có thể áp dụng. Phổ biến nhất là chia nhỏ các tệp JavaScript lớn thành nhiều tệp nhỏ hơn (code splitting) và chỉ tải những đoạn mã cần thiết cho trang hiện tại. Bạn cũng có thể trì hoãn việc tải các script không quan trọng bằng cách sử dụng thuộc tính defer hoặc async. Kỹ thuật defer đảm bảo script được thực thi sau khi HTML đã được phân tích xong, trong khi async cho phép script tải song song nhưng sẽ thực thi ngay khi tải xong, có thể làm gián đoạn quá trình render. Lựa chọn đúng kỹ thuật sẽ giúp giải phóng luồng chính và cải thiện đáng kể TBT.
Các phương pháp giảm Total Blocking Time để nâng cao tốc độ tải trang
Tối ưu hóa và phân bổ lại tài nguyên JavaScript
Cách hiệu quả nhất để giảm TBT là tối ưu hóa việc sử dụng JavaScript. Ba kỹ thuật chính bạn nên áp dụng là code splitting, lazy loading, và sử dụng defer/async. Code splitting là quá trình chia nhỏ tệp JavaScript khổng lồ của bạn thành các “mảnh” nhỏ hơn. Bằng cách này, trình duyệt chỉ cần tải những đoạn mã cần thiết cho trang đầu tiên, và tải các phần còn lại khi người dùng điều hướng đến các trang khác hoặc thực hiện các hành động cụ thể.
Lazy loading (tải lười) cũng là một chiến lược thông minh. Thay vì tải tất cả các module JavaScript ngay từ đầu, bạn có thể trì hoãn việc tải các module không cần thiết cho đến khi người dùng cuộn đến phần đó của trang. Cuối cùng, hãy luôn sử dụng thuộc tính defer hoặc async cho các tệp script của bạn. defer yêu cầu trình duyệt tải script song song với việc phân tích HTML và chỉ thực thi nó sau khi trang đã được phân tích xong, đây là lựa chọn an toàn nhất để tránh chặn hiển thị. Về kỹ thuật tải tài nguyên và thực thi script, bạn có thể tìm hiểu thêm trong bài viết Seo Onpage là gì.
Giảm thiểu và tối ưu hóa các tác vụ trên luồng chính
Ngoài JavaScript, các yếu tố khác cũng có thể gây áp lực lên luồng chính. Do đó, việc tối ưu hóa toàn diện là rất quan trọng. Đầu tiên, hãy tránh các tác vụ nặng, kéo dài trên luồng chính. Ví dụ, thay vì thực hiện một vòng lặp phức tạp để xử lý một lượng lớn dữ liệu ngay lập-tức, hãy xem xét chia nó thành các tác vụ nhỏ hơn và thực hiện chúng tuần tự bằng cách sử dụng requestAnimationFrame hoặc các kỹ thuật tương tự. Thứ hai, tối ưu hóa CSS cũng góp phần giảm TBT. Các đoạn mã CSS phức tạp hoặc các bộ chọn (selector) không hiệu quả có thể buộc trình duyệt phải tính toán lại kiểu dáng (style recalculation) trong thời gian dài. Hãy giữ cho CSS của bạn đơn giản và gọn gàng. Cuối cùng, giảm thiểu các tài nguyên chặn hiển thị (render-blocking resources). Đây là các tệp CSS và JavaScript phải được tải và xử lý trước khi trình duyệt có thể hiển thị bất kỳ nội dung nào của trang. Hãy đặt các tệp CSS quan trọng vào thẻ <head> và sử dụng defer cho các tệp JavaScript để tối ưu hóa quá trình này. Cách tối ưu hiệu suất toàn diện có thể tìm hiểu thêm trong bài Quy trình SEO.
Tầm quan trọng của TBT trong SEO và tối ưu hóa tốc độ trang web
Mối quan hệ giữa TBT và các yếu tố xếp hạng Google Core Web Vitals
Total Blocking Time không phải là một chỉ số Core Web Vitals chính thức, nhưng nó có mối quan hệ mật thiết với First Input Delay (FID), một trong ba trụ cột của Core Web Vitals. FID đo lường độ trễ từ khi người dùng tương tác lần đầu tiên với trang (ví dụ: nhấp vào một nút) đến khi trình duyệt thực sự có thể bắt đầu xử lý tương tác đó. TBT cao chính là nguyên nhân trực tiếp gây ra FID cao, vì khi luồng chính bị chặn, trình duyệt không thể phản hồi tương tác của người dùng.
Do đó, việc giảm TBT sẽ trực tiếp cải thiện FID. Kể từ khi Google đưa Core Web Vitals vào làm yếu tố xếp hạng, việc tối ưu hóa các chỉ số này đã trở nên quan trọng hơn bao giờ hết. Một trang web có TBT thấp và FID tốt sẽ cung cấp tín hiệu trải nghiệm trang (Page Experience signals) tích cực cho Google, góp phần cải thiện thứ hạng SEO của bạn trong kết quả tìm kiếm. Để nâng cao hiệu quả SEO tổng thể, bạn có thể tham khảo thêm bài viết Seo tổng thể.
Lợi ích dài hạn khi chú trọng tối ưu TBT
Việc tối ưu hóa TBT không chỉ mang lại lợi ích ngắn hạn về SEO mà còn tạo ra những giá trị bền vững cho doanh nghiệp của bạn. Lợi ích rõ ràng nhất là cải thiện trải nghiệm người dùng. Khi trang web của bạn phản hồi nhanh chóng và mượt mà, người dùng sẽ cảm thấy hài lòng hơn, ở lại lâu hơn và có nhiều khả năng tương tác sâu hơn với nội dung của bạn. Điều này dẫn đến việc giảm tỷ lệ thoát trang (bounce rate) một cách tự nhiên. Đối với các trang web thương mại điện tử, TBT thấp có thể ảnh hưởng trực tiếp đến doanh thu. Một quá trình thanh toán nhanh chóng, không bị gián đoạn sẽ làm tăng tỷ lệ chuyển đổi và giảm thiểu số lượng giỏ hàng bị bỏ rơi. Đối với các trang blog hoặc tin tức, tốc độ tải trang nhanh giúp người đọc tập trung vào nội dung mà không bị phân tâm bởi sự chậm trễ, từ đó tăng thời gian trên trang và số lần xem trang. Đầu tư vào việc tối ưu TBT chính là đầu tư vào sự hài lòng và lòng trung thành của khách hàng. Để nâng cao chất lượng nội dung, đừng bỏ qua bài viết Seo content là gì.
Công cụ kiểm tra và phân tích Total Blocking Time phổ biến
Lighthouse và PageSpeed Insights
Lighthouse và PageSpeed Insights là hai công cụ miễn phí và mạnh mẽ nhất từ Google để đo lường TBT. PageSpeed Insights cực kỳ dễ sử dụng: bạn chỉ cần dán URL của mình vào và nó sẽ cung cấp một báo cáo toàn diện về hiệu suất trên cả thiết bị di động và máy tính để bàn. Báo cáo này không chỉ hiển thị điểm số TBT mà còn đưa ra các đề xuất cụ thể để bạn cải thiện.
Ưu điểm lớn của PageSpeed Insights là nó sử dụng cả dữ liệu thực địa (từ những người dùng thực tế) và dữ liệu phòng thí nghiệm để đưa ra kết quả. Lighthouse là công cụ nền tảng của PageSpeed Insights, được tích hợp sẵn trong Công cụ nhà phát triển của Chrome (Chrome DevTools). Nó cho phép bạn chạy kiểm tra hiệu suất ngay tại chỗ, cung cấp một phân tích sâu hơn về các “tác vụ dài” (long tasks) đang chặn luồng chính. Bằng cách sử dụng Lighthouse, bạn có thể xác định chính xác các đoạn mã JavaScript hoặc quy trình nào đang gây ra TBT cao để có hướng khắc phục triệt để. Hướng dẫn chi tiết về SEO audit giúp tối ưu toàn diện website có tại bài Seo audit là gì.
Các công cụ hỗ trợ khác như WebPageTest, Chrome DevTools
Bên cạnh các công cụ của Google, có những lựa chọn nâng cao khác giúp bạn phân tích TBT một cách chi tiết hơn. WebPageTest là một công cụ phân tích hiệu suất web hàng đầu, cho phép bạn kiểm tra trang web của mình từ nhiều vị trí địa lý, trên các trình duyệt và loại kết nối mạng khác nhau. Nó cung cấp một biểu đồ “thác nước” (waterfall chart) chi tiết, cho thấy chính xác thời gian tải của từng tài nguyên. Quan trọng hơn, nó cũng cung cấp chỉ số TBT và cho phép bạn xem lại video quá trình tải trang, giúp bạn hình dung được trải nghiệm thực tế của người dùng.
Chrome DevTools, đặc biệt là tab Performance, là công cụ không thể thiếu cho các nhà phát triển. Bằng cách ghi lại (record) một phiên tải trang, bạn có thể xem xét từng mili giây hoạt động trên luồng chính, xác định các tác vụ dài (được tô màu đỏ) và phân tích nguyên nhân gốc rễ gây ra chúng. Công cụ này cung cấp thông tin cực kỳ chi tiết, giúp bạn gỡ lỗi và tối ưu hóa mã nguồn một cách hiệu quả nhất.
Common Issues/Troubleshooting
TBT cao do tải JavaScript quá nặng
Một trong những vấn đề phổ biến nhất gây ra TBT cao là việc tải các tệp JavaScript có kích thước quá lớn. Điều này thường xảy ra khi trang web sử dụng nhiều thư viện của bên thứ ba, các framework phức tạp hoặc các plugin không được tối ưu hóa. Khi một tệp JavaScript lớn được tải, trình duyệt phải mất nhiều thời gian để tải xuống, phân tích (parse), biên dịch (compile) và thực thi nó. Toàn bộ quá trình này diễn ra trên luồng chính, khiến nó bị chặn hoàn toàn.
Để giải quyết vấn đề này, bạn cần kiểm tra lại toàn bộ các script đang được tải trên trang. Hãy tự hỏi: “Script này có thực sự cần thiết không? Nó có thể được tải sau không?”. Sử dụng các công cụ như Webpack Bundle Analyzer để trực quan hóa kích thước của các gói JavaScript và xác định các thư viện lớn không cần thiết. Giải pháp bao gồm loại bỏ các script không sử dụng, thay thế các thư viện cồng kềnh bằng các lựa chọn nhẹ hơn, và áp dụng kỹ thuật chia nhỏ mã (code splitting) để chỉ tải những gì thực sự cần thiết cho lần tải trang đầu tiên.
Sử dụng sai hoặc thiếu các kỹ thuật defer, async cho script
Một lỗi phổ biến khác là không sử dụng hoặc sử dụng sai thuộc tính defer và async cho các thẻ <script>. Theo mặc định, khi trình duyệt gặp một thẻ <script> trong HTML, nó sẽ dừng việc phân tích HTML, tải tệp script và thực thi nó ngay lập tức. Quá trình này được gọi là chặn hiển thị (render-blocking) và là nguyên nhân chính gây ra TBT cao. Nhiều nhà phát triển quên thêm defer hoặc async, đặc biệt là đối với các script của bên thứ ba như mã theo dõi phân tích, quảng cáo, hoặc các widget mạng xã hội. Để khắc phục, hãy kiểm tra tất cả các thẻ <script> trên trang của bạn. Đối với hầu hết các script không quan trọng đối với lần hiển thị đầu tiên, hãy thêm thuộc tính defer. Thuộc tính này sẽ yêu cầu trình duyệt tải script song song và chỉ thực thi nó sau khi toàn bộ tài liệu HTML đã được phân tích. Thuộc tính async cũng tải script song song nhưng sẽ thực thi ngay khi tải xong, điều này có thể làm gián đoạn việc hiển thị, vì vậy hãy sử dụng nó một cách thận trọng cho các script độc lập như quảng cáo.
Best Practices
Để duy trì chỉ số Total Blocking Time ở mức thấp và đảm bảo trang web luôn mượt mà, hãy tuân thủ các phương pháp hay nhất sau:
- Ưu tiên giảm thiểu kích thước JS: Luôn nén (minify) và gộp các tệp JavaScript. Loại bỏ mã không sử dụng (tree shaking) và chỉ tải các thư viện thực sự cần thiết.
- Chia nhỏ và tải tài nguyên đúng lúc: Áp dụng kỹ thuật code splitting để chia các gói JavaScript lớn thành các phần nhỏ hơn. Sử dụng lazy loading cho các thành phần và hình ảnh không hiển thị ngay trong màn hình đầu tiên.
- Tránh các tác vụ đồng bộ lớn trên luồng chính: Chia nhỏ các tác vụ JavaScript kéo dài thành các đoạn nhỏ hơn và thực hiện chúng một cách không đồng bộ để không chặn luồng chính quá 50ms.
- Sử dụng các công cụ audit định kỳ: Thường xuyên sử dụng Lighthouse, PageSpeed Insights hoặc các công cụ tương tự để kiểm tra hiệu suất trang web. Việc này giúp bạn sớm phát hiện các vấn đề về TBT trước khi chúng ảnh hưởng đến người dùng.
- Không lạm dụng thư viện, framework: Hãy cân nhắc kỹ lưỡng trước khi thêm một thư viện hoặc framework mới. Mỗi tài nguyên thêm vào đều có thể làm tăng TBT. Hãy chọn những công cụ nhẹ và hiệu quả.
- Kiểm soát kỹ thuật render-blocking resources: Đảm bảo rằng các tệp CSS và JavaScript không quan trọng được tải một cách không đồng bộ bằng cách sử dụng defer, async hoặc các kỹ thuật tải CSS hiện đại.
Kết luận
Total Blocking Time (TBT) không chỉ là một chỉ số kỹ thuật mà là một yếu tố then chốt quyết định trải nghiệm của người dùng và ảnh hưởng trực tiếp đến hiệu quả SEO của trang web. Một chỉ số TBT thấp đồng nghĩa với một trang web phản hồi nhanh, tương tác mượt mà, giúp giữ chân khách truy cập và thúc đẩy tỷ lệ chuyển đổi. Việc hiểu rõ nguyên nhân gây ra TBT cao, chủ yếu từ JavaScript và các tác vụ nặng trên luồng chính, là bước đầu tiên để xây dựng một website hiệu suất cao. Bằng cách áp dụng các phương pháp tối ưu như chia nhỏ mã, tải lười, sử dụng defer/async và thường xuyên kiểm tra bằng các công cụ chuyên dụng như Lighthouse và PageSpeed Insights, bạn có thể cải thiện đáng kể tốc độ và sự hài lòng của người dùng. Đừng xem nhẹ TBT, hãy biến nó thành ưu tiên hàng đầu trong chiến lược tối ưu hóa website của bạn ngay hôm nay. Bước tiếp theo của bạn là gì? Hãy bắt đầu bằng việc đo lường TBT trên các trang quan trọng nhất và lên kế hoạch hành động cụ thể để cải thiện.
