PageSpeed ​​Insights 99/100 karena Google Analytics - Bagaimana saya bisa men-cache GA?

Saya sedang berusaha mencapai 100/100 di PageSpeed ​​dan saya hampir sampai. Saya mencoba menemukan solusi yang bagus untuk menembolok Google Analytics.

Ini pesan yang saya dapat:

Leverage peramban caching Menetapkan tanggal kedaluwarsa atau usia maksimum di header HTTP untuk sumber daya statis memerintahkan peramban untuk memuat sumber daya yang diunduh sebelumnya dari disk lokal daripada melalui jaringan. Leverage peramban cache untuk sumber daya yang bisa di-cache berikut: http://www.google-analytics.com/analytics.js (2 jam)

Satu-satunya solusi yang saya temukan adalah dari 2012 dan saya pikir itu bukan solusi yang baik. Pada dasarnya Anda menyalin kode GA dan menyimpannya sendiri. Anda kemudian menjalankan tugas cron untuk mengecek ulang Google sekali sehari untuk mengambil kode GA terbaru dan menggantinya.

http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

Apa lagi yang bisa saya lakukan untuk mencapai 100/100 sementara juga menggunakan Google Analytics?

Terima kasih.

Nah, jika Google menipu Anda, Anda dapat menipu Google kembali:

Ini adalah agen pengguna untuk pageSpeed:

“Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.8 (KHTML, like Gecko; Google Page Speed Insights) Chrome/19.0.1084.36 Safari/536.8”

Anda dapat memasukkan persyaratan untuk menghindari penyajian skrip analitik ke PageSpeed:

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?>
// your analytics code here
<?php endif; ?>

Jelas, itu tidak akan membuat perbaikan nyata, tetapi jika satu-satunya masalah Anda mendapatkan skor 100/100 ini akan melakukannya.

Ada subset dari perpustakaan js Google Analytics yang disebut ga-lite yang dapat Anda cache semau Anda.

Perpustakaan menggunakan API REST publik Google Analytics untuk mengirim data pelacakan pengguna ke Google. Anda dapat membaca lebih banyak dari posting blog tentang ga-lite .

Penafian: Saya penulis perpustakaan ini. Saya berjuang dengan masalah khusus ini dan hasil terbaik yang saya temukan adalah menerapkan solusi ini.

Berikut ini adalah solusi yang sangat sederhana menggunakan JS, untuk pelacakan GA dasar, yang juga akan berfungsi untuk cache tepi / proksi (ini dikonversi dari komentar):

if(navigator.userAgent.indexOf("Speed Insights") == -1) {
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXXX-X', 'auto');
  ga('send', 'pageview');
}

Catatan: Ini adalah skrip GA default. Anda mungkin memiliki ga()panggilan lain , dan jika demikian, Anda harus selalu memeriksa agen pengguna sebelum menelepon ga(), jika tidak maka kesalahan akan keluar.

Saya tidak akan khawatir tentang itu. Jangan letakkan di server Anda sendiri, sepertinya ini adalah masalah dengan Google, tapi sebagus itu. Menempatkan file di server Anda sendiri akan menciptakan banyak masalah baru.

Mereka mungkin membutuhkan file untuk dipanggil setiap kali daripada mendapatkannya dari cache klien, karena dengan begitu Anda tidak akan menghitung kunjungan.

Jika Anda memiliki masalah untuk merasa baik-baik saja dengan itu, jalankan URL Google Insight pada Google Insight itu sendiri, tertawa, santai dan melanjutkan pekerjaan Anda.

Di Google docs, mereka telah mengidentifikasi pagespeedfilter yang akan memuat skrip secara asinkron:

ModPagespeedEnableFilters make_google_analytics_async

Anda dapat menemukan dokumentasi di sini: https://developers.google.com/speed/pagespeed/module/filter-make-google-analytics-async

Satu hal yang perlu diperhatikan adalah filter tersebut dianggap berisiko tinggi. Dari dokumen:

