PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights

새로운 웹사이트를 구축하는 데 수많은 날, 몇 주, 몇 달을 보냈을 때 모든 이미지, 요소 및 아이콘이 최고가 되기를 원할 것입니다.

그러나 그 결과 사이트가 Google에서 권장하는 것보다 느린 경우가 많습니다.

사이트에서 전환 을 유도할 때 속도는 항상 중요한 역할을 합니다.

필요성 : 페이지 속도가 중요한 이유

페이지 속도는 Google 검색 엔진 결과에서 웹사이트의 순위 를 높이는 데 중요한 요소입니다 .

귀하의 웹사이트가 상위 10개 검색결과페이지내의 페이지들처럼 로딩 속도를 유지할 수 없다면 첫 페이지에 순위가 매겨지지 않습니다. Backlinko의 최근 Google에서 1,100만 개 이상의 SERP( 검색 엔진 결과 페이지 ) 를 분석한 연구 결과에 따르면, 첫 페이지에서 사이트의 평균 로드 시간은 1.65초로 상당히 빠릅니다.

( 이미지 출처 : How to Score a Perfect 100% on Google PageSpeed Insights )

페이지 속도는 구글 랭킹 요소중 Page-Level Factors 요소로 중요한 순위요소입니다.
아래의 게시글의 20. Page Loading Speed via HTML 와 23. Page Loading Speed via Chrome 를 참조하세요.

Google은 페이지 속도가 중요하다고 말합니다 . 그것에 대한 전체 업데이트도 있었습니다.

이러한 연결은 Google의 새로운 PageSpeed ​​업계 벤치마크 에 의해 백업 및 지원됩니다 .

페이지 로드 시간이 증가하면 누군가 귀하의 사이트에서 이탈할 가능성이 크게 증가한다는 사실을 발견했습니다.

( 이미지 출처 : How to Score a Perfect 100% on Google PageSpeed Insights )

다른 연구에서 BigCommerce 는 전자 상거래 웹사이트의 전환율이 평균 1~2% 범위임을 발견했습니다.

잠재적인 페이지 속도는 전환율을 크게 높일 수 있습니다.

( 이미지 출처 : How to Score a Perfect 100% on Google PageSpeed Insights )

속도를 2초 미만으로 낮추면 트래픽과 수익이 증가할 수 있습니다.

페이지 로딩 속도를 느리게 하는 원인들(이유들)

페이지가 느리게 로드되는 이유는 무엇입니까?

부피가 큰 이미지와 잘못 설계된 코딩

느린 페이지의 가장 일반적인 원인은 부피가 큰 이미지와 잘못 설계된 코딩입니다.

현대의 어느 웹사이트를 보면 티핑 포인트까지 이미지로 가득 차 있을 것입니다.

이미지를 최적화하지 않으면 수 메가바이트의 공간을 차지하는 페이지가 있을 수 있습니다.

Google의 벤치마크 데이터에 따르면 페이지 크기 또는 무게에 대한 모범 사례는 500KB 미만입니다.

이미지와 자바스크립트

Chrome Developers의 Speed is now a landing page factor for Google Search and Ads 에 따르면 이미지와 자바스크립트가 로드 시간을 늦추는 가장 큰 요소라고 합니다.

JavaScript를 너무 많이 제공하고 있습니까 ? 이미지가 너무 많 습니까? 이미지와 자바스크립트는 HTTP 아카이브 및 Chrome 사용자 경험 보고서 의 데이터를 기반으로 페이지 로드 시간에 영향을 미치는 페이지 가중치에 가장 큰 영향을 미칩니다.

사용법

PageSpeed ​​Insights 도구에서 100% 점수를 얻기 위해 필요한 변경을 수행하기 전에 느린 사이트 속도의 원인을 정확히 알아야 합니다.

시작하려면 PageSpeed ​​Insights 도구 를 열고 표시줄에 웹사이트 URL을 입력하십시오.

“Analyze(분석)”을 클릭하면 Google이 귀하의 사이트에서 빠른 테스트를 실행할 수 있습니다.

pagespped insights 활용법 또는 사용법등으로 구글링하고 조금 더 정리해주세요. 외국자료도 찾아보아주세요.

