Perfmatters 플러그인 리뷰 & 가이드: 3년 동안 사용한 워드프레스 성능 최적화 설정 방법

Perfmatters 플러그인은 워드프레스 최적화 플러그인 중에서도 가볍고 강력한 퍼포먼스를 제공하는 도구입니다. 불필요한 스크립트와 리소스를 손쉽게 제어해 페이지 로딩 속도를 개선하고, 서버 부하를 최소화할 수 있습니다. 3년 이상 사용하면서 느낀 점은, 단순한 속도 향상을 넘어 사이트 전체의 안정성과 관리 편의성을 높여준다는 점이었습니다.

현재 이 웹사이트는 WP Rocket Cache 플러그인과 Perfmatters를 함께 사용하고 있습니다. 이 글에서는 Perfmatters만 단독으로 적용했을 때의 기본 설정 방법과 각 항목을 선택한 이유, 그리고 최적화 결과를 함께 공유하겠습니다.

Ⅰ. 최고의 워드프레스 최적화 플러그인

워드프레스 캐시 플러그인은 워드프레스 사용자에게 항상 빠지지 않는 키워드입니다. 대부분의 사용자는 캐시 플러그인 설치 후 구글 페이지 스피드와 크롬 개발자 도구에서 만족할 만한 웹사이트 성능 향상을 경험합니다.

하지만 사이트를 운영하다 보면 방문자 경험을 개선하거나 기능을 확장하기 위해 다양한 플러그인을 추가하게 됩니다. 문제는 이 과정에서 불필요한 스크립트와 리소스가 늘어나면서, 오히려 페이지 로딩 속도가 떨어지는 현상이 자주 발생한다는 점입니다.

사실 상 WP Rocket 플러그인을 사용하면서 저 역시 동일한 경험을 거치게 되었고, 저의 경험과 지식 부족일 수 있으나 다른 캐시 플러그인이 더 나은 대안이 될 수 없다는 결론을 얻게 되었습니다.

1. 최적화 플러그인 비교

다른 최적화 플러그인인 clearfy, Autoptimize, Asset CleanUp과 비교했을 때 Perfmatters를 선택한 이유는 가장 직관적인 사용자 인터페이스와 플러그인 페이지 내 각각의 설정에 대한 자세한 설명이 있었기 때문입니다. 처음 설치 후 모르는 내용에 대한 안내가 충분히 제공되어, 복잡한 문서를 따로 참고하지 않고도 주요 기능을 바로 이해할 수 있었습니다. 별도의 구글링이 거의 필요하지 않았습니다.

clearfy Cache는 캐시 기능이 있지만 최적화 기능이 더 많이 적용된 플러그인으로 자산 매니저로 사용하지 않는 코드 제거와 전반적인 기능이 Perfmatters와 비슷한 포지션을 가지고 있지만 Perfmatters가 더 직관적이며, 설명 역시 복잡하지 않습니다.

Autoptimize는 제가 느끼기에 너무 기능이 부족하고 Asset CleanUp 역시 동일한 기능을 제공하지만 너무 복잡합니다. 설치 후 5분 만에 삭제했습니다. Asset CleanUp은 언급할 가치가 없는 것 같습니다.

2. Perfmatters Reviews on TrustPilot

TrustPilot에서 4.9의 높은 평가를 받고 있습니다. 워드프레스 최적화 플러그인을 처음 결정할 때 Perfmatters를 결정한 이유이기도 합니다.

한국의 워드프레스 사용자일 경우 미국 구글로 검색 환경을 변경 한 후에 Perfmatters에 대한 다양한 내용을 검색할 수 있습니다.

3. Perfmatters pricing & Promo Code

Perfmatters 이동

Perfmatters를 3년 이상 사용하면서, 공식적으로 Perfmatters 측으로부터 Promo Code를 지원받게 되었습니다.

Perfmatters 20% 할인 가격
Promo Code 복사하기 ▼

WPUKNEW

가격할인 쿠폰 적용 가격

가격할인 쿠폰 적용 가격

Ⅱ. Perfmatters 기본 설정 가이드

워드프레스는 CSS 및 JS 파일들이 전역 설정으로 되어 있어 사용하지 않는 페이지에서도 관련 코드가 노출되어 사이트의 성능이 느려지는 경우가 일반적입니다. Perfmatters는 워드프레스 최적화 플러그인이 갖춰야 할 코드 제거, 리소스 제어, 요청 최소화 기능을 모두 제공합니다.

이러한 방식은 단순히 캐시 플러그인으로는 해결할 수 없는 ‘리소스 낭비’ 문제를 근본적으로 줄이는 방법으로, 결과적으로 페이지 로딩 속도 개선과 서버 부하 감소 두 가지 효과를 동시에 얻을 수 있습니다.

Perfmatters 일반 설정부터 시작하여 DataBase의 기본적인 최적화 기능과 자산 최적화 기능이 스크립트 매니저는 관리자 페이지에서 사이트 방문으로 이동하여 설정할 수 있습니다. 일반 설정부터 튜토리얼을 진행하며 스크립트 매니저는 차후 다시 설명하도록 하겠습니다.

Perfmatters 기본 설정 화면 탭
 ├─ General
 ├─ JavaScript(최적화)
 ├─ CSS(최적화)
 ├─ Preloading
 ├─ Lazy Loading
 ├─ Fonts (폰트 최적화)
 ├─ CDN
 ├─ Code 
 ├─ Tools
 ├─ Database(최적화)
 ├─ License (라이선스 관리)
 └─ Support (지원)
     ├─ Documentation
     ├─ FAQs
     └─ Contact Support

기본 설정스크립트 매니저

기본 설정스크립트 매니저

1. General 설정

Perfmatters는 캐시 기능은 없는 최적화 전용 플러그인입니다. 일반 설정 탭은 기본적인 최적화를 수행할 수 있으며, 일반 탭에서의 최적화 기능 만으로 충분히 웹사이트 성능을 크게 향상 시킬 수 있습니다.

일반 설정 1일반 설정 2

일반 설정 1일반 설정 2

항목명	Check / Uncheck	간단 설명
Disable Emojis		hedder & footer 등에 이모지 없다면 체크 글 내부 이미지 문제 없음⤵️
Disable Dashicons		최신 테마와 플러그인은 자체 SVG 사용⤵️
Disable Embeds		워드프레스 포함 다른 사이트와의 임베드 기능 비활성화⤵️
Disable XML-RPC		무차별 대입 공격 등 취약 ⤵️
Remove jQuery Migrate		예전 코드와의 통신: 불필요한 코드
Hide WP Version		웹사이트 보안
Remove RSD Link		외부 애플리케이션이 워드프레스 사이트와 통신
Remove Shortlink		옛날 버전 워드프레스의 방식
Disable RSS Feeds		다른 사이트에 RSS 피드 제공 시 Uncheck 제공하지 않을 경우 Check
Remove RSS Feed Links		Disable RSS Feeds를 체크했을 경우에만 링크를 제거(Check)
Disable Self Pingbacks		내부 링크 핑백 제거⤵️
Disable REST API		내부 데이터를 외부 프로그램에서도 사용할 수 있게 해주는 ‘데이터 통신 창구’⤵️ 다른 앱, 웹사이트, 플러그인 등
Remove REST API Links		비활성화와는 완전 다른 개념으로 링크 자체의 삭제
Disable Google Maps		속도 저하로 비활성화: 해당 페이지만 활성화 가능⤵️
Disable Password Strength Meter		zxcvbn.min.js 파일을 볼 일이 거의 없음⤵️
Disable Comments		댓글을 사용하지 않을 경우 Check
Add Blank Favicon		파비콘을 이미 설정했을 경우가 크기 때문에 Uncheck 테마·플러그인 개발자를 위한 기능
Remove Global Styles		보통의 테마나 플러그인은 거의 사용하지 않는 기능⤵️
Separate Block Styles		CSS 효율 개선
Disable Heartbeat & Revisions		Heartbeat 글과 페이지 편집 시에만 허용 추천⤵️ ‘Revisions’ 갯수 및 시간 설정
Login URL 설정		다른 로그인 URL 숨기기 플러그인 대체

1.1 Disable Emojis

