PageSpeed ​​Insights 99/100 из-за Google Analytics - Как я могу кешировать GA?

243

Я стремлюсь достичь 100/100 на PageSpeed, и я почти на месте. Я пытаюсь найти хорошее решение для кеширования Google Analytics.

Вот сообщение, которое я получаю:

Использование кэширования в браузере Установка даты истечения или максимального срока действия в заголовках HTTP для статических ресурсов заставляет браузер загружать ранее загруженные ресурсы с локального диска, а не по сети. Используйте кэширование в браузере для следующих кэшируемых ресурсов: http://www.google-analytics.com/analytics.js (2 часа)

Единственное решение, которое я нашел, было с 2012 года, и я не думаю, что это хорошее решение. По сути, вы копируете код GA и размещаете его самостоятельно. Затем вы запускаете задание cron для повторной проверки Google один раз в день, чтобы получить последний код GA и заменить его.

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

Что еще я могу сделать, чтобы достичь 100/100, используя Google Analytics?

Спасибо.

sjmartin
источник
1
Я использовал метод cron, без использования cron (загружает и загружает кэши. Я могу поделиться php-кодом, если хотите). И я исправил свое предложение по исправлению GA. Но небольшая проблема осталась: я оставил заголовок «Cache-Control: max-age = 604800». Что намного выше, чем 5 минут кеша.
Роман Лосев
6
Это правда хорошая идея? Кэширование этого файла на вашем сервере означает, что браузер должен будет повторно загрузить его, а не повторно использовать тот, который уже был кэширован, посещая другие сайты с помощью Google Analytics. Так что это может немного замедлить ваших посетителей.
s427

Ответы:

241

Хорошо, если Google изменяет вам, вы можете обмануть Google назад:

Это пользовательский агент для 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”

Вы можете вставить условие, чтобы избежать предоставления сценария аналитики PageSpeed:

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

Очевидно, что это не принесет никаких реальных улучшений, но если ваша единственная задача - набрать 100/100 баллов, это сработает.

NiloVelez
источник
4
Умно ...... Жаль, я использую краевое кэширование, потому что этот скрипт будет работать только в том случае, если запросы достигают вашего источника для каждого запроса :(
Эми Невилл
49
Загрузите его через JS :)if(navigator.userAgent.indexOf("Speed Insights") == -1) { /* analytics here */ }
Half Crazed
1
@Jim См stackoverflow.com/questions/10734968/... - вы бы использовать этот метод внутренней части { }в моем примере, наряду с любыми другими JS , что GA использует (например, ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview');или любой другой )
Половина Crazed
1
@ Джим Я добавил ответ, который охватывает это.
Полусумасшедший
6
Предупреждение: это больше не работает. Page Speed ​​Insights на базе Lighthouse использует агент пользователя по умолчанию, который больше не может быть обнаружен.
Дэвид Вильхубер
39

Существует подмножество js-библиотеки Google Analytics под названием ga-lite, которое вы можете кэшировать по своему усмотрению .

Библиотека использует открытый REST API Google Analytics для отправки данных отслеживания пользователей в Google. Вы можете прочитать больше в блоге о ga-lite .

Отказ от ответственности: я являюсь автором этой библиотеки. Я боролся с этой конкретной проблемой, и лучший результат, который я нашел, заключался в реализации этого решения.

jehna1
источник
21

Вот действительно простое решение, использующее JS для базового отслеживания GA, которое также будет работать для краевых кэшей / прокси (это было преобразовано из комментария):

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

Примечание. Это скрипт GA по умолчанию. У вас могут быть другие ga()вызовы, и если это так, вам нужно будет всегда проверять пользовательский агент перед вызовом ga(), иначе это может привести к ошибке.

Наполовину сумасшедший
источник
2
Реагируя на раздел «Примечание:», вы можете объявить, gaкак и ga = function(){};раньше, фрагмент ga();кода молча проваливается при выполнении, так что вам не нужно проверять существование этой функции везде в вашем коде.
Иштван Палинкас
1
Как добавить это в скрипте <скрипт асинхронного SRC =» googletagmanager.com/gtag/js?id=UA-xx6600xx-1"></... >
Navnish Bhardwaj
16

Я бы не беспокоился об этом. Не размещайте его на своем собственном сервере, похоже, что это проблема с Google, но она хороша. Размещение файла на вашем собственном сервере создаст много новых проблем.

Вероятно, им нужен файл для вызова каждый раз, а не для получения его из кэша клиента, поскольку таким образом вы не будете считать посещения.

Если у вас есть проблема, чтобы чувствовать себя хорошо с этим, запустите URL-адрес Google Insights на самом Google Insights, посмеяться, расслабиться и продолжить свою работу.

Лео Мюллер
источник
68
Он хочет знать, как он может достичь 100, а не если 99 в порядке.
Эрик Энгельгардт
4
Этот ответ неверен, поскольку файл Analytics.js, с которого загружается файл, не влияет на отслеживание аналитики. Проблема размещения вашего собственного файла аналитики заключается в том, что вам всегда нужно вручную обновляться до последней версии (несколько раз в год).
Мэтью Долман
1
Спасибо Мэтью за то, что указал на это. Очевидно, я был неправ, и это хорошо, но все же я не думаю, что стоит разместить этот файл на вашем собственном сервере, потому что я могу представить, что это создаст много новых проблем. Вопрос ОП был о том, как добраться до 100 на скорости страницы, и мой ответ не беспокоиться о том, чтобы добраться до этих 100. Это может быть действительно раздражающим ответом, но это я.
Лео Мюллер
3
хороший ответ для людей, которые заблудились, думая, что 99 не достаточно хорош. Лучше посвятить свое время реальным проблемам.
linqu
@ErickEngelhardt Вы правы, но если люди задают вопрос, в котором, по вашему мнению, они не стремятся к наилучшей цели, вы должны сообщить им, какое решение может им помочь лучше.
наблюдатель
10

В документах Google они определили pagespeedфильтр, который будет загружать скрипт асинхронно:

ModPagespeedEnableFilters make_google_analytics_async

Вы можете найти документацию здесь: https://developers.google.com/speed/pagespeed/module/filter-make-google-analytics-async.

Одна вещь, которую нужно подчеркнуть, это то, что фильтр считается высоким риском. Из документов:

Фильтр make_google_analytics_async является экспериментальным и не подвергался обширным испытаниям в реальных условиях. Один из случаев, когда перезапись может привести к ошибкам, - это если фильтр пропускает вызовы методов Google Analytics, которые возвращают значения. Если такие методы найдены, перезапись пропускается. Однако методы дисквалификации будут пропущены, если они находятся перед загрузкой, имеют такие атрибуты, как «onclick», или если они находятся во внешних ресурсах. Ожидается, что эти случаи будут редкими.

Кэмерон Скотт
источник
7

varvy.com ( 100/100 Google page speed speed ) загружает код Google Analitycs, только если пользователь прокручивает страницу:

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);
ar099968
источник
7
Что делать, если посетитель не прокручивает, а просто щелкает ссылку. Он не будет учитываться в аналитике.
Росс Иванцив
@RossIvantsiv вы можете справиться и с кликом!
ar099968
6