Lighthouse Treemap

중간에 보면 [트리맵 보기]가 있고 클릭하면 Lighthouse Treemap 를 볼 수 있습니다. 통찰을 주는 기능 같습니다. 좀 더 알아보아주세요.

Webpagetest.org

페이지의 성능(사이트 속도) 향상 방법

완벽한 PageSpeed ​​Insights 점수를 얻는 4가지 방법

Google의 PageSpeed ​​Insights 도구에서 완벽한 100%를 얻는 것은 쉬운 일이 아닙니다.

트래픽을 절약하고 더 많은 전환을 유도하고 더 많은 수익을 얻으려면 지루하고 지루할 수 있지만 실행이 필요합니다.

다음은 사이트 속도를 높이고 Google에서 100% 만점을 받을 수 있는 상위 4가지 방법(1. 이미지 압축, 2. 브라우저 캐싱 사용, 3. HTML 축소, 4. AMP 구현)입니다.

1. 이미지 압축

느린 페이지와 낮은 점수의 가장 큰 원인은 큰 이미지입니다.

내 사이트에서 이 문제를 수정했을 때 속도에 큰 영향을 미쳤습니다.

이미지 크기를 수정하기 위한 최고의 최적화 기술 중 하나는 압축입니다.

간단한 압축 도구를 사용하여 이미지 크기를 평균 50% 이상 절약할 수 있습니다.

WordPress 를 사용하는 경우 많은 시간을 들이지 않고 이를 수행하는 가장 좋은 방법 중 하나는 WP Smush Image 와 같은 플러그인을 사용하는 것 입니다.

아래의 게시글에 ‘2.Smush Image Compression and Optimization plugin’을 통해 개요와 상세사용법을 상세히 설명하였습니다.

WP Smush에는 수많은 멋진 기능이 무료로 제공됩니다.

플러그인을 추가하여 이미지를 자동으로 스매싱할 수 있습니다. 

Shopify 기반 상점 및 사이트를 운영하는 경우 Crush.pics 를 사용할 수 있습니다

( 이미지 출처 : How to Score a Perfect 100% on Google PageSpeed Insights )

Crush.pics는 이 도구를 사용하여 PageSpeed ​​Insights 점수에서 큰 도약을 기대할 수 있다고 말합니다.

압축 전 PageSpeed ​​점수: 75/100. 압축 후 PageSpeed ​​점수: 87/100

플러그인에 익숙하지 않거나 사이트에 플러그인을 사용하고 싶지 않다면 Compress JPEG 또는 Optimizilla 와 같은 무료 도구를 온라인에서 사용할 수 있습니다 .

둘 다 한 번의 업로드로 최대 20개의 이미지를 압축할 수 있는 빠른 무료 도구입니다.

Optimizilla를 사용하여 단 2초 만에 파일 크기를 68% 줄였습니다. 화질차이가 거의 없이 380KB에서 120KB로 크기를 줄였습니다!

이 모든 도구를 무료로 사용할 수 있으며 플러그인을 사용할 수 없다면 반드시 구현해야 합니다.

2. 브라우저 캐싱 사용

Neil Patel 의 The Perfect SEO Setup for WordPress: 8 Plugins to Skyrocket Your Rankings and Traffic 에 따르면, 기술적으로 정통한 분이라면 W3 Total Cache 를 사용하세요.   WP 슈퍼 캐시 보다 약간 우월합니다. 비전문가분들은   WP Super Cache 을 이용하시길 권장하고 있습니다. 

WP Super Cache plugin과 W3 Total Cache 모두 따로 정리하였으나 저희는 조금 더 쉬운 WP Super Cache plugin을 이용하고 있습니다.

WP Super Cache plugin :  W3 Total Cache 외 다른 추천 플러그인

­아래의 게시글로 상세히 정리하였습니다.

브라우저 캐싱은 이전에 로드된 리소스를 “기억”하여 작동하므로 매번 방문할 때마다 다시 로드할 필요가 없습니다.

웹사이트 방문자가 사이트의 새 페이지를 방문하면 로고 및 바닥글과 같은 모든 데이터를 다시 로드할 필요가 없습니다.

그러면 사람들이 귀하의 사이트에 방문할 때 속도가 크게 향상됩니다.

어떻게 구현합니까? 고맙게도 플러그인이 있습니다. 코딩 전문가가 될 필요는 없습니다.

 WordPress 사이트에 W3 Total Cache 를 사용해 보십시오 . 백만 개 이상의 활성 설치가 있으며 시장에서 가장 인기 있는 캐싱 플러그인입니다.

 W3 Total Cache 는 전체 사이트 성능을 10배 이상 향상 시킬 수 있다고 주장합니다 .

게다가 그들은 이 플러그인이 Google의 PageSpeed ​​도구에서 더 높은 결과를 얻는 데 도움이 될 것이라고 주장합니다.

이 도구는 또한 HTML(다음에 자세히 설명), JavaScript 및 CSS를 축소하여 최대 80%의 대역폭 절감 효과를 제공합니다.

코딩 경험이 없더라도 지금 W3 Total Cache를 사용하여 웹사이트의 속도를 빠르고 쉽게 향상시켜 보십시오.

아래의 게시글에 1.W3 Total Cache plugin’을 통해 개요와 상세사용법을 상세히 설명하였습니다.

3. HTML 축소

HTML 코딩이 차지하는 공간을 최소화하는 것은 Google에서 만점을 받는 또 다른 중요한 요소입니다.

HTML 최소화는 브라우저가 HTML을 처리하는 방식에 영향을 주지 않고 불필요하거나 중복된 데이터를 제거하거나 수정하는 프로세스입니다. 여기에는 코드 수정, 서식 지정, 사용하지 않는 코드 제거 및 가능한 경우 코드 단축이 포함됩니다.

Autoptimize 플러그인

Autoptimize – 워드프레스 최적화 플러그인 에 따르면, Autoptimize by Frank Goossens (futtta)은 WP Super Cache 와 같이 사용할 수 있다고 하므로 이 플러그인부터 알아보세요.

• 버전: 3.1.1.1
• 글쓴이: Frank Goossens (futtta)
• 최근 업데이트: 3주 전
• 필요한 워드프레스 버전: 4.9 또는 이상
• 호환되는 버전: 6.0.2
• PHP 버전 요구사항: 5.6 또는 이상
• 활성 설치: 1백만 이상

Minify HTML 플러그인보다 훨씬 훌륭합니다. 일단 Images 만 정리했는데 나머지들도 상세히 정리해주세요.

WebP 및 AVIF와 같은 최신 이미지 형식을 제공하여 이미지 로딩 속도를 단축시키는 훌륭한 플러그인입니다.

일단 Slider Revolution 가 잘 작동됩니다. JS, CSS & HTML만 사용 check했는데 5.6초에서 4.1초로 로딩 속도가 단축되었습니다.

JS, CSS & HTML

Images

PageSpeed Insights의 추천항목중 첫번째는 ‘차세대 형식을 사용해 이미지 제공하기’이고 11.7 s(초)를 단축시킬 수 있다고 나옵니다.

WebP 및 AVIF와 같은 이미지 형식은 PNG나 JPEG보다 압축률이 높기 때문에 다운로드가 빠르고 데이터 소비량도 적습니다. 

Image optimization

최신 이미지 형식 지원이 포함된 이미지를 최적화하고 지연 로드하기 위해 몇 개의 확인란을 선택하여 사이트를 훨씬 더 빠르게 만드십시오!

Critical CSS

Autooptimize의 Critical CSS는 “콘텐츠가 포함된 첫 번째 페인트” 및 “가장 많은 콘텐츠가 포함된 페인트”와 같은 Google PageSpeed ​​Insights 성능 지표를 개선하여 사이트 속도를 높 입니다. 각 페이지에 대한 올바른 규칙을 갖는 것은 “누적 레이아웃 이동”을 방지하는 열쇠입니다.

criticalcss.com의 3EUR(4USD)/월 구독 을 사용 하면 주어진 페이지에 적합한 중요한 CSS를 생성하고 수동 규칙을 직접 생성할 수 있습니다. “WordPress” 플랜을 선택 하여 전체 프로세스를 자동화 할 수도 있습니다 (3EUR 또는 4USD 구독 + 도메인당 8EUR 또는 10USD). 간단히 가입하고 아래 필드에 API 키 를 복사/붙여넣기 하면 Autooptimize가 자동으로 규칙 생성을 시작합니다!