글 내부에서 사용하는 일반 이모지는 브라우저 자체 렌더링을 사용하므로 성능에 영향을 주지 않으며, 삽입해도 깨지는 문제가 발생하지 않습니다.

반면 워드프레스의 기본 이모지 기능은 별도의 자바스크립트(wp-emoji-release.min.js) 파일을 불러오기 때문에, 페이지 로딩 시 불필요한 요청이 발생합니다.

Disable Emojis 옵션을 체크하면 이러한 스크립트가 로드되지 않아 전체 페이지 크기와 요청 수가 줄어듭니다. 다만, 웹사이트의 헤더나 푸터에 이모지를 직접 삽입한 경우 일부 테마에서는 표시 오류가 생길 수 있으니 이 점을 유의해 체크하여 비활성화 하는 것이 좋습니다.

1.2 Disable Dashicons

대시콘은 워드프레스 공식 글꼴 아이콘이었지만 최신 테마와 플러그인은 자체 아이콘이나 SVG를 사용하거나 아예 아이콘을 사용하지 않는 방향으로 변경되었으며 관리자 페이지에서만 사용됩니다. 따라서 대시콘 역시 체크하여 비활성화 합니다.

1.3 Disable Embeds

워드프레스 “Disable Embeds” 기능 역시 활성화 합니다. wp-embed.min.js 파일은 “Disable Embeds”로 체크하면 다른 워드프레스 사이트의 임베드가 되지 않지만 유튜브는 임베드가 가능합니다. 다른 워드프레스 사이트로부터 임베드 및 워드프레스를 포함한 다른 사이트로의 임베드를 사용하지 않는다면 체크하여 비활성화 하는 것이 맞습니다.

1.4 Disable XML-RPC

XML-RPC 기능은 무차별 대입 공격 등에 취약하기 때문에 옵션을 체크하여 비활성화 합니다. 데스크탑이 아닌 모바일 등의 기기로 워드프레스에 접속하여 글을 게시하는 경우는 많지 않기 때문에 비활성화가 맞지만 XML-RPC를 사용하는 JetPack과 같은 플러그인이 있을 경우 활성화 상태를 유지합니다.

1.5 Remove jQuery Migrate

jQuery Migrate는 예전 코드와 새 코드가 통신할 수 있도록 하는 코드로 사실 상 필요 없는 코드이기 때문에 체크 후제거합니다.

1.6 Hide WP Version

워드프레스의 버전이 노출되면 웹사이트의 취약점과 코드 줄이 사이트의 성능을 저해하기 때문에 체크하여 제거합니다.

1.7 Remove RSD Link

RSD Link는 외부 애플리케이션이 워드프레스 사이트와 통신할 수 있도록 만든 기능으로 XML-RPC 기반 통신을 지원하는 워드프레스를 전용으로 연결하는 클라이언트나 모바일 앱에서 필요한 기능이기 때문에 체크하여 제거합니다.

1.8 Remove Shortlink

페이지와 게시물에 대한 단축 링크는 퍼머 링크를 사용한다면 유지할 필요가 없기 때문에 체크해서 제거합니다.

1.9 Disable RSS Feeds

역시 사이트 속도에 영향을 주기에 RSS 피드를 다른 사이트에 제공하지 않을 경우 체크해서 비활성화 합니다.

1.10 Remove RSS Feed Links

Disable RSS Feeds를 체크했을 경우에만 링크를 제거합니다. 다른 사이트에 RSS Feeds를 제공한다면 체크하지 않습니다.

1.11 Disable Self Pingbacks

Pingbacks은 다른 워드프레스 사이트에 댓글을 달 경우 자동으로 내 사이트의 백링크를 생성해 주지만 사실 상 댓글에서의 백링크는 SEO에 큰 도움이 되지 않아 이 사이트에서는 이미 사용하지 않는 기능입니다. 추가로 내 사이트에서 내 사이트로 내부 링크를 생성할 때 Self Pingbacks이 생성되기 때문에 체크해서 비활성화 합니다.

1.12 Disable REST API

REST API는 워드프레스 내부 데이터를 외부 프로그램에서도 사용할 수 있게 해주는 ‘데이터 통신 창구’입니다. 다른 앱, 웹사이트, 플러그인, 외부 서비스가 워드프레스 사이트 안의 데이터를 JSON 형식으로 주고받을 수 있도록 만들어주는 API(응용프로그램 인터페이스)입니다.

이 기능은 개발자에겐 유용하지만, 공개된 상태로 두면 누구나 기본적인 사이트 정보를 불러올 수 있습니다. Rank Math를 포함한 많은 플러그인은 내부적으로 REST API를 사용하지만, 워드프레스 내부(로그인된 관리자 환경)에서만 통신이 이루어지기 때문에 사이트 운영에 큰 문제가 발생하지 않습니다.

따라서 REST API를 사용하는 플러그인이 있다면, 비로그인 사용자(로그아웃 상태)에게만 REST API를 비활성화하도록 설정하는 것이 가장 안전합니다. 설정 시 속도보다는 보안에 긍정적인 영향을 줍니다.

1.13 Remove REST API Links

페이지 헤더에 포함되는 불필요한 요청을 줄이고 약간의 속도 향상 효과를 얻습니다. REST API 기능 자체를 끄는 것은 아니며, 단지 관련 링크 메타 태그를 삭제하는 설정입니다.

1.14 Disable Google Maps

일부 워드프레스 테마나 플러그인은 Google Maps API가 스크립트가 자동으로 로드되어 사이트에서 실제로 지도를 사용하지 않더라도 관련 스크립트가 자동으로 로드됩니다. 이러한 외부 요청은 페이지 로딩 속도를 느리게 만들고, 특히 API 키를 사용하지 않는 경우 콘솔 경고나 오류를 유발할 수 있습니다.

Disable Google Maps 옵션을 활성화하면 이러한 Google Maps 관련 스크립트를 완전히 차단하여 불필요한 외부 리소스 요청을 줄이고 페이지 성능을 개선할 수 있습니다.

구글 맵이 포함된 글이 있다면 특정 게시물 ID(게시물, 페이지, 블로그 피드, 홈페이지, 맞춤 게시물 유형 등)에서 Google Map이 비활성화 되지 않도록 설정할 수 있습니다.

1.15 Disable Password Strength Meter

워드프레스 기본 코에에는 ‘비밀번호 강도 측정기’ 스크립트는 원래 회원가입, 비밀번호 변경, 사용자 프로필 수정(admin/profile.php 등) 시점에 불러오도록 설정되어 있습니다.

그러나 일부 테마나 플러그인이 사용자 관련 폼(예: 로그인 팝업, 프로필 위젯 등)을 모든 페이지에 포함시키면, 워드프레스는 해당 폼이 있는 것으로 판단하고 zxcvbn.min.js를 전역 페이지에 로드하게 됩니다.

/wp-includes/js/zxcvbn.min.js
/wp-admin/js/password-strength-meter.min.js

따라서 체크하여 ‘비밀번호 강도 측정기’를 비활성화 합니다. 웬만한 워드프레스 사이트에서는 비활성화를 하지 않아도 크게 문제되지 않으며, 실제로 zxcvbn.min.js 파일을 볼 일이 거의 없습니다.

1.16 Disable Comments

워드프레스 사이트에서 댓글을 사용하지 않는다면 댓글 기능을 체크하여 비활성화 합니다.

1.17 Add Blank Favicon

새로 설치된 워드프레스는 /favicon.ico 파일이 존재하지 않기 때문에 크롬 개발자 도구 및 구글 페이지스피드 및 GTmetrix 등의 도구로 성능 테스트를 진행할 때 404 오류가 뜨는 번거로움이 발생합니다. 무료 캐시 및 최적화 플러그인에 한계가 있어 유료 플러그인을 쓰는 경우가 있으며, 이는 테마·플러그인 개발자를 위한 기능입니다.

이미 파비콘을 추가한 운영되고 있는 워드프레스 사이트에는 필요 없는 기능으로 체크해서 파비콘을 추가할 이유가 없습니다.

1.18 Remove Global Styles

WordPress 5.9부터 코어가 global-styles-inline-css 라는 인라인 CSS 블록을 <head>에 자동으로 삽입합니다.

