PageSpeed ​​Insights 99/100 debido a Google Analytics: ¿cómo puedo almacenar en caché GA?

Estoy en una búsqueda para alcanzar 100/100 en PageSpeed ​​y ya casi estoy allí. Estoy tratando de encontrar una buena solución para almacenar en caché Google Analytics.

Aquí está el mensaje que recibo:

Aproveche el almacenamiento en caché del navegador Establecer una fecha de caducidad o una antigüedad máxima en los encabezados HTTP para los recursos estáticos indica al navegador que cargue los recursos descargados previamente desde el disco local en lugar de hacerlo a través de la red. Aproveche el almacenamiento en caché del navegador para los siguientes recursos almacenables en caché: http://www.google-analytics.com/analytics.js (2 horas)

La única solución que encontré fue de 2012 y no creo que sea una buena solución. Esencialmente copia el código GA y lo aloja usted mismo. Luego ejecuta un trabajo cron para volver a verificar Google una vez al día para obtener el último código GA y reemplazarlo.

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

¿Qué más puedo hacer para llegar a 100/100 mientras también uso Google Analytics?

Gracias.

Bueno, si Google te está engañando, puedes engañar a Google:

Este es el agente de usuario para 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”

Puede insertar un condicional para evitar publicar el script de análisis en PageSpeed:

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

Obviamente, no hará ninguna mejora real, pero si su única preocupación es obtener un puntaje de 100/100, esto lo hará.

Hay un subconjunto de la biblioteca js de Google Analytics llamado ga-lite que puede almacenar en caché como quiera.

La biblioteca utiliza la API REST pública de Google Analytics para enviar los datos de seguimiento del usuario a Google. Puedes leer más en la publicación del blog sobre ga-lite .

Descargo de responsabilidad: soy el autor de esta biblioteca. Luché con este problema específico y el mejor resultado que encontré fue implementar esta solución.

Aquí hay una solución realmente simple usando JS, para el seguimiento básico de GA, que también funcionará para cachés / proxies de borde (esto se convirtió de un comentario):

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: Esta es la secuencia de comandos GA predeterminada. Es posible que tenga otras ga()llamadas y, de ser así, deberá verificar siempre el agente de usuario antes de llamar ga(), de lo contrario, podría producirse un error.

Yo no me preocuparía por eso. No lo pongas en tu propio servidor, parece que este es un problema con Google, pero es tan bueno como se pone. Poner el archivo en su propio servidor creará muchos problemas nuevos.

Probablemente necesiten que se llame al archivo cada vez en lugar de obtenerlo del caché del cliente, ya que de esa manera no se contarían las visitas.

Si tiene un problema para sentirse bien con eso, ejecute la URL de Google Insights en Google Insights, ríase, relájese y continúe con su trabajo.

En los documentos de Google, han identificado un pagespeedfiltro que cargará el script de forma asincrónica:

ModPagespeedEnableFilters make_google_analytics_async

Puede encontrar la documentación aquí: https://developers.google.com/speed/pagespeed/module/filter-make-google-analytics-async

Una cosa a destacar es que el filtro se considera de alto riesgo. De los documentos:

El filtro make_google_analytics_async es experimental y no ha tenido pruebas exhaustivas en el mundo real. Un caso en el que una reescritura causaría errores es si el filtro pierde llamadas a métodos de Google Analytics que devuelven valores. Si se encuentran dichos métodos, se omite la reescritura. Sin embargo, los métodos de descalificación se perderán si vienen antes de la carga, están en atributos como "onclick" o si están en recursos externos. Se espera que esos casos sean raros.

varvy.com ( información de velocidad de la página de Google 100/100 ) carga el código de Google Analitycs solo si el usuario hace un desplazamiento de la página:

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

Puede intentar alojar el analytics.js localmente y actualizar su contenido con un script de almacenamiento en caché o manualmente.

El archivo js se actualiza solo algunas veces al año y, si no necesita nuevas funciones de seguimiento, actualícelo manualmente.

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

tienda localy analytics.js, pero google no lo recomienda: https://support.google.com/analytics/answer/1032389?hl=en

no se recomienda porque Google puede actualizar la secuencia de comandos cuando lo desee, así que solo haga una secuencia de comandos que descargue JavaScript de análisis cada semana y no tendrá problemas.

Por cierto, esta solución evita que adblock bloquee los scripts de google analytics

Puede usar el proxy del script de Google Analytics a través de su propio servidor, guardarlo localmente y actualizar automáticamente el archivo cada hora para asegurarse de que siempre sea la última versión de Google.

