Làm thế nào để tải Google Analytics nhanh hơn gấp 10 lần trong WordPress

Một trong các lý do làm cho website của bạn chậm chính là các mã của Google! Vâng, tôi đã từng sốc khi thấy Google PageSpeed Insights và GTmetrix than phiền về mã của Google Analytics.

Tại sao Google Analytics lại chậm?

Các đoạn mã analytics của Google được tải từ CDN cực nhanh. Vậy thì tại sao Google Analytics lại chậm? Dưới đây là một số lý do:

1. Google Tag Manager + Analytics = 73 KB

Vâng, đoạn mã Google Analytics mới được nhúng vào bên trong gtag.js và tổng dung lượng của nó vào khoảng 73 KB. Thậm chí nếu bạn chỉ sử dụng riêng mã Google Analytics, nó có dung lượng vào khoảng 20 KB.

Khi xét khía cạnh tốc độ, từng Kilo Byte đều quan trọng! Cả 73 KB và 20 KB đều quá cồng kềnh. Chúng có quá nhiều tính năng, mà 99% thời gian chúng ta không sử dụng đến.

2. Các yêu cầu HTTP từ bên thứ ba & tìm kiếm DNS

Đoạn mã mới nhất của Google Analytics trông giống như thế này:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119755794-1"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'UA-XXXXXXX-XX');
</script>

Đoạn mã ban đầu tải một file JS từ www.googletagmanager.com. Tệp đã tải xuống sẽ lại tải một cái khác từ www.google-analytics.com.

Như bạn có thể thấy, chúng ta đã thực hiện 2 yêu cầu HTTP, và nó hướng đến 2 tên miền khác nhau. Trình duyệt cần tạo ra hai kết nối TCP và tìm kiếm DNS bổ sung! Vâng, điều đó nghe không tốt chút nào!

3. Cache phía trình duyệt

Nếu bạn phân tích trang web có mã Google Analytics bằng công cụ Google PageSpeed Insights, bạn có thể thấy cảnh báo “Phục vụ các tài nguyên tĩnh với chính sách bộ nhớ cache hiệu quả hơn“.

Tương tự “Tận dụng bộ nhớ trình duyệt / Leverage browser caching” trong GTmetrix.

File chứa mã Google Analytics (analytics.js) có thời gian cache (TTL) chỉ 2 giờ. Vì thế bạn sẽ không có được lợi thế của việc cache phía trình duyệt.

Làm thế nào để tối ưu hóa Google Analytics?

Chúng ta muốn là bản thân không tạo ra thêm các yêu cầu DNS/HTTP bổ sung và không phải nhận cảnh báo về bộ nhớ đệm trình duyệt.

Giải pháp là gì? Tự host lấy đoạn mã Google Analytics!

Tại sao nên tự host Google Analytics?

Thông tin từ Google Support khuyến nghị rằng file JS không nên tự host. Lý do duy nhất cho điều này là chúng ta sẽ bị mất các cập nhật! Tuy nhiên vẫn có các giải pháp cho vấn đề này (tôi sẽ đề cập bên dưới). Còn ngay sau đây là lý do vì sao bạn nên tự host đoạn mã Google Analytics:

Những lợi ích của việc tự host mã Google Analytics

• Không bổ sung thêm tìm kiếm DNS
• Có thể được gộp với các file JavaScript khác
• Tránh bị chặn bởi các tiện ích về quyền riêng tư
• Tuân thủ GDPR

Giải pháp 1 – Tối thiểu hóa Google Analytics

Minimal Google Analytics là một đoạn mã Google Analytics thay thế rất nhỏ gọn (lightweight) với chỉ 1,5 KB kèm với tối thiểu tính năng.

Tôi gửi lời cảm ơn đặc biệt tới David, anh ấy chính là người tạo ra đoạn mã này:

Vì đoạn mã này là rất nhỏ, bạn có thể nội tuyến (inline) nó vào trong HTML.

Cài Minima Google Analytics vào trong WordPress

Bạn có thể lấy đoạn mã ở trên và thêm nó trực tiếp vào phần head. Một cách khác là sử dụng plugin WordPress (unofficial/không chính thức) có tên: Minimal Analytics WP plugin.

Bất lợi cần biết

Đoạn mã trên được thiết kế chỉ để gửi đi dữ liệu về page view (lượt xem trang). Nó cũng hỗ trợ gửi sự kiện bằng ma.trackEvent(‘Category’, ‘Action’, ‘Label’, ‘Value’)

Nếu bạn đang sử dụng các tính năng nâng cao hoặc bất cứ plugin nào sử dụng Google Analytics, nó có thể sẽ không hoạt động.

Với riêng tôi, đoạn mã trên là quá đủ, vì tôi chỉ theo dõi lượt xem trang và tốc độ website lại cực kỳ quan trọng đối với tôi!

Giải pháp 2 – Tự host đoạn mã JavaScript Google Analytics

Giải pháp khác là tự host đoạn mã Google Analytics. Điều này có nghĩa là, chúng ta tải file từ google-analytics.com/analytics.js về và phục vụ nó từ ten-mien-cua-ban.com/analytics.js

CAOS WordPress Plugin

CAOS for WordPress Plugin sẽ giúp bạn tự host file analytics.js và lên lịch định kỳ kiểm tra phiên bản analytics.js mới nhất từ Google. Một plugin rất tốt khác mà bạn có thể thử là Flying Analytics by WP Speed Matters, tác giả của plugin này cũng là người tạo ra plugin Flying Images và Flying Pages.

WP Rocket WordPress Plugin

WP Rocket là plugin cache nâng cao. Tương tự như CAOS, WP Rocket có thể tự host và phục vụ file Google Analytics từ máy chủ của bạn.

Truy cập vào phần mở rộng của WP Rocket và bật Google Tracking!

Kết luận

Một hiện tượng phổ biến là Google và Facebook làm chậm trang web.

Cho dù CDN của họ rất nhanh nhưng nếu đó là yêu cầu của bên thứ ba đến tên miền khác, cộng với việc không có chính sách cache chính xác, điều đó sẽ làm chậm trang web của bạn.

Bạn chắc chắn sẽ thấy cải thiện sau khi thực hiện những giải pháp trên trong WordPress.

(Dịch từ bài viết: How to Load Google Analytics 10x Faster in WordPress, tác giả: Gijo Varghese, website: WP Speed Matters)