Google Lighthouse를 사용하여 Google 도메인 이름 게시 측정

4194 단어 Lighthouse측량하다
이것은 오스비데오 주식회사의 영구 @terra_yucco 다.
오스비데오의 주요 제품인'하피타스'는 이미지가 전송되는 일부분에 CDN을 사용하는데, CDN은 발송량에 따라 비용이 발생한다.
한 시기 200x200 정도 보이는 프레임에 3000×3000의 이미지가 높아져 신용이 떨어지면서 최근 이미지 사이즈에 주의하는 바람이 불었다.(돌을 던지지 마라)
이 가운데 2019-06-06에는 해피투스의 LP에 유튜브 영상이 삽입됐는데, 표현이 유튜브 API의 제약을 받기 때문에 스스로 발표할 수 없는 것인가.이러면 나온다.
그래서 현재 LP의 발송량과 그것에 비해 얼마나 줄일 수 있습니까?'1Q84'를 조사하기 위해 구글 라이트하우스의 크롬 확장을 도입했지만, 수치에 대한 견해가 각양각색이어서 개인이 기록했다.
본사 도메인 이름으로부터의 발송량을 측정하다
측정 프로그램
  • Chrome의 확장 기능으로 Lighthouse 설치
  • 이번에는 아래 언급된 내용 외에 IP 제한이 있는 페이지를 측정하고자 확장 기능
    • 을 추가하였습니다.
  • 측정하려는 페이지를 크롬으로 열기
  • Generate Report
    • 누름

    측정 결과
    Lighthouse 결과에서는 "Keep request counts low and transfer sizesmall"항목을 참조했습니다.

    의문사
    Transfer size의 테이블 전환은 다음과 같습니다.
    Resource Type
    Requests
    Transfer Size
    Total
    212
    4,173 KB
    Image
    79
    1,308 KB
    Script
    52
    951 KB
    Other
    18
    916 KB
    Font
    49
    826 KB
    Stylesheet
    8
    133 KB
    Document
    6
    39 KB
    Media
    0
    0 KB
    Third-party
    146
    2,915 KB
    다만, Image 이하 트랜스퍼 시즈를 모두 넣어도 토탈과 일치하지 않는다.
    공식 도움말
    수치에 대한 공식 도움말의 Resource Type 정보는 다음과 같습니다.
  • Performance Budgets (Keep Request Counts Low And File Sizes Small)
    • 아래 표는 상술한 사이트에서 전재한 것이다.
    Name
    Type
    Valid Value(s)
    Description
    resourceType
    String
    total, document, script, stylesheet, image, media, font, other, or third-party.
    total measures all page resources. document measures HTML document requests. other includes any resource that does not match the other categories, including XHR or Fetch requests, and data transfers over WebSocket connections. third-party measures all resources from third-party domains.
  • total
  • 모든 페이지 리소스
  • document
  • HTML 문서에 대한 요청량
  • other
  • XHR 통신 또는 웹 소켓을 통한 기타 데이터 통신 포함
  • third-party
  • third party 영역에서 온 모든 자원
    • 유튜브 영상은 도메인 이름에 Third-party에 해당해야 하는데 실제 발송량은 이 예에서 4천173KB인지 4천1173+2915KB인지는 불분명하기 때문에 간단한 HTML을 만들어 측정했다.
    측량하다
    간이 HTML
    <html>
<head><title>TEST</title></head>
<body>
<img src="https://img.hapitas.jp/img/images/anti_fraud/anti_fraud_bnr.png">
</body>
</html>
    측정 결과
    로컬vagrant로 이동했기 때문에 그림도 Third-party로 판정됩니다.
    이미지는 11371 byte이며 코드는 보는 것만큼 가볍습니다.
    따라서 총계는 Third-party를 포함한 합계로 본사에서 발표한 양의 근사량은 Total-Third-party를 통해 계산할 수 있다.
    Resource Type
    Requests
    Transfer Size
    Total
    2
    12 KB
    Image
    1
    11 KB
    Document
    1
    0 KB
    Stylesheet
    0
    0 KB
    Media
    0
    0 KB
    Font
    0
    0 KB
    Script
    0
    0 KB
    Other
    0
    0 KB
    Third-party
    1
    11 KB
    또한hapitas.jp의 경우xxx.hapitas.jp는 자역이기 때문에 Third-party에 포함되지 않습니다.
    Conclusion
    당사의 SRE팀의 활약으로 CDN의 가격은 이전보다 낮아졌지만 그래도 전송량 요금이 있으니 엔지니어도 이미지 사이즈에 주의해야 합니다.
    현재의 배신량과 이번 보도에는 기재되지 않았지만 개선 건의도 많이 기재되어 있어서 한 번 사용해 보는 것이 좋겠다고 생각합니다.
    우리는 CDN이 최적화된 후의 이야기를 당사의 SRE팀에서 쓸 수 있는 다른 기회가 있을지 기대하고 있습니다
    JAVA 디자인 모드 [템 플 릿 모드]
    03 Django 모델 레이어: 일반(일반) 필드 및 매개변수

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage