Google 웹 로그 분석으로 인해 PageSpeed ​​Insights 99/100-GA를 캐시하려면 어떻게해야합니까?


243

PageSpeed에서 100/100에 도달하려고하는데 거의 다 왔습니다. Google 웹 로그 분석을 캐시 할 수있는 좋은 솔루션을 찾고 있습니다.

내가받는 메시지는 다음과 같습니다.

브라우저 캐싱 활용 정적 리소스의 HTTP 헤더에 만료 날짜 또는 최대 보존 기간을 설정하면 브라우저가 네트워크를 통하지 않고 로컬 디스크에서 이전에 다운로드 한 리소스를로드하도록 지시합니다. 다음 캐시 가능한 리소스에 대해 브라우저 캐싱을 활용 하십시오 . http://www.google-analytics.com/analytics.js(2 시간)

내가 찾은 유일한 솔루션은 2012 년부터였으며 좋은 솔루션이라고 생각하지 않습니다. 기본적으로 GA 코드를 복사하여 직접 호스팅합니다. 그런 다음 크론 작업을 실행하여 하루에 한 번 Google을 다시 확인하여 최신 GA 코드를 가져와 교체하십시오.

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

Google 웹 로그 분석을 사용하면서 100/100에 도달하려면 어떻게해야합니까?

감사합니다.


1
cron 사용법없이 cron 메소드를 사용했습니다 (로드 및 캐시 onload. 원하는 경우 PHP 코드를 공유 할 수 있음). GA 수정 제안을 수정했습니다. 그러나 작은 문제가 남아 있습니다. "Cache-Control : max-age = 604800"헤더를 남겼습니다. 5 분 캐시보다 훨씬 높습니다.
Roman Losev

6
그래도 정말 좋은 생각입니까? 서버에서이 파일을 캐시하면 브라우저가 Google 웹 로그 분석을 사용하여 다른 사이트를 방문하여 이미 캐시 된 파일을 다시 사용하는 대신 브라우저를 다시 다운로드해야합니다. 따라서 실제로 방문자 속도 가 약간 느려질 수 있습니다.
s427

답변:


241

글쎄, 구글이 당신을 속이고 있다면, 당신은 구글을 ​​속일 수있다.

이것은 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 점수를 얻는 것이 유일한 관심사라면 그렇게 할 것입니다.


