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

243

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.

sjmartin
sumber
1
Saya menggunakan metode cron, Tanpa penggunaan cron (memuat dan menyimpan cache. Saya dapat berbagi kode php jika Anda mau). Dan saya memperbaiki saran memperbaiki GA saya. Tetapi sedikit masalah yang tersisa di sana: Saya meninggalkan header "Kontrol-Cache: max-age = 604800". Yang jauh lebih tinggi dari 5 menit cache.
Roman Losev
6
Apakah itu benar-benar ide yang bagus? Caching file ini di server Anda berarti peramban harus mengunduh ulang alih-alih menggunakan yang sudah di-cache dengan mengunjungi situs lain menggunakan Google Analytics. Jadi itu mungkin sebenarnya sedikit memperlambat pengunjung Anda.
s427
Kemungkinan duplikat dari cache browser Leverage untuk pihak ke-3 JS
Joe

Jawaban:

240

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.

NiloVelez
sumber
4
Pintar ... Sayang sekali saya menggunakan edge caching karena skrip ini hanya akan berfungsi jika permintaan mencapai asal Anda untuk setiap permintaan :(
Amy Neville
49
Muat melalui JS lalu :)if(navigator.userAgent.indexOf("Speed Insights") == -1) { /* analytics here */ }
Half Crazed
1
@ Jim Lihat stackoverflow.com/questions/10734968/… - Anda akan menggunakan metode ini di { }dalam contoh saya, bersama dengan JS lain yang digunakan GA (seperti ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview');atau apa pun)
Half Crazed
1
@ Jim Saya telah menambahkan jawaban yang mencakup ini.
Half Crazed
6
Peringatan: Ini tidak berfungsi lagi. Wawasan Kecepatan Laman yang diberdayakan oleh Lighthouse menggunakan userAgent default, yang tidak dapat dideteksi lagi.
David Vielhuber
39

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.

jehna1
sumber
21

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.

Setengah gila
sumber
2
Bereaksi pada bagian "Catatan:", Anda dapat mendeklarasikan gasebagai ga = function(){};sebelum cuplikan gagal secara diam-diam ketika dijalankan ga();sehingga Anda tidak perlu memeriksa keberadaan fungsi ini di mana pun dalam kode Anda.
István Pálinkás
1
Cara menambahkan ini dalam skrip <script async src = " googletagmanager.com/gtag/js?id=UA-xx6600xx-1 " ><
Navnish Bhardwaj
16

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.

Leo Muller
sumber
68
Dia ingin tahu bagaimana dia bisa mencapai 100, bukan jika 99 baik-baik saja.
Erick Engelhardt
4
Jawaban ini tidak benar, tempat file Analytics.js diunduh tidak memengaruhi apakah analytics melacak atau tidak. Masalah hosting file analitik Anda sendiri adalah Anda harus selalu memperbarui secara manual ke versi terbaru (beberapa kali setahun).
Matthew Dolman
1
Terima kasih Matthew karena menunjukkannya. Rupanya saya salah, itu bagus, tapi tetap saja saya pikir itu bukan ide yang bagus untuk meng-host file ini di server Anda sendiri karena saya bisa membayangkan itu akan membuat banyak masalah baru. Pertanyaan OP adalah bagaimana mendapatkan 100 pada kecepatan halaman dan jawaban saya tidak perlu khawatir mencapai 100. Itu mungkin jawaban yang sangat menjengkelkan, tapi itu saya.
Leo Muller
3
jawaban yang bagus untuk orang-orang yang tersesat dengan berpikir 99 tidak cukup baik. lebih baik mendedikasikan waktu Anda pada masalah nyata.
linqu
@ErickEngelhardt Anda benar, tetapi jika orang mengajukan pertanyaan di mana Anda pikir mereka tidak bertujuan untuk tujuan terbaik, Anda harus memberi mereka petunjuk mana solusi yang mungkin melayani mereka lebih baik.
pengamat
10

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.

Cameron Scott
sumber
7

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);
ar099968
sumber
7
Bagaimana jika pengunjung tidak menggulir tetapi cukup klik tautan. Dia tidak akan dihitung dalam analitik.
Ross Ivantsiv
@RossIvantsiv Anda dapat menangani juga klik!
ar099968
6

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

Froggiz
sumber
Itu tidak mem-bypass Adblock sepenuhnya (masih memblokir panggilan ajax), tetapi setidaknya Anda mendapatkan sesi dan tampilan halaman
NiloVelez
5

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>
Jason
sumber
4

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.

Suriyaa
sumber
1

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

Wah
sumber
1
Ketahuilah bahwa ini untuk ga-lite daripada analitik standar
Rob Forrest
0

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.

Oren Bochman
sumber
0

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/

Mo Beigi
sumber
"Ini tidak membuat situs web Anda lebih cepat" itu belum tentu benar. Seperti dalam teori, gzipping file gabungan JS tidak kritis dengan analitik yang disertakan harus dikompres sedikit lebih kecil daripada file analitik yang terpisah karena kamus bersama. Mungkin lebih banyak masalah daripada nilainya.
Ray Foss
0

Ini dapat melakukan triknya :)

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

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.

Jonathan
sumber
Di mana koneksi ke Pagespeed?
Nico Haase
Dengan tidak memuat analytics.js Anda menghindari penalti kecepatan halaman.
Jonathan
Ya. Dan dengan melewatkan semua CSS, JS, dan gambar dari halaman Anda, itu akan memuat lebih cepat. Melewati Google Analytics bukanlah opsi menurut OP
Nico Haase
Kecuali bahwa data masih direkam di Google Analytics, saya pikir jawaban saya valid, dan dengan jelas menyatakan bahwa tergantung pada tingkat detail yang diperlukan dari Google Analytics, mungkin ini merupakan opsi yang layak dipertimbangkan yang penting akan tetap mencatat kunjungan, interaksi UI, dan kemungkinan metrik lainnya. . Jika OP ingin mengoptimalkan untuk 1% akhir, itu mungkin merupakan optimasi yang perlu dipertimbangkan.
Jonathan
@NicoHaase Saya sudah mengedit komentar saya untuk mudah-mudahan membuat poin saya lebih jelas. Tertarik mendengar pikiran Anda.
Jonathan
0

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

Jan M
sumber
0

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.

Resmi
sumber
0

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; ?>
Eduard Dimitrov
sumber
-13

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

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

Erick Engelhardt
sumber
6
analytics.js sudah diperkecil dari sumbernya
João Pimentel Ferreira