Вы можете попробовать разместить analytics.js локально и обновить его содержимое с помощью сценария кэширования или вручную.

Файл js обновляется только несколько раз в год, и если вам не нужны какие-либо новые функции отслеживания, обновите его вручную.

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

JJTalik
источник
2
Имейте в виду, что это явно не поддерживается Google: support.google.com/analytics/answer/1032389?hl=ru
сталь
6

храните localy analytics.js, но это не рекомендуется Google: https://support.google.com/analytics/answer/1032389?hl=ru

это не рекомендуется, потому что Google может обновлять сценарии, когда они хотят, поэтому просто сделайте сценарий, который загружает аналитический javascript каждую неделю, и у вас не будет проблем!

Кстати, это решение предотвращает блокировку скриптов Google Analytics рекламным блоком.

Froggiz
источник
Он не полностью обходит Adblock (он по-прежнему блокирует вызовы ajax), но, по крайней мере, вы получаете сеансы и просмотры страниц
NiloVelez
5

Вы можете использовать прокси-скрипт Google Analytics через свой собственный сервер, сохранять его локально и автоматически обновлять файл каждый час, чтобы убедиться, что это всегда последняя версия от Google.

Я сделал это на нескольких сайтах сейчас, и все работает нормально.

Маршрут прокси-сервера Google Analytics в стеке NodeJS / MEAN

Вот как я реализовал это в своем блоге, который построен со стеком 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);
    }
});

Метод действия Google Analytics Proxy в ASP.NET MVC

Вот как я реализовал это на других сайтах, созданных с помощью 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);
        }
    }
}

Это CompressAttribute, используемый MVC ProxyController для сжатия 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);
        }
    }
}

Обновлен скрипт Google Analytics

На стороне клиента я добавляю путь аналитики с текущей датой до часа, чтобы браузер не использовал кэшированную версию более часа назад.

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

Добавьте это в ваш код HTML или 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

Это прекрасно работает с 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 уже сказал: « Очевидно, что никакого реального улучшения не произойдет, но если ваша единственная задача - набрать 100/100 баллов, это сделает это».

Suriyaa
источник
1

попробуйте это просто вставить, прежде чем

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

Пожалуйста, измените xx-xxxxxxx-x на ваш код, пожалуйста, проверьте реализацию здесь http://www.gee.web.id/2016/11/how-to-leverage-browser-caching-for-google-analitycs.html

вот здорово
источник
1
Имейте в виду, что это для ga-lite, а не для стандартной аналитики
Роб Форрест
0

Google предостерегает от использования локальных копий скриптов аналитики. Однако, если вы делаете это, вы, вероятно, захотите использовать локальные копии плагинов и сценарий отладки.

