PageSpeed Insights 99/100 debido a Google Analytics - ¿Cómo puedo almacenar en caché GA?

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

Este es el user-agent de 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” 

Puedes insertar una condición para evitar servir el script de analytics a PageSpeed:

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?> // tu código de analytics aquí <?php endif; ?> 

Obviamente, no mejorará realmente nada, pero si tu única preocupación es obtener una puntuación de 100/100 esto lo logrará.

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

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í tienes una solución muy simple utilizando JS, para el seguimiento básico de GA, que también funcionará para cachés / proxies de borde (esto fue convertido 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: Este es el script predeterminado de GA. Es posible que tengas otras llamadas ga(), y si es así, deberías revisar siempre el agente de usuario antes de llamar a ga(), de lo contrario podría dar error.

No me preocuparía por eso. No lo pongas en tu propio servidor, parece que este es un problema de Google, pero es lo mejor que se puede hacer. Poner el archivo en tu propio servidor creará muchos problemas nuevos.

Probablemente necesitan que el archivo se llame cada vez en lugar de obtenerlo de la memoria caché del cliente, ya que de esa manera no contarías las visitas.

Si tienes algún problema para sentirte bien con eso, ejecuta la URL de Google Insights en Google Insights mismo, diviértete, relájate y continúa con tu trabajo.

En los documentos de Google, han identificado un filtro de pagespeed que cargará el script de forma asíncrona:

ModPagespeedEnableFilters make_google_analytics_async

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

Algo importante a destacar es que el filtro se considera de alto riesgo. Según los documentos:

El filtro make_google_analytics_async es experimental y no ha sido ampliamente probado en el mundo real. Un caso en el que la reescritura causaría errores es si el filtro omite 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 descalificadores se omitirán si ocurren antes de la carga, están en atributos como "onclick" o si están en recursos externos. Se espera que esos casos sean raros.

Puedes intentar alojar el archivo analytics.js localmente y actualizar su contenido con un script de caché o manualmente.

El archivo js se actualiza solo algunas veces al año y si no necesitas nuevas características de seguimiento, actualízalo manualmente.

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

almacena localmente analytics.js, pero no es recomendado por google: https://support.google.com/analytics/answer/1032389?hl=en

no se recomienda porque google puede actualizar el script cuando desee, ¡así que simplemente haz un script que descargue el JavaScript de análisis cada semana y no tendrás problemas!

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

varvy.com (100/100 Google page speed insight) carga el código de Google Analytics 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); 

You can proxy the google analytics script via your own server, save it locally and auto update the file every hour to make sure it's always latest version from google.

I've done this on a couple of sites now and all is working fine.

Google Analytics Proxy Route in NodeJS / MEAN Stack

This is how I implemented it on my blog that's built with the MEAN stack.

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

Google Analytics Proxy Action Method in ASP.NET MVC

This is how I implemented it on other sites built with 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);
        }
    }
}

This is the CompressAttribute used by the MVC ProxyController for Gzip compression

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

Updated Google Analytics Script

On the client side I append the analytics path with the current date up to the hour so the browser won't use a cached version more than an hour old.

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

Agrega esto en tu 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-INSERTA TU ID DE GOOGLE ANALYTICS AQUÍ', 'auto'); ga('send', 'pageview'); </script> <?php endif; ?> 

Esto funciona correctamente 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-INSERTA TU ID DE GOOGLE ANALYTICS AQUÍ', 'auto'); ga('send', 'pageview'); } </script> 

NiloVelez ya ha dicho: Obviamente, no mejorará realmente nada, pero si tu única preocupación es obtener una puntuación de 100/100, esto lo conseguirá.

prueba esto solo inserta 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> 

Por favor cambia xx-xxxxxxx-x por tu código, por favor revisa la implementación aquí http://www.gee.web.id/2016/11/how-to-leverage-browser-caching-for-google-analitycs.html

En 2020, los agentes de usuario de Page Speed Insights son: "Chrome-Lighthouse" para móvil y "Google Page Speed Insights" para 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): ?> // aquí tu código de Google Analytics y otro script externo que quieras ocultar de PageSpeed Insights <?php endif; ?> 

Google advierte sobre el uso de copias locales de los scripts de análisis. Sin embargo, si lo estás haciendo, probablemente querrás usar copias locales de los complementos & el script de depuración.

Otra preocupación con la memoria caché agresiva es que recibirás visitas desde páginas en caché, que pueden haber cambiado o haber sido eliminadas del sitio.

Para solucionar este problema, tendrías que descargar el archivo localmente y ejecutar un trabajo cron para mantenerlo actualizado. Nota: esto no hace que tu sitio web sea más rápido en absoluto, así que es mejor ignorarlo.

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

¡Esto puede funcionar! :)

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

Dependiendo de cómo uses los datos de Google Analytics, si solo necesitas información básica (como visitas, interacciones de usuarios), es posible que no sea necesario incluir analytics.js, y aún así recopilar datos en GA.

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

Cuando estableces explícitamente el método de transporte en imagen, puedes 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} 

Puedes crear tus propias solicitudes GET o POST con la carga útil requerida.

Sin embargo, si necesitas un mayor nivel de detalle, probablemente no valga la pena el esfuerzo.

Puedes configurar una distribución de CloudFront que tenga www.google-analytics.com como su servidor de origen y establecer un encabezado de expiración más largo en la configuración de la distribución de CloudFront. Luego, modifica ese dominio en el fragmento de Google. Esto evita la carga en tu propio servidor y la necesidad de actualizar el archivo en un trabajo cron.

Esto se configura y se olvida. Así que es posible que desees agregar una alerta de facturación a CloudFront en caso de que alguien "copie" tu fragmento y robe tu ancho de banda ;-)

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

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

Ahora cree una carpeta en su directorio web, renómbrela como google-analytics.

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

Renombre el archivo ga-local.js

Ahora cambie la URL para llamar a su archivo de script de Google Analytics alojado localmente en su Código de Google Analytics. Se verá algo así: 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.

Estás listo para continuar. Ahora verifica tu sitio web en Google PageSpeed Insights. No mostrará la advertencia de Aprovechar el almacenamiento en caché del navegador de Google Analytics. Y el único problema con esta solución es actualizar regularmente el Script de Analytics manualmente.

Puedes minificar todos tus scripts en la página, incluyendo analytics.js, usando:

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

Recuerda minificar los archivos antes de usarlos. De lo contrario, consumirán más tiempo de procesamiento.