PageSpeed ​​Insights 99/100 a causa di Google Analytics - Come posso memorizzare nella cache GA?


243

Sto cercando di raggiungere 100/100 su PageSpeed ​​e ci sono quasi. Sto cercando di trovare una buona soluzione per memorizzare nella cache Google Analytics.

Ecco il messaggio che ricevo:

Sfrutta la memorizzazione nella cache del browser Se si imposta una data di scadenza o un'età massima nelle intestazioni HTTP per le risorse statiche, il browser carica le risorse precedentemente scaricate dal disco locale anziché sulla rete. Sfrutta la memorizzazione nella cache del browser per le seguenti risorse memorizzabili nella cache: http://www.google-analytics.com/analytics.js (2 ore)

L'unica soluzione che ho trovato era del 2012 e non credo sia una buona soluzione. In sostanza, copi il codice GA e lo host da solo. Quindi esegui un processo cron per ricontrollare Google una volta al giorno per acquisire l'ultimo codice GA e sostituirlo.

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

Cos'altro posso fare per raggiungere 100/100 usando anche Google Analytics?

Grazie.


1
Ho usato il metodo cron, senza l'utilizzo di cron (carica e carica cache. Posso condividere il codice php se vuoi). E ho risolto il mio suggerimento per la correzione GA. Ma il piccolo problema è rimasto lì: ho lasciato l'intestazione "Cache-Control: max-age = 604800". Che è molto più alto di 5 minuti di cache.
Roman Losev,

6
È davvero una buona idea, però? La memorizzazione nella cache di questo file sul tuo server significa che il browser dovrà riscaricarlo invece di riutilizzare quello che ha già memorizzato nella cache visitando altri siti utilizzando Google Analytics. Quindi potrebbe effettivamente rallentare leggermente i tuoi visitatori.
s427,

Risposte:


241

Bene, se Google ti tradisce, puoi ingannare Google:

Questo è l'agente utente per 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”

Puoi inserire un condizionale per evitare di pubblicare lo script di analisi in PageSpeed:

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

Ovviamente, non farà alcun miglioramento reale, ma se la tua unica preoccupazione è ottenere un punteggio di 100/100, lo farà.


4
Clever ...... peccato che io usi il caching edge perché questo script funzionerà solo se le richieste raggiungono la tua origine per ogni richiesta :(
Amy Neville,

49
Caricalo tramite JS quindi :)if(navigator.userAgent.indexOf("Speed Insights") == -1) { /* analytics here */ }
Half Crazed

1
@Jim See stackoverflow.com/questions/10734968/... - si dovrebbe utilizzare questo metodo all'interno del { }nel mio esempio, insieme a qualsiasi altro JS che usi GA (come ad esempio ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview');o altro)
Mezza Crazed

1
@Jim Ho aggiunto una risposta che copre questo.
Half Crazed,

6
Attenzione: questo non funziona più. Page Speed ​​Insights fornito da Lighthouse utilizza un userAgent predefinito, che non può più essere rilevato.
David Vielhuber,

39

C'è un sottoinsieme della libreria js di Google Analytics chiamato ga-lite che puoi memorizzare nella cache come vuoi.

La biblioteca utilizza l'API REST pubblica di Google Analytics per inviare i dati di tracciamento dell'utente a Google. Puoi leggere di più dal post del blog su ga-lite .

Disclaimer: sono l'autore di questa biblioteca. Ho lottato con questo problema specifico e il miglior risultato che ho trovato è stato implementare questa soluzione.


21

Ecco una soluzione davvero semplice che utilizza JS, per il tracciamento GA di base, che funzionerà anche con cache / proxy edge (questo è stato convertito da un commento):

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');
}

Nota: questo è lo script GA predefinito. Potresti avere altre ga()chiamate e, in tal caso, dovrai sempre controllare l'agente utente prima di chiamare ga(), altrimenti potrebbe fuoriuscire.


2
Reagendo alla sezione "Nota:", puoi dichiarare gacome ga = function(){};prima che lo snippet fallisca silenziosamente quando eseguito, ga();quindi non devi controllare l'esistenza di questa funzione ovunque nel tuo codice.
István Pálinkás,

1
Come aggiungerlo nello script <script async src = " googletagmanager.com/gtag/js?id=UA-xx6600xx-1 > >
Navnish Bhardwaj

16

Non me ne preoccuperei. Non metterlo sul tuo server, sembra che questo sia un problema con Google, ma buono come sembra. Mettere il file sul proprio server creerà molti nuovi problemi.

Probabilmente hanno bisogno che il file venga chiamato ogni volta piuttosto che ottenerlo dalla cache del client, poiché in questo modo non conteggi le visite.

