PageSpeed Insights

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

새로운 웹사이트를 구축하는 데 수많은 날, 몇 주, 몇 달을 보냈을 때 모든 이미지, 요소 및 아이콘이 최고가 되기를 원할 것입니다. 또한 사이트에서 전환 을 유도할 때 속도는 항상 중요한 역할을 합니다. 그러나 많은 노력에도 불구하고 해당 사이트가 Google에서 권장하는 것보다 느린 경우가 많습니다.

PageSpeed Insights는 웹페이지의 속도와 성능을 측정하고 개선하는 데 도움이 되는 Google의 무료 도구입니다. 이 도구는 웹페이지의 로딩 시간, 리소스 크기, 압축률 및 기타 요소를 분석하여 웹페이지를 더 빠르고 효율적으로 만드는 데 도움이 되는 권장 사항을 제공합니다.

PageSpeed Insights는 다음과 같은 용도로 사용할 수 있습니다.

• 웹페이지의 속도와 성능을 평가합니다.
• 웹페이지를 더 빠르고 효율적으로 만드는 데 도움이 되는 권장 사항을 얻습니다.
• 경쟁업체의 웹페이지와 비교하여 웹페이지의 속도와 성능을 파악합니다.

PageSpeed Insights를 사용하려면 웹페이지의 URL을 입력하고 “분석”을 클릭하기만 하면 됩니다. PageSpeed Insights는 웹페이지의 속도와 성능에 대한 자세한 분석을 제공하고, 웹페이지를 더 빠르고 효율적으로 만드는 데 도움이 되는 권장 사항을 제공합니다.

PageSpeed Insights는 웹사이트 소유자, 개발자 및 웹 퍼포먼스 전문가에게 웹사이트의 속도와 성능을 개선하는 데 도움이 되는 유용한 도구입니다.

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

페이지 속도는 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’s 200 Ranking Factors: The Complete List(1~50)

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 를 볼 수 있습니다. 통찰을 주는 기능 같습니다. 좀 더 알아보아주세요.

Lighthouse Treemap은 웹사이트의 JavaScript 번들을 시각화하여 어떤 파일과 모듈이 가장 많은 공간을 차지하고 있으며, 얼마나 많은 코드가 실제로 사용되는지 파악하는 데 도움을 주는 도구입니다. 이 도구는 Lighthouse 보고서의 성능 섹션에서 ‘View Treemap’ 버튼을 클릭하여 접근할 수 있습니다.

Lighthouse Treemap을 이용하여 사이트 로딩 속도를 단축시키는 방법:

Lighthouse Treemap은 주로 JavaScript 파일의 크기와 사용량을 분석하여 최적화 기회를 식별하는 데 중점을 둡니다. 다음은 이를 활용하여 로딩 속도를 단축시키는 주요 방법입니다.

• 크기가 큰 JavaScript 파일 식별 및 최적화: Treemap에서 가장 큰 상자는 가장 많은 JavaScript 바이트를 차지하는 파일을 나타냅니다. 이 파일들을 확인하여 불필요한 코드를 제거하거나, 더 작은 대안으로 교체하거나, 필요한 경우에만 로드되도록 지연 로딩을 구현하는 방법을 고려할 수 있습니다.
• 사용되지 않는 코드(Unused Bytes) 제거: Treemap은 각 JavaScript 파일에서 실제로 사용되지 않는 코드의 양을 보여줍니다. 많은 웹사이트가 로드하는 JavaScript 코드 중 상당 부분이 실제로 실행되지 않는 경우가 있습니다. 사용되지 않는 코드를 식별하고 제거하면 다운로드 및 파싱 시간을 줄일 수 있습니다.
• 서드파티 스크립트 분석: node_modules 폴더의 파일을 살펴보면 어떤 서드파티 스크립트가 많은 바이트를 차지하는지 시각적으로 확인할 수 있습니다. 사용하지 않는 서드파티 스크립트를 제거하거나, 더 가벼운 대안을 찾거나, 필요한 경우에만 로드되도록 최적화하는 것이 중요합니다.
• 소스 맵(Source Maps) 활용: 소스 맵이 활성화된 경우, Treemap은 원래 소스 파일(예: TypeScript 파일)을 시각화하여 더 깊이 있는 분석을 가능하게 합니다. 이를 통해 번들의 개별 모듈 수준까지 상세하게 분석할 수 있습니다.
• 코드 분할(Code Splitting) 및 지연 로딩(Lazy Loading) 적용: Treemap에서 번들의 초기 로드에 포함되어서는 안 되는 모듈을 식별한 경우, 해당 모듈을 코드 분할하여 필요한 시점에만 로드되도록 설정하거나, 컴포넌트를 지연 로딩하여 초기 로드 시 번들 크기를 줄일 수 있습니다.

