PageSpeed ​​Insights 99/100 dzięki Google Analytics - Jak mogę buforować GA?


243

Mam zamiar osiągnąć 100/100 na PageSpeed ​​i już prawie jestem na miejscu. Próbuję znaleźć dobre rozwiązanie do buforowania Google Analytics.

Oto wiadomość, którą otrzymuję:

Wykorzystaj buforowanie przeglądarki Ustawienie daty wygaśnięcia lub maksymalnego wieku w nagłówkach HTTP zasobów statycznych instruuje przeglądarkę, aby ładowała wcześniej pobrane zasoby z dysku lokalnego, a nie przez sieć. Wykorzystaj buforowanie przeglądarki dla następujących zasobów, które można buforować: http://www.google-analytics.com/analytics.js (2 godziny)

Jedyne rozwiązanie, jakie znalazłem, pochodzi z 2012 roku i nie sądzę, aby to było dobre rozwiązanie. Zasadniczo kopiujesz kod GA i sam go hostujesz. Następnie uruchamiasz zadanie CRON, aby raz dziennie sprawdzać Google, aby pobrać najnowszy kod GA i zastąpić go.

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

Co jeszcze mogę zrobić, aby osiągnąć 100/100 podczas korzystania z Google Analytics?

Dziękuję Ci.


1
Użyłem metody cron, bez użycia crona (ładowanie i buforowanie obciążenia. Mogę udostępniać kod php, jeśli chcesz). I naprawiłem moją sugestię dotyczącą naprawy GA. Ale zostawiłam mały problem: zostawiłem nagłówek „Cache-Control: max-age = 604800”. Co jest znacznie wyższe niż 5 minut pamięci podręcznej.
Roman Losev

6
Czy to naprawdę dobry pomysł? Buforowanie tego pliku na serwerze oznacza, że ​​przeglądarka będzie musiała go ponownie pobrać zamiast ponownie używać tego, który już buforował, odwiedzając inne witryny korzystające z Google Analytics. Może więc nieco spowolnić twoich gości.
s427

Odpowiedzi:


241

Cóż, jeśli Google cię zdradza, możesz oszukać Google z powrotem:

To jest klient użytkownika dla 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”

Możesz wstawić warunek, aby uniknąć wyświetlania skryptu analitycznego w PageSpeed:

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

Oczywiście nie poprawi to w żaden sposób, ale jeśli twoją jedyną troską jest uzyskanie wyniku 100/100, zrobi to.


4
Sprytne ...... szkoda, że ​​używam buforowania krawędzi, ponieważ ten skrypt będzie działał tylko wtedy, gdy żądania dotrą do twojego źródła dla każdego żądania :(
Amy Neville

49
Załaduj go następnie przez JS :)if(navigator.userAgent.indexOf("Speed Insights") == -1) { /* analytics here */ }
Half Crazed

