PageSpeed ​​Insights 99/100 aufgrund von Google Analytics - Wie kann ich GA zwischenspeichern?

Ich bin auf der Suche nach 100/100 auf PageSpeed ​​und bin fast da. Ich versuche, eine gute Lösung zum Zwischenspeichern von Google Analytics zu finden.

Hier ist die Nachricht, die ich bekomme:

Browser-Caching nutzen Durch Festlegen eines Ablaufdatums oder eines Höchstalters in den HTTP-Headern für statische Ressourcen wird der Browser angewiesen, zuvor heruntergeladene Ressourcen nicht über das Netzwerk, sondern von der lokalen Festplatte zu laden. Nutzen Sie das Browser-Caching für die folgenden zwischenspeicherbaren Ressourcen: http://www.google-analytics.com/analytics.js (2 Stunden)

Die einzige Lösung, die ich gefunden habe, war aus dem Jahr 2012 und ich denke nicht, dass es eine gute Lösung ist. Im Wesentlichen kopieren Sie den GA-Code und hosten ihn selbst. Anschließend führen Sie einen Cron-Job aus, um Google einmal täglich erneut zu überprüfen, um den neuesten GA-Code abzurufen und zu ersetzen.

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

Was kann ich noch tun, um 100/100 zu erreichen, während ich gleichzeitig Google Analytics verwende?

Danke dir.

Wenn Google Sie betrügt, können Sie Google zurück betrügen:

Dies ist der Benutzeragent für 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”

Sie können eine Bedingung einfügen, um zu vermeiden, dass das Analyseskript an PageSpeed ​​gesendet wird:

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

Natürlich wird es keine wirkliche Verbesserung bringen, aber wenn Ihre einzige Sorge darin besteht, eine 100/100 Punktzahl zu erreichen, wird dies es tun.

Es gibt eine Teilmenge der Google Analytics js-Bibliothek namens ga-lite , die Sie nach Belieben zwischenspeichern können.

Die Bibliothek verwendet die öffentliche REST-API von Google Analytics, um die Nutzer-Tracking-Daten an Google zu senden. Sie können mehr aus dem Blog-Beitrag über Ga-Lite lesen .

Haftungsausschluss: Ich bin der Autor dieser Bibliothek. Ich hatte mit diesem speziellen Problem zu kämpfen und das beste Ergebnis war die Implementierung dieser Lösung.

Hier ist eine wirklich einfache Lösung mit JS für die grundlegende GA-Verfolgung, die auch für Edge-Caches / Proxys funktioniert (dies wurde aus einem Kommentar konvertiert):

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

Hinweis: Dies ist das Standard-GA-Skript. Möglicherweise haben Sie andere ga()Anrufe. In diesem Fall müssen Sie vor dem Anruf immer den Benutzeragenten überprüfen ga(), da sonst ein Fehler auftreten kann.

Ich würde mir darüber keine Sorgen machen. Stellen Sie es nicht auf Ihren eigenen Server, es klingt so, als wäre dies ein Problem bei Google, aber so gut es geht. Wenn Sie die Datei auf Ihrem eigenen Server ablegen, entstehen viele neue Probleme.

Wahrscheinlich muss die Datei jedes Mal aufgerufen werden, anstatt sie aus dem Cache des Clients abzurufen, da Sie auf diese Weise die Besuche nicht zählen würden.

Wenn Sie ein Problem damit haben, führen Sie die Google Insights-URL auf Google Insights selbst aus, lachen Sie, entspannen Sie sich und machen Sie mit Ihrer Arbeit weiter.

In den Google-Dokumenten haben sie einen pagespeedFilter identifiziert , der das Skript asynchron lädt:

ModPagespeedEnableFilters make_google_analytics_async

Die Dokumentation finden Sie hier: https://developers.google.com/speed/pagespeed/module/filter-make-google-analytics-async

Hervorzuheben ist, dass der Filter als hohes Risiko eingestuft wird. Aus den Dokumenten:

Der Filter make_google_analytics_async ist experimentell und wurde nicht ausführlich in der Praxis getestet. Ein Fall, in dem ein Umschreiben Fehler verursachen würde, besteht darin, dass der Filter keine Aufrufe von Google Analytics-Methoden aufruft, die Werte zurückgeben. Wenn solche Methoden gefunden werden, wird das Umschreiben übersprungen. Die Disqualifizierungsmethoden werden jedoch übersehen, wenn sie vor dem Laden vorliegen, sich in Attributen wie "onclick" befinden oder wenn sie sich in externen Ressourcen befinden. Diese Fälle werden voraussichtlich selten sein.

varvy.com ( 100/100 Google Page Speed ​​Insight ) lädt den Google Analitycs-Code nur, wenn der Benutzer einen Bildlauf durch die Seite erstellt:

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

Sie können versuchen, die Datei analysis.js lokal zu hosten und ihren Inhalt mit einem Caching-Skript oder manuell zu aktualisieren.

Die js-Datei wird nur einige Male im Jahr aktualisiert. Wenn Sie keine neuen Tracking-Funktionen benötigen, aktualisieren Sie sie manuell.

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

Speichern Sie localy analyse.js, dies wird jedoch von Google nicht empfohlen: https://support.google.com/analytics/answer/1032389?hl=de

Es wird nicht empfohlen, da Google das Skript aktualisieren kann, wenn sie möchten. Erstellen Sie also einfach ein Skript, das jede Woche Analytics-Javascript herunterlädt, und Sie werden keine Probleme haben!

Übrigens verhindert diese Lösung, dass Adblock Google Analytics-Skripte blockiert

Sie können das Google Analytics-Skript über Ihren eigenen Server übertragen, lokal speichern und die Datei stündlich automatisch aktualisieren, um sicherzustellen, dass es immer die neueste Version von Google ist.

Ich habe dies jetzt auf einigen Websites getan und alles funktioniert einwandfrei.

Google Analytics-Proxy-Route im NodeJS / MEAN-Stapel

So habe ich es in meinem Blog implementiert , das mit dem MEAN-Stack erstellt wurde.

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-Aktionsmethode in ASP.NET MVC

So habe ich es auf anderen Sites implementiert, die mit ASP.NET MVC erstellt wurden.

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

Dies ist das CompressAttribute, das vom MVC ProxyController für die Gzip-Komprimierung verwendet wird

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

Google Analytics-Skript aktualisiert

Auf der Clientseite füge ich den Analysepfad mit dem aktuellen Datum bis zur vollen Stunde hinzu, damit der Browser keine zwischengespeicherte Version verwendet, die älter als eine Stunde ist.

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

Für 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";
    }

Ändern Sie dann den Pfad https://www.google-analytics.com/analytics.js in https://yoursite.com/analytics.js

PHP

Fügen Sie dies in Ihren HTML- oder PHP-Code ein:

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

Dies funktioniert gut mit 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 hat bereits gesagt: Natürlich wird es keine wirkliche Verbesserung bringen, aber wenn Ihre einzige Sorge darin besteht, eine 100/100 Punktzahl zu erreichen, wird dies es tun.

versuchen Sie dies einfach vorher einfügen

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

Bitte ändern Sie xx-xxxxxxx-x in Ihren Code. Die Implementierung finden Sie hier http://www.gee.web.id/2016/11/how-to-leverage-browser-caching-for-google-analitycs.html

Google warnt vor der Verwendung lokaler Kopien der Analtics-Skripte. Wenn Sie dies jedoch tun, möchten Sie wahrscheinlich lokale Kopien der Plugins und des Debug-Skripts verwenden.

Ein zweites Anliegen mit agressiven Caching ist , dass Sie immer Hits von zwischengespeicherten Seiten sein wird - , die sich geändert haben oder aus der Website entfernt worden.