이 외에도 Lighthouse 보고서에서 제공하는 다른 성능 최적화 권장 사항(예: 이미지 크기 최적화, 텍스트 압축 활성화, 렌더링 차단 리소스 제거 등)을 함께 적용하면 웹사이트 로딩 속도를 효과적으로 개선할 수 있습니다.

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에는 수많은 멋진 기능이 무료로 제공됩니다. 플러그인을 추가하여 이미지를 자동으로 스매싱할 수 있습니다. 

WordPress를 위한 완벽한 SEO 설정 : 귀하의 사이트 순위를 상승시키고 트래픽을 급증시킬 8개의 플러그인(The Perfect SEO Setup for WordPress: 8 Plugins to Skyrocket Your Rankings and Traffic)

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 와 동급의 추천 플러그인

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

WP Super Cache plugin(사이트 로딩 속도를 높히는 플러그인) : W3 Total Cache와 비교, WP Fastest Cache 포함

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

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

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

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

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

W3 Total Cache

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

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

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

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

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

WordPress를 위한 완벽한 SEO 설정 : 귀하의 사이트 순위를 상승시키고 트래픽을 급증시킬 8개의 플러그인(The Perfect SEO Setup for WordPress: 8 Plugins to Skyrocket Your Rankings and Traffic)

3. HTML 축소

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

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

WP-Optimize 플러그인

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

WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance

• 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

WP-Optimize는 WordPress 초보자와 전문가 모두에게 훨씬 더 간단하고 설정하기 쉽습니다 .( 출처 : WP-Optimize vs. Autoptimize: Which is the best WordPress optimization plugin? )

[설정]에 내보내기(export)/가져오기(import) 설정 기능이 있어 다른 웹사이트에서도 설정을 바로 쉽게 적용할 수 있습니다.