Se hai problemi a sentirti bene, esegui l'URL di Google Insights su Google Insights stesso, fatti una risata, rilassati e vai avanti con il tuo lavoro.


68
Vuole sapere come può raggiungere 100, non se 99 è ok.
Erick Engelhardt,

4
Questa risposta non è vera, da dove viene scaricato il file Analytics.js non influisce sull'analisi delle tracce. Il problema di ospitare il tuo file di analisi è che devi sempre aggiornare manualmente all'ultima versione (alcune volte all'anno).
Matthew Dolman,

1
Grazie Matteo per averlo sottolineato. Apparentemente ho sbagliato, il che è buono, ma non credo sia una buona idea ospitare questo file sul tuo server perché posso immaginare che creerà molti nuovi problemi. La domanda del PO era come arrivare a 100 sulla velocità della pagina e la mia risposta non è quella di preoccuparmi di arrivare a quel 100. Potrebbe essere una risposta davvero fastidiosa, ma sono io.
Leo Muller,

3
una buona risposta per le persone che si sono perse pensando che 99 non è abbastanza buono. meglio dedicare il tuo tempo a problemi reali.
Linqu,

@ErickEngelhardt Hai ragione, ma se le persone fanno una domanda in cui pensi che non stiano mirando al miglior obiettivo, dovresti dare loro un avvertimento su quale soluzione potrebbe servire meglio.
osservatore

10

Nei documenti di Google, hanno identificato un pagespeedfiltro che caricherà lo script in modo asincrono:

ModPagespeedEnableFilters make_google_analytics_async

Puoi trovare la documentazione qui: https://developers.google.com/speed/pagespeed/module/filter-make-google-analytics-async

Una cosa da sottolineare è che il filtro è considerato ad alto rischio. Dai documenti:

Il filtro make_google_analytics_async è sperimentale e non ha avuto test approfonditi nel mondo reale. Un caso in cui una riscrittura causerebbe errori è se il filtro non risponde alle chiamate ai metodi di Google Analytics che restituiscono valori. Se vengono trovati tali metodi, la riscrittura viene saltata. Tuttavia, i metodi di squalifica verranno persi se vengono prima del caricamento, sono in attributi come "onclick" o se si trovano in risorse esterne. Questi casi dovrebbero essere rari.


7

varvy.com ( 100/100 Google Speed Insight) carica il codice di Google Analitycs solo se l'utente effettua uno scorrimento della pagina:

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);

7
Che cosa succede se il visitatore non scorre ma fa semplicemente clic su un collegamento. Non verrà conteggiato nell'analisi.
Ross Ivantsiv,

@RossIvantsiv puoi gestire anche il clic!
ar099968,

6

Puoi provare a ospitare localmente analytics.js e aggiornarne il contenuto con uno script di memorizzazione nella cache o manualmente.

Il file js viene aggiornato solo poche volte all'anno e se non hai bisogno di nuove funzionalità di monitoraggio aggiornalo manualmente.

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


2
Attenzione, questo non è esplicitamente supportato da Google: support.google.com/analytics/answer/1032389?hl=it
acciaio

6

store localy analytics.js, ma non è consigliato da Google: https://support.google.com/analytics/answer/1032389?hl=it

non è raccomandato perché google può aggiornare gli script quando vogliono, quindi basta fare uno script che scarichi javascript di analisi ogni settimana e non avrai problemi!

A proposito, questa soluzione impedisce ad adblock di bloccare gli script di analisi di Google


Non aggira completamente Adblock (blocca ancora le chiamate Ajax), ma almeno ottieni sessioni e visualizzazioni di pagina
Ajax

5

Puoi eseguire il proxy dello script di analisi di Google tramite il tuo server, salvarlo localmente e aggiornare automaticamente il file ogni ora per assicurarti che sia sempre la versione più recente di google.

L'ho fatto su un paio di siti ora e tutto funziona bene.

Percorso proxy di Google Analytics nello stack NodeJS / MEAN

Ecco come l'ho implementato sul mio blog che è stato creato con lo stack 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);
    }
});

Metodo di azione proxy di Google Analytics in ASP.NET MVC

È così che l'ho implementato su altri siti creati con 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);
        }
    }
}

Questo è CompressAttribute utilizzato da MVC ProxyController per la compressione 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);
        }
    }
}

Script di Google Analytics aggiornato

Sul lato client aggiungo il percorso di analisi con la data corrente fino all'ora in modo che il browser non utilizzi una versione cache più vecchia di un'ora.

<!-- 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>


4

PHP

Aggiungi questo nel tuo codice HTML o PHP:

<?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

