Google 페이지 속도 도구

Google PageSpeed Tools

Google PageSpeed는 웹 사이트의 성능 최적화를 지원하기 위해 설계된 Google Inc.[1]의 도구 제품군입니다.2010년 [2][3]개발자 컨퍼런스에서 소개되었습니다.PageSpeed 패밀리 도구에는 4가지 주요 구성 요소가 있습니다. PageSpeed Module은 Apache HTTP Server용[4] mod_pagespeed와 Nginx용[5] ngx_pagespeed,[6] PageSpeed Insights, PageSpeed Service 및 PageSpeed Chrome DevTools 확장판으로 구성됩니다.이러한 모든 구성 요소는 Google의 웹 성능 모범 사례를 준수하는 [7]웹 사이트의 결함을 식별하고 조정 프로세스를 자동화하도록 구축되었습니다.

페이지 속도 모듈

PageSpeed Module은 오픈소스 Apache HTTP Server 또는 Nginx 웹 서버 모듈입니다.이 모듈은 선택한 필터를 스타일시트, JavaScript, HTML 파일 등의 페이지 및 관련 자산과 이미지 및 웹 사이트 캐시 요건에 자동으로 적용합니다.이러한 모듈에서는 기존 콘텐츠 또는 [8]워크플로우를 변경할 필요가 없습니다.즉, 내부 최적화 및 파일 변경은 모두 서버 측에서 이루어지며 변경된 파일을 사용자에게 직접 제공합니다.40개 이상의 필터 각각은 Google의 웹 성능 모범 사례 규칙 중 하나에 해당합니다.

PageSpeed 모듈은 오픈 소스 라이브러리이기 때문에 전 세계의 수많은 개발자에 의해 자주 업데이트되며 개별 사이트, 호스팅 공급자 또는 CDN에 [9]의해 배포될 수 있습니다.

인스톨은 비교적 간단하며, 다음의 서포트되고 있는 플랫폼상에서 패키지에서 실시하는 방법과 소스에서 작성하는 방법의 2가지 방법이 있습니다.

포트

Google의 PageSpeed SDK에 기반한 PageSpeed 최적화 모듈을 제공하는 기타 서버:

필터

페이지 페이드 모듈필터는 웹 페이지 최적화 규칙이 적용되는 설정입니다.5가지 주요 범주로 나눌 수 있습니다.

스타일시트 최적화

다음 필터는 CSS 파일을 작게 함으로써 CSS 파일을 최적화된 버전으로 변경합니다.여러 파일을 1개로 조합하거나 캐시 라이프 타임을 연장합니다.

필터명 묘사
CSS의 조합 페이지에 여러 개의 스타일시트가 필요한 경우, 이 필터는 이들을 하나의 스타일시트로 결합하여 웹 서버에 대한 요청 수를 줄입니다.
스타일시트에 대한 캐시 확장 캐시된 CSS 파일을 로컬 스토리지에 보관하는 시간을 늘려 사용자가 같은 웹 페이지로 돌아갈 때 추가 요청 및 데이터 로드를 방지합니다.
CSS Import의 평탄화 영향을 받는 스타일시트 파일의 크기가 하위 필터 "CssFlattenMaxBytes"에 의해 설정된 미리 결정된 바이트 수보다 작을 경우 모든 "@import" 규칙을 가져온 파일의 내용으로 바꿉니다.이 최적화는 웹 브라우저의 요청 수를 줄이도록 설계되었습니다.
인라인 @import to 링크 "@import" 규칙을 대응하는 "<link>" 태그로 변환합니다.대부분 나중에 적용되는 필터의 적절한 작업에 사용됩니다.
인라인 CSS 작은 외부 스타일시트 파일의 내용을 HTML 문서에 직접 삽입하여 요청 수를 줄입니다.이 필터는 "CssInlineMaxBytes" 하위 필터에 의해 설정된 크기보다 작은 스타일시트에만 적용됩니다.
인라인 구글 폰트 API CSS 하위 필터 "CssInlineMaxBytes"로 설정된 값보다 작은 경우 Google Font API에서 사용하는 스타일시트를 삽입합니다.
스크립트 위의 CSS 이동 스크립트가 CSS 리소스를 차단하지 않도록 스타일시트와 javascript 파일을 로드하는 순서를 변경합니다.웹 페이지 렌더링을 개선하여 로드 시간을[12] 단축합니다.
CSS를 헤드로 이동 <body> 요소가 도입되기 전에 스타일시트 포함을 배치하여 웹 페이지의[13] 재플로우를 제거하여 로드 시간을 단축합니다.
CSS의 개요 외부 리소스에 삽입된 CSS 규칙을 추가하는 실험 필터.그 배경에는, 같은 호스트에 연속하는 서버가 아니고, 다른 서버에의 병렬 접속을 작성하는 것이 있습니다.이 필터는 "CssOutlineMinBytes" 하위 필터에 의해 설정된 것보다 큰 스타일시트만 아웃라인하려고 합니다.
중요한 CSS의 우선순위 부여 스타일시트를 초기 뷰포트에 필요한 규칙만 포함하는 인라인 CSS 규칙으로 대체하고 페이지가 완전히 로드된 후 나머지 CSS 규칙을 로드하지 않도록 합니다.
CSS의 개서 로컬 스타일시트에 다른 스타일시트 및 이미지 관련 필터를 적용할 수 있습니다.또한 이 필터는 모든 CSS를 최소화합니다.페이로드 크기에 영향을 미칩니다.
스타일 애틀리뷰트 "<style>" 속성으로 선언된 모든 규칙에 "Rewrite CSS" 필터와 동일한 최적화를 구현합니다.