이 플러그인은 테마와 호환되지 않을 때에도 HTML, JavaScript파일, CSS파일을 [최소화](참조 : [데이터베이스]의 서브 메뉴인 [최적화]와는 다른 것입니다.)하는 옵션을 서 호환되게 할 수 있고, 다른 캐시 플러그인이나 이미지 압축 플러그인들을 사용할 때는 [이미지]와 [캐시]옵션을 꺼서 사용할 수 있어 유연하다는 것이 큰 장점입니다. Minify HTML 축소(이 플러그인에서는 [최소화]옵션을 끄지 않아도 betheme를 사용하는 www.kpco.kr, www.ear114.net, www.food-ai.kr 에서도 잘 작동합니다.

WP Super Cache, W3 Total Cache, WP Fastest Cach와 같은 캐시 플러그인을 사용하고 있거나 smush같은 이미지 압축 플러그인을 사용하고 있다면 그 효과는 반감될 수 있습니다. 이 경우, 설정 페이지에서 [이미지]와 [캐시]를 ‘사용안함’으로 변경하시면 됩니다.

테마와 호환되지 않는 경우, [최소화]에서 HTML, JavaScript파일, CSS파일처리를 ‘사용안함’으로 변경하시면 됩니다.

WordPress 데이터베이스에는 필요한 모든 항목과 그렇지 않은 항목도 저장됩니다. WP-Optimize플러그인이 다른 플러그인들과 차별화되는 기능은 데이터베이스의 최적화할 대상을 선택하거나 클릭 한 번으로 많은 부분을 정리할 수 있습니다. 데이터베이스 테이블, 게시물 수정본, 자동 초안 게시물, 휴지통에 있는 게시물, 스팸, 휴지통에 있는 댓글 등을 정리합니다. 

상세 사용법

[데이터베이스]

[최적화]

멀티 네트워크의 경우(서브 디렉토리, 서브 도메인 이용시), 네트워크 관리자 페이지에서 플러그인 설정을 합니다. [선택한 모든 최적화 실행]버튼을 클릭하여 최적화를 실행하시면 됩니다. 데이터베이스 테이블이 용량이 가장 큰 관계로 데이터베이스 테이블 최적화에 가장 많이 시간이 소요됩니다. 최적화가 진행되고 나면 각각의 항목의 최적화 결과가 표시됩니다.

[테이블]

비활성화 및 삭제하였으나 테이블에는 남아있는 플러그인들의 찌꺼기들을 제거할 수 있습니다.

테이블의 항목 밑에 표시된 플러그인 링크를 클릭하면 해당 플러그인의 워드프레스 플러그인 페이지로 이동하며 어떤 플러그인인지 확인하고 삭제해주세요.

[설정]

[일반 설정]과 [예약된 정리 설정]으로 구성되어 있습니다. [일반 설정]에서는 데이터 보관을 몇 주까지 할 것인지와 글 수정본을 몇개까지 보관할지 정할 수 있습니다..[예약된 정리 설정]을 하면 위에서 수동으로 했던 [최적화]작업을 자동으로 할 수 있습니다.

[이미지]

저는 smush 플로그인을 사용하고 있어 [이미지(압축)]기능을 껏는데, 이 플러그인은 [이미지] 기능을 켜는 경우, WebP 변환을 자동으로 할 수 있는 기능이 제공됩니다. png, jpeg등을 webp로 변환하면 겸헝상 40%정도는 이미지 크기가 줄어듭니다. 이미지 크기가 줄어든 만큼 이 기능을 활성화시키면 각각의 게시글, 페이지등의 로딩 속도가 단축됩니다. 그러나 원본 이미지(png, jpeg)는 웹하드에 그대로 존재한 상텡서 게시글과 페이지등에 표시되는 png, jpeg인 이미지파일을 webp로 변환시키는 것이므로 웹하드용량은 늘어날 수 있습니다.

[캐시]

[최소화]=[축소]

저희는 보통 캐시플러그인으로 WP Super Cache을 사용하고 있고, 워드프레스의 기능 강화 또는 고유한 어플리케이션을 제공하는 경우가 많으며, CSS파일 삭제하면 주로 사용하는 테마인 betheme의 레이아웃이 깨지는 경우 off해 놓습니다. betheme의 레이아웃이 깨지지 않는 경우에는 훌륭한 기능이니 꼭 활용하세요. 그래서 이 경우, WP-Optimize의 [최소화]기능은 사용하지 않고 데이터베이스 테이블 최적화 기능만 사용하는 경우가 대부분입니다.

on으로 변경하시면, HTML 처리(캐시 사전 로드 시에만 작동), JavaScript 파일 처리, CSS 파일 처리 이렇게 3개의 서브 메뉴가 나옵니다.  

HTML 처리(캐시 사전 로드 시에만 작동) : WP Super Cache or W3 Total Cache or WP Fastest Cache와 같은 캐시 플러그인을 사용하고 있다면 off해주세요.

JavaScript 파일 처리 : 웹을 통해 나만의 어플리케이션을 제공하는 경우 off로 해주세요. 이런 경우가 아니라면 on해주세요.

CSS 파일 처리 : CSS가 삭제되어 원래의 테마 디자인이 사라지는 경우가 있습니다. 웹사이트를 살펴보며, off할지 결정하세요.

[설정]

일반 설정, 트랙백/댓글 작업, 로깅 설정, 내보내기/가져오기 설정, 초기화 설정을 할 수 있습니다.

내보내기(export)/가져오기(import) 설정 기능이 있어 다른 웹사이트에서도 설정을 바로 쉽게 적용할 수 있습니다.

초기화 설정 : 이 버튼을 누르면 WP-최적화의 모든 설정이 삭제됩니다. 그런 다음 모든 설정을 다시 입력해야 합니다. 이 플러그인을 비활성화/제거하기 전에 이 작업을 수행하며 이 플러그인의 데이터베이스 최적화에서 보았던 것과 같이 이 플로그인의 찌꺼기(가비지)가 남지 않습니다.

[돕기]

Autoptimize 플러그인

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

Autoptimize

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

Minify HTML 플러그인보다 훨씬 훌륭합니다. behtme를 적용한 www.seenbuy.kr, www.ear114.net, www.kpco.kr 이렇게 3개의 사이트에 적용해 보았는데, www.ear114.net, www.kpco.kr에서 테마와 호환되지 않는 문제가 발생하였습니다. HTML 축소용 플러그인들은 항상 테마와 호환이 잘 되는지 확인해야 합니다.

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

참고 : 워드프레스는 버전에 따라 업로드가 제한된 파일 확장자로 파일의 업로드를 제한합니다. 이 경우, 아래의 글을 참조하여 제한풀기를 해주세요.

워드프레스 업로드 제한된 파일 확장자를 제한풀기(업로드 가능한 파일 확장자 추가하기)

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

워드프레스 정보꾸러미가 소개하는 다양한 워드프레스 최적화 플러그인이 있으며 Autoptimize가 가장 많이 사용되는 최적화 플러그인 중 하나입니다.

개요

Autoptimize는 워드프레스 사이트의 속도와 성능을 개선하는 데 매우 효과적인 플러그인입니다. 이 플러그인을 사용하면 웹사이트의 로딩 시간을 크게 단축할 수 있습니다. 이 플러그인은 HTML, CSS, JavaScript를 최적화하고, 이미지를 압축하고, 리소스를 캐싱하는 등의 기능을 제공합니다.

Autoptimize는 다음과 같은 기능을 제공합니다.

• HTML 최적화: HTML 코드의 불필요한 공백, 줄바꿈, 주석을 제거하여 HTML 파일의 크기를 줄입니다.
• CSS 최적화: CSS 코드의 불필요한 공백, 줄바꿈, 주석을 제거하여 CSS 파일의 크기를 줄입니다. 또한, CSS 코드를 병합하여 파일의 수를 줄이고, 리소스를 캐싱하여 페이지 로딩 시간을 단축합니다.
• JavaScript 최적화: JavaScript 코드의 불필요한 공백, 줄바꿈, 주석을 제거하여 JavaScript 파일의 크기를 줄입니다. 또한, JavaScript 코드를 병합하여 파일의 수를 줄이고, 리소스를 캐싱하여 페이지 로딩 시간을 단축합니다.
• 이미지 최적화: 이미지 파일을 압축하여 이미지 파일의 크기를 줄입니다. 또한, 이미지를 lazy-load하여 페이지 로딩 시간을 단축합니다.
• 리소스 캐싱: HTML, CSS, JavaScript 파일을 캐싱하여 페이지 로딩 시간을 단축합니다.

Autoptimize를 설치하고 활성화하려면 다음과 같은 단계를 따르세요.

1. 워드프레스 관리자 페이지로 이동합니다.
2. 왼쪽 메뉴에서 “플러그인”을 클릭합니다.
3. “새 플러그인”을 클릭합니다.
4. “Autoptimize”를 검색합니다.
5. “설치”를 클릭합니다.
6. “활성화”를 클릭합니다.

Autoptimize를 활성화한 후에는 “설정” 페이지에서 플러그인의 설정을 조정할 수 있습니다. 기본 설정을 사용해도 웹사이트의 속도와 성능을 크게 개선할 수 있지만, 필요에 따라 설정을 조정하여 더 나은 성능을 얻을 수 있습니다.

함께 사용할 수 있는 캐시 플러그인들

HTML 축소 관련 플러그인들은 캐시 플러그인들과 함께 사용하는 경우가 많습니다. HTML 축소 관련 플러그인의 하나인 Autoptimize 플러그인과 함께 사용할 수 있는 캐시 플러그인들은 아래와 같습니다. (출처 : 워드프레스 정보꾸러미의 Autoptimize – 워드프레스 최적화 플러그인 )

Autoptimize를 보완하여 다음과 같은 캐시 플러그인을 설치하여 함께 사용할 수 있습니다.

• WP Super Cache
• HyperCache
• KeyCDN’s Cache Enabler

W3 Total Cache의 경우 이 플러그인의 소개 페이지에 명시되어 있지 않지만 함께 사용이 가능하다고 합니다. 다만, Minify 기능을 비활성화해야 합니다.

^{이용상 주의사항}

^{Autoptimize는 워드프레스 사이트의 속도와 성능을 개선하는 데 매우 효과적인 플러그인이지만, 다음과 같은 문제점이 있습니다.}

• ^{레이아웃이 깨질 수 있습니다. Autoptimize는 HTML, CSS, JavaScript를 최적화하는 과정에서 코드의 일부를 변경합니다. 이로 인해 웹사이트의 레이아웃이 깨질 수 있습니다. 레이아웃이 깨지는 문제가 발생한 경우, Autoptimize의 설정을 변경하거나, 다른 최적화 플러그인을 사용해 보세요.}
• ^{특정 기능이 작동하지 않을 수 있습니다. Autoptimize는 일부 플러그인이나 테마의 기능과 충돌할 수 있습니다. 이러한 경우, Autoptimize의 설정을 변경하거나, 플러그인이나 테마의 개발자에게 문의해 보세요.}
• ^{서버에 부하가 발생할 수 있습니다. Autoptimize는 웹사이트의 리소스를 최적화하는 과정에서 서버에 부하를 가할 수 있습니다. 서버의 성능이 좋지 않은 경우, Autoptimize를 사용하지 않거나, 설정을 변경하여 최적화 작업의 양을 줄여 보세요.}

^{Autoptimize를 사용하기 전에 이러한 문제점을 염두에 두고, 웹사이트의 성능과 안정성을 주의 깊게 모니터링하는 것이 좋습니다.}

JS, CSS & HTML

Images

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

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

Image optimization

Image optimization & CDN, Load AVIF in supported browsers?, Lazy-load images?는 사용해 check해주시고
Image Optimization quality는 Lossy나 Glossy중 하나를 선택해주시면 됩니다.

Optimize Images	진짜 무료이고 API값이 제공됩니다. 단 무료일때는 월200개의 이미지만 가능한 것 같습니다. 일회지불 방식중 $19.99(약 28,000원)를 이용하는 경우, 60,000개의 이미지 최적화가 가능합니다. Optimize images on the fly and serve them from Shortpixel’s global CDN.Get more Google love by speeding up your website. Start serving on-the-fly optimized images (also in the “next-gen” WebP and AVIF image formats) by ShortPixel. No additional image optimization plugins are needed: your images are optimized, cached and served from ShortPixel’s global CDN. Sign-up now to receive x2 more CDN traffic or image optimization credits for free! This offer also applies to any future plan that you’ll choose to purchase.Questions? Have a look at the Autoptimize + ShortPixel FAQ! Only works for websites and images that are publicly available. Usage of this feature is subject to Shortpixel’s Terms of Use and Privacy policy. 즉석에서 이미지를 최적화하고 Shortpixel의 글로벌 CDN에서 제공합니다. 웹사이트 속도를 높여 더 많은 Google의 사랑을 받으십시오. ShortPixel 에서 즉시 최적화된 이미지(“차세대” WebP 및 AVIF 이미지 형식으로도 제공) 제공을 시작 합니다. 추가 이미지 최적화 플러그인이 필요하지 않습니다. 이미지는 ShortPixel의 글로벌 CDN 에서 최적화, 캐시 및 제공됩니다 . ,무료 가입이고 APIpi가 생성되고 제공됩니다. 지금 가입 하여 2 배 더 많은 CDN 트래픽 또는 이미지 최적화 크레딧을 무료로 받으십시오!  이 제안은 구매하기로 선택하는 향후 계획에도 적용됩니다. 질문 ? Autooptimize + ShortPixel FAQ 를 살펴보세요 ! 공개적으로 사용 가능한 웹 사이트 및 이미지에서만 작동합니다. 이 기능의 사용은 Shortpixel의 사용 약관 및 개인 정보 보호 정책 의 적용을 받습니다 .
Optimization exclusions	Comma-separated list of image classes or filenames that should not be optimized.
Image Optimization quality	Lossy Glossy Lossless                     You can test compression levels here. – Lossy (Compression) : Lossy 는 대부분의 사용자에게 최상의 옵션입니다.  Lossy 알고리즘으로 처리된 이미지는 얻을 수 있는 가장 작은 최적화된 이미지입니다.  따라서 사이트 속도가 가장 중요하고 최적화와 화질 사이에서 최상의 균형을 원한다면 손실 최적화를 계속 사용하는 것이 좋습니다. – Glossy (Compression) : 최고 수준의 이미지 품질을 유지하며 압축 – Lossless  (Compression) : 이미지를 그대로 유지하려면 이 옵션을 선택합니다.
Load AVIF in supported browsers?(지원되는 브라우저에서 AVIF를 로드하시겠습니까?)	Automatically serve AVIF image format to any browser that supports it. (AVIF 이미지 형식을 지원하는 모든 브라우저에 자동으로 제공합니다.) AVIF는 Chrome, Firefox 및 Opera에서 지원되며 동일한 품질 설정의 다른 형식에 비해 작은 파일 크기를 제공합니다.  AVIF에 대한 자세한 내용은 AVIF 이미지 제공 Codelab 을 참조하세요.
Lazy-load images?	Image lazy-loading will delay the loading of non-visible images to allow the browser to optimally load all resources for the “above the fold”-page first.
Lazy-load exclusions	Comma-separated list of to be excluded image classes or filenames.
Lazy-load from nth image	Don’t lazyload the first X images, ‘1’ lazyloads all.

Critical CSS

Critical CSS 설정란은 유료 서비스를 이용하는 경우에만 이용할 수 있습니다.

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

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

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

Extra

추가로 Google Fonts, emojis 등을 제거하여 보다 최적화할 수 있습니다.

Optimize More!

자주묻는 질문(FAQ)

Minify HTML 플러그인

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

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

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

Minify HTML

• 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 )

