Perfmatters 플러그인은 워드프레스 최적화 플러그인 중에서도 가볍고 강력한 퍼포먼스를 제공하는 도구입니다. 불필요한 스크립트와 리소스를 손쉽게 제어해 페이지 로딩 속도를 개선하고, 서버 부하를 최소화할 수 있습니다. 5년 이상 사용하면서 느낀 점은, 단순한 속도 향상을 넘어 사이트 전체의 안정성과 관리 편의성을 높여준다는 점이었습니다.
현재 이 웹사이트는 WP Rocket Cache 플러그인과 Perfmatters를 함께 사용하고 있습니다. 이 글에서는 Perfmatters만 단독으로 적용했을 때의 기본 설정 방법과 각 항목을 선택한 이유, 그리고 최적화 결과를 함께 공유하겠습니다.
결제 화면의 [Enter a discount code]에 코드를 넣으면 20% 할인이 적용됩니다.
Ⅱ. Perfmatters 기본 설정 가이드
워드프레스는 CSS 및 JS 파일들이 전역 설정으로 되어 있어 사용하지 않는 페이지에서도 관련 코드가 노출되어 사이트의 성능이 느려지는 경우가 일반적입니다. Perfmatters는 워드프레스 최적화 플러그인이 갖춰야 할 코드 제거, 리소스 제어, 요청 최소화 기능을 모두 제공합니다.
이러한 방식은 단순히 캐시 플러그인으로는 해결할 수 없는 ‘리소스 낭비’ 문제를 근본적으로 줄이는 방법으로, 결과적으로 페이지 로딩 속도 개선과 서버 부하 감소 두 가지 효과를 동시에 얻을 수 있습니다.
Perfmatters 일반 설정부터 시작하여 DataBase의 기본적인 최적화 기능과 자산 최적화 기능이 스크립트 매니저는 관리자 페이지에서 사이트 방문으로 이동하여 설정할 수 있습니다. 일반 설정부터 튜토리얼을 진행하며 스크립트 매니저는 차후 다시 설명하도록 하겠습니다.
비밀번호 강도 측정기 스크립트는 회원가입, 비밀번호 변경, 사용자 프로필 수정 화면에서만 불러오도록 되어 있지만, 테마나 플러그인이 로그인 팝업 같은 폼을 모든 페이지에 넣으면 [zxcvbn.min.js]가 전역으로 로드됩니다.
/wp-includes/js/zxcvbn.min.js
/wp-admin/js/password-strength-meter.min.js
체크하여 비활성화합니다. 실제로 이 파일을 볼 일은 거의 없습니다.
Disable Comments
워드프레스 사이트에서 댓글을 사용하지 않는다면 댓글 기능을 체크하여 비활성화 합니다.
Add Blank Favicon
새로 설치된 워드프레스는 [/favicon.ico] 파일이 없어 성능 테스트를 할 때 404 오류가 뜨며, 이 옵션은 그 오류를 없애는 테마·플러그인 개발자를 위한 기능입니다. 이미 파비콘을 추가한 워드프레스 사이트에는 필요 없습니다.
Remove Global Styles
WordPress 5.9부터 코어가 [global-styles-inline-css] 인라인 CSS를 [<head>]에 자동으로 삽입합니다. FSE 테마를 위한 150~200줄의 인라인 CSS인데, Kadence·GeneratePress 같은 클래식 테마는 FSE를 쓰지 않아도 계속 붙어 HTML 크기가 늘고 FCP/LCP가 약간 떨어집니다.
2.6.8 화면에서는 예전 [Separate Block Styles] 토글이 [Block Style Behavior] 선택 상자로 바뀌었습니다. 기본값 [Separate Styles Inline (Default)]가 블록별로 나눠 싣는 방식입니다.
워드프레스는 블록(문단, 이미지, 갤러리, 버튼 등)마다 전용 CSS를 가지고 있으며, 기본 상태에서는 사용하지 않는 블록의 CSS까지 전역 스타일시트로 묶여 로드됩니다. 블록별로 나누면 페이지에 있는 블록의 CSS만 로드합니다.
CSS 사용량 최대 17% 감소
일부 단일 페이지 사이트에서는 LCP ~30~50ms 개선
TBT(총 차단 시간) 감소는 미미하지만, CSS 파싱 부하가 줄어듦
구분
동작 방식
로드 결과
❌ 기존 (기본 상태)
모든 블록 CSS를 한 번에 로드
불필요한 CSS 대량 포함
Block Style Behavior
페이지에 존재하는 블록의 CSS만 로드
CSS 파일 수는 약간 늘지만, 총 CSS 크기는 감소
워드프레스 코어 6.2부터 정식으로 지원되어 Kadence, Spectra, GeneratePress 같은 테마·플러그인은 문제되지 않습니다. 단, 고유한 CSS 로드 로직을 갖고 있거나 FSE 기반(theme.json 중심) 구조라면 스타일 충돌이 발생할 수 있습니다.
위 기능은 [should_load_separate_core_block_assets] WordPress 코어의 필터를 사용합니다. CSS는 웹사이트의 헤드가 아닌 바디에 인라인으로 삽입된다는 점에 유의해야 합니다. 따라서 W3C 유효성 검사 도구에서 경고가 발생할 수 있습니다.
참조: perfmatters 문서
유형
예시
이유
❌ FSE 기반 테마
Twenty Twenty-Four, Blockbase 등
전역 스타일(theme.json)이 CSS 종속
⚠️ 구형 빌더형 테마
Avada, WPBakery, Jupiter X 등
자체 CSS 구조와 코어 CSS 간 중복 로드
⚠️ 레거시 CSS 기반 블록 플러그인
오래된 Ultimate Blocks, Stackable(구버전) 등
블록 공용 CSS를 전역 로드로 가정함
Disable Heartbeat & Revisions
워드프레스 [Heartbeat]는 서버와 웹사이트가 연결되어 있는지 확인하는 신호로, 대시보드에서 15초마다 /wp-admin/admin-ajax.php로 POST 요청을 보냅니다. 글과 페이지 편집 시에만 허용하고 빈도를 60초로 설정해 서버의 부담을 줄입니다.
Heartbeat
글과 페이지만 허용
게시물 수정(Revisions)을 기본값으로 두면 데이터베이스에 계속 쌓여 속도가 느려지므로 3개까지만 허용합니다.
글의 자동 저장 간격은 기본값이 1분이며, 여기서는 10분으로 설정합니다.
관리자 화면에서 글을 작성하는 동안 서버 CPU를 많이 쓰면 어떤 캐시 플러그인을 쓰더라도 방문자 페이지의 속도가 떨어질 수 있습니다. Perfmatters를 사용하지 않을 경우 위 설정들을 wp-config.php에서 직접 설정할 수 있습니다.
General › Login URL
1 / 2
항목명
Check / Uncheck
간단 설명
Login URL 설정
다른 로그인 URL 숨기기 플러그인 대체
로그인 URL 설정
워드프레스 관리자 대시보드는 yourdomain.com/wp-admin으로 기본 설정되어 있어 보안에 취약한 구조입니다. 관리자 대시보드를 숨기는 다른 플러그인 대신 Perfmatters에서 제공하는 기능을 사용할 수 있습니다.
Login URL
Login URL 옵션
JavaScript › Defer
↳ 자바스크립트 지연 로드 (Load JavaScript deferred)
JavaScript Defer는 HTML 문서가 먼저 파싱되고 화면이 표시된 뒤에 JavaScript가 실행되도록 로딩을 지연시켜 렌더링 차단을 방지하는 기능입니다. DOMContentLoaded 시점의 지연을 줄여 FCP와 LCP를 개선합니다.
Include Inline Scripts
HTML 문서 내부(<script>…</script>)에 직접 작성된 짧은 JavaScript 코드까지 함께 지연시키는 옵션입니다. 인라인 스크립트는 메뉴 토글 같은 초기 동작에 필요한 경우가 많아 특별한 이유가 없는 한 비활성화 상태로 둡니다.
Include jQuery
많은 플러그인과 테마가 jQuery에 의존하기 때문에, 지연 로딩에 jQuery를 포함하면 메뉴 토글, 슬라이더, 팝업 등 사이트 일부가 깨질 수 있습니다. 비활성화 상태로 유지하고, 필요한 경우에만 테스트를 거쳐 활성화합니다.
Excluded from Deferral
지연시키면 정상적으로 작동하지 않는 스크립트(슬라이더, 폼 검증, 메뉴 등)의 파일 경로를 입력하면 Defer 처리 대상에서 제외되어 즉시 로드됩니다.
페이지 로드 후 사용자 상호작용(스크롤, 클릭, 터치 등)이 발생하기 전까지 JavaScript 실행을 멈추는 옵션으로, 광고·애널리틱스·외부 추적 스크립트 같은 비필수 JavaScript를 미뤄 LCP(Largest Contentful Paint)와 FCP를 개선합니다.
[Defer]가 HTML 파싱 후 실행이라면, [Delay]는 사용자 행동이 있을 때까지 실행 자체를 연기합니다. 자동 재생이나 초기 팝업처럼 즉시 동작해야 하는 스크립트는 예외 처리합니다.
Delay JavaScript를 활성화할 경우 하위 3가지 옵션을 활성화하는 것을 권장합니다.
옵션
권장 상태
설명
Delay Behavior
모든 JS가 아닌 ‘비필수 스크립트’만 지연 권장: [Only Delay Specified Scripts (Default)]
실행 지연 상태에서는 사용자가 무언가를 클릭해야 JS가 로드되고 그 뒤에 클릭한 동작(메뉴 열기, 버튼 작동 등)이 실행되어, 클릭 후 반응이 약간 늦게 나타날 수 있습니다. 이 옵션은 그 반응 지연을 없애는 기능입니다.
상황
기본 Delay JS 상태
Disable Click Delay 활성화 시
사용자 클릭
JS 로드 후에 클릭 이벤트 실행 → 약간의 지연 발생
JS 즉시 실행 → 클릭 반응이 빠름
Enable FastClick
실행 지연을 켜면 클릭을 두 번 해야 작동하는 현상이 생길 수 있으며, 모든 캐시·최적화 플러그인에서 공통으로 나타납니다. 이 옵션이 이를 개선합니다.
JavaScript › Minify
↳ 자바스크립트 최소화 (Minify JavaScript)
자바스크립트 파일의 불필요한 문자(공백, 줄바꿈, 주석 등)를 제거해 파일 크기를 최소화하는 기능으로, 전송 용량과 구문 분석(Parsing) 시간을 함께 줄입니다.
이미 최소화된 파일은 이름 끝이 [.min.js]입니다. 구글 페이지스피드 인사이트나 Lighthouse에서 [JavaScript 최소화] 경고가 표시된다면 이 옵션을 활성화해 최소화되지 않은 스크립트까지 압축합니다.
CSS › Unused
CSS 설정은 사용하지 않는 CSS 제거와 CSS 최소화 2가지 방법을 제공합니다.
↳ 사용하지 않는 CSS 제거 (Remove Unused CSS)
페이지에서 실제로 사용되지 않는 CSS 코드를 찾아 제거하는 기능입니다. 워드프레스 테마와 플러그인은 대부분의 페이지에 공통으로 CSS 파일을 로드하기 때문에, 사용되지 않는 CSS가 파일 크기와 렌더링 차단 시간을 늘려 LCP와 FCP에 부정적인 영향을 줍니다.
활성화하면 각 페이지에서 실제로 필요한 CSS만 추출해 넣으며, 대형 테마(Elementor, Divi, Avada 등)나 다수의 플러그인을 사용하는 사이트에서 효과가 큽니다. 슬라이더나 폼 빌더처럼 일부 스타일이 누락되는 경우에는 [Excluded Stylesheets]에 추가합니다.
Used CSS Method
사용 중인 CSS를 인라인 형태로 삽입하거나 별도의 파일로 분리하여 로드할 수 있습니다.
Inline (기본값): 필요한 CSS를 HTML 문서 안에 직접 삽입합니다. 외부 CSS 요청이 없어 FCP와 LCP에 유리하지만 페이지마다 HTML 크기가 늘어납니다. CSS 용량이 작은 블로그형 사이트에 추천합니다.
File: 사용 중인 CSS를 별도의 .css 파일로 만들어 로드합니다. 브라우저 캐시를 활용할 수 있지만 외부 요청이 하나 추가됩니다. 대형 사이트나 CSS 용량이 큰 빌더형 페이지에 추천합니다.
Stylesheet Behavior
스타일 시트 동작 옵션은 불필요한 CSS 파일을 어떤 방식으로 처리할지 결정하는 설정입니다.
설정
동작 방식
특징
🕒Delay (Default)
스타일시트를 약간 지연시켜 로드합니다.
기본 설정으로 대부분의 사이트에서 안정적으로 작동하며, 초기 렌더링(FCP·LCP)에 유리합니다.
브라우저가 리소스를 불러오는 순서를 지정하는 HTML 속성으로, [<img fetchpriority=”high”>] 또는 [“low”]처럼 설정합니다. Preload는 강제, Fetch Priority는 권장이라 브라우저가 판단할 여지가 있습니다.
이미지 클래스명은 보통 하이픈(-)이나 언더 스코어(_)로 구분되지만, 크롬 개발자 도구에서 하이픈 없이 보이면 보이는 그대로 입력합니다.
Disable Core Fetch
WordPress 6.3 이후 코어가 가장 위쪽 이미지에 [<img fetchpriority=”high”>] 속성을 자동으로 붙이지만, 항상 LCP(가장 큰 콘텐츠)를 제대로 인식하지는 못합니다. 이 옵션을 켜면 코어의 자동 설정을 막고 Perfmatters에서 직접 지정한 fetchpriority 값만 적용됩니다.
Preloading › Speculative Loading
추측 로딩은 Auto(Default), Prefetch, Prerender, Disabled 4가지 모드를 지원하며, Disabled를 제외한 3가지 모드는 다시 자동(기본값), 보수적, 보통, 적극적 중에서 선택합니다.
모드
설명
특징
Auto (Default)
WordPress 코어가 자동으로 추측 로딩을 제어
기본 Conservative 수준으로 동작하며 안정적
Prefetch
다음 페이지의 리소스를 미리 다운로드(렌더링은 하지 않음)
부하가 적고 속도 개선 효과가 있음
Prerender
링크 대상 페이지를 백그라운드에서 미리 렌더링
페이지 전환 속도가 가장 빠르지만 서버 부하가 큼
Disabled
추측 로딩 기능을 완전히 비활성화
모든 관련 코드 제거, 느린 서버나 공유호스팅에 적합
Speculative Loading
└─ 모드: Auto(Default),Prefetch,Eagerness
├─ Eagerness 설정
│ ├─ Auto(기본값)
│ ├─ Conservative
│ ├─ Moderate
│ └─ Eager
│
└─ Disabled
Eagerness 단계
설명
특징
Auto (기본값)
WordPress 코어가 자동으로 적절한 수준을 선택
기본적으로 Conservative 수준으로 동작
Conservative
클릭 의도가 확실할 때만 미리 로드
가장 안정적, 자원 절약에 유리
Moderate
마우스 호버(약 200ms) 시 미리 로드
속도와 효율의 균형이 좋음
Eager
신호가 약해도 즉시 미리 로드
가장 빠르지만 리소스 사용량이 많음
서버 CPU 자원을 많이 사용하거나 전반적인 사이트 속도가 느려지는 점을 감안해서 설정합니다.
캐시 플러그인의 [링크 사전 로드](Instant Page / Prefetch)는 링크 위에 마우스를 올렸을 때 페이지를 미리 받는 기능입니다. 추측 로딩이 서버 효율이 더 좋으므로 둘 중 하나만 사용하고, 추측 로딩을 쓴다면 캐시 플러그인의 링크 사전 로드는 비활성화합니다.
구분
Instant Page(Prefetch)
Speculative Loading
기술 방식
JavaScript로 [<a>] 태그 hover 시 미리 fetch
브라우저 네이티브 Speculation Rules API 기반
작동 시점
사용자가 링크 위에 마우스를 올릴 때
브라우저가 ‘이동 가능성’을 자동 예측 (hover, 클릭, 터치 등 다양한 신호)
로드 범위
링크된 페이지의 HTML만 미리 받음
Prefetch(리소스만) + Prerender(렌더링까지) 모두 가능
적용 수준
단일 fetch 수준 (자바스크립트 중심)
브라우저 내부에서 네트워크·렌더링 레벨 최적화
WordPress 통합
외부 스크립트 기반 (instant.page)
WordPress 6.8 코어 통합
성능 효율
빠르지만 브라우저 제어 불가
더 빠르고 안정적, 리소스 절약
Preloading › Connection
외부 리소스를 요청하기 전에 네트워크 연결을 미리 준비하는 기능입니다.
항목
설명
Preconnect
외부 리소스(폰트, CDN, 분석 스크립트 등)에 대한 네트워크 연결을 미리 생성. 브라우저가 HTTP 요청 전에 조기에 연결을 설정하여 왕복 지연 시간을 없애 줌.
DNS Prefetch
사용자가 클릭하기 전에 도메인 이름을 확인. DNS 조회 속도를 조금 더 줄이고 싶을 때.
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 기능이 있으므로, 캐시 플러그인과 함께 사용한다면 이 두 기능은 꺼 둡니다.
Preconnect/DNS Prefetch
적용
Perfmatters만 사용할 경우
캐시 플러그인과 함께 사용 시
Lazy Loading › Images
Preload가 화면에 바로 보여줄 파일이라면, Lazy Load는 스크롤 후 보여줄 이미지입니다. 사용자가 페이지를 아래로 스크롤해 실제로 이미지를 볼 필요가 있을 때까지 로딩을 지연시킵니다.
Google PageSpeed에서 권장하는 [화면 밖 이미지 지연 로드] 방식을 구현하므로 SEO에 영향을 주지 않습니다.
Images
Preload Critical Images 기능이 이미 상단 2장의 이미지를 미리 로드하고 LazyLoad에서 자동 제외하기 때문에, Exclude Leading Images를 추가로 설정하면 중복된 처리로 인해 리소스 낭비가 발생할 수 있습니다.
지연 로딩은 배경 이미지에는 적용되지 않습니다.
iFrames and Videos
iframe과 비디오를 지연 로드하는 기능으로, YouTube, Vimeo, SoundCloud, Google Maps 등 임베드 콘텐츠와 [<video>] 태그로 삽입된 영상에 적용됩니다.
YouTube 동영상이 있다면 미리보기 썸네일 기능을 활성화합니다. 실제 iframe 대신 가벼운 썸네일 이미지와 SVG 재생 아이콘을 표시하고 클릭할 때만 iframe을 로드해, TBT(총 차단 시간)를 줄여 줍니다.
Exclude from Lazy Loading
대표 이미지나 로고처럼 페이지가 처음 열릴 때 바로 보여야 하는 이미지를 지연시키면 화면이 비어 보이거나 깜빡임이 발생하고, LCP에 포함되는 이미지라면 점수가 악화됩니다. 제외하려는 이미지의 파일 경로(example.png) 또는 클래스명(class=”example”)을 입력합니다.
GeneratePress 테마 사용 중이라면, 로고를 제외하려면 [is-logo-image] 클래스를 입력하면 됩니다.
블로그 게시물의 추천 이미지(썸네일)를 제외하려면 [class=”attachment-full size-full”] 클래스를 입력하면 됩니다.
ShortPixel이나 Imagify처럼 WebP 이미지를 제공하는 플러그인을 사용 중이라면 이미지가 [<picture>] 태그로 출력됩니다. 태그 전체를 입력하면 사이트 내의 모든 이미지가 제외되므로, 가능하다면 특정 클래스나 경로를 지정합니다.
picture
.is-logo-image
.featured-image
/uploads/header/
Exclude by Parent Selector
추천 이미지나 갤러리처럼 이미지 태그에 고유한 클래스가 없을 때, 상위 컨테이너의 클래스로 제외하는 옵션입니다.
예를 들어 상위 선택이 다음과 같다면,
<div class=”featured-gallery”>
<img src=”image1.jpg”>
</div>
아래와 같이 입력합니다.
featured-gallery
Threshold
이미지가 화면에 표시되기 조금 전에 미리 로드되도록 임계값(Threshold)을 조정합니다.
기본값은 0px이며, 스크롤 시 이미지가 갑자기 나타나는 느낌을 줄이려면 100px 또는 200px로 약간 늘립니다. Mediavine, AdThrive 등 광고 스크립트가 많은 사이트는 최소 300px 이상으로 설정합니다.
DOM Monitoring
페이지에 새로운 요소가 추가될 때 이를 감지해 새로 추가된 이미지나 iframe 등을 자동으로 LazyLoad 처리하는 기능입니다. 탭, 무한 스크롤, 슬라이더, AJAX 페이지네이션 같은 동적 콘텐츠가 있는 사이트에서 필요합니다.
DOMContentLoaded는 초기 DOM 완성 시점이고, DOM Monitoring은 그 이후의 변화를 감지합니다.
Add Image Dimensions
이미지에 누락된 너비와 높이를 추가합니다.
Fade In
이미지가 갑작스럽게 표시되는 것을 부드러운 전환 효과로 바꿔 주는 시각적 보완 기능입니다.
⚙️Lazy Loading 권장 설정
Lazy Loading에서 설명한 권장 설정은 아래와 같습니다.
옵션
권장 상태
설명
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 Image Dimensions
CLS 방지 (width/height 자동 추가)
Fade In
부드러운 페이드인 효과 (UX 향상)
Lazy Loading › CSS Background Images
CSS Background Images
CSS 스타일시트에 배경 이미지를 지연 로딩 할 수 있습니다.
배경 선택기에 배경 이미지가 포함된 컨테이너 또는 부모 컨테이너에서 찾은 특정 ID 또는 클래스를 입력합니다. 접두사( [.], [#]) 없이 한 줄에 하나 씩 입력합니다.
Exclude Leading은 첫 번째 로드되는 항목부터 특정 수의 배경 이미지 컨테이너를 지연 로드에서 제외 시킵니다. 배경 이미지를 많이 쓰는 경우 Exclude Leading 기능을 사용합니다.
DOM(Document Object Model)은 브라우저가 HTML 문서를 해석해 만든 요소 트리 구조로, 커질수록 메모리 사용량, 스타일 계산 시간, 레이아웃 재계산(Reflow) 비용이 증가합니다.
구분
본문(body) 내 노드 수
상태
정상
800개 이하
🟢 정상
경고
약 800개 초과
🟠 주의
오류
약 1,400개 초과
🔴 경고
대부분의 캐시 플러그인에는 이 기능이 없으므로, 캐시 플러그인과 같이 사용할 때에도 활성화합니다. 특정 요소와 부모 컨테이너를 지정할 수도 있습니다.
옵션
권장 상태
설명
Elements
HTML 요소 자체를 Lazy Load (DOM 크기 축소 및 초기 렌더링 부하 완화)
Element Selectors
⛔ 비워둠
특정 컨테이너나 섹션만 요소 지연 로드하려는 경우에만 입력
Fonts
Fonts 탭의 주요 기능은 구글 글꼴을 로컬에서 가져올지, 구글 폰트를 비 활성화 할지로 나뉩니다.
Local Google Fonts vs. Google Fonts 비활성화
Local Google Fonts
Local Google Fonts 사용 시 다른 테마나 캐시 플러그인에서 쓰는 기능은 비활성화를 진행합니다.
Google Fonts 비활성화
Google Fonts를 로컬로 호스팅하면 외부(Google 서버)에서 불러오지 않고 사이트 로컬에 저장하여 직접 호스팅하므로, 네트워크 요청이 줄고 LCP 개선에 도움이 됩니다.
Google Fonts 비활성화는 Google Fonts 자체를 차단해 브라우저 기본 폰트(예: Arial, Helvetica, sans-serif)로 대체합니다. 네트워크 요청은 가장 적지만 디자인 일관성이 깨질 수 있습니다.
Display Swap
웹폰트가 로드되기 전에도 브라우저가 시스템 기본 폰트로 먼저 텍스트를 표시해, 사용자가 콘텐츠를 즉시 읽을 수 있고 LCP와 체감 속도가 개선됩니다. CLS 개선 효과는 없습니다.
Print Method
로컬 스타일시트의 출력 방식은 기본이 파일(File)이며, 인라인(Inline)으로 바꾸면 CSS를 HTML 내부에 직접 삽입해 렌더링 차단을 줄이고 FCP와 LCP 개선에 도움이 됩니다. 대신 페이지 용량이 약간 증가합니다.
Limit Subsets
필요한 문자 세트만 불러와 폰트 파일 용량을 줄입니다. 선택하지 않은 언어의 문자는 표시되지 않을 수 있으므로, Latin(Default)에 본인 국가 언어를 하나 추가하는 것이 일반적인 설정입니다.
다국어 플러그인을 사용한다면, 전체 구글 폰트와 Display Swap을 캐시에서 처리하는 캐시 플러그인을 사용하는 것이 더 나은 선택입니다.
CDN URL
클라우드프레어 CDN이 아닌 일반 CDN을 사용할 경우 URL을 입력해서 로컬 폰트를 CDN에 적용시킬 수 있습니다.
로컬 글꼴 지우기
테마를 변경했거나 다른 글꼴을 선택했을 때, 또는 캐시 플러그인에서 다른 글꼴을 선택했을 경우 로컬 글꼴을 삭제합니다.
⤵️ 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 사용 시 비활성화 상태 유지가 권장됩니다.
CDN
CDN URL 재작성 순차적으로 URL 입력 후 포함할 디렉토리를 추가하여 작동합니다. wp-content, wp-includes 두가지 설정 시 모든 이미지, CSS, JS, 폰트가 CDN으로 전송되며, 제외 시키고 싶은 파일을 CDN에서 제외 시킬 수 있습니다.
Analytics
구글에서 만든 사이트 킷과 같은 플러그인으로 Google Analytics 연결을 할 수 있습니다. 하지만 사이트 킷 플러그인 설치 후 구글 페이지스피드 인사이트 검사만 해도 성능 저하를 체감할 수 있습니다. Google Analytics에 연결하여 로컬 설정으로 속도 향상을 필요할 경우 활성화를 진행합니다.
사이트킷을 포함한 Yoast 및 RankMath와 같은 SEO 플러그인의 Google Analytics와 각각 설정하면 HTTP 요청이 1개가 아닌 2개로 늘어나기 때문에 한쪽에서만 선택해서 사용하도록 합니다.
Code › Snippets
PHP·CSS·JS·HTML 코드 조각을 등록해 두고 켜고 끄는 곳입니다. [New Snippet]으로 추가합니다.
Claude MCP 연결 오류를 막는 스니펫은 아래처럼 설정합니다.
<> Code
All Snippets / MCP REST API exception
ActiveSave Snippet④
Name②
MCP REST API exception
Location
Everywhere⌄
Type
PHPJSCSSHTML
Code③
<?php
1// Let WP Rocket MCP (OAuth) requests through the Perfmatters REST API restriction
②이름을 적고 [Location]은 [Everywhere], [Type]은 [PHP] 그대로 둡니다.
③이 화면의 [Copy]로 코드를 가져와 [<?php] 줄 아래 코드 칸에 붙여 넣습니다.
④스위치를 [Active]로 켜고 [Save Snippet]을 누릅니다.
Code › Global Scripts
사이트 전체의 header·body·footer에 넣을 코드를 적는 칸입니다. 애널리틱스·인증 태그처럼 모든 페이지에 들어가야 하는 코드에 씁니다.
Code › Settings
코드 조각 내보내기·가져오기, 편집기 테마, Safe Mode가 있습니다. 코드 조각 때문에 사이트가 열리지 않을 때 Recovery URL로 들어가 끌 수 있습니다.
Tools › Plugin
도구 탭에서 다른 기능들은 선택 사항이며, 아래 이미지만으로 충분한 이해가 가능합니다. 스크립트 매니저와 이제까지 설명한 설정들 중에 고급 옵션이 포함되어 있으니 활성화 시키는 것 두가지입니다.
Tools › Settings
Database
캐시 플러그인에서 DB 최적화를 제공하지 않을 경우 Perfmatters의 기능을 사용할 수 있으며 어느 쪽을 사용하던지 더 편한 쪽에서 사용하면 됩니다.
Ⅲ. Perfmatters Script Manager 사용 방법
Perfmatters의 Script Manager는 관리자 대시보드에서 ‘사이트 방문’ 버튼을 클릭한 후 사용할 수 있습니다. 사용 중인 테마나 플러그인에 따라 관리자 화면 구성이 다를 수 있으며, 불필요한 스크립트는 해당 항목의 활성화 버튼을 비활성화하여 로드되지 않도록 설정할 수 있습니다.
예를 들어 Perfmatters 일반 설정에서 비활성화 할 수 있는 대시콘을 그대로 두고 특정 페이지에서 비활성화가 필요한 경우 Script Manager에서 비활성화가 가능합니다.
Ⅳ. 결론 & FAQ
Perfmatters는 단순히 스크립트와 리소스를 제거하는 [속도 개선용 플러그인]이 아니라, 워드프레스 구조 전반의 비효율을 제어해 사이트의 안정성과 관리 효율을 동시에 높이는 도구입니다.
중요한 점은 [모든 기능을 켜는 것]이 아니라, 사이트의 성격과 플러그인 구조를 이해하고 선택적으로 적용하는 것입니다.
Perfmatters는 불필요한 코드와 요청을 제어해 사이트 구조 자체를 가볍게 만드는 플러그인입니다. CSS·JS·폰트·이미지 로드 방식을 제어해 Core Web Vitals 점수를 올리고 서버 부하를 줄입니다.
Perfmatters는 [사이트 전체 성능 향상용], Asset CleanUp은 [개별 리소스 제어용]입니다.
일반적인 워드프레스 운영자라면 Perfmatters가 더 실용적이고 안정적인 선택입니다.
가장 효과적인 조합은 WP Rocket + Perfmatters입니다.
WP Rocket은 캐시·압축·프리로드 등 정적 최적화를 맡고, Perfmatters는 코드·리소스·요청 제어로 동적 최적화를 맡아 서로 겹치지 않습니다.
ℹ️ 제휴 안내 본 사이트의 콘텐츠에는 제휴 링크가 포함되어 있습니다. 방문자가 이 링크를 통해 상품 또는 서비스를 구매하면 본 사이트는 판매처로부터 수수료를 지급받습니다. 이 과정에서 구매자가 지불하는 금액(이벤트 할인 시 금액이 내려갑니다↓)은 오르지 않습니다. 게시된 가격·할인·재고 정보는 작성 시점 기준이며 실제와 다를 수 있으므로, 구매 전 판매처에서 최종 확인하시기 바랍니다. 상품 선정과 평가는 자체 기준에 따라 작성되며, 수수료 지급 여부가 소개 순서나 평가 내용에 영향을 주지 않습니다.