He hecho esto en un par de sitios ahora y todo funciona bien.

Ruta del proxy de Google Analytics en NodeJS / MEAN Stack

Así es como lo implementé en mi blog que está construido con la pila 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);
    }
});

Método de acción de proxy de Google Analytics en ASP.NET MVC

Así es como lo implementé en otros sitios creados 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);
        }
    }
}

Este es el atributo CompressAttribute utilizado por MVC ProxyController para la compresión 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 actualizado de Google Analytics

En el lado del cliente, agrego la ruta de análisis con la fecha actual hasta la hora para que el navegador no use una versión en caché de más de una hora de antigüedad.

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

Para 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";
    }

Luego cambie la ruta https://www.google-analytics.com/analytics.js a https://yoursite.com/analytics.js

PHP

Agregue esto en su código 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

Esto funciona bien 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 ya dijo: Obviamente, no hará ninguna mejora real, pero si su única preocupación es obtener un puntaje de 100/100, lo hará.

intente esto solo inserte antes

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

Cambie xx-xxxxxxx-x a su código, verifique la implementación aquí http://www.gee.web.id/2016/11/how-to-leverage-browser-caching-for-google-analitycs.html

Google advierte contra el uso de copias locales de los scripts de análisis. Sin embargo, si lo está haciendo, probablemente quiera usar copias locales de los complementos y el script de depuración.

Una segunda preocupación con el almacenamiento en caché agresivo es que recibirá visitas de páginas en caché, que pueden haber cambiado o se han eliminado del sitio.

Para solucionar este problema, deberá descargar el archivo localmente y ejecutar un trabajo cron para seguir actualizando. Nota: esto no hace que su sitio web sea más rápido, por lo que es mejor ignorarlo.

Sin embargo, para fines de demostración, siga esta guía: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

Esto puede hacer el truco :)

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

Dependiendo de su uso de los datos de Google Analytics, si desea información básica (como visitas, interacciones de UI), es posible que no pueda incluir analytics.js en absoluto, y aún así recopilar datos en GA.

Una opción puede ser usar el protocolo de medición en un script en caché. Google Analytics: Descripción general del protocolo de medición

Cuando establece el método de transporte explícitamente en imagen, puede ver cómo GA construye sus propias balizas de imagen.

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}

Puede crear sus propias solicitudes GET o POST con la carga útil requerida.

Sin embargo, si necesita un mayor nivel de detalle, probablemente no valdrá la pena.

Puede configurar una distribución de Cloudfront que tenga www.google-analytics.com como su servidor de origen y establecer un encabezado de vencimiento más largo en la configuración de distribución de Cloudfront. Luego modifique ese dominio en el fragmento de Google. Esto evita la carga en su propio servidor y la necesidad de seguir actualizando el archivo en un trabajo cron.

Esto es configurar y olvidar. Por lo tanto, es posible que desee agregar una alerta de facturación a Cloudfront en caso de que alguien "copie" su fragmento y le robe el ancho de banda ;-)

Editar: lo intenté y no es tan fácil, Cloudfront pasa por el encabezado Cache-Control sin una forma fácil de eliminarlo

Abra https://www.google-analytics.com/analytics.js archivo en una nueva pestaña, copie todo el código.

Ahora cree una carpeta en su directorio web, cámbiele el nombre a google-analytics.

Cree un archivo de texto en la misma carpeta y pegue todo el código que copió anteriormente.

Cambie el nombre del archivo ga-local.js

Ahora cambie la URL para llamar a su archivo de Script Analytics alojado localmente en su Código de Google Analytics. Se verá algo así, es decir https://domain.xyz/google-analytics/ga.js

Finalmente, coloque su NUEVO código de Google Analytics en el pie de página de su página web.

Tú eres bueno para irte. Ahora revise su sitio web de Google PageSpeed ​​Insights. No mostrará la advertencia para el apalancamiento del almacenamiento en caché de Google Analytics. Y el único problema con esta solución es actualizar periódicamente la secuencia de comandos Analytics.

En 2020, los agentes de usuario de Page Speed ​​Insights son: "Chrome-Lighthouse" para dispositivos móviles y "Google Page Speed ​​Insights" para computadoras de escritorio.

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

Puede minimizar todos sus scripts en la página, incluido el analytics.jsuso de:

• Alguna tecnología del lado del servidor ( https://github.com/matthiasmullie/minify )
• Servicio externo ( http://www.cloudflare.com )

Recuerde minimizar los archivos antes de usarlo. De lo contrario, consumirá más tiempo de procesamiento.