Google Analytics의 Lighthouse 대책을 시도했습니다.

네!
그래서 오늘은군요.
변호사 닷컴 Advent Calendar 2019 - Qiita의 5일째 의 기사를군요.
쓰고 싶습니다.

tl;dr

이것은 내부 프로젝트와 관련이 없습니다. 개인 프로젝트에서 시도한 것입니다.

Google Analytics(이하 GA)는 2시간 밖에 캐시되지 않는다.

GA대체인 ga-lite은 CDN도 준비하고 npm도 공개하고 있다.

ga-lite는 GA 완전 호환이 아니기 때문에 독자적인 버릇이 있다. 하지만, PV나 이벤트 트래킹이 메인인 계측에서는 문제 없다.

캐시는 성능 점수와 관련이 없습니다.

ga-lite 도입까지

소개

PageSpeed ​​Insights라든지 lighthouse에서 고득점&고속화해 나가는 것이 즐겁지요!
뭐든지 올림픽의 정식 종목이 된다든가 안 된다든가…

이쪽의 점수입니다만, 계측 후에는 고속화에의 어드바이스가 표시되므로 비교적 용이하게 대책이 가능합니다.
그 중에서도 모두를 괴롭히는, "GAのキャッシュが短い" 라는 문제를 이번에는 대책해 보고 싶습니다.

ga-lite 정보

GA의 문제점을 해결하기 위해 구그가 있다면 KeyCDN사의 성능 대책 기사을 찾았습니다.
여기에서 ga-lite라는 GA의 대안을 소개했습니다.

npm 공개

GA의 ga 함수와 같은 표기법

라이센스도 문제 없을 것 같습니다

GA와의 비교도 있었지만 좋은 느낌입니다!

라이센스

ga-lite 자체의 라이센스는 MIT

GA의 라이선스 적으로도 문제가 될 것 같습니다.
※ GA의 공개 프로토콜 인 Measurement Protocol

ga-lite의 주의점

ga 함수 에 대응하고 있다. 덧붙여서 GA는 비대응.

GA 완전 호환이 아니기 때문에, 함수가 그대로 잡을 수 없는 것도 있다.

알려진 버그라고 할까 문제점도 있다( DoNotTrack 에 써 있었지만, 표시에 걸린 시간이 취득되지 않은 등)

노라의 node 패키지를 도입하는 방법

소개한 것만으로 이제 이 기사도 끝냈다는 느낌이지만, 아마 GA와의 환승으로 사용하는 사람이 많다(= want to track)라고 생각하므로, 자신용으로 커스텀하는 방법도 메모해 유지합니다.

clone하여 다른 리포지토리를 준비하고 DoNotTrack 개소를 편집하여 마 개조해 봅니다.

이런 식으로 다시 작성했지만, 이것은 npm에는 공개하지 않고 이 github 리포지토리를 그대로 읽어들여 이용해 갑니다. (아래는 나 전용이므로 적절히 다시 써주세요).

$ npm i @THETIMEINC/ga-lite@github:THETIMEINC/ga-lite#develop

사용법

import galite from '@THETIMEINC/ga-lite'

galite('create', 'UA-XXXXXXXX-X', 'auto')
galite('send', 'pageview')
galite('send', 'event', 'outbound', 'label', 'beacon')

ga 함수에 가깝습니다. pageview라든지 event를 이런 느낌으로 보낼 수 있습니다.
다만, fieldsObject 의 기술 방법이라고 비대응이기도 했으므로, issues 로 debug 하는 편이 좋을 것 같습니다.

소감

node의 패키지로, Google Analytics의 공개 프로토콜을 ga 함수 같은 느낌으로 송신하는 것이 부담스럽고 ​​편리하다고 생각했기 때문에 소개했습니다.

이것으로 고득점&고속화할 수 있었습니다…

응? google-analytics-debugger …라고. .
(…입니다만, 파일 사이즈가 줄어드는 등 별 요인으로 점수는 오르고 있을까 생각합니다. 결과 오라이 자신.)

모두 100점을 목표로 합시다!

이쪽은 조금 전에 사내 공부회에서 발표한 내용이었습니다.
변호사 닷컴에서는 사내외의 공부회도 실시하고 있습니다. 재미있어요~

참고 URL

캐시 시간을 변경하는 것만으로 점수가 올라가지 않습니다.
ぇぺぺrs. 오, ぇ. 코 m / 아나 ly 치 cs /에서 v gu e s / 코쵸 c 치온 / p 여과 l / v1 / 레후 렌세
ぇぺぺrs. 오, ぇ. 코 m / 아나 ly 치 cs / v v gu e s / 코쵸 c 치온 / 아나 ly 치 csjs / 코만 d 쿠에 우에 레 훗
htps : // 코 m / 미야나가 / ms / d38124 cd d64 a 1999 pd9