코어 웹 바이탈 평가 실패 PageSpeed Insights 측정 Autoptimize Breeze 설정

01

of 09

코어 웹 바이탈이란?

코어 웹 바이탈 (Core Web Vitals)은 로드 성능, 상호작용, 페이지의 시각적 안정성에 관한 실제 사용자 경험을 측정하는 측정항목입니다. 사이트 소유자는 Google 검색을 효과적으로 활용하고 전체적으로 우수한 사용자 환경을 제공하려면 우수한 Core Web Vitals을 유지하는 것이 좋습니다. 이는 다른 페이지 경험 측면과 마찬가지로 핵심 순위 시스템이 보상하고자 하는 것과 일치합니다.

① 최대 콘텐츠 페인트 (LCP) : 로드 성능을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지가 로드되기 시작한 지 첫 2.5초 이내에 LCP가 발생하도록 해야 합니다.

② 다음 페인트에 대한 상호작용 (INP) : 응답성을 측정합니다. 우수한 사용자 환경을 제공하려면 INP가 200밀리초 미만이 되도록 해야 합니다.

③ 누적 레이아웃 이동 (CLS) : 시각적 안정성을 측정합니다. 우수한 사용자 환경을 제공하려면 CLS 점수가 0.1 미만이 되도록 해야 합니다.

02

of 09

코어 웹 바이탈 느림

구글 서치 콘솔에서 코어 웹 바이탈을 확인해보니 모바일에서 느린 URL 731개, 데스크톱에선 개선이 필요한 URL 731개가 포함되어 있었다. 혹시 이것 때문에 검색에서 순위가 뒤로 밀리지 않을까 판단하고 코어 웹 바이탈 점수를 올려야겠다고 판단했다.

예전에도 코어 웹 바이탈 느림을 개선하기 위해서 여러 가지를 시도했었지만, 홈페이지가 깨지거나, 일부 기능이 사용 불가능하게 되어서 잠시 포기했었다.

03

of 09

코어 웹 바이탈 평가 실패

페이지스피드 인사이트 (PageSpeed Insight)에 접속해서 확인을 해보니 코어 웹 바이탈 평가 실패가 뜬다. 총 5가지 항목 중 CLS 불량이다. 위 세 가지 항목이 코어 웹 바이탈 항목이고, 아래 두 가지는 다른 주요 측정항목이다.

① 콘텐츠가 포함된 첫 페인트 (FCP) : 사용자가 페이지로 처음 이동한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링되는 시점까지의 시간을 측정합니다. 이 측정항목에서 ‘콘텐츠’는 텍스트, 이미지 (배경 이미지 포함), 〈svg〉 요소 또는 흰색이 아닌 〈canvas〉 요소를 의미합니다.

② 첫 바이트 소요 시간 (TTFB) : 리소스 요청과 응답의 첫 번째 바이트가 도착하기 시작하는 시점 사이의 시간을 측정하는 측정항목입니다.

04

of 09

PageSpeed Insights 측정 결과

불량 항목인 누적 레이아웃 이동 (CLS)을 살펴보니 HTML, CSS, 자바스크립트, 이미지, DOM 관련한 항목이 상당수를 차지하고 있었다. 우선 HTML, CSS, 자바스크립트 세 가지 항목을 수정하게 되었다.

1. 휴대전화

성능 부분이 56점으로 이부분을 집중 수정해야한다.

2. 데스크톱

휴대전화와 마찬가지로 성능 부분이 76점이다. 이부분을 수정해야 한다.

05

of 09

Breeze 설정

현재 난 클라우드웨이즈를 이용해서 서버를 운영하고 있다. 캐시 플러그인은 클라우드웨이즈에서 기본 제공하고 있는 Breeze를 사용 중이다.

클라우드웨이즈의 경우 다른 캐시 플러그인을 사용할 수 없다. 만약 다른 캐시 플러그인을 사용하려면 wp-config.php 파일의 define(‘WP_CACHE’, true);로 바꿔주면 된다. 하지만 이렇게 캐시 플러그인을 다른 것으로 바꾸면 클라우드웨이즈에서 오류가 발생한다. 그래서 그냥 Breeze를 사용하는 게 낫다.

Breeze에선 딱히 설정할게 없다. TOOLS에서 Reset을 해서 설정 초기화를 하고 아래와 같이 설정한다.