Javascript 파일 최적화

다음 필터는 Javascript 파일에 적용되며 최적화된 파일로 다시 참조됩니다.

필터명 묘사
Javascript 라이브러리 정규화 널리 사용되는 Javascript 라이브러리를 Google Hosted Libraries의 최신 원격 무료 버전으로 기본적으로 대체합니다.이러한 라이브러리는 다른 웹사이트에서 사용자의 브라우저 캐시에 있을 수 있기 때문에 향후 서버에 대한 요청 수를 줄일 수 있습니다.
Javascript 결합 여러 Javascript 파일을 하나로 통합하여 브라우저의 총 요청 수를 줄입니다.
Javascript 연기 페이지가 로드될 때까지 javascript 파일 로드 및 실행을 연기합니다.이렇게 하면 표시되는 콘텐츠의 로딩이 중단되지 않습니다.
Javascript용 캐시 확장 캐시된 Javascript 파일을 로컬 저장소에 보관하는 기간을 늘려 사용자가 동일한 웹페이지로 돌아올 때 추가 요청 및 데이터 로드를 방지합니다.
Javascript 소스 맵 포함 디버깅 프로세스 중에 읽기 쉽도록 최소화된 Javascript 파일과 원본 Javascript 파일 사이에 "맵"을 만듭니다.
인라인 Javascript HTML 문서에 외부 Javascript 파일의 작은 내용을 직접 삽입하여 요청 수를 줄입니다.이 필터는 "JsInlineMaxBytes" 하위 필터에 의해 설정된 크기보다 작은 javascript 파일에만 적용됩니다.
외부 Javascript 최소화, 내부 Javascript 최소화 모든 주석, 공백, 중복 및 사용되지 않는 규칙을 삭제하여 로드된 총 바이트 수를 줄입니다.
Javascript 개요 외부 리소스에 javascript를 삽입하는 실험 필터입니다.그 배경에는, 같은 호스트에 연속하는 서버가 아니고, 다른 서버에의 병렬 접속을 작성하는 것이 있습니다.이 필터는 "JsOutlineMinBytes" 하위 필터에 의해 설정된 크기보다 큰 스크립트의 개요만 시도합니다.

이미지 최적화

이미지 최적화 필터는 그래픽 로드 크기를 줄이기 위해 구축되었습니다.