Funziona bene con 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 ha già detto: ovviamente, non farà alcun miglioramento reale, ma se la tua unica preoccupazione è ottenere un punteggio di 100/100, lo farà.



0

Google mette in guardia contro l'utilizzo di copie locali degli script di analisi. Tuttavia, se lo stai facendo, probabilmente vorrai usare copie locali dei plugin e dello script di debug.

Un secondo problema con la cache aggressiva è che riceverai hit da pagine memorizzate nella cache, che potrebbero essere state modificate o rimosse dal sito.


0

Per risolvere questo problema, è necessario scaricare il file localmente ed eseguire un processo cron per continuare l'aggiornamento. Nota: questo non rende il tuo sito web più veloce, quindi è meglio ignorarlo.

A scopo dimostrativo, tuttavia, segui questa guida: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/


"Questo non rende il tuo sito web più veloce" che non è necessariamente vero. Come in teoria, il gzip di un JS concatenato non critico di un file con analisi inclusa dovrebbe comprimere leggermente più piccolo di un file di analisi separato a causa del dizionario condiviso. Forse più guai di quanto valga la pena.
Ray Foss,

0

Questo può fare il trucco :)

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

0

A seconda dell'utilizzo dei dati di Google Analytics, se desideri informazioni di base (come visite, interazioni dell'interfaccia utente) potresti non essere in grado di includere affatto analytics.js, ma raccogliere comunque i dati in GA.

Un'opzione potrebbe essere invece quella di utilizzare il protocollo di misurazione in uno script memorizzato nella cache. Google Analytics: panoramica del protocollo di misurazione

Quando si imposta esplicitamente il metodo di trasporto su image, è possibile vedere come GA costruisce i propri beacon immagine.

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}

È possibile creare le proprie richieste GET o POST con il payload richiesto.

Tuttavia, se hai bisogno di un livello di dettaglio maggiore, probabilmente non varrà la pena.


Dov'è la connessione a Pagespeed?
Nico Haase,

Non caricando analytics.js si evita la penalità di pagepage.
Jonathan,

Si. E saltando tutto quel CSS, JS e immagini fuori dalla tua pagina, si caricherà ancora più velocemente. Saltare Google Analytics non è un'opzione secondo l'OP
Nico Haase del

Ad eccezione del fatto che i dati sono ancora registrati in Google Analytics, penso che la mia risposta sia valida e che sia chiaramente affermato che, a seconda del livello di dettaglio richiesto da Google Analytics, potrebbe essere un'opzione che vale la pena considerare che è importante registrare ancora visite, interazioni dell'interfaccia utente e potenzialmente altre metriche . Se l'OP sta cercando di ottimizzare per l'1% finale, potrebbe essere un'ottimizzazione che vale la pena considerare.
Jonathan,

@NicoHaase Ho modificato il mio commento per rendere più chiaro il mio punto. Interessato ad ascoltare i tuoi pensieri.
Jonathan,

0

È possibile impostare una distribuzione cloudfront con www.google-analytics.com come server di origine e impostare un'intestazione di scadenza più lunga nelle impostazioni di distribuzione cloudfront. Quindi modifica quel dominio nello snippet di Google. Ciò impedisce il caricamento sul proprio server e la necessità di continuare ad aggiornare il file in un processo cron.

Questa è installazione e dimentica. Quindi potresti voler aggiungere un avviso di fatturazione al cloudfront nel caso in cui qualcuno "copi" il tuo snippet e rubi la tua larghezza di banda ;-)

Modifica: l'ho provato e non è così facile, Cloudfront passa attraverso l'intestazione Cache-Control senza un modo semplice per rimuoverlo


0

Apri il file https://www.google-analytics.com/analytics.js in una nuova scheda, copia tutto il codice.

Ora crea una cartella nella tua directory web, rinominala in google-analytics.

Crea un file di testo nella stessa cartella e incolla tutto il codice che hai copiato sopra.

Rinomina il file ga-local.js

Ora modifica l'URL per chiamare il tuo file di script Analytics ospitato localmente nel tuo codice di Google Analytics. Sarà simile a questo, ad esempio https://domain.xyz/google-analytics/ga.js

Infine, inserisci il tuo NUOVO codice analitico google nel piè di pagina della tua pagina web.

Sei bravo ad andare. Ora controlla il tuo sito Web di Google PageSpeed ​​Insights. Non mostrerà l'avvertenza per sfruttare la cache del browser Google Analytics. E l'unico problema con questa soluzione è aggiornare manualmente lo Script di Analytics manualmente.


0

Nel 2020 gli interpreti di Page Speed ​​Insights sono: "Chrome-Lighthouse" per dispositivi mobili e "Google Page Speed ​​Insights" per 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; ?>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.