duotone(이미지 색상 필터), wp-block(블록 전역 설정), theme.json에서 정의된 색상·폰트·간격 등 디자인 관련 변수를 담고 있습니다. 즉, FSE 테마나 블록 에디터 스타일을 지원하기 위한 기반 CSS입니다. 대부분의 클래식 테마(예: Kadence, GeneratePress 등)는 FSE를 쓰지 않는데, 그런데도 이 인라인 CSS가 계속 붙습니다.

150~200줄의 인라인 CSS가 <body> 이전에 삽입됩니다. 이로 인해

• HTML 크기 증가
• FCP/LCP 약간 저하
• CSS 우선순위 충돌 발생 가능

해당 옵션을 활성화 해서 코드를 제거합니다.

remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');

1.19 Separate Block Styles

워드프레스는 Gutenberg 블록 시스템(문단, 이미지, 이미지, 갤러리, 버튼 등)을 지원하기 위해 각 블록마다 전용 CSS를 가지고 있습니다. 즉, 사용하지 않는 블록의 CSS까지 /wp-includes/css/dist/block-library/style.min.css 등에 다 묶여서 전역 스타일시트로 로드됩니다. 결과적으로 불필요한 CSS가 수십 KB 이상 낭비됩니다.

• CSS 사용량 최대 17% 감소
• 일부 단일 페이지 사이트에서는 LCP ~30~50ms 개선
• TBT(총 차단 시간) 감소는 미미하지만, CSS 파싱 부하가 줄어듦

CSS 효율을 개선하는 기능이라고 보면 됩니다.

워드프레스 코어 6.2 버전부터 정식으로 블록 별 스타일 분리 로직이 지원되기 시작했기 때문에 크게 문제 될 점은 크게 없습니다. Kadence, Spectra, GeneratePress 같은 최신 블록 기반 테마·플러그인은 Perfmatters의 “Separate Block Styles” 버튼을 체크해도 문제되지 않습니다.

단 사용하는 테마나 플러그인이 고유한 CSS 로드 로직을 갖고 있거나 FSE 기반(theme.json 중심) 구조를 사용할 경우, Separate Block Styles 기능으로 인한 스타일 충돌이 발생할 수 있습니다.

위 기능은 should_load_separate_core_block_assets WordPress 코어의 필터를 사용합니다. CSS는 웹사이트의 헤드가 아닌 바디에 인라인으로 삽입된다는 점에 유의해야 합니다. 따라서 W3C 유효성 검사 도구에서 경고가 발생할 수 있습니다.

참조: perfmatters 문서

문제가 생길 수 있는 경우는 아래와 같습니다.

1.20 Disable Heartbeat & Revisions

워드프레스 ‘Heartbeat’는 서버와 웹사이트가 계속 연결되어 있는지 확인하는 신호입니다. Heartbeat API는 
/wp-admin/admin-ajax.php를 사용하여 웹 브라우저에서 AJAX 호출을 실행합니다. 워드프레스 대시보드에서 15초마다 이 파일로 인해 POST 요청이 전송됩니다.

이걸 줄이거나 끄면 서버의 부담을 줄일 수 있습니다. perfmatters 에서 설정은 글과 페이지 편집 시에만 허용으로 설정합니다.

Heartbeat글과 페이지만 허용

Heartbeat글과 페이지만 허용

Heartbeat 빈도는 60초로 설정하고 필요할 때만 활성화 할 수 있게 합니다. 개인적으로 게시물 수정은 3개 까지만 허용합니다.

게시물 수정을 기본 값으로 두면 데이터베이스에 계속 Revisions이 쌓이기 때문에 데이터베이스의 속도가 느려집니다. 보통 wp-config.php 설정에서 원하는 갯수를 수정할 수 있지만 Perfmatters 및 WP Rocket와 같은 플러그인은 리비전 기능을 제공합니다.

글의 자동 저장 간격은 기본 1분 기본 값부터 설정할 수 있습니다.

특히 캐시가 설치되지 않은 워드프레스 사이트의 경우와 캐시가 설치되어 있어도 관리자 페이지 대시보드에서 작업을 하는 동안, 특히 글이나 페이지에서 콘텐츠를 제작하는 경우 방문자 페이지까지 느려지는 경우가 있습니다.

예를 들어 서버의 총 CPU를 50% 정도 사용하는 경우 어떤 캐시 플러그인을 쓰더라도 방문자 페이지의 속도가 떨어질 수 있습니다.

Perfmatters 플러그인을 사용하지 않을 경우 위 설정들을 wp-config.php에서 직접 설정할 수 있습니다.

1.21 로그인 URL 설정

워드프레스 관리자 대시보드가 yourdomain.com/wp-admin으로 기본 설정 되어 있어 보안에 취약한 구조입니다.

워드프레스 코어 개발팀에서 wp-admin을 그대로 제공하는 이유는 세계적 규모의 QA 부담을 피하면서 오픈소스 생태계를 살리는 합리적 회피에 가깝다고 할 수 있습니다.

관리자 대시보드를 숨기는 다른 플러그인을 사용할 수 있지만 Perfmatters에서 제공하는 기능을 사용할 수 있습니다.

Login URLLogin URL 옵션

Login URLLogin URL 옵션

2. JavaScript 최적화 설정

2.1 Defer

JavaScript Defer는 웹페이지의 최초 렌더링이 완료되기 전까지 JavaScript 파일의 로딩을 지연 시키는 기능입니다.
즉, HTML 문서의 구조가 먼저 파싱되고 화면이 표시된 후에 JavaScript 코드가 실행되도록 하여 렌더링 차단을 방지하고 페이지 로딩 속도를 개선합니다.

이 기능은 브라우저가 HTML을 읽는 동안 스크립트 실행으로 인해 멈추지 않도록 만들어 DOMContentLoaded 시점의 지연을 최소화하는 데 도움을 줍니다. 이는 첫 번째 콘텐츠 페인트(FCP) 와 가장 큰 콘텐츠 페인트(LCP)를 개선합니다.

• Include Inline Scripts
• Include jQuery
• Excluded from Deferral

자바스크립트 지연 로드에 인라인 스크립트를 포함하는 것은 HTML 문서 내부(<script>...</script>)에 직접 작성된 짧은 JavaScript 코드까지 함께 지연시켜 실행하도록 하는 옵션입니다.

일반적으로 인라인 스크립트는 페이지의 초기 동작(예: 메뉴 토글, 헤더 스크립트 등)에 필요한 경우가 많기 때문에, 이 옵션을 활성화하면 오히려 초기 렌더링이 느려질 수 있습니다.

따라서 특별한 이유가 없는 한 비활성화 상태로 두는 것이 권장되며, 인라인 코드 중 반드시 지연이 필요한 특정 스크립트가 있을 때만 활성화하는 것이 좋습니다.

자바스크립트 지연 로딩에 jQuery를 포함 시킬지 결정합니다. “많은 플러그인과 테마에는 jQuery가 필요합니다. jQuery 연기를 별도로 테스트하거나 이 옵션을 꺼두는 것이 좋습니다.” 라는 경고 메시지를 확인할 수 있습니다.

jQuery 라이브러리를 사용하는 플러그인이나 테마가 많기 때문에, 지연 로딩 시 jQuery를 포함하면 일부 스크립트가 의존성 오류로 정상 작동하지 않을 수 있다는 의미입니다.

특히 메뉴 토글, 슬라이더, 팝업 등 초기 렌더링 직후 동작하는 기능들이 jQuery에 의존하는 경우가 많으므로,
이 옵션을 활성화하면 사이트 일부가 깨질 수 있습니다. 따라서 일반적으로는 Include jQuery 옵션을 비활성화 상태로 유지하고, 필요한 경우에만 테스트를 거쳐 선택적으로 활성화하는 것이 좋습니다.

일반적으로 모든 스크립트를 지연시키면 일부 기능(예: 슬라이더, 폼 검증, 메뉴 등)이 정상적으로 작동하지 않을 수 있습니다. 이러한 경우, 문제를 일으키는 특정 JavaScript 파일 경로를 이 항목에 입력하면 해당 스크립트는 Defer 처리 대상에서 제외되어 즉시 로드됩니다.

예를 들어 아래와 같은 경로를 추가하면,

/wp-includes/js/jquery/jquery.min.js
/wp-content/plugins/contact-form-7/includes/js/scripts.js