Um dieses Problem zu beheben, müssten Sie die Datei lokal herunterladen und einen Cron-Job ausführen, um die Aktualisierung fortzusetzen. Hinweis: Dadurch wird Ihre Website überhaupt nicht schneller. Ignorieren Sie sie daher am besten.

Befolgen Sie zu Demonstrationszwecken jedoch dieses Handbuch: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

Dies kann den Trick tun :)

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

Abhängig von Ihrer Verwendung von Google Analytics-Daten können Sie, wenn Sie grundlegende Informationen (wie Besuche, Interaktionen mit der Benutzeroberfläche) wünschen, möglicherweise die Datei analyse.js überhaupt nicht einbeziehen und dennoch Daten in GA erfassen.

Eine Möglichkeit besteht darin, stattdessen das Messprotokoll in einem zwischengespeicherten Skript zu verwenden. Google Analytics: Übersicht über das Messprotokoll

Wenn Sie die Transportmethode explizit auf image festlegen, können Sie sehen, wie GA seine eigenen Image Beacons erstellt.

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}

Sie können Ihre eigenen GET- oder POST-Anforderungen mit der erforderlichen Nutzlast erstellen.

Wenn Sie jedoch mehr Details benötigen, lohnt sich Ihre Mühe wahrscheinlich nicht.

Sie können eine Cloudfront-Distribution einrichten, deren Ursprungsserver www.google-analytics.com ist, und in den Cloudfront-Distributionseinstellungen einen Header mit längerem Ablauf festlegen. Ändern Sie dann diese Domain im Google-Snippet. Dies verhindert die Belastung Ihres eigenen Servers und die Notwendigkeit, die Datei in einem Cron-Job ständig zu aktualisieren.

Dies ist Setup & Vergessen. Vielleicht möchten Sie Cloudfront eine Abrechnungsbenachrichtigung hinzufügen, falls jemand Ihr Snippet "kopiert" und Ihre Bandbreite stiehlt ;-)

Bearbeiten: Ich habe es versucht und es ist nicht so einfach. Cloudfront durchläuft den Cache-Control-Header ohne einfache Möglichkeit, ihn zu entfernen

Öffnen Sie die Datei https://www.google-analytics.com/analytics.js in einem neuen Tab und kopieren Sie den gesamten Code.

Erstellen Sie nun einen Ordner in Ihrem Webverzeichnis und benennen Sie ihn in Google Analytics um.

Erstellen Sie eine Textdatei im selben Ordner und fügen Sie den gesamten oben kopierten Code ein.

Benennen Sie die Datei ga-local.js um

Ändern Sie nun die URL, um Ihre lokal gehostete Analytics Script-Datei in Ihrem Google Analytics-Code aufzurufen. Es sieht ungefähr so ​​aus, dh https://domain.xyz/google-analytics/ga.js

Fügen Sie schließlich Ihren NEUEN Google Analytics-Code in die Fußzeile Ihrer Webseite ein.

Du bist startklar. Überprüfen Sie jetzt Ihre Website von Google PageSpeed ​​Insights. Die Warnung zum Leverage Browser Caching von Google Analytics wird nicht angezeigt. Das einzige Problem bei dieser Lösung besteht darin, das Analytics-Skript regelmäßig manuell zu aktualisieren.

Im Jahr 2020 sind die Benutzeragenten von Page Speed ​​Insights: "Chrome-Lighthouse" für Handys und "Google Page Speed ​​Insights" für Desktops.

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

Sie können alle Ihre Skripte auf der Seite minimieren, einschließlich der analytics.jsVerwendung von:

• Einige serverseitige Technologien ( https://github.com/matthiasmullie/minify )
• Externer Service ( http://www.cloudflare.com )

Denken Sie daran, die Dateien zu minimieren, bevor Sie sie verwenden. Andernfalls wird mehr Verarbeitungszeit benötigt.