Tối ưu và khắc phục mã Google Analytics làm chậm website

Hướng dẫn fix điểm Pagespeed thấp khi add mã theo dõi Google Analytics làm chậm web. Làm thế nào để trang web của bạn load một cách nhanh chóng, và có được điểm số cao khi test trên PageSpeed Insights. Hãy cùng itsmeit tìm hiểu và khắc phục Google analytics làm chậm trang web trong bài viết này nhé.

Khắc phục điểm Pagespeed thấp, Google Analytics làm chậm web

Tốc độ tải trang rất quan trọng vì nó góp phần vào trải nghiệm người dùng. Mọi người đều mong đợi Internet ít nhiều sẽ có ngay lập tức khi duyệt web. Nếu nội dung của bạn mất quá nhiều thời gian để tải, bạn sẽ tăng nguy cơ khách truy cập trang web rời khỏi trang web của bạn để chuyển sang trang khác tải nhanh hơn.

Google Analytics là một dịch vụ phân tích trang web do Google cung cấp để theo dõi và báo cáo lưu lượng truy cập trang web, hiện đang là một nền tảng bên trong thương hiệu Google Marketing Platform. (theo wikipedia). Điều này thực sự có ích và không thể thiểu trong các chiến dịch Marketing sản phẩm, thương hiệu…

Nguyên nhân làm chậm trang web khi thêm, nhúng Google analytics

Khi bạn thêm đoạn mã (code) Google analytics, quảng cáo adsense vào trang web, đoạn code mặc địch đó chắc chắn sẽ làm giảm đi tốc độ load trang, và giảm đi điểm số khi test với các công cụ như Gtmetrix, Google PageSpeed Insights.

Nguyên nhân là khi trang web bắt đầu được load, đoạn mã (code) sẽ gửi yêu cầu (request) đến Google để tải về và hiển thị các chức năng analytics. Điều đó sẽ làm tăng kích thước ban đầu và tất nhiên mã Google Analytics làm chậm web của bạn.

Tối ưu hóa, xử lý, khắc phục mã Google analytics làm chậm trang web

Có lẽ sẽ có rất nhiều cách nhưng cách mà itsmeit đã làm và nhận thấy sự hiệu quả chính là khi người dùng tương tác với trang web qua sự kiện scroll, có nghĩa là chỉ ki nào người dùng scroll (cuộn) di chuyển chuột thì mã (code) mới được tải.

Script Google Analytics sẽ không gửi API, nó sẽ không làm việc khi không có ai đó tương tác trình duyệt lần đầu tiên. Nó không ảnh hướng đến trải nghiệm người dùng cũng như khi bạn test speed.

Tương tự như các phương pháp tối ưu mã (code) với bài viết tối ưu điểm google speed Facebook Social media thì bạn cũng có thể áp dụng với các đoạn mã của Google Adsense và các Ad Network khác.

Kỹ thuật tăng điểm Google Speed khi chèn mã Analytics làm chậm website

Khi bạn đã có một đoạn mã để thêm (add) vào trang web, mặc định nó sẽ giống như thế này:

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

Và dướ đây là mã (code) đã được chỉnh sửa với sự kiện scroll load, nếu bạn sử dụng nó chắc chắn Google Analytics sẽ không còn làm chậm web của bạn nữa. Đừng quên thay gtag id (G-xxxxxxx) của bạn.

<!-- Google tag (gtag.js) --> 
<script>
  window.addEventListener('load', function () {
    var is_analytics_load = 0;
    window.addEventListener('scroll', function () {
      if (is_analytics_load == 0) {
        is_analytics_load = 1;
        window.dataLayer = window.dataLayer || [];
        function gtag() {dataLayer.push(arguments);}
        gtag('config', 'G-YKVNLMPXLB');
        var ele = document.createElement('script');
        ele.src = 'https://www.googletagmanager.com/gtag/js?id=G-YKVNLMPXLB';
        var sc = document.getElementsByTagName('script')[0];
        sc.parentNode.insertBefore(ele, sc);
      }
    });
  });
</script>

Để thêm mã vào trang web wordpress, bạn có thể sử dụng hàm wp_footer hoặc wp_head dán nó vào trong class function.php của theme, nó trông sẽ như sau:

/**
 * Google analytics
 */ 
add_action('wp_footer', 'add_google_analytics_script_footer');
function add_google_analytics_script_footer()
{
   ?>
   <!-- Dán (paste mã Google tag (gtag.js) dưới dòng này) -->
   <?php
}

Trên đây là những cách tối ưu, khắc phục mã Google Analytics làm chậm web khi add vào website của bạn để không bị giảm đi hiệu suất tải trang cũng như giúp bạn có số điểm tối đa trên các công cụ kiểm tra hiệu suất trang web. Tương tự nếu web của bạn có chèn code AdSense bạn cũng có thể làm như vậy