Filter make_google_analytics_async bersifat eksperimental dan belum memiliki pengujian dunia nyata yang luas. Satu kasus di mana penulisan ulang akan menyebabkan kesalahan adalah jika filter melewatkan panggilan ke metode Google Analytics yang mengembalikan nilai. Jika metode tersebut ditemukan, penulisan ulang dilewati. Namun, metode diskualifikasi akan dilewatkan jika mereka datang sebelum memuat, dalam atribut seperti "klik", atau jika mereka berada di sumber daya eksternal. Kasus-kasus itu diperkirakan langka.

varvy.com ( 100/100 wawasan kecepatan halaman Google ) memuat kode google analitycs hanya jika pengguna membuat gulir halaman:

var fired = false;

window.addEventListener("scroll", function(){
    if ((document.documentElement.scrollTop != 0 && fired === false) || (document.body.scrollTop != 0 && fired === false)) {

        (function(i,s,o,g,r,a,m{i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-XXXXXXXX-X', 'auto');
        ga('send', 'pageview');

        fired = true;
    }
}, true);

Anda dapat mencoba meng-host analytics.js secara lokal dan memperbarui kontennya dengan skrip cache atau secara manual.

File js diperbarui hanya beberapa kali setahun dan jika Anda tidak memerlukan fitur pelacakan baru perbarui secara manual.

https://developers.google.com/analytics/devguides/collection/analyticsjs/changelog

menyimpan localy analytics.js, tetapi tidak direkomendasikan oleh google: https://support.google.com/analytics/answer/1032389?hl=id

tidak disarankan karena google dapat memperbarui skrip saat mereka inginkan, jadi lakukan saja skrip yang mengunduh analitik javascript setiap minggu dan Anda tidak akan mengalami masalah!

Ngomong-ngomong, solusi ini mencegah adblock memblokir skrip google analytics

Anda dapat mem-proksi skrip analitik google melalui server Anda sendiri, menyimpannya secara lokal dan memperbarui file secara otomatis setiap jam untuk memastikan itu selalu versi terbaru dari google.

Saya telah melakukan ini di beberapa situs sekarang dan semuanya bekerja dengan baik.

Rute Proxy Google Analytics di NodeJS / MEAN Stack

Ini adalah bagaimana saya menerapkannya di blog saya yang dibangun dengan tumpukan MEAN.

router.get('/analytics.js', function (req, res, next) {
    var fileUrl = 'http://www.google-analytics.com/analytics.js';
    var filePath = path.resolve('/content/analytics.js');

    // ensure file exists and is less than 1 hour old
    fs.stat(filePath, function (err, stats) {
        if (err) {
            // file doesn't exist so download and create it
            updateFileAndReturn();
        } else {
            // file exists so ensure it's not stale
            if (moment().diff(stats.mtime, 'minutes') > 60) {
                updateFileAndReturn();
            } else {
                returnFile();
            }
        }
    });

    // update file from remote url then send to client
    function updateFileAndReturn() {
        request(fileUrl, function (error, response, body) {
            fs.writeFileSync(filePath, body);
            returnFile();
        });
    }

    // send file to client
    function returnFile() {
        res.set('Cache-Control', 'public, max-age=' + oneWeekSeconds);
        res.sendFile(filePath);
    }
});

Metode Tindakan Proxy Google Analytics di ASP.NET MVC

Ini adalah bagaimana saya mengimplementasikannya di situs lain yang dibangun dengan ASP.NET MVC.

public class ProxyController : BaseController
{
    [Compress]
    public ActionResult GoogleAnalytics()
    {
        var fileUrl = "https://ssl.google-analytics.com/ga.js";
        var filePath = Server.MapPath("~/scripts/analytics.js");

        // ensure file exists 
        if (!System.IO.File.Exists(filePath))
            UpdateFile(fileUrl, filePath);

        // ensure file is less than 1 hour old
        var lastModified = System.IO.File.GetLastWriteTime(filePath);
        if((DateTime.Now - lastModified).TotalMinutes > 60)
            UpdateFile(fileUrl, filePath);

        // enable caching for 1 week for page speed score
        Response.AddHeader("Cache-Control", "max-age=604800");

        return JavaScript(System.IO.File.ReadAllText(filePath));
    }

    private void UpdateFile(string fileUrl, string filePath)
    {
        using (var response = WebRequest.Create(fileUrl).GetResponse())
        using (var dataStream = response.GetResponseStream())
        using (var reader = new StreamReader(dataStream))
        {
            var body = reader.ReadToEnd();
            System.IO.File.WriteAllText(filePath, body);
        }
    }
}

Ini adalah CompressAttribute yang digunakan oleh ProxyController MVC untuk kompresi Gzip

public class CompressAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {

        var encodingsAccepted = filterContext.HttpContext.Request.Headers["Accept-Encoding"];
        if (string.IsNullOrEmpty(encodingsAccepted)) return;

        encodingsAccepted = encodingsAccepted.ToLowerInvariant();
        var response = filterContext.HttpContext.Response;

        if (encodingsAccepted.Contains("gzip"))
        {
            response.AppendHeader("Content-encoding", "gzip");
            response.Filter = new GZipStream(response.Filter, CompressionMode.Compress);
        }
        else if (encodingsAccepted.Contains("deflate"))
        {
            response.AppendHeader("Content-encoding", "deflate");
            response.Filter = new DeflateStream(response.Filter, CompressionMode.Compress);
        }
    }
}

Skrip Google Analytics yang diperbarui

Di sisi klien saya menambahkan jalur analitik dengan tanggal saat ini hingga jam sehingga browser tidak akan menggunakan versi cache lebih dari satu jam.

<!-- analytics -->
<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '/analytics.js?d=' + new Date().toISOString().slice(0, 13), 'ga');
</script>

Untuk Nginx:

location ~ /analytics.js {
        proxy_pass https://www.google-analytics.com;
        expires 31536000s;
        proxy_set_header Pragma "public";
        proxy_set_header Cache-Control "max-age=31536000, public";
    }

Kemudian ubah jalur https://www.google-analytics.com/analytics.js ke https://yoursite.com/analytics.js

PHP

Tambahkan ini dalam kode HTML atau PHP Anda:

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-PUT YOUR GOOGLE ANALYTICS ID HERE', 'auto');
    ga('send', 'pageview');
  </script>
<?php endif; ?>

JavaScript

Ini berfungsi baik dengan JavaScript:

  <script>
  if(navigator.userAgent.indexOf("Speed Insights") == -1) {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-<PUT YOUR GOOGLE ANALYTICS ID HERE>', 'auto');
    ga('send', 'pageview');
  }
  </script>

NiloVelez sudah mengatakan: Jelas, itu tidak akan membuat perbaikan nyata, tetapi jika satu-satunya kekhawatiran Anda mendapatkan skor 100/100 ini akan melakukannya.

coba ini masukkan saja sebelumnya

<script async='async' src='https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js'></script> <script>var galite=galite||{};galite.UA="xx-xxxxxxx-x";</script>

Silakan ubah xx-xxxxxxx-x ke kode Anda, silakan periksa implementasinya di sini http://www.gee.web.id/2016/11/how-to-leverage-browser-caching-for-google-analitycs.html

Google memperingatkan agar tidak menggunakan salinan lokal dari skrip analitik. Namun jika Anda melakukannya, Anda mungkin ingin menggunakan salinan plugin & skrip debug lokal.

Kekhawatiran kedua dengan cache agresif adalah bahwa Anda akan mendapatkan hit dari halaman cache - yang mungkin telah berubah atau telah dihapus dari situs.

Untuk memperbaiki masalah ini, Anda harus mengunduh file secara lokal dan menjalankan tugas cron untuk terus memperbarui. Catatan: ini tidak membuat situs web Anda lebih cepat, jadi sebaiknya abaikan saja.

Namun untuk tujuan demonstrasi, ikuti panduan ini: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

Ini dapat melakukan triknya :)