위 스크립트들은 지연 로딩되지 않고 페이지 초기 로딩 시 바로 실행됩니다.

따라서 기능 오류가 발생하는 스크립트를 발견했을 때, 해당 파일을 Excluded from Defer 항목에 추가하여 문제를 해결할 수 있습니다.

2.2 Delay

자바스크립트 실행을 지연하면 LCP(Largeest Contentful Paint)를 개선할 수 있습니다. “Delay JavaScript Execution”기능은 페이지 로드 후 사용자 상호작용(스크롤, 클릭, 터치 등)이 발생하기 전까지 JavaScript 실행을 일시적으로 멈추는 옵션입니다.

즉, 브라우저가 HTML과 CSS를 먼저 로드하고 주요 콘텐츠를 표시하는 동안, 광고, 애널리틱스, 외부 추적 스크립트와 같은 비필수 JavaScript를 나중으로 미루어 렌더링 차단을 최소화하고 LCP 및 FCP 지표를 개선합니다.

‘Defer’가 “HTML 파싱 후 실행”이라면, ‘Delay’는 “사용자 행동이 있을 때까지 실행 자체를 연기”한다는 점에서 훨씬 강력한 지연 방식입니다.

다만, 이 옵션을 활성화하면 일부 인터랙티브 기능(예: 자동 재생, 초기 팝업 등)이 즉시 동작하지 않을 수 있으므로 필요한 스크립트는 예외 처리하는 것이 좋습니다.

Delay JavaScript를 활성화 할 경우 하위 3가지 옵션을 활성화 하는 것을 권장합니다.

옵션	권장 상태	설명
Delay Behavior		모든 JS가 아닌 ‘비필수 스크립트’만 지연 권장: Only Delay Specified Scripts (Default)
Delay Timeout		사용자가 아무 행동 안 해도 일정 시간 후 자동 실행 (광고·통계용, 15초 기본)
Disable Click Delay		클릭 즉시 반응 (INP 개선, UX 지연 방지)
Enable FastClick		모바일에서 클릭 반응 지연 제거 (iOS 터치 지연 방지)

• Delay Behavior
• Delay Timeout
• Disable Click Delay
• Enable FastClick

지연 동작은 지정된 스크립트만 지연할지 모든 JavaScript 로 설정할지 결정할 수 있습니다.

• ✅ 특정 파일만 실행 지연 적용

특정 파일만 실행 지연으로 설정할 경우

실행 지연에 구글 애널리틱스, 애드센스, 태그매니저 등을 적용할 수 있습니다.

• ✅ 모든 파일 실행 지연 적용

모든 파일을 실행 지연 시킬 경우 특정 플러그인 또는 테마에 문제가 발생할 수 있습니다. 실행 지연에서 제외는 설치한 플러그인 또는 테마를 확인할 수 있습니다.

여기서 별도 항목이 없을 경우 직접 제외할 항목을 적용할 수 있습니다.

지연 실행 시간이 길어지면 실행 지연을 강제 실행하도록 설정할 수 있습니다. 이는 사용자가 아무런 동작(클릭, 스크롤 등)을 하지 않아도 일정 시간이 지나면 지연된 JavaScript를 자동 실행합니다. 기본 15초로 설정되어 있습니다.

실행 지연 7초로 설정하는 방법

Delay JavaScript Execution 옵션은 사용자가 클릭·스크롤·터치 등 상호작용을 하기 전까지 JavaScript를 실행하지 않기 때문에 처음에는 모든 JS 실행이 멈춰 있고, 사용자가 페이지에서 무언가를 클릭하면 그때 JS가 로드되며, 클릭한 동작(예: 메뉴 열기, 버튼 작동 등)이 그 이후 실행됩니다.

이는 페이지 속도를 빠르게 하지만 클릭 후 반응이 약간 늦게 나타나는 현상이 생길 수 있습니다.

“클릭 지연 비활성화” 기능은 클릭 시 반응 지연”을 없애는 기능입니다.

상황	기본 Delay JS 상태	Disable Click Delay 활성화 시
사용자 클릭	JS 로드 후에 클릭 이벤트 실행 → 약간의 지연 발생	JS 즉시 실행 → 클릭 반응이 빠름

Delay JavaScript Execution 기능은 클릭을 두 번 해야 작동하는 버그가 발생할 수 있습니다. 이는 모든 캐시 플러그인과 최적화 플러그인에서 공통으로 나타나는 현상으로 플러그인의 문제가 아닙니다.

“항상 빠른 클릭” 기능은 이를 개선할 수 있습니다.

2.2 Minify

Minify JavaScript 옵션은 자바스크립트 파일 내의 불필요한 문자(공백, 줄바꿈, 주석 등)를 제거하고, 코드 구조를 더 간결하게 만들어 파일 크기를 최소화하는 기능입니다. 이 과정에서 코드의 실행 결과는 동일하지만, 브라우저가 파일을 더 빠르게 다운로드하고 파싱할 수 있도록 최적화됩니다. 즉, 전송 용량과 구문 분석(Parsing) 시간을 동시에 줄이는 효과를 얻을 수 있습니다.

오늘날 많은 개발자들은 배포 과정에서 이미 JavaScript 파일을 미리 최소화(.min.js)해 제공하지만, 모든 테마나 플러그인이 그렇게 구성되어 있지는 않습니다. 따라서 Perfmatters에서 이 옵션을 활성화하면, 최소화되지 않은 외부 스크립트까지 자동으로 압축 처리되어 사이트 전반의 로딩 속도를 개선할 수 있습니다.

만약 사이트가 이미 최소화된 스크립트를 사용 중이라면, 파일 이름 끝에 .min.js라는 확장자를 통해 확인할 수 있습니다. 예를 들어, file.min.js는 이미 최소화된 스크립트입니다.

또한 구글 페이지스피드 인사이트나 크롬 Lighthouse 테스트에서 “JavaScript 최소화” 경고가 표시된다면, 이는 해당 스크립트가 아직 압축되지 않았다는 의미입니다. 이러한 파일을 최소화하면 최대 콘텐츠 페인트(LCP)와 최초 콘텐츠 페인트(FCP) 지표 모두 개선되는 효과를 기대할 수 있습니다.

3. CSS 최적화 설정

CSS 설정은 사용하지 않는 CSS 제거와 CSS 최소화 2가지 방법을 제공합니다.

3.1 Unused

이 기능은 페이지에서 실제로 사용되지 않는 CSS 코드를 자동으로 식별하고 제거하여, 불필요한 스타일시트 로드를 방지하는 역할을 합니다. 워드프레스 테마와 플러그인은 대부분의 페이지에 공통으로 CSS 파일을 로드하기 때문에,
어떤 페이지에서는 사용되지 않는 스타일 코드가 함께 포함되어 전송되는 경우가 많습니다.

이러한 불필요한 CSS는 페이지 파일 크기를 늘리고 렌더링 차단 시간을 증가시켜 LCP(Largest Contentful Paint)와 FCP(First Contentful Paint) 지표에 부정적인 영향을 미칠 수 있습니다.

Perfmatters의 Remove Unused CSS 기능을 활성화하면, 각 페이지에서 실제로 필요한 CSS만 추출하여 인라인(Inline) 형태로 삽입하고, 사용하지 않는 코드는 완전히 제거함으로써 페이지 로딩 크기를 최소화합니다. 특히 대형 테마(예: Elementor, Divi, Avada 등)나 다수의 플러그인을 사용하는 사이트에서 렌더링 차단 리소스를 대폭 줄이고 Core Web Vitals 점수를 개선하는 데 매우 효과적입니다.

단, CSS를 전역으로 불러오는 특정 플러그인(예: 슬라이더, 폼 빌더 등)이 있을 경우 일부 스타일이 누락될 수 있으므로, 테스트 후 필요한 CSS는 Excluded from Unused CSS 항목에 추가하는 것이 안전합니다.

• Used CSS Method
• Stylesheet Behavior
• Excluded Stylesheets
• Excluded Selectors
• CDN URL

CSS 제거 방법은 인라인과 파일 2가지 옵션을 제공합니다. Perfmatters는 페이지별로 실제로 사용되는 CSS만 남기고 나머지는 제거한 뒤, 그 사용 중인 CSS를 인라인 형태로 삽입하거나 별도의 파일로 분리하여 로드 할 수 있도록 선택지를 제공합니다.