4
영리한 ... 연예 성이 스크립트는 요청이 모든 요청에 ​​대해 귀하의 출처에 도달하는 경우에만 작동하기 때문에 에지 캐싱을 사용합니다. (
Amy Neville

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');또는 무엇이든)
반 미친

1
@Jim 나는 이것을 다루는 대답을 추가했습니다.
반 미친

6
경고 : 더 이상 작동하지 않습니다. Lighthouse에서 제공하는 Page Speed ​​Insights는 더 이상 감지 할 수없는 기본 userAgent를 사용합니다.
David Vielhuber

39

galite라는 Google Analytics js 라이브러리의 하위 세트 있지만 원하는대로 캐시 할 수 있습니다.

라이브러리는 Google Analytics의 공개 REST API를 사용하여 사용자 추적 데이터를 Google에 보냅니다. ga-lite에 대한 블로그 게시물 에서 더 많은 내용을 읽을 수 있습니다 .

면책 조항 : 나는이 도서관의 저자입니다. 나는이 특정 문제로 어려움을 겪었으며 내가 찾은 최고의 결과는이 솔루션을 구현하는 것이 었습니다.


21

다음은 기본 GA 추적을 위해 JS를 사용하는 매우 간단한 솔루션입니다.이 방법은 엣지 캐시 / 프록시에서도 작동합니다 (설명에서 변환 됨).

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
받는 반응 "참고 :"절을, 당신은 선언 할 수 있습니다 gaga = function(){};로 실행하면 미리보기가 자동으로 실패하기 전에 ga();코드에서 사방이 함수의 존재를 확인 할 필요가 없습니다.
István Pálinkás

1
스크립트에 이것을 추가하는 방법 <script async src = " googletagmanager.com/gtag/js?id=UA-xx6600xx-1 " ><

16

나는 그것에 대해 걱정하지 않을 것입니다. 자신의 서버에 두지 마십시오 .Google에 문제가있는 것 같지만 얻을 수있는만큼 좋습니다. 파일을 자신의 서버에두면 많은 새로운 문제가 발생합니다.

방문수를 계산하지 않기 때문에 클라이언트 캐시에서 가져 오는 대신 매번 파일을 호출해야 할 수도 있습니다.

문제가 있다면 Google 인사이트 자체에서 Google 인사이트 URL을 실행하고, 웃고, 긴장을 풀고 작업을 시작하십시오.


68
그는 99가 괜찮다면 100에 도달하는 방법을 알고 싶어합니다.
Erick Engelhardt

4
이 답변은 Analytics.js 파일을 다운로드 한 위치가 분석 추적 여부에 영향을 미치지 않는 경우에는 사실이 아닙니다. 자체 분석 파일을 호스팅하는 문제는 항상 수동으로 최신 버전으로 업데이트해야한다는 것입니다 (1 년에 몇 번).
Matthew Dolman

1
지적 해 준 Matthew에게 감사합니다. 분명히 나는 ​​틀렸고, 그것은 좋지만 여전히 많은 새로운 문제가 발생할 것이라고 상상할 수 있기 때문에 자신의 서버 에서이 파일을 호스팅하는 것은 좋은 생각이 아닙니다. OP 질문은 pagespeed에서 100에 도달하는 방법이며 내 대답은 100에 도달하는 것에 대해 걱정하지 않아도됩니다. 그것은 정말 성가신 대답 일지 모르지만 그게 나입니다.
Leo Muller

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 웹 로그 분석 메소드에 대한 호출이 누락 된 경우입니다. 이러한 방법을 찾으면 다시 쓰기를 건너 뜁니다. 그러나 실격 처리 방법이로드 전에 오거나 "onclick"과 같은 속성에 있거나 외부 리소스에있는 경우 실격 처리 방법이 누락됩니다. 그러한 경우는 드물 것으로 예상됩니다.


7

varvy.com ( 100/100 Google 페이지 속도 분석 )은 사용자가 페이지를 스크롤하는 경우에만 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);

7
방문자가 스크롤하지 않고 링크를 클릭하면 어떻게됩니까? 그는 분석에 포함되지 않습니다.
Ross Ivantsiv

@RossIvantsiv 당신은 또한 클릭을 처리 할 수 ​​있습니다!
ar099968

6

analytics.js를 로컬로 호스팅하고 캐싱 스크립트 또는 수동으로 컨텐츠를 업데이트 할 수 있습니다.

js 파일은 일년에 몇 번만 업데이트되며 새로운 추적 기능이 필요하지 않은 경우 수동으로 업데이트하십시오.

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


2
이 명시 적으로 구글에 의해 지원되지 않는 경고 : support.google.com/analytics/answer/1032389?hl=en
스틸

6

localy analytics.js를 저장하지만 Google에서는 권장하지 않습니다. https://support.google.com/analytics/answer/1032389?hl=ko

Google이 원할 때 스크립트를 업데이트 할 수 있으므로 권장하지 않으므로 매주 분석 자바 스크립트를 다운로드하는 스크립트를 수행하면 문제가 없습니다!

그런데이 솔루션은 adblock이 Google 웹 로그 분석 스크립트를 차단하지 못하게합니다.


그것은 완전히 애드 블록 무시하지 않습니다 (여전히 블록은 전화를 아약스),하지만 적어도 당신은 세션과 페이지 뷰 수
NiloVelez

5

자체 서버를 통해 Google 웹 로그 분석 스크립트를 프록시 처리하고 로컬에 저장 한 후 매시간마다 파일을 자동 업데이트하여 Google의 최신 버전인지 확인할 수 있습니다.

나는 지금 두 사이트 에서이 작업을 수행했으며 모두 정상적으로 작동합니다.

NodeJS / MEAN 스택의 Google 웹 로그 분석 프록시 경로

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

ASP.NET MVC의 Google 웹 로그 분석 프록시 작업 방법

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

이것은 Gzip 압축을 위해 MVC ProxyController에서 사용하는 CompressAttribute입니다

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 웹 로그 분석 스크립트