Вторая проблема, связанная с агрессивным кэшированием, заключается в том, что вы будете получать хиты с кэшированных страниц, которые могли быть изменены или удалены с сайта.

Орен Бочман
источник
0

Чтобы решить эту проблему, вам нужно будет загрузить файл локально и запустить задание cron, чтобы продолжить обновление. Примечание: это не делает ваш сайт быстрее, поэтому лучше просто игнорировать его.

Однако в демонстрационных целях следуйте этому руководству: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

Мо бейги
источник
«это не делает ваш сайт быстрее», это не обязательно так. Как и в теории, сжатие некритического сцепленного JS-файла с включенной аналитикой должно сжиматься немного меньше, чем отдельный аналитический файл из-за общего словаря. Возможно, больше проблем, чем оно того стоит.
Рэй Фосс
0

Это может сделать свое дело :)

<script>
  $.ajax({
  type: "GET",
  url: "https://www.google-analytics.com/analytics.js",
  success: function(){},
  dataType: "script",
  cache: true
  });
</script>
Нуно Сарменто
источник
0

В зависимости от того, как вы используете данные Google Analytics, если вам нужна базовая информация (например, посещения, взаимодействия с пользовательским интерфейсом), вы можете вообще не включать analytics.js, но все же собирать данные в GA.

Одним из вариантов может быть использование протокола измерений в кэшированном сценарии. Google Analytics: обзор протокола измерений

Когда вы явно зададите метод транспорта для изображения, вы можете увидеть, как GA создает собственные маяки для изображений.

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}

Вы можете создавать свои собственные запросы GET или POST с необходимой полезной нагрузкой.

Однако, если вам требуется более высокий уровень детализации, это, вероятно, не стоит ваших усилий.

Джонатан
источник
Где связь с PageSpeed?
Нико
Не загружая analytics.js, вы избегаете штрафа за скорость страницы.
Джонатан
Да. И пропуская все эти CSS, JS и изображения со своей страницы, он будет загружаться еще быстрее. Пропуск Google Analytics не вариант в соответствии с ФП
Нико
За исключением того, что данные по-прежнему записываются в Google Analytics, я думаю, что мой ответ является действительным, и в нем четко указано, что в зависимости от уровня детализации, требуемого от Google Analytics, возможно, стоит рассмотреть вопрос о том, какие записи будут по-прежнему регистрироваться, взаимодействия с пользовательским интерфейсом и, возможно, другие метрики. , Если ОП ищет оптимизацию для конечного 1%, возможно, стоит подумать об оптимизации.
Джонатан
@NicoHaase Я отредактировал свой комментарий, чтобы, надеюсь, прояснить мою точку зрения. Интересно услышать ваши мысли.
Джонатан
0

Вы можете настроить дистрибутив облачного фронта, который будет иметь www.google-analytics.com в качестве исходного сервера, и установить более длинный заголовок срока действия в настройках дистрибутива облачного фронта. Затем измените этот домен в фрагменте Google. Это предотвращает загрузку на вашем собственном сервере и необходимость постоянно обновлять файл в задании cron.

Это настройка и забудьте. Так что вы можете добавить уведомление об оплате в cloudfront на случай, если кто-то «скопирует» ваш фрагмент и украдет вашу пропускную способность ;-)

Изменить: я попробовал, и это не так просто, Cloudfront проходит через заголовок Cache-Control без простого способа удалить его

Ян М
источник
0

Откройте файл https://www.google-analytics.com/analytics.js на новой вкладке, скопируйте весь код.

Теперь создайте папку в своем веб-каталоге, переименуйте ее в google-analytics.

Создайте текстовый файл в той же папке и вставьте весь код, который вы скопировали выше.

Переименуйте файл ga-local.js

Теперь измените URL-адрес, чтобы вызывать локально размещенный файл сценария Analytics в вашем коде Google Analytics. Это будет выглядеть примерно так: https://domain.xyz/google-analytics/ga.js

Наконец, поместите ваш НОВЫЙ код Google Analytics в нижний колонтитул вашей веб-страницы.

Тебе хорошо идти. Теперь проверьте ваш сайт Google PageSpeed ​​Insights. Это не будет отображать предупреждение для использования кэширования браузера Google Analytics. И единственная проблема, связанная с этим решением, заключается в регулярном обновлении сценария Analytics вручную.

формальный
источник
0

В 2020 году пользовательскими агентами Page Speed ​​Insights являются: «Chrome-Lighthouse» для мобильных устройств и «Google Page Speed ​​Insights» для настольных компьютеров.

<?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; ?>
Эдуард Димитров
источник
-13

Вы можете минимизировать все свои скрипты на странице, в том числе analytics.jsиспользуя:

Не забудьте минимизировать файлы перед использованием. В противном случае это займет больше времени на обработку.

Эрик Энгельгардт
источник
6
analytics.js уже минимизирован из источника
João Pimentel Ferreira