Minify HTML	Enable DisableEnable or disable Minify HTML
Minify inline JavaScript	Yes NoThis option is typically safe to set to “Yes”
Remove HTML, JavaScript and CSS comments	Yes NoThis option is typically safe to set to “Yes”
Remove XHTML closing tags from HTML5 void elements	Yes NoThis option is typically safe to set to “Yes”
Remove relative domain from internal URLs	Yes NoThis option is typically safe to set to “Yes” Yes를 선택하면 구글 서치 콘솔에 에러를 야기합니다. 기본값인 No로 사용하세요.
Remove schemes (HTTP: and HTTPS:) from all URLs	Yes NoThis option is typically best to leave as “No” Yes를 선택하면 페이지의 구조화된 데이터도 제거하고 Google에 좋지 않은 일이 발생합니다. 기본값인 No로 사용하세요.
Support multi-byte UTF-8 encoding (if you see odd characters)	Yes NoThis option is typically best to leave as “No”
	(Bold = default value)

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

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

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 입니다.

AMP for WP – Accelerated Mobile Pages

• 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하며 개선방법을 알려줍니다.

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

사이트의 모바일 친화도를 테스트(Think with Google, 모바일 웹사이트 속도 테스트 도구)

---

참고자료 : 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 – 워드프레스 최적화 플러그인

10. 워드프레스 정보꾸러미의 Autoptimize – 워드프레스 최적화 플러그인

11. : WP-Optimize vs. Autoptimize: Which is the best WordPress optimization plugin?