1
@Jim Zobacz stackoverflow.com/questions/10734968/... - tej metody { }w moim przykładzie, wraz z innymi JS używanymi przez GA (takimi ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview');lub innymi)
Half Crazed

1
@Jim Dodałem odpowiedź, która obejmuje to.
Half Crazed,

6
Ostrzeżenie: To już nie działa. Funkcja Page Speed ​​Insights obsługiwana przez Lighthouse korzysta z domyślnego userAgent, którego nie można już wykryć.
David Vielhuber,

39

Istnieje podzbiór biblioteki js Google Analytics o nazwie ga-lite , który można buforować w dowolny sposób.

Biblioteka korzysta z publicznego interfejsu API REST Google Analytics do wysyłania danych śledzenia użytkownika do Google. Możesz przeczytać więcej na blogu o ga-lite .

Oświadczenie: Jestem autorem tej biblioteki. Walczyłem z tym konkretnym problemem i najlepszym rezultatem, jaki znalazłem, było wdrożenie tego rozwiązania.


21

Oto naprawdę proste rozwiązanie wykorzystujące JS do podstawowego śledzenia GA, które będzie działać również w przypadku buforowania krawędzi / serwerów proxy (zostało to przekonwertowane z komentarza):

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

Uwaga: jest to domyślny skrypt GA. Możesz mieć inne ga()połączenia, a jeśli tak, zawsze musisz sprawdzić agenta użytkownika przed nawiązaniem połączenia ga(), w przeciwnym razie może się nie powieść.


2
Reagując na sekcję „Uwaga:”, możesz zadeklarować, gatak jak ga = function(){};przed fragmentem, że po cichu zakończy się niepowodzeniem ga();, ponieważ nie musisz sprawdzać istnienia tej funkcji w całym kodzie.
István Pálinkás

1
Jak dodać to w skrypcie <script async src = " googletagmanager.com/gtag/js?id=UA-xx6600xx-1 " > </… >
Navnish Bhardwaj

16

Nie martwiłbym się tym. Nie umieszczaj go na własnym serwerze, wygląda na to, że jest to problem z Google, ale tak dobry, jak to możliwe. Umieszczenie pliku na własnym serwerze spowoduje wiele nowych problemów.

Prawdopodobnie potrzebują pliku, aby był wywoływany za każdym razem, zamiast pobierać go z pamięci podręcznej klienta, ponieważ w ten sposób nie liczysz wizyt.

Jeśli masz problem z poradzeniem sobie z tym, uruchom adres URL Google Insights w samym Google Insights, śmiej się, zrelaksuj i kontynuuj swoją pracę.


68
Chce wiedzieć, jak może osiągnąć 100, nie jeśli 99 jest w porządku.
Erick Engelhardt,

4
Ta odpowiedź nie jest prawdą, ponieważ plik Analytics.js, z którego pobierany jest plik, nie ma wpływu na to, czy ścieżki analityczne są pobierane. Problem z hostowaniem własnego pliku analitycznego polega na tym, że zawsze musisz ręcznie aktualizować do najnowszej wersji (kilka razy w roku).
Matthew Dolman

1
Dzięki Matthew za zwrócenie na to uwagi. Najwyraźniej się myliłem, co jest dobre, ale nadal nie sądzę, że dobrym pomysłem jest hostowanie tego pliku na własnym serwerze, ponieważ mogę sobie wyobrazić, że spowoduje to wiele nowych problemów. Pytanie OP brzmiało: jak dostać się do prędkości 100 stron i moją odpowiedzią jest nie martwić się o osiągnięcie tej prędkości 100. To może być naprawdę irytująca odpowiedź, ale to ja.
Leo Muller

3
dobra odpowiedź dla ludzi, którzy zgubili się, myśląc, że 99 nie jest wystarczająco dobra. lepiej poświęć swój czas na prawdziwe problemy.
linqu

@ErickEngelhardt Masz rację, ale jeśli ludzie zadają pytanie, w którym twoim zdaniem nie dążą do najlepszego celu, powinieneś dać im przewagę, które rozwiązanie może im lepiej służyć.
obserwator

10

W dokumentach Google zidentyfikowali pagespeedfiltr, który załaduje skrypt asynchronicznie:

ModPagespeedEnableFilters make_google_analytics_async

Dokumentację można znaleźć tutaj: https://developers.google.com/speed/pagespeed/module/filter-make-google-analytics-async

Jedną rzeczą do podkreślenia jest to, że filtr jest uważany za wysokie ryzyko. Z dokumentów:

Filtr make_google_analytics_async jest eksperymentalny i nie przeszedł szeroko zakrojonych testów w świecie rzeczywistym. Jednym z przypadków, w których przepisanie spowodowałoby błędy, jest to, że filtr pomija wywołania metod Google Analytics, które zwracają wartości. Jeśli takie metody zostaną znalezione, przepisywanie jest pomijane. Jednak metody dyskwalifikujące zostaną pominięte, jeśli pojawią się przed załadowaniem, mają atrybuty takie jak „kliknięcie” lub zasoby zewnętrzne. Przypadki te powinny być rzadkie.


7

varvy.com ( 100/100 wgląd w szybkość strony Google ) ładuje kod google analitycs tylko wtedy, gdy użytkownik przewinie stronę:

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
Co jeśli odwiedzający nie przewinie, ale po prostu kliknie link. Nie będzie liczony w analityce.
Ross Ivantsiv

@RossIvantsiv możesz obsługiwać również kliknięcie!
ar099968

6

Możesz spróbować hostować plik analytics.js lokalnie i zaktualizować jego zawartość za pomocą skryptu buforującego lub ręcznie.

Plik js jest aktualizowany tylko kilka razy w roku, a jeśli nie potrzebujesz żadnych nowych funkcji śledzenia, zaktualizuj go ręcznie.

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


2
Ostrzegamy, że nie jest to wyraźnie obsługiwane przez Google: support.google.com/analytics/answer/1032389?hl=pl
stal

6

przechowuj plik localy analytics.js, ale google nie zaleca: https://support.google.com/analytics/answer/1032389?hl=pl

nie jest to zalecane, ponieważ Google może zaktualizować skrypt, kiedy tylko zechce, więc po prostu zrób skrypt, który co tydzień pobiera javascript do analizy, a nie będziesz mieć problemów!

Nawiasem mówiąc, to rozwiązanie zapobiega blokowaniu przez adblock skryptów Google Analytics


Nie blokuje całkowicie Adblocka (nadal blokuje wywołania ajax), ale przynajmniej masz sesje i wyświetlenia strony
NiloVelez

5

Możesz proxy skryptu Google Analytics za pośrednictwem własnego serwera, zapisać go lokalnie i automatycznie aktualizować plik co godzinę, aby upewnić się, że jest to zawsze jego najnowsza wersja od Google.

Zrobiłem to już na kilku stronach i wszystko działa dobrze.

Trasa proxy Google Analytics w stosie NodeJS / MEAN

W ten sposób zaimplementowałem go na moim blogu zbudowanym ze stosu 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);
    }
});

