navegador - PageSpeed Insights 99/100 debido a Google Analytics: ¿cómo puedo almacenar en caché GA?
aprovechar el almacenamiento en caché del navegador solucion (19)
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>
ya dijo: Obviamente, no hará ninguna mejora real, pero si su única preocupación es obtener un puntaje de 100/100, lo hará.
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 copie el código GA y lo aloje 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.
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, 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á más o menos 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 el Script de análisis de forma manual.
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 llamadas
ga()
y, de ser así, deberá verificar siempre el agente de usuario antes de llamar a
ga()
, de lo contrario, podría producirse un error.
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, lo hará.
Dependiendo del uso que haga de los datos de Google Analytics, si desea información básica (como visitas, interacciones de IU), es posible que no pueda incluir analytics.js, 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.
En los documentos de Google, han identificado un filtro de
pagespeed
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.
Esto puede hacer el truco :)
<script>
$.ajax({
type: "GET",
url: "https://www.google-analytics.com/analytics.js",
success: function(){},
dataType: "script",
cache: true
});
</script>
Google support.google.com/analytics/answer/1032389?hl=en 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 concern con el almacenamiento en caché agresivo es que recibirá visitas de las páginas almacenadas en caché, que pueden haber cambiado o se han eliminado del sitio.
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.
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
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/
Puede configurar una distribución de frente de nube 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 frente de nube. 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 robe su 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
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 ninguna nueva función de seguimiento, actualícelo manualmente.
https://developers.google.com/analytics/devguides/collection/analyticsjs/changelog
Puede minimizar todos sus scripts en la página, incluido
analytics.js
utilizando:
- 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.
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>
Yo no me preocuparía por eso. No lo pongas en tu propio servidor, parece que este es un problema con Google, pero 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.
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
tienda localy analytics.js, pero google no lo recomienda: 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
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);