Hướng dẫn tạo website miễn phí với Google Sites cho người mới
Google Sites là công cụ tạo website miễn phí của Google, cho phép bất kỳ ai có tài khoản Gmail đều có thể xây dựng một trang web chỉ bằng thao tác kéo thả mà không cần biết một dòng...
Trong cuộc đua Top Google hiện nay, tốc độ tải trang không còn là một lựa chọn, mà là điều kiện tiên quyết. Nếu bạn đã từng mệt mỏi khi thấy điểm số PageSpeed Insights “đỏ lùm” vì lỗi Reduce the impact of third-party code, thì bài viết này dành cho bạn.
Với kinh nghiệm nhiều năm tối ưu website, mình khẳng định: Google Tag Manager (GTM) rất mạnh, nhưng nó thường là “gánh nặng” lớn nhất cho CPU của trình duyệt. Dưới đây là cách giúp bạn vừa có dữ liệu tracking chuẩn, vừa có một website chạy nhanh như điện bằng kỹ thuật Delay GTM Script.
Tại sao GTM lại làm chậm Website của bạn?
Mặc định, đoạn mã GTM truyền thống sẽ cố gắng tải ngay khi người dùng vừa truy cập. Lúc này, trình duyệt đang phải gồng mình xử lý HTML và thực hiện việc tối ưu CSS để hiển thị khung hình đầu tiên. Khi GTM chen ngang, nó sẽ chiếm dụng luồng xử lý chính (Main-thread), gây ra hiện tượng giật lag và làm tăng chỉ số Total Blocking Time (TBT).
Việc trì hoãn (delay) nạp GTM cho đến khi người dùng có tương tác đầu tiên (cuộn trang, di chuột) sẽ giúp trình duyệt rảnh tay để dựng giao diện trước, mang lại cảm giác website “nhanh tức thì”.
Giải pháp Delay GTM & sGTM tối ưu chuẩn (Full Code)
Thay vì dùng mã GTM mặc định, bạn hãy sử dụng đoạn mã tối ưu dưới đây. Mình đã tích hợp sẵn phần đẩy dữ liệu (dataLayer.push) sớm để đảm bảo không bị mất sự kiện trang.
Mã nguồn tối ưu hóa
Bạn hãy sao chép toàn bộ đoạn mã này và đặt vào trong thẻ <head> (hoặc ngay đầu thẻ <body>) của website:
HTML
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: "page_view", // Gửi sự kiện xem trang ngay lập tức
page_path: location.pathname,
page_title: document.title
});
</script>
<script>
(function () {
const w = window;
let loaded = false;
function loadGTM() {
if (loaded) return; // Nếu đã nạp rồi thì không nạp lại
loaded = true;
const gtmScript = document.createElement("script");
gtmScript.async = true;
/* 👉 THAY ĐỔI TẠI ĐÂY:
Thay link dưới bằng link sGTM (First-party) của bạn hoặc
link GTM mặc định: https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX
*/
gtmScript.src = "https://gtm.phuclee.com/gtm.js?id=GTM-M6KMLH5J";
document.head.appendChild(gtmScript);
// Kích hoạt mốc thời gian bắt đầu của GTM
w.dataLayer.push({
"gtm.start": Date.now(),
event: "gtm.js"
});
}
/* Lắng nghe các hành vi thực tế của người dùng để kích hoạt nạp GTM */
["scroll", "mousemove", "touchstart", "keydown"].forEach(evt =>
w.addEventListener(evt, loadGTM, {
once: true, // Chỉ chạy một lần duy nhất
passive: true
})
);
/* Dự phòng (Fallback): Nếu người dùng vào trang mà không tương tác,
GTM vẫn sẽ tự động nạp sau khi trình duyệt rảnh rỗi (idle)
hoặc tối đa sau 3 giây để đảm bảo không mất data tracking. */
if ("requestIdleCallback" in w) {
requestIdleCallback(loadGTM, { timeout: 3000 });
} else {
setTimeout(loadGTM, 3000);
}
})();
</script>Hướng dẫn thay thế mã GTM cũ sang mã tối ưu
Để áp dụng thành công mà không gây lỗi, bạn hãy thực hiện theo các bước sau:
- Gỡ mã GTM cũ: Xóa bỏ toàn bộ đoạn script GTM chuẩn (cả phần
<head>vànoscript) mà bạn đã cài trước đó qua plugin hoặc fileheader.php. - Thay đổi Container ID: Trong đoạn code mình cung cấp phía trên, hãy tìm dòng
gtm.js?id=GTM-M6KMLH5Jvà thay mãGTM-XXXXXcủa riêng bạn vào. - Tích hợp vào Website: * Với WordPress bạn có thể tham khảo plugin: WPCode – Insert Headers, Footers, and Code Snippets (phiên bản miễn phí và trả phí) / https://wordpress.org/plugins/insert-headers-and-footers/ hoặc dán trực tiếp vào file
header.phpcủa Theme.- Đây là một bước cực kỳ quan trọng trong quy trình tối ưu và tăng tốc độ website WordPress chuyên nghiệp.
Ưu và nhược điểm của delay GTM
Tại sao mình lại khuyên bạn sử dụng cách này thay vì các plugin tự động?
Ưu điểm vượt trội
- Kiểm soát hoàn toàn (Control): Bạn biết chính xác khi nào script được nạp.
- Cải thiện Core Web Vitals: Giảm TBT và FID đáng kể vì CPU không bị nghẽn trong 1-2 giây đầu tiên.
- Hỗ trợ sGTM hoàn hảo: Việc sử dụng subdomain riêng (như
gtm.phuclee.com) giúp dữ liệu đi qua First-party, tăng tính bảo mật và tránh bị các trình chặn quảng cáo “trảm”. - Dữ liệu không bị mất: Nhờ đoạn
dataLayer.pushsớm, khi GTM khởi động xong, nó sẽ tự động quét và lấy lại sự kiệnpage_viewtrước đó.
Nhược điểm nhỏ
- Nếu người dùng thoát trang cực nhanh (dưới 1 giây) và không hề di chuột hay cuộn trang, dữ liệu tracking có thể không kịp gửi về. Tuy nhiên, những phiên truy cập “ma” này thường không mang lại giá trị chuyển đổi, nên việc đánh đổi lấy tốc độ là hoàn toàn xứng đáng. Còn đối với những bạn đang cần ke sát sao dữ liệu tracking chuẩn chỉnh thì mình khuyên các bạn cứ dùng mã mặc định theo Google Tag Manager nhé.
Cá nhân mình thấy: GTM tiêu chuẩn thường làm giảm 15-20 điểm Performance, trong khi mã Delay chỉ làm giảm 1-3 điểm.
Delay GTM có giúp tối ưu SEO?
Tốc độ chỉ là một mảnh ghép. Để đạt được thứ hạng cao, việc tối ưu mã nguồn phải đi đôi với cấu trúc trang web. Sau khi đã xử lý xong GTM, bạn nên rà soát lại checklist website chuẩn SEO để đảm bảo các yếu tố On-page khác như Sitemap, Schema và Content đã chuẩn chỉ.
Đặc biệt, hãy nhớ rằng việc trì hoãn JS (GTM) chỉ giúp ích nếu bạn đã làm tốt phần tối ưu CSS. Nếu CSS của bạn quá nặng, trình duyệt vẫn sẽ mất thời gian để Render trang trước khi script delay này có tác dụng.
Lời kết
Việc làm chủ cách nạp script bên thứ ba là kỹ năng phân tách giữa một người làm web thông thường và một chuyên gia tối ưu. Hy vọng đoạn mã và hướng dẫn trên sẽ giúp website của bạn được đánh giá tốt trên các công cụ đo lường tốc độ.
Hy vọng nội dung bài viết trên hữu ích với bạn. Cảm ơn bạn đã dành thời gian theo dõi những bài viết của Phúc!
