PageSpeed Insights 99/100 por causa do Google Analytics - Como posso cache GA?

Existe um subconjunto da biblioteca js do Google Analytics chamado ga-lite que pode cache como quiser.

A biblioteca utiliza a API pública de descanso do Google Analytics para enviar os dados de localização do utilizador para o Google. Você pode ler mais de O post do blog sobre ga-lite .

Disclaimer: Eu sou o autor desta biblioteca. Lutei contra este problema específico e o melhor resultado que encontrei foi implementar esta solução.

Se você tem um problema para se sentir bem com isso, execute o URL do Google insights sobre o próprio Google insights, ria-se, relaxe e continua com o teu trabalho.

Aqui está uma solução muito simples usando JS, para rastreamento GA básico, que também irá funcionar para caches/proxies edge (este foi convertido a partir de um comentário):

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 é o programa GA por omissão. Você pode ter outras chamadas ga(), e se assim for, você precisa sempre verificar o agente de usuário antes de chamar ga(), caso contrário ele pode errar.

No Google docs, identificaram um filtro pagespeed que irá carregar o script de forma assíncrona:

ModPagespeedEnableFilters make_google_analytics_async

O filtro make_google_analytics_async é experimental e não teve testes extensivos no mundo real. Um caso em que a reescrever causaria erros é se o filtro falha chamadas para os métodos do Google Analytics que retornam valores. Se tais métodos forem encontrados, a reescrita é ignorada. No entanto, os métodos desqualificantes serão perdidos se eles vêm antes da carga, estão em atributos como "onclick", ou se eles estão em recursos externos. Espera-se que esses casos sejam raros.

O ficheiro js é actualizado apenas algumas vezes por ano e, se não precisar de novas funcionalidades de rastreio, actualize-o manualmente.

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

Guardar os analisadores locais.js, mas não é recomendado pelo google: https://support.google.com/analytics/answer/1032389?hl=en

Não é recomendado porque o google pode atualizar o script quando quiser, por isso basta fazer um script que baixe o JavaScript analítico a cada semana e você não terá problemas !

A propósito, esta solução impede o adblock de bloquear scripts do Google analytics

Pode substituir o programa Google analytics através do seu próprio servidor, gravá-lo localmente e actualizar automaticamente o ficheiro a cada hora para se certificar de que é sempre a versão mais recente do google.

A rota do 'Proxy' do Google Analytics na pilha média / NodeJS

Foi assim que o implementei no meu blog que foi construído com a pilha média.

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 Acção 'Proxy' do Google Analytics em 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 é o CompressAttribute usado pelo MVC ProxyController para compressão 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);
        }
    }
}

Programa De Análise Do Google Actualizado

Do lado do cliente, adiciono o caminho de análise com a data actual até à hora, para que o navegador não use uma versão em cache com mais de uma hora de idade.

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

Varvy.com (100/100 o Google page speed insight só carrega o código do Google analitycs se o utilizador fizer um pergaminho da 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);

PHP

Adicione isto no seu código HTML ou 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

Isto funciona bem com 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 já disse: obviamente, não vai fazer nenhuma melhoria real, mas se a sua única preocupação é obter uma pontuação de 100/100 isto vai fazê-lo.

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

Depois muda de canal https://www.google-analytics.com/analytics.js a https://yoursite.com/analytics.js

Para corrigir este problema, teria de baixar o ficheiro localmente e executar uma tarefa de cron para continuar a actualizar. Nota: isto não faz com que o seu site seja mais rápido de todo, por isso é melhor simplesmente ignorá-lo.

Para fins de demonstração, no entanto, siga o presente guia.: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

Tente isto apenas inserir Antes de

<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, mude xx-xxxxxxxx-x para o seu código, verifique aqui a implementação.http://www.gee.web.id/2016/11/how-to-leverage-browser-caching-for-google-analitycs.html

O Google acautela contra a utilização de cópias locais dos scripts do analtics. No entanto, se o estiver a fazer, provavelmente irá querer usar cópias locais dos 'plugins' e do programa de depuração.

Uma segunda preocupação com caching agressivo é que você vai receber hits de páginas em cache - que podem ter mudado ou foram removidos do site.

Isto pode resolver o problema:)

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

Dependendo da sua utilização dos dados do Google Analytics, se quiser informações básicas (tais como visitas, interacções UI), poderá não incluir análises.js em tudo, ainda coletar dados em GA.

Uma opção pode ser usar o protocolo de medição num script em cache. Google Analytics: Análise Do Protocolo De Medição

Quando você define o método de transporte explicitamente para imagem, você pode ver como GA constrói seus próprios faróis de imagem.

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}

Tu pode criar os seus próprios pedidos de GET ou POST com a carga útil necessária.

Isto é configuração & esquecer. Por isso, poderá querer adicionar um alerta de facturação à cloudfront no caso de alguém "copiar" o seu excerto e roubar a sua largura de banda; -)

Editar: I tentei e não é assim tão fácil, Cloudfront passa através do cabeçalho de controle de Cache, sem nenhuma maneira fácil de removê-lo

Abrir https://www.google-analytics.com/analytics.js file em uma nova página, copie todo o código.

Agora crie uma pasta na sua pasta web, renomeando-a para google-analytics.

Crie um ficheiro de texto na mesma pasta e cole todo o código que copiou acima.

Mudar o nome do ficheiro ga-local.js

Agora mude o URL para chamar o seu ficheiro de Script Analytics hospedado localmente no seu código do Google Analytics. = = Ligações externas = = https://domain.xyz / google-analytics / ga.js

Pode minificar todos os seus programas na página, incluindo analytics.js usando:

• alguma tecnologia do lado do servidor ( https://github.com/matthiasmullie/minify)
• serviço Externo (http://www.cloudflare.com)

Lembre-se de minificar os ficheiros antes de os usar. Caso contrário, consumirá mais tempo de processamento.