1. BASIC OPTIONS

① Cache System : ON

② Mobile Cache : OFF

※ 전용 모바일 테마나 플러그인을 사용하는 경우에만 ON , 이 경우 클라우드웨이즈 홈페이지 접속하여 Device Detection을 ON 해아함

③ Purge Cache After : 1440

④ Gzip Compression : ON

⑤ Browser Cache : ON

⑥ Lazy Load Images : OFF (현재 난 테마에서 이 기능을 사용중이다. 만약 테마나 다른 플러그인에서 이 기능을 사용하지 않는다면 ON)

⑦ Cross-origin Safe Links : ON (CLS에 영향이 있기 때문에 꼭 ON)

⑧ Cache Logged-in Users : 모두 OFF

2. FILE OPTIMIZATION

모두 OFF

3. PRELOAD

① Preload Webfont : 폰트를 로컬에 저장해서 사용한다면 로컬 폰트 경로를 입력해준다.

② Preload Links : ON

③ Prefetch of DNS Request : 기본적으로 아래 4개만 추가해준다.

www.google-analytics.com
www.googletagmanager.com
fonts.googleapis.com
cdn.domain.com

4. ADVANCED OPTIONS

① Never Cache URL(s) : 아래 내용을 추가해준다.

wcs.naver.net/wcslog.js

※ 사용중인 테마에 따라서 내용이 달라질 수 있습니다.

※ 네이버 애널리틱스가 정상 동작 하기 위해서 맨 아래 줄을 추가했다. (예전에 테스트 한거라 지금은 어떤지 모르겠다.)

② Host Files Locally : 모두 ON

※ 이게 의뢰로 PageSpeed Insights 점수에 많은 영향을 준다. 테마에 같은 기능이 있다면 일부 OFF 하면 된다.

5. HEARTBEAT API

① Control Heartbeat : ON

② Heartbeat Front-end : Default

③ Heartbeat Post Editor : Default

④ Heartbeat Back-end : Default

6. 나머지

나머진 모두 초기값 그대로 놔두면 된다.

06

of 09

Autoptimize 설정

현재 난 JNews 테마를 사용 중이다. 최적화 플러그인은 Jnews 테마에서 제공하는 Autoptimize를 사용 중이다. 내 테마의 매뉴얼에서 제시하는 그대로 세팅하게 되었다.

1. JS, CSS & HTML

※ CSS 3번째 항목도 ON : 만약 사용하는 테마의 기능이나 디자인이 정상동작하지 않는다면 OFF

① 본인 테마에 맞게 수정해야 한다. Autoptimize 설정 후 본인 후 사이트를 테스트 해보고, 정상적으로 동작을 안하거나 깨지는 부분이 있다면 이 부분을 추가 해야 한다. (보통 홈페이지 다양한 기능 관련)

기본적으로 아래 두 가지를 추가
wp-includes/js/dist/,
wp-includes/js/tinymce/,

필요데 따라 아래 두 가지를 추가로 추가
js/jquery/jquery.js,
js/jquery/jquery.min.js

〈예시〉

이 사이트는 현재 게시판을 운영하고 있다. 테스트 결과 게시판에 글쓰기 오류가 발생했다. 그래서

wp-content/plugins/mangboard/

추가했다.

② 본인 테마에 맞게 수정해야 한다. Autoptimize 설정 후 본인 후 사이트를 테스트 해보고, 정상적으로 동작을 안하거나 깨지는 부분이 있다면 이 부분을 추가 해야 한다. (보통 홈페이지 색상 이나 꾸미기 관련)

기본적으로 아래 네 가지를 추가
wp-content/themes/jnews/assets/css/,
wp-content/cache/,
wp-content/uploads/,
admin-bar.min.css,
dashicons.min.css

〈예시〉

이 사이트는 현재 게시판을 운영하고 있다. 테스트 결과 게시판의 광고 배경 색상 오류가 발생했다. 그래서

wp-content/themes/jnews/assets/css/

추가했다.

※ 브라우저의 검사 기능을 이용해서 “요소”를 확인하고 사용중인 JS, CSS를 찾아서 이 경로를 제외에 추가하면 된다.

※ 경로를 추가하지 않으려면, 깨지는 CSS코드 끝에 !important를 붙여주면 경로추가 없이 정상 동작한다.

2. 추가

07

of 09

