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


243

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.


1
Ich habe die Cron-Methode verwendet, ohne Cron-Nutzung (lädt und zwischenspeichert Onload. Ich kann PHP-Code teilen, wenn Sie wollen). Und ich habe meinen GA-Fixing-Vorschlag korrigiert. Aber da ist kein Problem mehr: Ich habe den Header "Cache-Control: max-age = 604800" hinterlassen. Welches ist viel höher als 5 Minuten Cache.
Roman Losev

6
Ist das wirklich eine gute Idee? Das Zwischenspeichern dieser Datei auf Ihrem Server bedeutet, dass der Browser sie erneut herunterladen muss, anstatt die bereits zwischengespeicherte Datei erneut zu verwenden, indem er andere Websites mit Google Analytics besucht. So kann es tatsächlich Ihre Besucher etwas verlangsamen.
S427

Antworten:


240

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.


4
Clever ...... schade, dass ich Edge-Caching verwende, da dieses Skript nur funktioniert, wenn Anfragen für jede Anfrage Ihren Ursprung erreichen :(
Amy Neville

49
Laden Sie es dann über JS :)if(navigator.userAgent.indexOf("Speed Insights") == -1) { /* analytics here */ }
Half Crazed

1
@ Jim Siehe stackoverflow.com/questions/10734968/… - Sie würden diese Methode { }in meinem Beispiel zusammen mit jedem anderen JS verwenden, das GA verwendet (wie ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview');oder was auch immer)
Half Crazed

1
@ Jim Ich habe eine Antwort hinzugefügt, die dies abdeckt.
Half Crazed

6
Warnung: Dies funktioniert nicht mehr. Von Lighthouse betriebene Page Speed ​​Insights verwenden einen Standard-UserAgent, der nicht mehr erkannt werden kann.
David Vielhuber

39

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.


21

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.


2
Wenn Sie auf den Abschnitt "Hinweis:" reagieren, können Sie gawie ga = function(){};zuvor deklarieren, dass das Snippet bei der Ausführung stillschweigend fehlschlägt, ga();damit Sie nicht überall in Ihrem Code die Existenz dieser Funktion überprüfen müssen.
István Pálinkás

1
So fügen Sie dies im Skript hinzu <script async src = " googletagmanager.com/gtag/js?id=UA-xx6600xx-1 " > </ >
Navnish Bhardwaj

16

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.


68
Er will wissen, wie er 100 erreichen kann, nicht wenn 99 in Ordnung ist.
Erick Engelhardt

4
Diese Antwort ist nicht richtig. Wenn die Datei Analytics.js heruntergeladen wird, hat dies keinen Einfluss darauf, ob Analytics-Tracks erstellt werden. Das Problem beim Hosten Ihrer eigenen Analysedatei besteht darin, dass Sie immer manuell auf die neueste Version aktualisieren müssen (einige Male im Jahr).
Matthew Dolman

1
Vielen Dank an Matthew, dass er darauf hingewiesen hat. Anscheinend habe ich mich geirrt, was gut ist, aber ich denke immer noch nicht, dass es eine gute Idee ist, diese Datei auf Ihrem eigenen Server zu hosten, da ich mir vorstellen kann, dass dies viele neue Probleme verursachen wird. Die OP-Frage war, wie man mit Seitengeschwindigkeit auf 100 kommt, und meine Antwort ist, sich keine Sorgen darüber zu machen, ob man diese 100 erreicht. Das mag eine wirklich nervige Antwort sein, aber das bin ich.
Leo Muller

3
Eine gute Antwort für Menschen, die sich durch das Denken verloren haben, ist nicht gut genug. widme deine Zeit besser echten Problemen.
Linqu

@ErickEngelhardt Sie haben Recht, aber wenn Leute eine Frage stellen, bei der Sie glauben, dass sie nicht das beste Ziel anstreben, sollten Sie ihnen einen Hinweis geben, welche Lösung ihnen besser dienen könnte.
Beobachter

10

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.


7

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

7
Was ist, wenn der Besucher nicht blättert, sondern nur auf einen Link klickt? Er wird in der Analytik nicht berücksichtigt.
Ross Ivantsiv

@ RossIvantsiv kannst du auch mit dem Klick umgehen!
ar099968

6

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


2
Seien Sie gewarnt, dies wird von Google ausdrücklich nicht unterstützt: support.google.com/analytics/answer/1032389?hl=de
Steel

6

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


Es
umgeht

5

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>


4

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.



0

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.


0

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/


"Das macht Ihre Website nicht schneller", das muss nicht unbedingt stimmen. Wie theoretisch sollte das Komprimieren eines nicht kritischen verketteten JS einer Datei mit enthaltenen Analysen aufgrund des gemeinsam genutzten Wörterbuchs etwas kleiner komprimiert werden als eine getrennte Analysedatei. Vielleicht mehr Ärger als es wert ist.
Ray Foss

0

Dies kann den Trick tun :)

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

0

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.


Wo ist die Verbindung zu Pagespeed?
Nico Haase

Wenn Sie analyse.js nicht laden, vermeiden Sie die Strafe für die Seitengeschwindigkeit.
Jonathan

Ja. Wenn Sie all das CSS, JS und die Bilder von Ihrer Seite überspringen, wird es noch schneller geladen. Das Überspringen von Google Analytics ist laut OP keine Option
Nico Haase

Abgesehen davon, dass Daten immer noch in Google Analytics aufgezeichnet werden, denke ich, dass meine Antwort gültig ist, und es wurde klargestellt, dass es je nach dem von Google Analytics geforderten Detaillierungsgrad eine erwägenswerte Option sein kann, die noch wichtige Besuche, Benutzeroberflächeninteraktionen und möglicherweise andere Messdaten aufzeichnet . Wenn das OP eine Optimierung für die letzten 1% anstrebt, ist dies möglicherweise eine erwägenswerte Optimierung.
Jonathan

@NicoHaase Ich habe meinen Kommentar bearbeitet, um meinen Standpunkt hoffentlich klarer zu machen. Interessiert, Ihre Gedanken zu hören.
Jonathan

0

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


0

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


0

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.