• ✅ Inline (기본값)Remove Unused CSS

• 설명: 필요한 CSS 코드를 HTML 문서 내부에 직접 삽입하는 방식입니다.
• 장점:
  • 외부 CSS 요청이 없어 HTTP 요청 수가 줄어듦
  • 렌더링 차단 리소스가 거의 사라짐
  • FCP(First Contentful Paint)와 LCP(Largest Contentful Paint) 개선에 유리
• 단점:
  • 페이지마다 HTML 크기가 증가함 (특히 CSS가 많은 사이트일수록)
  • 캐시 재활용이 어려움 → 페이지별로 CSS가 반복 삽입됨
• 추천 사용: 블로그형 사이트, 콘텐츠 중심 페이지 (CSS 용량이 작을 때)

• ✅ FileRemove Unused CSS

• 설명: 사용 중인 CSS를 별도의 .css 파일로 생성하여 로드하는 방식입니다.
• 장점:
  • 동일한 CSS가 여러 페이지에서 사용될 경우 브라우저 캐시 활용 가능
  • HTML 크기를 줄여 서버 응답 속도(TTFB)를 약간 개선
• 단점:
  • 외부 CSS 요청이 추가되어 인라인 방식보다 약간 느릴 수 있음
• 추천 사용: 대형 사이트, CSS 파일 용량이 큰 테마나 빌더형 페이지

결과적으로 Inline 방식은 최대 성능(렌더링 속도)에 유리, File 방식은 캐시 효율(서버·브라우저 재활용)에 유리하므로 사이트 구조와 성격에 따라 적절히 선택하는 것이 좋습니다.

스타일 시드 동작 옵션은 불필요한 CSS 파일을 어떤 방식으로 처리할지 결정하는 설정입니다.

설정	동작 방식	특징
🕒Delay (Default)	스타일시트를 약간 지연시켜 로드합니다.	기본 설정으로 대부분의 사이트에서 안정적으로 작동하며, 초기 렌더링(FCP·LCP)에 유리합니다.
🚀Async	스타일시트를 비동기 방식으로 불러옵니다.	HTML 파싱을 차단하지 않아 속도 향상 효과가 있지만, 일부 CSS 종속성 높은 테마에서는 주의가 필요합니다.
⚡Remove	사용되지 않는 스타일시트를 완전히 제거합니다.	성능 향상 효과가 가장 크지만, 일부 UI 요소(메뉴, 애니메이션 등)가 깨질 수 있으므로 테스트가 필요합니다.

• Delay = 안정성과 속도의 균형
• Async = 렌더링 차단 최소화
• Remove = 최대 성능 향상

설정	속도 향상	안정성	추천 대상
🕒Delay (Default)	⭐⭐⭐	⭐⭐⭐⭐	여러 플러그인을 사용하는 경우 추천
🚀Async	⭐⭐⭐⭐	⭐⭐	정적 페이지, CSS 종속성 낮은 사이트
⚡Remove	⭐⭐⭐⭐⭐	⭐	커스텀 테마, 실험적 세팅

삭제하지 않고 그대로 유지할 CSS를 설정합니다.

• · 특정 플러그인 전체를 제외할 때 ⤵️

/wp-content/plugins/contact-form-7/

• · 특정 파일만 제외할 때 ⤵️

/wp-content/plugins/contact-form-7/includes/css/styles.css

CSS 선택자 제외는 HTML 요소에 적용된 CSS는 제거 대상에서 제외 시키는 것을 의미합니다.

• · 블록 인용 ⤵️

.wp-block-quote
blockquote

• · 코드 블록 ⤵️

pre
code
.wp-block-preformatted
.wp-block-code

• · 아스트라  테마 ⤵️

/uploads/astra/astra-theme-dynamic-css
/uploads/astra-addon/astra-addon-dynamic-css

• · GeneratePress 프리미엄 오프 캔버스 모바일 메뉴 ⤵️

/wp-content/plugins/gp-premium/menu-plus/functions/css/offside.min.css

더 많은 옵션은 Perfmatters 공식 문서 CSS 제거에서 확인할 수 있습니다.

KeyCdn이나 Bunny CDN등의 일반적인 CDN을 입력하여 CSS 파일을 CDN에 적용합니다. Cloudflare는 DNS 레벨에서 전송되는 모든 리소스를 자동 캐싱하기 때문에 이 항목에 추가하지 않습니다.

3.2 Minify

CSS 파일의 공백, 주석을 제거하여 파일 크기를 줄이는 역할을 합니다. 방문자 페이지에서 플러그인의 기능이 깨져서 나오거나 안 나오는 등의 문제 시 해당 CSS 파일을 추가합니다.

4. 사전 로딩

웹페이지가 실제로 필요한 리소스를 미리 불러와 렌더링 속도를 높이는 기능입니다. 이를 통해 첫 화면 표시(LCP)나 전환 페이지 이동 속도를 개선할 수 있습니다. Perfmatters에서는 이미지, CSS, JS 등 주요 파일을 사전에 지정하여 브라우저가 미리 준비하도록 설정할 수 있습니다.

기본적인 사전 로딩 항목과 추측 로딩, 사전 연결(Preconnect, DNS Prefetch) 3가지 항목으로 구성되어 있습니다.

• Preload Critical Images
• Preload
• Cloudflare Early Hints
• Fetch Priority
• Disable Core Fetch

중요 이미지 미리 로드 기능은 코어 웹 바이탈에서 LCP(Largest Contentful Paint ) 시간을 줄이는 데 도움이 될 수 있습니다.

크롬 브라우저는 ‘프리로드(preload)’로 불러올 수 있는 이미지를 최대 2개까지만 높은 우선순위로 처리합니다. 그 이후의 이미지는 워터폴 상단에 표시되더라도 실제로는 낮은 우선순위로 불러오게 됩니다. 즉, 너무 많은 이미지를 프리로드로 지정해도 효과가 줄어듭니다.

그래서 보통 2~3개만 지정하는 것이 좋습니다. 이미지가 많으면 방문자에 수에 따라 서버에 부하가 있을 수 있습니다.

또한 CSS보다 이미지가 먼저 표시되면, 브라우저가 나중에 레이아웃 스타일을 재적용하며, 요소 위치가 미세하게 변할 수 있습니다. 이는 특히 “비동기 CSS 로드” 또는 “Critical CSS 분리”와 프리로드가 함께 있을 때 발생합니다. 이는 CLS(Cumulative Layout Shift) 점수가 악화될 수 있기 때문에 2~3개 정도가 좋은 이유입니다.

리소스를 미리 로드합니다. 이는 Largest Contentful Paint(LCP)를 개선합니다.

구글 글꼴 등을 구글 페이지스피드나 크롬 개발자 도구의 네트워크 탭에서 찾은 후 적용할 수 있습니다.

단 너무 많은 리소스를 사전 로드 하면, total blocking time (TBT)가 증가하는 문제가 발생할 수 있습니다.

Cloudflare를 유료 기능 중 Early Hints(HTTP 103) 기능은 서버가 HTML을 완전히 생성하기 전에 브라우저가 리소스 로드를 시작할 수 있도록 돕는 고급 최적화 기능으로 작동합니다. Perfmatters의 프리로드 기능과 유사하지만, 실행 시점이 훨씬 빠르다는 점이 핵심 차이입니다. 클라우드 플레어를 사용한다면 체크합니다.

Early Hints 테스트 방법

우선 순위 가져오기 기능은

브라우저가 리소스를 불러오는 순서를 지정할 수 있는 HTML 속성입니다. Google이 제안한 표준으로, <img fetchpriority="high"> 또는 "low"처럼 설정합니다.

• ✅ Preload와의 차이

• Preload → “지금 바로 가져와라” (가장 강력한 명령)
• Fetch Priority → “이건 중요하니까 가능하면 먼저 가져와라” (브라우저가 판단 여지 있음)
  즉, Preload는 강제, Fetch Priority는 권장입니다.

• ✅ Fetch 설정 방법