PageSpeed Insights 다시 측정

Breeze와 Autoptimize 설정 후 PageSpeed Insights 다시 측정하게 되었다. 이곳에 설명은 하지 않았지만, 테마의 일부 기능들도 약간 수정했다.

1. 휴대전화

PageSpeed Insights 다시 측정한 결과 휴대전화의 경우 주황색이지만 그래도 월등한 향상을 보여줬다. 성능 부분을 90점대로 올리기 위한 가장 쉬운 방법은 섬네일을 제거하는 것이다. 이 부분은 제거할지 아니면 다른 방법을 찾아볼지 조금 더 고민해봐야겠다.

2. 데스크톱

PageSpeed Insights 다시 측정한 결과 데스크톱은 거의 완벽한 결과를 얻었다. 접근성과 권장사항은 구글 애드센스 광고 형태에 따라 그 값이 조금씩 달라졌다.

08

of 09

참고 (기타 설정)

1. 플러그인 최소화

현재 내가 사용하는 JNews 테마의 경우 기본 테마 + 기능 구현 플러그인 형태로 구성되어 있다. 그래서 본인이 사용하는 기능만 설치를 하면 된다. 사용하는 기능이 적을 수록 테마가 가벼워지는 형태라 할 수 있다.

Autoptimize와 연동이 되어 있어서 optimized Script Loader를 ON , Async Javascript Method ON, Async Javascript Method는 Defer로 설정하면 된다.

2. 압축 활성화

압축 사용 제안을 구현하는 것은 서버 설정에서 간단히 할 수 있습니다. Apache 서버에서 아래 코드를 추가하여 브라우저에 응답을 반환할 때 서버에 GZIP 압축을 사용하도록 알릴 수 있습니다.

※ 이 기능은 Breeze에서 가능하므로 Breeze를 사용하면 된다. 만약 Breeze를 사용하지 않는다면 아래 코드를 .htaccess 파일에 추가하면 된다. (Rank Math를 사용한다면 편하게 편집할 수 있다.)

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>
Code language: HTML, XML (xml)

3. 브라우저 캐싱 활용

웹 브라우저가 웹페이지를 표시할 때 로고, CSS 파일, JS 파일 및 기타 리소스와 같은 여러 가지를 로드해야 합니다.

브라우저 캐싱이 하는 일은 브라우저가 이미 로드한 리소스를 “기억”하는 것입니다. 방문자가 웹사이트의 다른 페이지로 이동하면 로고, CSS 파일 등은 브라우저가 “기억” (저장) 했기 때문에 다시 로드할 필요가 없습니다. 이것이 웹페이지를 처음 보는 데 반복 방문보다 더 오래 걸리는 이유입니다.

아래 코드는 브라우저에 무엇을 캐시하고 얼마나 오랫동안 “기억”해야 하는지 알려줍니다. .htaccess 파일의 맨 위에 추가해야 합니다.

# 1 YEAR
ExpiresActive On
<FilesMatch "\.(otf|ico|pdf|flv|ttf|eot|svg|woff|mp3|ogg|mp4|webm|ogv)$">
  Header set Cache-Control "max-age=29030400, public"
  ExpiresDefault "access plus 1 years"
  Header unset Last-Modified
  Header unset ETag
  SetOutputFilter DEFLATE
</FilesMatch>

# 1 MONTHS
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
  Header set Cache-Control "max-age=2419200, public"
  ExpiresDefault "access plus 1 month"
  SetOutputFilter DEFLATE
</FilesMatch>

<FilesMatch "\.(xml|txt|css|js)$">
  Header set Cache-Control "max-age=604800, public"
  ExpiresDefault "access plus 1 week"
  SetOutputFilter DEFLATE
</FilesMatch>

# 30 MIN
<FilesMatch "\.(html|htm|php)$">
  SetOutputFilter DEFLATE
</FilesMatch>
Code language: PHP (php)

09

of 09

마무리

테마, Breeze, Autoptimize 설정을 통하여 PageSpeed Insights 측정 결과를 향상하게 했다. 이제 코어 웹 바이탈이 향상되는지 확인해야 하지만 이건 바로 결과가 표시되지 않는다. 아무래도 구글 서치 콘솔을 1달 정도는 지켜봐야 그 성과가 나올 것 같다. 그 결과가 나온다면 그때 결과를 추가로 올릴 계획이다.