Metoda działania proxy Google Analytics w ASP.NET MVC

W ten sposób zaimplementowałem go na innych stronach zbudowanych z 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);
        }
    }
}

Jest to CompressAttribute używany przez MVC ProxyController do kompresji 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);
        }
    }
}

Zaktualizowany skrypt Google Analytics

Po stronie klienta dołączam ścieżkę analityczną z bieżącą datą do godziny, aby przeglądarka nie używała wersji z pamięci podręcznej starszej niż godzina.

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

Dodaj to w kodzie HTML lub 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

Działa to poprawnie z 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 powiedział już: Oczywiście, nie spowoduje to żadnej poprawy, ale jeśli twoją jedyną troską jest uzyskanie wyniku 100/100, zrobi to.



0

Google przestrzega przed używaniem lokalnych kopii skryptów analitycznych. Jednak jeśli to robisz, prawdopodobnie będziesz chciał użyć lokalnych kopii wtyczek i skryptu debugowania.

Drugim problemem związanym z agresywnym buforowaniem jest to, że będziesz otrzymywać trafienia ze stron w pamięci podręcznej - które mogły ulec zmianie lub zostały usunięte z witryny.


0

Aby rozwiązać ten problem, musisz pobrać plik lokalnie i uruchomić zadanie CRON, aby kontynuować aktualizację. Uwaga: to wcale nie przyspiesza działania Twojej witryny, więc najlepiej ją po prostu zignorować.

Jednak w celach demonstracyjnych postępuj zgodnie z tym przewodnikiem: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/


„to nie przyspiesza działania Twojej witryny”, co niekoniecznie jest prawdą. Jak w teorii, gzipowanie niekrytycznego skonkatenowanego JS pliku z zawartą analizą powinno kompresować się nieco mniej niż oddzielny plik analityczny ze względu na wspólny słownik. Być może więcej kłopotów niż jest to warte.
Ray Foss,