실제 HTML 구조에서 이미지 클래스명이 보통 ‘하이픈(-)’ 또는 ‘언더 스코어(_)‘ 로 구분되지만 크롬 개발자 도구에서 확인 시 ‘하이픈(-)’이 없을 수 있으며, 이럴 경우 없는 상태로 그대로 적용합니다.

WordPress 6.3 이후 코어가 자동으로 <img fetchpriority="high"> 속성을 “가장 위쪽 이미지”에 붙이는 기능이 생겼습니다. 하지만 이게 항상 LCP(가장 큰 콘텐츠) 를 제대로 인식하지 못합니다.

Perfmatters의 “Disable Core Fetch” 옵션을 켜면
👉 WordPress 코어의 자동 설정을 막고
👉 대신 Perfmatters에서 직접 지정한 fetchpriority 값만 적용됩니다.

이렇게 하면

• 진짜 LCP 이미지에만 fetchpriority="high" 적용 가능
• Lazy Load나 Preload와의 충돌도 방지
• 서버·브라우저가 불필요한 리소스를 미리 받지 않아 부하가 줄어듦

4.1 Speculative Loading

추측 로딩 기능은 Auto(Default), Prfetch, Prerender, Disabled 4가지 모드를 지원합니다.

Disable을 제외한 Auto(Default), Prfetch, Prerender 3가지 모드는 다시 자동(기본값), 보수적, 보통, 적극적 네 가지 옵션 중에서 선택할 수 있습니다.

Speculative Loading
        └─ 모드: Auto(Default),Prefetch,Eagerness 
                   ├─ Eagerness 설정
                   │   ├─ Auto(기본값)
                   │   ├─ Conservative
                   │   ├─ Moderate
                   │   └─ Eager
                   │
                   └─  Disabled

서버 CPU 자원을 많이 사용하는 것을 확인하거나 전반적인 사이트 속도가 느려지는 점 등을 감안해서 설정합니다.

캐시 플러그인에서 많이 사용되는 ‘링크 사전 로드‘는 사용자가 링크 위에 마우스를 올려 놓았을 때 페이지를 다운로드함으로써 인식되는 로드 시간을 개선합니다. Speculative Loading을 활성화 해야 하며, 캐시 플러그인에서 링크 사전 로드 기능을 쓴다면 비활성화 해 줍니다.

가장 큰 이유는 서버의 성능 효율이 추측 로딩이 더 좋기 때문입니다. 둘 중 하나만 사용하는 것이 리소스 낭비를 줄이고 성능을 극대화할 수 있습니다.

4.2 Connection

Connection 항목은 페이지가 외부 리소스를 요청하기 전에 네트워크 연결을 미리 준비하도록 설정하는 기능입니다.
Perfmatters에서는 두 가지 방식으로 제공됩니다.

아래의 화면처럼 설정할 수 있습니다.

Preconnect 항목에 모두 적용하면 서버 리소스에 부하를 주기 때문에 2~3개 정도 설정을 합니다.

//encrypted-tbn1.gstatic.com
//encrypted-tbn2.gstatic.com
//ep1.adtrafficquality.google
//fundingchoicesmessages.google.com
//pagead2.googlesyndication.com
//tpc.googlesyndication.com
//www.googleadservices.com
//googleads.g.doubleclick.net
//www.google.co.kr
//www.googletagservices.com
//www.youtube.com
//analytics.google.com
//www.google-analytics.com

대부분의 캐시 플러그인은 Preconnect / Prefetch 기능이 있기 때문에 캐시 플러그인과 Perfmatters를 함께 사용한다면 이 두 기능을 꺼 두는게 맞습니다. 캐시 플러그인에서 처리하는 게 더 기능이 빠르기 때문입니다.

Preconnect/DNS Prefetch	적용
Perfmatters만 사용할 경우
캐시 플러그인과 함께 사용 시

5. Lazy Loading

Lazy Loading은 모든 미디어 파일에 대한 적용 사항입니다.

Preload 기능이 화면에 바로 보여줄 파일들이라면 Lazy Load는 스크롤 후 보여줄 부가 이미지입니다. LazyLoad는 사용자가 페이지를 아래로 스크롤하여 실제로 이미지를 볼 필요가 있을 때까지 웹사이트에서 이미지 로딩을 지연 시킵니다.

Lazy Loading은 Google PageSpeed에서 권장하는 ‘화면 밖 이미지 지연 로드’ 방식을 구현합니다. 즉, 구글이 제안하는 방식에 따라 SEO에 영향을 주지 않는 친화적인 방법으로 이미지 로딩을 최적화 합니다.

• Images
• iFrames and Videos
• Exclude from Lazy Loading
• Exclude by Parent Selector
• Threshold
• DOM Monitoring
• Add Missing Image Dimensions
• Fade In
• CSS Background Images
• Lazy Elements

Preload Critical Images 기능이 이미 상단 2장의 이미지를 미리 로드하고 LazyLoad에서 자동 제외하기 때문에, Exclude Leading Images를 추가로 설정하면 중복된 처리로 인해 리소스 낭비가 발생할 수 있습니다.

지연 로딩은 배경 이미지에는 적용되지 않습니다.

iframe과 비디오를 지연 로드하는 기능입니다. 이 기능은 YouTube, Vimeo, SoundCloud, Google Maps 등 다양한 임베드 콘텐츠뿐 아니라, <video> 태그로 삽입된 파일 URL 형태의 영상에도 동일하게 적용됩니다.

사이트에 YouTube 동영상을 포함하고 있다면, 미리보기 썸네일 기능을 활성화하는 것이 좋습니다.
이 기능은 실제 YouTube iframe 대신 가벼운 썸네일 이미지와 SVG 재생 아이콘을 표시하고, 사용자가 클릭할 때만 iframe을 로드합니다. 이 방식은 YouTube 동영상을 불러오는 가장 빠른 방법으로, 동영상 로딩으로 인해 발생하는 TBT(총 차단 시간) 오버헤드를 효과적으로 줄여줍니다.

지연 로딩에서 파일을 제외하는 이유는 페이지가 처음 열릴 때 바로 보여야 하는 이미지(대표 이미지, 로고 등)는 LazyLoad로 지연시키면 화면이 비어 보이거나 깜빡임이 발생할 수 있습니다. Core Web Vitals에서 LCP는 화면에서 가장 큰 요소(대부분 이미지나 배너)가 표시되는 시간을 의미합니다. LCP에 포함되는 이미지를 LazyLoad로 지연하면 점수가 악화됩니다.

제외하려는 이미지의 파일 경로(example.png) 또는 클래스명(class=”example”)을 입력하면, 해당 요소를 레이지 로딩 대상에서 제외할 수 있습니다.

ShortPixel이나 Imagify처럼 WebP 이미지를 제공하는 플러그인을 사용 중이라면, 이미지가 <picture> 태그 형태로 출력 되므로 해당 태그를 타겟으로 지정해야 할 수도 있습니다.

• GeneratePress 테마 사용 중이라면, 로고를 제외하려면 is-logo-image 클래스를 입력하면 됩니다.
• 블로그 게시물의 추천 이미지(썸네일)를 제외하려면 class="attachment-full size-full" 클래스를 입력하면 됩니다.

예를 들어서 WebP 플러그인에 이미지 전체를 적용하면 태그를 입력하면 됩니다. 하지만 이트 내의 모든 <picture> 이미지가 LazyLoad에서 제외되므로, 페이지 로딩 시 불필요한 리소스가 한 번에 로드될 수 있습니다.

picture

가능하다면 전체 태그보다는 특정 클래스나 경로를 지정하는 것이 좋습니다.

.is-logo-image
.featured-image
/uploads/header/

부모 선택기로 지연 로딩에서 제외 시키는 옵션은 추천 이미지, 갤러리 등의 경우 이미지 태그에 고유한 클래스가 없는 경우가 많기 때문입니다. 전역 설정이 필요할 때 사용합니다.

예를 들어 상위 선택이 다음과 같다면,

<div class="featured-gallery">
  <img src="image1.jpg">
</div>

아래와 같이 입력합니다.

featured-gallery

필요할 경우, 레이지 로딩(Lazy Loading)의 임계값(Threshold)을 조정해 이미지가 화면에 표시되기 조금 전에 미리 로드되도록 설정할 수 있습니다.