질문이 있거나 지원이 필요한 경우 지원 포럼 으로 이동 하세요. 즉시 시작하고 실행할 수 있도록 도와드리겠습니다!

Extra

Optimize More!

WP-Optimize 플러그인

다음으로 알아볼 플러그인은 아래의 플러그인입니다.

• Version:3.2.7
• Last updated:3 weeks ago
• Active installations:1+ million
• WordPress Version:4.5 or higher
• Tested up to:6.0.2
• PHP Version:5.6 or higher
• Languages:See all 3

Minify HTML 플러그인

HTML 최소화를 수행하는 가장 좋은 도구 중 하나는 HTML Minify 입니다. 이 플러그인을 사이트에서 직접 무료로 다운로드하고 몇 초 만에 WordPress 계정에 설치할 수 있습니다. 이 플러그인 페이지 에서 직접 설치할 수도 있습니다 .

HTML Minify 플러그인은 사이트 최적화를 통해 워드프레스 속도를 향상시켜주지만 잘못 설정하거나 궁합이 맞지 않으면 테마 레이아웃이 깨지거나 슬라이더가 표시되는 문제가 발생하므로 테마 레이아웃과 슬라이더를 확인하며 사용하세요.

예를들면, Betheme에서 이 플러그인을 사용하면 Slider Revolution 이 작동하지 않는 경우가 있습니다. 보다 정확하게는 Blank Page로 표시됩니다. Slider Revolution 이 잘 작동하는 경우도 있습니다.(예:www.seenbuy.kr에서는 slider 가 잘 작동합니다. 확인후 이용하세요. (Astra theme에서도 레이아웃이 깨지는 문제가 발생합니다.)

• Version:2.02
• Last updated:3 months ago
• Active installations:10,000+
• WordPress Version:1.5 or higher
• Tested up to:5.8.4
• PHP Version:5.2.4 or higher

플러그인을 설치하면 사이트에 즉각적인 영향을 미치기 전에 몇 단계만 거치면 됩니다.

대시보드에서 [설정] -> [Minify HTML]를 선택하여 Minify HTML 플러그인의 설정 탭으로 이동하여 다음 설정을 모두 활성화합니다.

( 이미지 출처 : How to Score a Perfect 100% on Google PageSpeed Insights )

일석삼조, 사조의 효과가 나옵니다.

이 플러그인의 가장 큰 장점은 각 설정에서 권장되는 작업을 알려준다는 것입니다. 이러한 설정이 어떻게 작동하는지 잘 모르는 경우 기본값으로 놓아주세요.

Google의 PageSpeed ​​Insights에서는 HTML, JavaScript 및 CSS를 축소할 것을 권장합니다.

• “Minify HTML(HTML 축소)” 와 “Minify inline JavaScript(인라인 JavaScript 축소)” 설정을 활성화합니다.

• 그런 다음 ” HTML, JavaScript and CSS comments(HTML, JavaScript 및 CSS 주석 제거(Remove HTML, JavaScript and CSS comments))”에 대해 예를 선택해야 합니다.

이러한 설정이 어떻게 작동하는지 잘 모르는 경우 다음 작업을 따르십시오.

지금 코딩을 최소화하면 인사이트 보고서에 즉각적인 영향을 미칠 수 있습니다.

주의할 점

Remove schemes (HTTP: and HTTPS:) from all URLs 은 No로 하셔야 정성껏 어렵게 만들어 놓은 schema가 삭제되지 않습니다.

FAQ

내 HTML은 얼마나 작아질까요?

실제 테스트 사이트에서 HTML 파일은 약 20-25% 더 작습니다. deflate/gzip 압축을 사용하는 경우에도 결과 파일이 약 20% 작아져 다운로드 시간이 빨라집니다.

4. AMP 구현

가장 인기 있는 플러그인 중 하나는 AMP for WP 입니다.

• Version:1.0.77.38
• Last updated:3 weeks ago
• Active installations:100,000+
• WordPress Version:3.0 or higher
• Tested up to:5.9.2
• Languages:See all 6

AMP는 모바일 사이트의 속도를 높이고 속도를 1초 미만으로 줄이는 입증된 방법이며 수많은 회사에서 이를 통해 성공을 거두고 있습니다.

AMP는 Accelerated Mobile Pages 의 줄임말입니다. 모바일 페이지를 더 빠르게 로드할 수 있도록 Google에서 구현한 프로젝트입니다.

수많은 불필요한 콘텐츠를 제거하는 오픈 소스 형식을 만들어 작동하므로 모바일 페이지가 거의 즉시 로드됩니다.

 모바일 장치에서 잘 작동하지 않는 투박한 기능 없이 사용자에게 모바일에서 보다 간소화된 경험 을 제공합니다.

휴대전화로 인터넷을 탐색하는 경우 AMP 기반 기사를 클릭했을 것입니다.

다음과 같이 표시됩니다.

그들은 종종 Google 검색 결과의 “주요 뉴스” 섹션으로 분류되고 즉시 로드됩니다.

서식이 많지 않아 모바일 사용자가 보고 싶어하는 콘텐츠를 빠르게 로드하고 전달할 수 있습니다.

저희는 웹사이트를 PWA(progresssive web apps)로 구축하므로 AMP를 필요없으나 PWA로 구축할 수 없는 분들은 꼭 AMP를 고려해 보세요.

조언 : AMP 적용시 모바일에서 속도향상은 탁월하나, 테마 디자인이 너무 변경되어 같은 사이트인지 혼당을 야기하는 경우가 많습니다. 또한 메뉴가 기존의 것과 달리 변경 및 축소되는 경우도 많으므로 실제 적용해 보고 디자인과 메뉴에 문제가 없는지 확인하고 이용하세요.

페이지의 성능(사이트 속도) 향상 방법 적용후 결과

완벽한 PageSpeed ​​Insights 점수를 얻는 4가지 방법중 1. 이미지 압축은 기존에도 적용했던 것이고 2. 브라우저 캐싱 사용 과 3. HTML 축소를 적용해 보았습니다. 4. AMP 구현는 PWA로 구축한 사이트라 적용하지 않았습니다.
구글 서치 콘솔의 코어 웹 바이탈(핵심적인 웹 지표)로 측정 결과는 아래와 같습니다. 2.8경에 느린 url로 내려갔던 415개의 url이 4.3 기준으로 개선이 필요한 url 개선되어졌습니다.

아래의 표를 보니 개선이 필요함 LCP 문제: 2.5초 초과(모바일) 이 415개 나옵니다.

LCD에 관해서는 구글 코어 웹 바이탈이란? (Core Web Vital/핵심적인 웹 지표) 가 명쾌하게 아래와 같이 설명하고 개선책을 알려주고 있습니다. (초록색) 해당 사이트의 경우, 이미지 때문에 그런것은 아니고 35개 이상의 플러그인을 사용하고 있고 디장인기능이 훌륭하여 용량을 많이 차지하는 betheme가 LCP는 스크롤 없이 볼 수 있는 부분을 로드하는데 걸리는 시간(LCD)가 늦은 것으로 판단됩니다. betheme는 디자인을 위해 포기할 수 없고 사용하지 않는 플러그인을 포함하여 가능한 플러그인을 줄이는 것이 해결책일 것 같습니다.

LCP (Largest Contentful Paint)
페이지의 로딩 성능을 나타냅니다. LCP는 단순한 페이지 로딩 속도와 다른 개념입니다. LCP는 스크롤 없이 볼 수 있는 부분
을 로드하는데 걸리는 시간을 의미합니다. 이는 대부분의 컨텐츠는 스크롤 없이 볼 수 있는 부분에 중요한 내용을 담고 있기
때문입니다. 게다가 동영상 등 무게가 큰 컨텐츠를 포함할 경우 사용자가 페이지를 이탈할 수 있기 때문에 LCP를 개선하기
위해서는 스크롤 페이지 레이아웃을 최적화해야 합니다. 구글의 일반적인 벤치마크는 2.5초입니다. 웹사이트는 2.5초 안에
첫 번째 프레임에 주요 컨텐츠를 표시해야 합니다. LCP가 빠를수록 검색 순위는 향상됩니다.

LCP를 개선하기 위해서는 컨텐츠를 레이아웃을 변경하여 중요한 컨텐츠를 상단에 배치하는 것으로 해결이 될 수 있습니다.
또한 중요한 부분을 최대한 가벼운 형식으로 배치하고 동영상, 고해상도 이미지 등은 임베딩 및 다운로드 링크 형식으로 배
치하는 것도 좋은 방법입니다.

FAQ(자주 묻는 질문)

PageSpeed Insights 외에 사이트 측정 도구들

 Google에서는 게시자가 페이지 경험을 개선하는 데 사용할 수 있는 다양한 도구를 출시했습니다. 첫 번째 단계는 개선의 여지가 있는 부분을 알아보기 위해 페이지의 사이트를 대상으로 전체 감사를 실시하는 것입니다. Search Console의 코어 웹 바이탈 보고서는 사이트 실적의 개요와 문제에 관한 철저한 분석을 제공합니다. 기회를 발견했다면 PageSpeed Insights와 Lighthouse의 사례가 드러난 문제 해결을 반복할 때 도움을 줄 수 있습니다. web.dev/vitals-tools로 이동하여 시작하는 데 필요한 모든 도구를 한눈에 확인해 보세요.(출처 : Google 검색에 페이지 환경을 도입할 시간 )

구글 서치 콘솔의 코어 웹 바이탈(핵심적인 웹 지표)

구글 코어 웹 바이탈이란? (Core Web Vital/핵심적인 웹 지표) 에 완벽한 설명이 있습니다. 참조하세요.

21년 5월, Google에서는 페이지 경험 신호가 Google 검색 순위 결정에 포함될 예정이라고 발표했습니다. 이러한 신호는 사용자가 웹페이지에서 상호작용 경험을 어떻게 인식하는지 측정하고 사용자가 웹에서 가장 유용하고 만족스러운 경험을 얻을 수 있도록 하는 Google의 지속적인 노력에 도움이 됩니다. 지난 몇 개월 동안 Lighthouse 및 PageSpeed Insights에 참여한 사용자 수가 평균 70% 증가한 것을 확인했으며, Search Console의 핵심 성능 보고서를 사용한 많은 사이트 소유자가 개선 기회를 찾았다고 보고했습니다.

2021년 5월부터 순위 결정에 페이지 경험 신호가 포함됩니다. 새로운 페이지 경험 신호는 코어 웹 바이탈과 Google의 기존 검색 신호(예: 모바일 친화성, HTTPS 보안, 방해가 되는 전면 광고 가이드라인)를 결합한 형태입니다.

( 이미지 출처 : Google 검색에 페이지 환경을 도입할 시간 )

Test My Site

Think with Google 은 Marketing Research & Digital Trends 를 파악할 수 있는 구글에서 제공하는 사이트입니다. 또한 Google에서 모바일 사이트 성능을 테스트하고 기기 전반의 성능을 개선할 수 있는 권장사항을 확인할 수 있는데, https://testmysite.thinkwithgoogle.com/intl/ko-kr ( 모바일 웹사이트 속도 테스트 도구 ) 으로 접속하시면 바로 한글로 이용가능합니다.

참 쉽습니다.

1시간 정도안으로 입력하신 e-mail로 보고서가 들어가니 살펴보세요. e-mail 을 통해 아래와 같은 정보가 제공되며 하이퍼링크를 click하며 개선방법을 알려줍니다.

더 많은 정보는 아래의 게시글을 참조하세요.

참고자료 : 1. [PageSpeed Insights] 웹 페이지를 개선하자

2. Chrome Developers의 Speed is now a landing page factor for Google Search and Ads

3. How to Score a Perfect 100% on Google PageSpeed Insights

4. 구글 코어 웹 바이탈이란? (Core Web Vital/핵심적인 웹 지표)

5. Google 검색에 페이지 환경을 도입할 시간

6. wordpress.org support의 HTML minify problem

7. wordpress.org support의 Google Search Console Errors

8. wordpress.org support의 Blank Page if Slider Revolution activated and HTML Minify is enabled

9. Autoptimize – 워드프레스 최적화 플러그인