Mobile SEO

Mobile JavaScript Optimization

Tối ưu JS bằng cách hoãn tải (defer), phân chia gói (code splitting), và loại bỏ khối chặn render trên thiết bị di động.

1 lượt xem Cập nhật: 26/05/2026

Mobile JavaScript Optimization là gì?

Mobile JavaScript Optimization (tối ưu JavaScript cho thiết bị di động) là tập hợp các kỹ thuật giúp giảm tác động tiêu cực của mã JavaScript lên hiệu suất tải và hiển thị trang trên điện thoại, máy tính bảng — đặc biệt khi kết nối mạng chậm hoặc thiết bị có cấu hình thấp. Mục tiêu chính là đảm bảo nội dung quan trọng xuất hiện nhanh nhất có thể, không bị chặn bởi việc tải, phân tích hoặc thực thi JS.

Tại sao quan trọng trong SEO?

Google xếp hạng trang di động dựa trên trải nghiệm người dùng thực tế — trong đó tốc độ tải, khả năng tương tác sớm (First Input Delay – FID), và thời điểm hiển thị nội dung (Largest Contentful Paint – LCP) là ba chỉ số Core Web Vitals bắt buộc. JavaScript không được tối ưu sẽ:

  • Làm chậm quá trình phân tích HTML (HTML parsing), vì trình duyệt phải tạm dừng để tải và chạy script đồng bộ;
  • Tăng kích thước gói tài nguyên, gây chậm tải trên mạng 3G/4G hoặc Wi-Fi yếu;
  • Gây hiện tượng "trắng màn hình" (FOUC hoặc blank screen) nếu JS điều khiển render toàn bộ giao diện (ví dụ: SPA với React/Vue);
  • Làm tăng thời gian tương tác đầu tiên (FID), ảnh hưởng trực tiếp đến điểm Core Web Vitals.

Theo báo cáo năm 2023 của HTTP Archive, hơn 68% trang web di động tải hơn 500 KB JavaScript — mức vượt xa giới hạn khuyến nghị (dưới 170 KB cho JS thực thi chính).

Cách hoạt động

Trình duyệt xử lý HTML theo luồng từ trên xuống. Khi gặp thẻ <script> không có thuộc tính điều khiển, nó sẽ:

  1. Dừng phân tích HTML;
  2. Tải file JS (nếu chưa có trong cache);
  3. Phân tích và thực thi ngay lập tức;
  4. Chỉ tiếp tục phân tích HTML sau khi hoàn tất.

Mobile JavaScript Optimization can thiệp vào từng bước này bằng ba cơ chế chính: hoãn tải (defer), chia nhỏ mã (code splitting) và loại bỏ khối chặn render (eliminating render-blocking JS).

Hướng dẫn thực hiện

Dưới đây là các bước kỹ thuật cụ thể, áp dụng được trên hầu hết nền tảng (WordPress, Next.js, React, Vue, tĩnh):

  1. Sử dụng defer cho script bên ngoài: Thêm thuộc tính defer vào thẻ <script src="..."></script>. Script sẽ tải song song với HTML, nhưng chỉ thực thi sau khi DOM sẵn sàng — không chặn render. Không áp dụng cho script nội tuyến.
  2. Thay thế async khi script độc lập: Dùng async cho script không phụ thuộc vào thứ tự (ví dụ: analytics, quảng cáo). Lưu ý: async có thể thực thi trước khi DOM hoàn tất → không dùng cho script thao tác DOM.
  3. Áp dụng code splitting: Chia bundle JS thành nhiều phần nhỏ hơn bằng công cụ xây dựng (Webpack, Vite, esbuild). Chỉ tải phần cần thiết cho trang hiện tại (ví dụ: chỉ load component thanh toán khi vào trang checkout). Với React, dùng React.lazy() + Suspense; với Vue, dùng defineAsyncComponent().
  4. Xóa script không cần thiết ở đầu trang: Di chuyển script không liên quan đến nội dung chính (chat widget, A/B testing, third-party tracker) xuống cuối <body>, hoặc tải sau khi trang đã hiển thị (lazy-load bằng IntersectionObserver hoặc sự kiện DOMContentLoaded).
  5. Loại bỏ polyfill thừa: Dùng @babel/preset-env với mục tiêu trình duyệt rõ ràng (ví dụ: "supports": {"es6.module": true}), tránh đưa mã hỗ trợ IE vào ứng dụng chỉ phục vụ Android/iOS hiện đại.

Lỗi thường gặp

Lỗi Hệ quả Cách khắc phục
Dùng document.write() trong script Chặn hoàn toàn việc phân tích HTML trên Chrome/Android; gây lỗi trắng màn hình Thay thế bằng innerHTML, appendChild() hoặc render qua framework. Không hỗ trợ document.write() trên mobile — nên loại bỏ hoàn toàn.
Không đặt type="module" cho ES module Trình duyệt cũ tải JS như script cổ điển → mất lợi ích hoãn tự động Dùng <script type="module" src="..."></script> — tự động defer, không cần thêm thuộc tính.
Tải toàn bộ thư viện UI (ví dụ: Bootstrap JS, jQuery) dù chỉ dùng 1–2 hàm Tăng kích thước JS tới 200–400 KB không cần thiết Dùng tree-shaking (Webpack/Rollup), import riêng lẻ (ví dụ: import { Modal } from 'bootstrap'), hoặc thay bằng giải pháp nhẹ hơn (Alpine.js, vanilla JS).

Ví dụ thực tế

Một website thương mại điện tử Việt Nam (giao diện React + Next.js) từng có LCP trung bình 4.2s trên 3G. Sau tối ưu:

  • Chuyển toàn bộ script analytics sang async và tải sau load event;
  • Áp dụng code splitting cho trang danh mục, chi tiết sản phẩm và giỏ hàng — giảm bundle chính từ 1.1 MB xuống còn 320 KB;
  • Thay jQuery bằng hàm DOM thuần cho hiệu ứng dropdown và carousel;
  • Thêm defer cho script quản lý menu và tìm kiếm.

Kết quả sau 4 tuần: LCP giảm còn 1.8s, tỷ lệ thoát trên di động giảm 22%, và vị trí trung bình trên Google Search tăng 3–5 bậc cho 12 từ khóa cạnh tranh cao.

Câu hỏi thường gặp

Hoãn tải (defer) có làm chậm chức năng JavaScript?

Không — defer chỉ hoãn thực thi đến sau khi DOM sẵn sàng, chứ không hoãn tải. Tất cả script có defer đều tải song song với HTML, nên không làm chậm thời điểm có thể tương tác (TTI). Chức năng vẫn hoạt động đầy đủ, chỉ khởi chạy muộn hơn một chút — điều này thường là mong muốn.

Có nên tắt JavaScript hoàn toàn để tối ưu SEO?

Không. Tắt JS khiến trang mất tính tương tác, không hỗ trợ form, filter, cart — làm giảm chuyển đổi và vi phạm nguyên tắc trải nghiệm người dùng. Thay vào đó, nên áp dụng progressive enhancement: xây dựng HTML/CSS đầy đủ trước, rồi bổ sung JS để nâng cao trải nghiệm.

Code splitting có ảnh hưởng đến SEO khi dùng SSR/SSG?

Không — nếu được cấu hình đúng. Với Next.js (SSR/SSG), React.lazy() chỉ áp dụng cho phần client-side. Nội dung server-rendered vẫn xuất hiện đầy đủ trong HTML ban đầu, đảm bảo bot Google đọc được. Tuy nhiên, cần kiểm tra output HTML thật (không xem qua DevTools sau render) để xác nhận.