기본값은 0px이며, 이는 가장 빠르고 공격적인 설정입니다. 하지만 스크롤 시 이미지가 갑자기 나타나는 느낌을 줄이기 위해 100px 또는 200px처럼 임계값을 약간 늘려 스크롤이 조금 더 부드럽게 느껴지도록 설정할 수도 있습니다.

Mediavine, AdThrive 등 광고 스크립트(JS)가 많은 사이트의 경우, 광고 이미지 로딩 타이밍을 맞추기 위해
임계값을 최소 300px 이상으로 설정하는 것이 좋습니다.

페이지의 DOM(Document Object Model)에 새로운 요소가 추가될 때, Perfmatters가 이를 감지하고 새로 추가된 이미지나 iframe 등을 자동으로 LazyLoad 처리하도록 해주는 기능입니다.

이 기능은 특히 다음과 같은 동적 콘텐츠가 있는 사이트에서 필요합니다.

• Tab Content : 클릭 시 새로운 섹션이 표시될 때
• Infinite Scroll : 스크롤 시 새 콘텐츠가 자동으로 로드될 때
• Gallery Slider : 이미지가 동적으로 바뀌는 슬라이더나 캐러셀
• Pagination : AJAX로 다음 페이지 콘텐츠를 불러올 때

DOMContentLoaded는 초기 DOM 완성 시점을 의미하고, DOM Monitoring은 그 이후 DOM의 실시간 변화를 감지해 LazyLoad를 유지시키는 기능입니다.

이미지에 누락된 너비와 높이를 추가합니다.

지연 로딩 시 Fade In 기능은 시각적 깜빡임이나 갑작스러운 이미지 표시를 부드러운 전환 효과로 바꿔주는 시각적 보완 기능입니다. Fade In 기능은 CLS(Cumulative Layout Shift) 역시 개선되거나 안정적으로 유지될 수 있습니다.

CSS 스타일시트에 배경 이미지를 지연 로딩 할 수 있습니다.