0

To może załatwić sprawę :)

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

0

W zależności od sposobu korzystania z danych Google Analytics, jeśli chcesz uzyskać podstawowe informacje (takie jak wizyty, interakcje w interfejsie użytkownika), możesz w ogóle nie uwzględnić pliku analytics.js, ale nadal zbierać dane w GA.

Jedną z opcji może być użycie protokołu pomiaru w skrypcie buforowanym. Google Analytics: Omówienie protokołu pomiaru

Gdy jawnie ustawisz metodę transportu na image, możesz zobaczyć, jak GA konstruuje własne sygnały nawigacyjne obrazu.

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}

Możesz utworzyć własne żądania GET lub POST z wymaganym ładunkiem.

Jeśli jednak potrzebujesz większej szczegółowości, prawdopodobnie nie będzie to warte twojego wysiłku.


Gdzie jest połączenie z Pagespeed?
Nico Haase,

Nie ładując pliku analytics.js, unikniesz kary za szybkość strony.
Jonathan

Tak. Pomijając wszystkie CSS, JS i zdjęcia poza twoją stroną, załaduje się jeszcze szybciej. Pomijanie Google Analytics nie jest opcją według OP
Nico Haase,

Z wyjątkiem tego, że dane są nadal rejestrowane w Google Analytics, myślę, że moja odpowiedź jest prawidłowa i wyraźnie stwierdził, że w zależności od poziomu szczegółowości wymaganego od Google Analytics może być opcją wartą rozważenia, która, co ważne , nadal rejestrowałaby wizyty, interakcje w interfejsie użytkownika i potencjalnie inne dane . Jeśli PO chce zoptymalizować na końcowy 1%, warto rozważyć optymalizację.
Jonathan

@NicoHaase Zredagowałem swój komentarz, aby, mam nadzieję, wyjaśnić mój punkt widzenia. Chciałbym usłyszeć twoje myśli.
Jonathan

0

Możesz skonfigurować dystrybucję w chmurze, która ma serwer źródłowy www.google-analytics.com i ustawić dłuższy nagłówek wygaśnięcia w ustawieniach dystrybucji w chmurze. Następnie zmodyfikuj tę domenę we fragmencie Google. Zapobiega to obciążeniu własnego serwera i konieczności ciągłego aktualizowania pliku w zadaniu cron.

To jest konfiguracja i zapomnij. Możesz więc dodać alert rozliczeniowy do chmury, na wypadek, gdyby ktoś „skopiował” Twój fragment kodu i ukradł przepustowość ;-)

Edycja: Próbowałem i nie jest to takie proste, Cloudfront przechodzi przez nagłówek Cache-Control bez łatwego sposobu na usunięcie


0

Otwórz https://www.google-analytics.com/analytics.js plik w nowej karcie, skopiuj cały kod.

Teraz utwórz folder w katalogu internetowym i zmień jego nazwę na google-analytics.

Utwórz plik tekstowy w tym samym folderze i wklej cały kod skopiowany powyżej.

Zmień nazwę pliku ga-local.js

Teraz zmień adres URL, aby wywołać lokalnie hostowany plik skryptu Analytics w kodzie Google Analytics. Będzie to wyglądać mniej więcej tak https://domain.xyz/google-analytics/ga.js

Na koniec umieść NOWY kod Google Analytics w stopce strony.

Możesz ruszać. Teraz sprawdź swoją witrynę Google PageSpeed ​​Insights. Nie wyświetli ostrzeżenia dla Leverage Browser Caching Google Analytics. Jedynym problemem związanym z tym rozwiązaniem jest regularna ręczna aktualizacja skryptu Analytics.


0

W 2020 r. Agentami użytkownika Page Speed ​​Insights są: „Chrome-Lighthouse” na komórki i „Google Page Speed ​​Insights” na komputery.

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.