<script>
  $.ajax({
  type: "GET",
  url: "https://www.google-analytics.com/analytics.js",
  success: function(){},
  dataType: "script",
  cache: true
  });
</script>

Bergantung pada penggunaan data Google Analytics Anda, jika Anda menginginkan informasi dasar (seperti kunjungan, interaksi UI) Anda mungkin tidak dapat menyertakan analytics.js sama sekali, namun masih mengumpulkan data dalam GA.

Salah satu opsi mungkin menggunakan protokol pengukuran dalam skrip cache. Google Analytics: Ikhtisar Protokol Pengukuran

Ketika Anda mengatur metode transportasi secara eksplisit ke gambar, Anda dapat melihat bagaimana GA membangun suar gambarnya sendiri.

ga('set', 'transport', 'image');

https://www.google-analytics.com/r/collect
  ?v={protocol-version}
  &tid={tracking-id}
  &cid={client-id}
  &t={hit-type}
  &dl={location}

Anda dapat membuat permintaan GET atau POST Anda sendiri dengan payload yang diperlukan.

Namun, jika Anda membutuhkan tingkat detail yang lebih besar, itu mungkin tidak akan sepadan dengan usaha Anda.

Anda dapat mengatur distribusi cloudfront yang memiliki www.google-analytics.com sebagai server asalnya dan mengatur header kedaluwarsa yang lebih lama dalam pengaturan distribusi cloudfront. Kemudian, ubah domain itu di cuplikan Google. Ini mencegah beban di server Anda sendiri dan kebutuhan untuk terus memperbarui file dalam tugas cron.

