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

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.

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.

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.

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ść.

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

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.

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

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

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

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>

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

Następnie zmień ścieżkę https://www.google-analytics.com/analytics.js na https://yoursite.com/analytics.js

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.

spróbuj tego po prostu wstaw wcześniej

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

Zmień xx-xxxxxxx-x na swój kod, sprawdź wdrożenie tutaj http://www.gee.web.id/2016/11/how-to-leverage-browser-caching-for-google-analitycs.html

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.

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 może załatwić sprawę :)

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

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.

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

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.

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

Możesz zminimalizować wszystkie skrypty na stronie, w tym analytics.jsza pomocą:

• Niektóre technologie po stronie serwera ( https://github.com/matthiasmullie/minify )
• Usługa zewnętrzna ( http://www.cloudflare.com )

Pamiętaj, aby zminimalizować pliki przed ich użyciem. W przeciwnym razie zajmie to więcej czasu przetwarzania.