Long Task là gì luôn là câu hỏi nhức nhối đối với bất kỳ nhà phát triển web nào khi trang web bỗng dưng trở nên “đơ cứng” dù tốc độ mạng vẫn rất nhanh. Khi người dùng thực hiện một thao tác click hoặc cuộn trang, họ mong đợi một phản hồi tức thì. Tuy nhiên, nếu trình duyệt đang bận xử lý một khối lượng lớn mã JavaScript, nó sẽ không thể trả lời các tương tác đó, dẫn đến cảm giác lag cực kỳ khó chịu. Hiện tượng này không chỉ phá hỏng trải nghiệm người dùng mà còn là kẻ thù thầm lặng kéo lùi thứ hạng website của bạn trên các công cụ tìm kiếm.
Nội dung dưới đây sẽ giúp bạn hiểu rõ bản chất kỹ thuật của các tác vụ dài, cơ chế chúng chiếm dụng luồng chính (main thread) và cung cấp các giải pháp thực chiến để tối ưu hóa hiệu năng website. Bạn sẽ biết cách biến những khối code cồng kềnh thành những tác vụ nhỏ gọn, mượt mà, giúp trang web của bạn đạt điểm tuyệt đối trong mắt Google.
Long Task là gì?
Về mặt định nghĩa kỹ thuật, Long Task là một tác vụ chạy trên luồng chính (main thread) của trình duyệt kéo dài hơn 50 milliseconds (ms) mà không nhường quyền xử lý lại cho trình duyệt. Đây là con số tiêu chuẩn được W3C quy định trong Long Tasks API. Một cách dễ hiểu, khi main thread bận rộn quá 50ms liên tục, trình duyệt sẽ rơi vào trạng thái “tạm dừng” mọi phản hồi đối với người dùng.
Tại sao lại là mốc 50ms? Để đạt được trải nghiệm mượt mà ở mức 60 khung hình trên giây (FPS), mỗi khung hình chỉ có khoảng 16.67ms để xử lý. Google và W3C chọn ranh giới 50ms vì đây là giới hạn để đảm bảo phản hồi tương tác vẫn nằm trong mức chấp nhận được (dưới 100ms). Bất kỳ tác vụ nào vượt quá ngưỡng này đều khiến trình duyệt không còn đủ thời gian để xử lý các frame tiếp theo hoặc nhận tín hiệu từ bàn phím và chuột.
Trong thế giới SEO, khái niệm này là nền tảng để tính toán các chỉ số quan trọng như:
- Total Blocking Time (TBT): Tổng thời gian bị chặn bởi các Long Task.
- Interaction to Next Paint (INP): Chỉ số đo lường khả năng phản hồi tương tác, trực tiếp bị ảnh hưởng bởi độ dài của các tác vụ trên main thread.
Cách Long Task hoạt động
Trình duyệt web hiện đại vận hành dựa trên một cơ chế gọi là Event Loop (Vòng lặp sự kiện). Main thread là nơi duy nhất xử lý hầu hết mọi công việc: từ thực thi JavaScript, tính toán phong cách (style calculation), bố cục (layout) cho đến việc vẽ giao diện (paint).
Cơ chế chặn luồng chính
Mọi công việc trên main thread đều phải xếp hàng trong hàng đợi tác vụ (Task Queue). Trình duyệt sẽ xử lý từng tác vụ một. Khi một tác vụ JavaScript bắt đầu chạy, nó sẽ giữ toàn quyền kiểm soát main thread cho đến khi hoàn thành. Nếu đoạn mã đó quá phức tạp, ví dụ như xử lý một mảng dữ liệu khổng lồ hoặc thực hiện hydration cho một ứng dụng React nặng, nó sẽ “khóa” main thread lại.
Quy trình diễn ra khi có Long Task:
- Người dùng tương tác: Người dùng click vào một nút bấm. Trình duyệt thêm sự kiện click này vào queue.
- Tác vụ nặng đang chạy: Trình duyệt đang bận xử lý một Long Task (ví dụ mất 200ms).
- Bị chặn (Blocked): Sự kiện click của người dùng phải nằm chờ trong queue. Browser không thể thực hiện bất kỳ phản hồi nào, UI bị “đóng băng”.
- Kết thúc tác vụ: Sau 200ms, Long Task hoàn thành. Trình duyệt lúc này mới rảnh để lấy sự kiện click ra xử lý và vẽ lại màn hình (Paint).
- Cảm giác lag: Người dùng thấy độ trễ rõ rệt giữa lúc click và lúc thấy kết quả. Khoảng thời gian 150ms vượt quá ngưỡng (200ms – 50ms) chính là Blocking Time.
Ngưỡng Long Task tốt, trung bình, kém
Mặc dù bản thân Long Task được định nghĩa cố định là trên 50ms, nhưng Google đánh giá hiệu năng dựa trên tổng thời gian chặn (TBT) và khả năng phản hồi (INP). Dưới đây là bảng so sánh ngưỡng chuẩn để bạn đối chiếu:
| Chỉ số | Tốt (Mượt mà) | Trung bình | Kém (Lag) |
| Total Blocking Time (TBT) | < 200ms | 200ms – 600ms | > 600ms |
| Interaction to Next Paint (INP) | ≤ 200ms | 200ms – 500ms | > 500ms |
| Thời gian một Long Task | ≤ 50ms | 50ms – 100ms | > 100ms |
Nếu website của bạn thường xuyên xuất hiện các tác vụ kéo dài trên 100ms, người dùng di động sẽ cảm nhận sự giật lag cực kỳ rõ rệt, đặc biệt là trên các thiết bị có cấu hình trung bình hoặc yếu.
Cách kiểm tra Long Task của website
Để tối ưu hóa, trước tiên bạn cần xác định chính xác vị trí và nguyên nhân gây ra Long Task. Có ba công cụ mạnh mẽ nhất hiện nay để thực hiện việc này:
Dùng Google PageSpeed Insights
Đây là cách nhanh nhất để có cái nhìn tổng quan. PageSpeed Insights sẽ liệt kê chỉ số TBT của bạn. Trong phần “Diagnostics” (Chẩn đoán), hãy tìm mục “Avoid long main-thread tasks”. Tại đây, Google sẽ chỉ ra chính xác URL của các script gây ra tác vụ nặng và thời gian chúng chiếm dụng luồng chính.
Dùng Chrome DevTools
Đây là vũ khí tối thượng cho các developer.
- Mở tab Performance.
- Nhấn nút ghi và tương tác với trang web.
- Sau khi dừng, hãy nhìn vào phần Main. Các Long Task sẽ được đánh dấu bằng một hình tam giác đỏ ở góc trên cùng bên phải của khối tác vụ.
- Khi click vào khối đó, phần Bottom-Up sẽ cho bạn biết chính xác hàm (function) nào trong mã JavaScript đang tiêu tốn nhiều thời gian nhất.
Dùng PerformanceObserver API
Bạn có thể tự động hóa việc theo dõi Long Task ngay trong code của mình để gửi dữ liệu về hệ thống analytics:
JavaScript
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('Phát hiện Long Task:', entry);
}
});
observer.observe({entryTypes: ['longtask']});
Cách cải thiện Long Task hiệu quả
Giải pháp cốt lõi để loại bỏ Long Task là “chia để trị”: băm nhỏ các tác vụ lớn thành nhiều tác vụ nhỏ để main thread có khoảng nghỉ nhằm phản hồi tương tác người dùng.
Cách 1 — Sử dụng Web Workers
Web Workers cho phép bạn chạy JavaScript trong một luồng nền (background thread) tách biệt hoàn toàn với main thread. Các công việc nặng như tính toán dữ liệu, xử lý ảnh, hay parse JSON lớn nên được đẩy vào Web Worker.
- Ưu điểm: Main thread luôn rảnh tay để xử lý UI.
- Ví dụ: Thay vì chạy vòng lặp 1 triệu lần trên main thread, hãy gửi dữ liệu đó cho Worker và nhận kết quả trả về sau khi nó xử lý xong.
Cách 2 — Code Splitting & Dynamic Imports
Đừng bắt trình duyệt tải và thực thi toàn bộ bundle JS khổng lồ ngay từ lúc đầu. Hãy sử dụng Code Splitting để chỉ tải những gì cần thiết cho trang hiện tại. Các script cho chat widget, biểu đồ phức tạp chỉ nên được nạp khi cần thiết. Điều này giúp giảm đáng kể khối lượng công việc cho main thread trong giai đoạn Load trang.
Cách 3 — Kỹ thuật Yielding (Nhường quyền xử lý)
Nếu bạn có một tác vụ không thể đưa vào Worker, hãy chia nhỏ nó ra bằng cách sử dụng setTimeout hoặc các API mới như scheduler.yield() (trong các trình duyệt hiện đại).
- Cơ chế: Thay vì chạy một function mất 200ms, bạn chia nó thành 4 phần, mỗi phần 50ms. Giữa mỗi phần, bạn “nhường” (yield) main thread lại cho trình duyệt. Nếu trong lúc đó người dùng click, trình duyệt sẽ chen ngang để xử lý click rồi mới chạy tiếp phần thứ 2 của bạn.
Long Task ảnh hưởng SEO thế nào?
Trong quá khứ, Google tập trung vào tốc độ tải trang (FCP, LCP). Nhưng từ năm 2024-2025, trọng tâm đã chuyển dịch mạnh mẽ sang khả năng tương tác (Responsiveness) với sự ra đời của chỉ số INP.
Long Task chính là nguyên nhân gốc rễ khiến chỉ số INP bị xấu. Google không trực tiếp dùng số lượng Long Task làm yếu tố xếp hạng, nhưng họ dùng kết quả mà nó gây ra: sự chậm trễ trong tương tác. Một website có INP trên 500ms sẽ bị đánh giá là trải nghiệm kém.
Bên cạnh đó, Long Task gây ra các tác động tiêu cực gián tiếp:
- Tỷ lệ thoát trang (Bounce Rate): Người dùng cảm thấy website bị đơ sẽ ngay lập tức thoát ra.
- Crawl Efficiency: Nếu main thread bị block quá nặng trong quá trình render, bot của công cụ tìm kiếm có thể không thu thập đủ dữ liệu hoặc đánh giá sai về nội dung trang. Thực tế cho thấy, tối ưu hóa Long Task không chỉ giúp website nhanh hơn mà còn làm hài lòng cả người dùng lẫn thuật toán của Google.
Câu hỏi thường gặp về Long Task
Long Task JavaScript bao nhiêu là tốt?
Lý tưởng nhất là website của bạn không có tác vụ nào vượt quá mốc 50ms trên main thread. Tuy nhiên, một số tác vụ phức tạp là khó tránh khỏi, vì vậy hãy cố gắng giữ cho chúng càng gần mức 50ms càng tốt hoặc đảm bảo chúng không xảy ra trong lúc người dùng đang cần tương tác nhiều nhất.
Long Task khác gì với Input Delay?
Long Task là nguyên nhân, còn Input Delay là hậu quả. Khi một Long Task đang chạy, nó gây ra Input Delay (độ trễ đầu vào) vì sự kiện của người dùng không được xử lý ngay lập tức.
Làm sao cải thiện Long Task nhanh nhất cho website WordPress?
Đối với WordPress, cách nhanh nhất là hạn chế các plugin nặng, đặc biệt là các plugin về page builder hoặc slider. Ngoài ra, hãy sử dụng các công cụ như WP Rocket để trì hoãn việc thực thi JavaScript (Delay JS execution) cho đến khi người dùng tương tác, giúp main thread thênh thang khi tải trang.
Tóm lại, việc hiểu rõ Long Task là gì và cách kiểm soát nó là chìa khóa để xây dựng một website hiện đại, hiệu năng cao. Bằng cách áp dụng các kỹ thuật chia nhỏ tác vụ và nhường quyền xử lý luồng chính, bạn không chỉ giúp website mượt mà hơn mà còn cải thiện đáng kể các chỉ số Core Web Vitals. Đừng để những khối code nặng nề làm cản trở thành công của dự án SEO.
Đọc tiếp: CSS Containment là gì?
Tham khảo nguồn chính thức từ Google web.dev hoặc W3C Long Tasks API để cập nhật những thay đổi mới nhất về tiêu chuẩn hiệu năng.