Ini pengaturan & lupa. Jadi, Anda mungkin ingin menambahkan lansiran penagihan ke cloudfront jika seseorang "menyalin" cuplikan Anda dan mencuri bandwidth Anda ;-)

Sunting: Saya sudah mencobanya dan itu tidak mudah, Cloudfront melewati header Cache-Control tanpa cara mudah untuk menghapusnya

Buka file https://www.google-analytics.com/analytics.js di tab baru, salin semua kode.

Sekarang buat folder di direktori web Anda, ganti namanya menjadi google-analytics.

Buat file teks dalam folder yang sama dan rekatkan semua kode yang Anda salin di atas.

Ganti nama file ga-local.js

Sekarang ubah URL untuk memanggil file Script Analytics yang dihosting secara lokal di Kode Google Analytics Anda. Ini akan terlihat seperti ini yaitu https://domain.xyz/google-analytics/ga.js

Terakhir, tempatkan kode Google analytics BARU Anda ke dalam footer halaman web Anda.

Anda baik untuk pergi. Sekarang periksa situs web Anda dari Google PageSpeed ​​Insights. Itu tidak akan menampilkan peringatan untuk Caching Browser Leverage Google Analytics. Dan satu-satunya masalah dengan solusi ini adalah, memperbarui Skrip Analytics secara manual.

Pada tahun 2020, agen pengguna Speed ​​Insights adalah: "Chrome-Lighthouse" untuk seluler dan "Google Page Speed ​​Insights" untuk desktop.

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Chrome-Lighthouse') === false  || stripos($_SERVER['HTTP_USER_AGENT'], 'Google Page Speed Insights') === false): ?>
// your google analytics code and other external script you want to hide from PageSpeed Insights here
<?php endif; ?>

Anda dapat mengecilkan semua skrip Anda di halaman, termasuk analytics.jsmenggunakan:

• Beberapa teknologi sisi server ( https://github.com/matthiasmullie/minify )
• Layanan eksternal ( http://www.cloudflare.com )

Ingatlah untuk memperkecil file sebelum menggunakannya. Kalau tidak, akan menghabiskan lebih banyak waktu pemrosesan.