배경 선택기에 배경 이미지가 포함된 컨테이너 또는 부모 컨테이너에서 찾은 특정 ID 또는 클래스를 입력합니다. 접두사( ., #) 없이 한 줄에 하나 씩 입력합니다.

Exclude Leading은 첫 번째 로드되는 항목부터 특정 수의 배경 이미지 컨테이너를 지연 로드에서 제외 시킵니다. 배경 이미지를 많이 쓰는 경우 Exclude Leading 기능을 사용합니다.

요소 지연은 DOM에서의 요소 지연을 활성화 합니다.

웹페이지의 DOM(Document Object Model)은 브라우저가 HTML 문서를 해석해 만든 요소 트리 구조입니다. 이 구조가 커질수록 브라우저의 메모리 사용량, 스타일 계산 시간, 레이아웃 재계산(Reflow) 비용이 모두 증가합니다.

구분	본문(body) 내 노드 수	상태
정상	800개 이하	🟢 정상
경고	약 800개 초과	🟠 주의
오류	약 1,400개 초과	🔴 경고

대부분의 유명한 캐시 플러그인들은 이 기능이 없기 때문에 Perfmatters 단독 사용 및 캐시 플러그인과 같이 사용할 때에도 이 기능을 활성화 합니다.

다른 설정들처럼 컨테이너를 설정하여 특정 요소와 부모 컨테이너를 추가할 수 있습니다.

⚙️Lazy Loading 권장 설정

Lazy Loading에서 설명한 권장 설정은 아래와 같습니다.

이미지, DOM 등CSS 및 요소

이미지, DOM 등CSS 및 요소

옵션	권장 상태	설명
Images		모든 이미지 Lazy Load 적용
Exclude Leading Images	⚙️ 0 (Default)	PreLoad에 이미지 갯수가 설정되었다면, 0 유지
iFrames and Videos		유튜브, 임베드 영상 지연 로드
YouTube Preview Thumbnails		썸네일만 먼저 로드, 영상 클릭 시 본문 로드
Exclude from Lazy Loading	⛔ 비워둠	특정 파일 제외 필요 시 수동 지정
Exclude by Parent Selector	⛔ 비워둠	특정 컨테이너 제외 필요 시 수동 지정
Threshold	📏 300	뷰포트 근처에서 미리 로드 시작
DOM Monitoring		동적 DOM 변경 시 Lazy Load 유지
Add Missing Image Dimensions		CLS 방지 (width/height 자동 추가)
Fade In		부드러운 페이드인 효과 (UX 향상)

옵션	권장 상태	설명
Background Images		CSS background-image: 속성을 지연 로드합니다. (예: Hero 섹션 배경)
Background Selectors	⛔ 비워둠	특정 배경 클래스(.div-background-class) 지정 시에만 입력
Exclude Leading	⚙️ 0 (Default)	첫 번째 배경 이미지는 즉시 로드 (메인 Hero 등)
Elements		HTML 요소 자체를 Lazy Load (DOM 크기 축소 및 초기 렌더링 부하 완화)
Element Selectors	⛔ 비워둠	특정 컨테이너나 섹션만 요소 지연 로드하려는 경우에만 입력

5. Fonts

Fonts 탭의 주요 기능은 구글 글꼴을 로컬에서 가져올지, 구글 폰트를 비 활성화 할지로 나뉩니다.

5.1 Local Google Fonts vs. Google Fonts 비활성화

Local Google FontsGoogle Fonts 비활성화

Local Google FontsGoogle Fonts 비활성화

Local Google Fonts 사용 시 다른 테마나 캐시 플러그인에서 쓰는 기능은 비활성화를 진행합니다.

Google Fonts를 로컬로 호스팅 하면, Google Fonts를 외부(Google 서버)에서 불러오지 않고, 사이트 로컬에 저장하여 직접 호스팅합니다. 네트워크 요청 수 감소하고, 폰트 로딩 지연이 줄어 LCP(최대 콘텐츠 표시 시간) 개선에 도움이 됩니다.

반면 Google Fonts를 로컬 호스팅 기능을 배제하고 Google Fonts 비활성화 하면, 사이트 내에서 Google Fonts 자체를 완전히 차단하여 외부 글꼴 요청이 발생하지 않습니다. 이 경우, 테마나 플러그인에서 지정한 Google Fonts가 모두 제거되어 브라우저 기본 폰트(예: Arial, Helvetica, sans-serif) 로 대체됩니다.

결과적으로 네트워크 요청은 가장 적지만, 디자인 일관성이 깨질 수 있고, 일부 테마에서는 폰트 대체 시 레이아웃이 무너지는 현상이 생길 수 있습니다.

5.2 Display Swap

Google Fonts에 Display Swap 기능을 추가하면, 웹폰트가 로드되기 전에도 브라우저가 시스템 기본 폰트로 먼저 텍스트를 표시합니다.

이를 통해 사용자는 콘텐츠를 즉시 읽을 수 있어 텍스트 깜빡임(FOUT, Flash of Unstyled Text) 현상이 줄어들고, LCP(최대 콘텐츠 표시 시간) 과 퍼셉티브 로딩 속도(사용자가 느끼는 체감 속도) 가 개선됩니다. CLS 개선 효과는 없습니다.

5.3 Print Method

로컬 폰트가 어떤 방식으로 출력 될지 설정합니다.

로컬 스타일시트의 출력 방식은 기본적으로 파일(File) 방식이지만, 인라인(Inline) 방식으로 변경할 수도 있습니다.
인라인 방식은 CSS를 HTML 내부에 직접 삽입하여 렌더링 차단 문제를 줄이고, “중요한 요청 체인 사용 금지” 경고를 해소해 FCP와 LCP 개선에 도움이 됩니다. 다만, 스타일 코드가 HTML에 포함되어 페이지 용량이 약간 증가할 수 있습니다.

5.4 Limit Subsets

모든 폰트를 로드하기보다, 부분 집합 제한을 통해 필요한 문자 세트만 불러옵니다. 이렇게 하면 폰트 파일 용량이 줄어들고 로딩 속도(FCP·LCP)가 개선됩니다. 다만, 선택하지 않은 언어의 문자는 표시되지 않을 수 있으므로 사이트 언어에 맞는 서브셋만 선택하는 것이 좋습니다.

Limit Subsets은 라틴어는 대부분의 서유럽 문자 세트가 포함되어 있습니다. 예를 들어 영어와 프랑스어일 경우 기본 셋은 Latin으로 되어 있기 때문에 기본 세팅 유지할 수 있습니다. 그 외에 언어를 1개 더 추가하는 경우도 문제 없으며, 다국어 플러그인을 설치해서 사용할 경우 차라리 전체 구글 폰트와 Display Swap이 캐시에서 포함된 캐시 플러그인을 사용하는 것이 더 나은 선택입니다.

일반 사이트의 기본 설정은 워드프레스 속도 최적화를 위해 Latin(Default)와 본인 국가를 하나 추가합니다.

5.5 CDN URL

클라우드프레어 CDN이 아닌 일반 CDN을 사용할 경우 URL을 입력해서 로컬 폰트를 CDN에 적용시킬 수 있습니다.

5.6 로컬 글꼴 지우기

테마를 변경했거나 다른 글꼴을 선택했을 때, 또는 캐시 플러그인에서 다른 글꼴을 선택했을 경우 로컬 글꼴을 삭제합니다.

⤵️ Fonts 권장 설정

항목	권장 상태	설명
Local Google Fonts		Google Fonts를 외부(Google 서버)에서 불러오지 않고 사이트 로컬에 저장해 직접 호스팅합니다.네트워크 요청이 줄고 폰트 로딩 지연이 감소하여 LCP 개선에 도움이 됩니다.
Display Swap		웹폰트 로드 전 시스템 기본 폰트를 먼저 표시해 텍스트 깜빡임(FOUT) 을 줄입니다.LCP 및 체감 로딩 속도 개선, CLS 개선 효과는 없습니다.
Print Method		기본값은 File 방식이며, Inline 선택 시 CSS를 HTML 내부에 삽입해 렌더링 차단 최소화 및 FCP/LCP 개선에 유리합니다.단, HTML 용량이 약간 증가할 수 있습니다.
Limit Subsets		필요한 문자 세트만 로드해 폰트 용량을 줄이고 로딩 속도 개선.예: Latin(Default) + Korean 선택.스페인어는 Latin에 포함되어 추가 필요 없음.인도어는 별도 subset(Devanagari 등) 필요.다국어 플러그인 사용 시에도 유지 권장.
CDN URL	⚙️ 선택사항	클라우드플레어 외 별도 CDN을 사용하는 경우 경로 지정 가능.일반적으로 공란 유지.
Clear Local Fonts	🔁 필요 시 실행	테마 변경, 폰트 교체, 또는 캐시 플러그인 변경 시 기존 로컬 폰트를 삭제하고 새 캐시를 생성합니다.
Google Fonts 비활성화		Google Fonts를 완전히 차단하면 외부 요청은 사라지지만, 테마 지정 폰트가 모두 제거되어 기본 폰트(Arial 등) 로 대체됩니다.디자인 일관성이 깨질 수 있으므로 Local Google Fonts 사용 시 비활성화 상태 유지가 권장됩니다.

6. CDN

CDN URL 재작성 순차적으로 URL 입력 후 포함할 디렉토리를 추가하여 작동합니다. wp-content, wp-includes 두가지 설정 시 모든 이미지, CSS, JS, 폰트가 CDN으로 전송되며, 제외 시키고 잎은 파일을 CDN에서 제외 시킬 수 있습니다.

7. Google Analytics 연결

구글에서 만든 사이트 킷과 같은 플러그인으로 Google Analytics 연결을 할 수 있습니다. 하지만 사이트 킷 플러그인 설치 후 구글 페이지스피드 인사이트 검사만 해도 성능 저하를 체감할 수 있습니다. Google Analytics에 연결하여 로컬 설정으로 속도 향상을 필요할 경우 활성화를 진행합니다.

사이트킷을 포함한 Yoast 및 RankMath와 같은 SEO 플러그인의 Google Analytics와 각각 설정하면 HTTP 요청이 1개가 아닌 2개로 늘어나기 때문에 한쪽에서만 선택해서 사용하도록 합니다.

8. 도구

도구 탭에서 다른 기능들은 선택 사항이며, 아래 미지만으로 충분한 이해가 가능합니다. 스크립트 매니저와 이제까지 설명한 설정들 중에 고급 옵션이 포함되어 있으니 활성화 시키는 것 두가지입니다.

9. 데이터 베이스

캐시 플러그인에서 DB 최적화를 제공하지 않을 경우 Perfmatters의 기능을 사용할 수 있으며 어느 쪽을 사용하던지 더 편한 쪽에서 사용하면 됩니다.

Ⅲ. Perfmatters Script Manager 사용 방법

Perfmatters의 Script Manager는 관리자 대시보드에서 ‘사이트 방문’ 버튼을 클릭한 후 사용할 수 있습니다. 사용 중인 테마나 플러그인에 따라 관리자 화면 구성이 다를 수 있으며, 불필요한 스크립트는 해당 항목의 활성화 버튼을 비활성화하여 로드되지 않도록 설정할 수 있습니다.

예를 들어 Perfmatters 일반 설정에서 비활성화 할 수 있는 대시콘을 그대로 두고 특정 페이지에서 비활성화가 필요한 경우 Script Manager에서 비활성화가 가능합니다.

Ⅳ. 결론

Perfmatters는 단순히 스크립트와 리소스를 제거하는 ‘속도 개선용 플러그인’이 아니라, 워드프레스 구조 전반의 비효율을 제어해 사이트의 안정성과 관리 효율을 동시에 높이는 도구입니다.

특히 WP Rocket과 함께 사용할 경우,

• WP Rocket이 캐시·압축·프리로드 등 정적 캐싱 중심의 최적화,
• Perfmatters가 코드·리소스·요청 제어 등 동적 자원 중심의 최적화,
  두 영역을 완벽히 분리해 상호 보완적으로 작동합니다.

이 조합은 페이지 로딩 속도뿐 아니라, Core Web Vitals의 실질 점수 개선에도 직접적인 영향을 주며, 장기적으로 서버 부하를 낮추고 유지 관리 효율을 극대화할 수 있습니다.

결국 중요한 점은 ‘모든 기능을 켜는 것’이 아니라, 사이트의 성격과 플러그인 구조를 이해하고 선택적으로 적용하는 것입니다. Perfmatters는 그 과정을 시각적으로 단순화해, 개발자뿐 아니라 일반 사용자도 고급 수준의 퍼포먼스 튜닝을 수행할 수 있게 합니다.

✅ Perfmatters는 무슨 역할을 하나요?

Perfmatters는 워드프레스의 불필요한 스크립트와 리소스를 비활성화해 페이지 로딩 속도를 개선하는 최적화 플러그인입니다. CSS·JS·폰트·이미지 로드 방식을 제어하여 Core Web Vitals 점수를 향상시키고 서버 부하를 줄입니다. 캐시 플러그인(WP Rocket 등)과 함께 사용하면 정적·동적 최적화를 모두 수행해 최고의 성능을 제공합니다.

✅ Perfmatters를 사용할 만한 가치가 있나요?

Perfmatters는 단순히 속도를 높이는 수준을 넘어, 불필요한 코드와 요청을 근본적으로 제어해 사이트 구조 자체를 가볍게 만드는 플러그인입니다.
특히 WP Rocket·LiteSpeed Cache 같은 캐시 플러그인과 병행 시 성능 상승폭이 매우 크며, Core Web Vitals 개선, 서버 부하 감소, 관리 효율성 향상 면에서 확실한 효과를 제공합니다.

✅ Perfmatters와 Asset CleanUp의 차이점은 무엇인가요?

Perfmatters는 “사이트 전체 성능 향상용”, Asset CleanUp은 “개별 리소스 제어용”입니다.
일반적인 워드프레스 운영자라면 Perfmatters가 더 실용적이고 안정적인 선택입니다.

✅ WordPress 사이트 속도를 높이는 가장 좋은 플러그인은 무엇인가요?

가장 효과적인 속도 최적화 조합은 WP Rocket + Perfmatters입니다.
WP Rocket은 캐시·압축·미리 로드 등 정적 최적화를 담당하고, Perfmatters는 불필요한 코드·요청 제거로 동적 최적화를 수행합니다. 두 플러그인을 함께 사용하면 Core Web Vitals 점수와 실제 체감 속도 모두 크게 개선됩니다