클라이언트 측에서는 브라우저에 현재 시간이 1 시간 이상인 캐시 된 버전을 사용하지 않도록 분석 날짜를 최신 시간으로 추가합니다.

<!-- 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에서 잘 작동합니다.

  <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 점수를 얻는 것이 유일한 관심사라면 그렇게 할 것입니다.


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를 gzipping하면 분석이 포함 된 파일이 공유 사전으로 인해 분리 된 분석 파일보다 약간 작아야합니다. 아마도 가치보다 더 많은 문제 일 것입니다.
Ray Foss

0

이것은 트릭을 할 수 있습니다 :)

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

0

Google 웹 로그 분석 데이터 사용에 따라 방문, UI 상호 작용과 같은 기본 정보를 원하는 경우 analytics.js를 전혀 포함시키지 않아도 GA에서 데이터를 수집 할 수 있습니다.

캐시 된 스크립트에서 측정 프로토콜을 대신 사용할 수도 있습니다. Google 웹 로그 분석 : 측정 프로토콜 개요

전송 방법을 명시 적으로 이미지로 설정하면 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와의 연결은 어디에 있습니까?
Nico Haase

analytics.js를로드하지 않으면 페이지 속도가 저하되지 않습니다.
Jonathan

네. 그리고 페이지에서 모든 CSS, JS 및 이미지를 건너 뛰면 훨씬 빠르게로드됩니다. OP에 따르면 Google 웹 로그 분석 건너 뛰기는 옵션이 아닙니다.
Nico Haase

데이터가 여전히 Google 웹 로그 분석에 기록 된 경우를 제외하고는 제 대답이 유효하다고 생각하며 Google 웹 로그 분석에 필요한 세부 수준에 따라 방문, UI 상호 작용 및 잠재적으로 다른 측정 항목을 여전히 중요 하게 고려할 수있는 옵션이 될 수 있다고 분명히 밝혔습니다. . OP가 최종 1 %를 최적화하려는 경우 고려할 가치가있는 최적화 일 수 있습니다.
Jonathan

@NicoHaase 나는 내 의견을 수정하여 내 요점을 더 명확하게 만들었습니다. 당신의 생각을 듣고 싶습니다.
Jonathan

0

www.google-analytics.com을 오리진 서버로 사용하는 클라우드 프론트 배포를 설정하고 클라우드 프론트 배포 설정에서 더 긴 만료 헤더를 설정할 수 있습니다. 그런 다음 Google 스 니펫에서 해당 도메인을 수정하십시오. 이렇게하면 자신의 서버에 대한로드와 크론 작업에서 파일을 계속 업데이트 할 필요가 없습니다.

이것은 설정 및 잊어 버렸습니다. 따라서 누군가가 스 니펫을 "복사"하고 대역폭을 도용 할 경우를 대비하여 클라우드 알림에 청구 알림을 추가 할 수 있습니다.

편집 : 그것을 시도했지만 쉽지 않습니다 .Cloudfront는 쉽게 제거 할 수없는 방법으로 Cache-Control 헤더를 통과합니다.


0

https://www.google-analytics.com/analytics.js를 엽니 다.새 탭에서 파일을 모든 코드를 복사하십시오.

이제 웹 디렉토리에 폴더를 만들고 google-analytics로 이름을 바꿉니다.

동일한 폴더에 텍스트 파일을 만들고 위에서 복사 한 모든 코드를 붙여 넣습니다.

파일 이름을 ga-local.js로 바꿉니다.

이제 Google 웹 로그 분석 코드에서 로컬로 호스팅 된 웹 로그 분석 스크립트 파일을 호출하도록 URL을 변경하십시오. https://domain.xyz/google-analytics/ga.js 와 같이 보일 것입니다.

마지막으로 새로운 Google 웹 로그 분석 코드를 웹 페이지 바닥 글에 넣으십시오.

잘 가세요 이제 Google PageSpeed ​​Insights 웹 사이트를 확인하십시오. 브라우저 캐싱 구글 애널리틱스 활용에 대한 경고는 표시되지 않습니다. 이 솔루션의 유일한 문제점은 웹 로그 분석 스크립트를 수동으로 정기적으로 업데이트하는 것입니다.


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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.