필터명 묘사
인라인 이미지 중복 제거 동일한 인라인 이미지의 반복적인 데이터 로드를 배제하고 요청 수와 전송 크기를 개선합니다.
이미지 캐시 확장 캐시된 이미지를 로컬 스토리지에 보관하는 시간을 늘려 사용자가 동일한 웹 페이지로 돌아갈 때 추가 요청 및 데이터 로드를 방지합니다.
인라인 미리 보기 이미지 "MaxInlineedPreviewImages" 하위 필터에 의해 설정된 다수의 인라인 이미지의 저품질 버전을 생성합니다."Index" (이미지 크기가 "MinImageSizeLowResolutionBytes" 하위 필터에 의해 설정된 값보다 높지 않은 한 사용자 경험을 향상시킵니다.페이지가 완전히 로드된 후 이미지가 더 높은 품질로 전환됩니다.
레이지로드 이미지 사용자의 초기 뷰포트에 없는 이미지 로드를 연기하여 브라우저 요청 수를 줄입니다.
인라인 이미지 이미지가 외부 리소스인 것처럼 실제 웹 페이지 코드에 이미지 데이터를 포함시켜 이미지 데이터를 불러오기 위한 추가 연결을 제거하는 방법을 제공합니다.
GIF를 PNG로 변환 애니메이션이 아닌 gif를 손실 없이 png로 변환하여 데이터 크기를 줄입니다.
JPEG를 프로그레시브 JPEG로 변환 자동으로 생성된 큰 비진행 JPEG 이미지를 작은 프로그레시브 유형으로 변환합니다.
JPEG 재압축 원래 압축 품질이 하위 필터 "ImageRecompressionQuality" 또는 "JpegRecompressionQuality"에 의해 설정된 값보다 높을 경우 자동으로 생성된 jpeg 이미지를 다시 압축합니다.이를 통해 payload를 줄일 수 있습니다.
PNG 재압축 png 이미지를 압축률이 높은 이미지로 무손실 변환
WEBP 재압축 브라우저에서 webp 이미지를 webp 형식을 지원하는 더 작은 재압축 버전으로 대체합니다.
이미지 컬러 프로파일 삭제 대부분의 브라우저에서 지원되지 않으므로 모든 이미지의 색상 프로필 정보를 제거합니다.
이미지 메타 데이터 제거 웹 페이지의 모든 이미지 파일에서 EXIF 메타데이터를 제거합니다.
JPEG 서브샘플링 감소 밝기 변화에 대한 인간의 시력 민감도로 인해 색상이나 채도가 아닌 색상 샘플링 속도를 4:2:0으로 감소시킵니다.이것에 의해, 이미지의 사이즈를 큰폭으로 삭감할 수 있습니다.
PNG를 JPEG로 변환 투명 채널이 없는 png 영상을 더 작은 JPEG 영상으로 대체합니다.
이미지 크기 조정 특정 "너비" 및 "높이" 속성보다 큰 치수의 이미지를 작은 이미지로 바꿉니다.
JPEG를 WEBP로 변환 브라우저에서 지원되는 경우 JPEG 이미지를 훨씬 더 작은 WebP 형식으로 변환합니다.
JPEG를 WEBP로 무손실 변환 JPEG 이미지를 브라우저가 지원하며 이미지가 압축 노이즈에 민감하지 않은 경우 훨씬 작은 WebP 형식으로 변환합니다.
이미지 치수 삽입 태그가 존재하지 않는 경우 태그의 "width" 및 "height" 속성을 자동으로 추가합니다.
렌더링된 치수에 맞게 이미지 크기 조정 이미지 크기를 렌더링된 치수로 조정하여 "너비" 또는 "높이" 속성을 무시합니다.
스프라이트 이미지 스타일시트 규칙의 모든 배경 이미지를 하나의 큰 이미지로 결합하여 브라우저의 요청 수를 줄입니다.

HTML 최적화

이 필터 그룹은 HTML 파일의 크기를 줄이고 최신 모범 웹 프랙티스를 준수하도록 HTML 파일의 내용을 다시 씁니다.

필터명 묘사
헤드 추가 <body> html 태그 전에 발견되지 않은 경우 <head> html 태그를 추가합니다.다른 필터는 주로 <head> 태그로 표시된 영역에 데이터를 추가하거나 변경합니다.
공백 축소 html 코드에서 연산자 사이의 추가 공백 및 불필요한 공백을 삭제합니다.
헤드 조합 여러 개의 태그가 있는 경우 여러 개의 <헤드> 태그의 내용을 1개로 그룹화하여 잘못된 브라우저 워크플로우를 방지합니다.
메타 태그 변환 일치하는 현재 메타 태그 응답 헤더를 추가하여 일부 브라우저의 "http-equiv" 속성 요구 사항으로 인한 재파손 지연을 방지합니다.
Elide 속성 기본값과 동일한 값을 가진 html 태그의 속성을 제거하여 전송되는 총 데이터 양을 줄입니다.
로컬 스토리지 캐시 페이지의 첫 번째 보기에서 인인된 리소스를 브라우저의 로컬 스토리지에 저장하고 다시 인인하지 않고 이후 보기에서 로컬 스토리지에서 로드합니다.그러면 요청 수가 줄어듭니다.
현학적 HTML4에 준거한 페이지 표시 모듈의 최적화를 강제합니다.
코멘트 삭제 HTML 코드의 읽기 쉽고 네비게이션을 용이하게 하기 위해 개발자가 작성한 HTML 코멘트를 삭제합니다.
따옴표 삭제 HTML 속성에서 따옴표를 삭제하여 HTML 파일의 크기를 줄입니다.
URL 트리밍 절대 URL을 페이지의 기본 URL에 상대 URL로 대체합니다.

추적 액티비티 필터

아래 필터 목록은 웹 사이트와의 통신을 추적하는 Google Analytics의 최적화를 목적으로 합니다.

필터명 묘사
기기 추가 분석 및 추적을 위해 클라이언트가 페이지를 로드하고 렌더링하는 시간을 측정할 수 있습니다.
비동기 Google Analytics 스니펫 Google Analytics 추적 코드가 비동기식으로 로드되므로 로드 중에 중요한 리소스가 차단되지 않습니다.
Google Analytics 삽입 Google Analytics Reporting Tools를 사용하여 웹 사이트의 활동을 추적하기 위한 비동기 코드 추적 추가

사용 가능한 기타 필터

  • 도메인의 개서
  • 실험 모듈 실행
  • 사전 해결된 DNS
  • PDF 캐시 확장

속도 영향

PageSpeed Module은 업계의 다른 옵션에 비해 웹 페이지 로드 시간, 페이로드 크기 및 요청 수를 줄이는 데 가장 큰 영향을 미쳤습니다.여러 연구자에 따르면 mod_pagespeed를 사용하면 로드 시간을 최대 80% 단축할 수 있으며, 와이어상의 바이트 양을 30% 줄일 수 있으며, 총 요청 수를 20% 이상 줄일 수 있습니다.Google을 포함한 많은 검색 엔진은 페이지 로드 속도에 영향을 받는 순위 알고리즘을 사용하기 때문에 이러한 최적화는 검색 [14][15]결과에서 웹 사이트의 배치에 영향을 미칠 수 있습니다.2015년 2월 현재 구글은 일정 로딩 시간을 초과하는 웹 사이트에 대해 모바일 장치에서[16] "느린" 라벨을 테스트하기 시작했고, 개발자들은 페이지의 로딩 속도를 높이는 방법을 검토하도록 촉구했습니다.

페이지 속도 분석

PageSpeed[17] Insights는 하나의 URL에서 성능의 베스트 프랙티스를 식별하고 웹 페이지의 최적화에 대한 제안을 제공하며 [18]웹 사이트를 빠르게 만드는 방법에 대한 전반적인 아이디어를 제안하는 온라인 합성 벤치마크 도구입니다.이 도구는 모든 브라우저에서 직접 액세스할 수 있습니다.URL 요청별로 웹 페이지 성능을 1에서 100까지의 척도로 평가하여 권장되는 최적화에 대한 보고서를 높은 우선순위, 중간 우선순위,[19] 낮은 우선순위 범주로 구분하여 제공합니다.

최근 버전의 PageSpeed Insights에서는 Chrome User Experience [21]Report를 사용하여 실제 사용자 경험을 측정할 수 있는 지원이 추가되었습니다[20].구글 크롬의 엘리자베스 스위니와 애디 오스마니는 PageSpeed Insights를 이끌고 2020년 [22]코어 웹 바이탈 지원을 발표했다.

페이지 속도 크롬 확장

페이지스피드 확장은 Chrome Browser의 확장판이며 Google Chrome Developer Tools의 일부입니다.정기적으로 PageSpeed를 사용하는 방문자는 브라우저에서 PageSpeed Insights에 의해 주어진 모든 메트릭을 직접 보고 웹 성능 모범 사례에 따라 최적화된 웹 페이지 리소스를 다운로드할 수 있습니다.현재는 더 이상[23] 사용되지 않으며 Google은 대신 온라인 버전을 사용할 것을 권장합니다.

페이지 속도 서비스

PageSpeed 서비스는 구글이 제공한 상용 제품이었다.이 서비스는 아직 정식 베타 버전이기 때문에 무료로 제공되었다.본 서비스에는 모든 페이지스피드 모듈의 최적화와 구글 [24]서버의 인프라스트럭처 사용이 포함되어 있습니다.구글은 2015년 5월[25] 5일 PageSpeed 서비스를 폐지하고 2015년 [26]8월 3일 서비스를 종료했다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ Ivanovs, Alex (16 April 2014). "PageSpeed Module: Improving Your Websites' Performance". huffingtonpost.com/. The Huffington Post. Retrieved 23 March 2015.
  2. ^ Kerner, Sean Michael (4 November 2010). "Google Speeds Up the Web with Apache Web Server Module". serverwatch.com/news/. Retrieved 23 March 2015.
  3. ^ Ram, Ramani (2011-07-29). "Page Speed Service: Web performance, delivered". googlecode.blogspot.com/. Retrieved 17 March 2015.
  4. ^ "Github". github.com. Google Inc. Retrieved 6 August 2020.{{cite web}}: CS1 maint :url-status (링크)
  5. ^ "Github". github.com. Google Inc. Retrieved 6 August 2020.{{cite web}}: CS1 maint :url-status (링크)
  6. ^ "Apache Incubator". modpagespeed.com/. Google Inc. Retrieved 6 August 2020.
  7. ^ Verma, Pankaj. "Ganpati Zone YouTube Channel Videos: Google's Web Performance Best Practices". ganpatizone.biz/. Ganpati Zone. Retrieved 8 April 2021.
  8. ^ Edwards, Ben (2014-07-28). "Authoring critical above-the-fold CSS". benedfit.com. Retrieved 23 March 2015.{{cite web}}: CS1 maint :url-status (링크)
  9. ^ "PageSpeed Insights SDK". code.google.com. Google Inc. Retrieved 23 March 2015.{{cite web}}: CS1 maint :url-status (링크)
  10. ^ "ats_pagespeed". iispeed.com/. IISpeed B.V. Archived from the original on 2015-05-25. Retrieved 2015-05-25.
  11. ^ "IIS WebSpeed". iiswebspeed.com/. IISpeed B.V.
  12. ^ Liversidge, Chris (July 2014). "Breaking Down Page Speed Events For SEO Gain". searchengineland.com/. Search Engine Land. Retrieved 23 March 2015.
  13. ^ Andersen, Anders; Jarlund, Tobias (2013-09-16). "Addressing The Responsive Images Performance Problem: A Case Study". smashingmagazine.com/. Smashing Magazine. Retrieved 23 March 2015.
  14. ^ Enge, Eric (2011-03-06). "Case Study: Impact of Code Cleanup on Site Traffic". searchenginewatch.com/. Search Engine Watch. Retrieved 23 March 2015.
  15. ^ Kuchler, Margaret (19 May 2011). "The Growing Need For Speed: How Site Performance Increasingly Influences Search Rankings". retailtouchpoints.com/. Retail Touch Points. Retrieved 23 March 2015.
  16. ^ Barry, Shwartz (2015-02-25). "Google Testing A Red "Slow" Label In The Search Results For Slower Sites". searchengineland.com/. Retrieved 17 March 2015.
  17. ^ "PageSpeed Insights". PageSpeed Insights. Google Inc.{{cite web}}: CS1 maint :url-status (링크)
  18. ^ Wagner, Janet (2015-01-15). "GOOGLE RELEASES PAGESPEED INSIGHTS API V2". programmableweb.com/. Programmable Web. Retrieved 23 March 2015.
  19. ^ Burton, Clark (2016-11-08). "A Technical Guide to Google's PageSpeed Insights Reports". Retrieved 12 July 2018.
  20. ^ "Real-world user experience data". PageSpeed Insights. Google Inc.{{cite web}}: CS1 maint :url-status (링크)
  21. ^ Chrome User Experience Report. Google Inc. https://developers.google.com/web/tools/chrome-user-experience-report. {{cite web}}:누락 또는 비어 있음 title=(도움말)CS1 유지보수:url-status(링크)
  22. ^ Web Vitals Tools. Google Inc. https://web.dev/vitals-tools-2020/. {{cite web}}:누락 또는 비어 있음 title=(도움말)CS1 유지보수:url-status(링크)
  23. ^ "PageSpeed Insights PageSpeed Insights Google Developers". Google Developers. Retrieved 2016-09-08.
  24. ^ Lardinois, Frederic. "Google Updates PageSpeed Service, Promises To "Turbocharge Your Website"". techcrunch.com. The Tech Crunch. Retrieved 23 March 2015.{{cite web}}: CS1 maint :url-status (링크)
  25. ^ "Google Groups". groups.google.com. Retrieved 7 February 2019.
  26. ^ "Turndown information for PageSpeed Service - PageSpeed Service". Google Developers. Retrieved 7 February 2019.

외부 링크