Perfmatters, 구성 가이드

 
Perfmatters, 구성 가이드

만약 내일 무인도에 플러그인 하나만 가져갈 수 있다고 한다면, 아마 다음과 같은 플러그인을 가져갈 것입니다. Perfmatters 팬클럽이 있다면 가입해서 모든 콘서트에 가고 싶어요.

저는 2021 년 1 월부터 사용해 왔으며 가장 많은 문제를 해결 한 애드온 중 하나이며 가장 많이 기여하고 가장 잘 기여한 애드온 중 하나였습니다 속도 의 화물을 처리합니다.

필수

연례 갱신일이 다가올 때 결제하지 않을 가능성에 대해 의문을 제기하지 않는 도구 중 하나입니다. 그건 그렇고, 매우 경제적입니다 단일 사이트 사용을 위한 요금제입니다. 가격은 24.95달러에 불과하며 이후 갱신 시 15% 할인이 적용됩니다. 따라서 2년차부터는 $21.21에 불과합니다.

일부 기능을 개별적으로 검토한 적이 있기 때문에 보다 심층적인 분석 및 구성 튜토리얼이 필요했습니다. 이것이 이 글의 목표입니다.

구성 정보

Perfmatters, 구성 가이드
Perfmatters, 구성 가이드

참고: 제가 추가한 켜기 및 끄기 아이콘은 제 구성에 해당하는 아이콘으로, 이 블로그에서 사용할 수 있는 최선이라는 것은 말할 필요도 없습니다. 그렇다고 해서 여러분의 환경에 가장 이상적인 설정이라는 의미는 아닙니다.

모든 시나리오는 다릅니다. 각 옵션을 연구하고 이해하고, 그 동작을 실험하고, 자신의 경우에 가장 적합한 것이 무엇인지 결정해야 합니다. 이를 위해 옵션을 하나씩 테스트하고 결과를 평가하는 것보다 더 좋은 것은 없습니다.

주의해야 할 또 다른 사항은 중복 도구가 충돌한다는 것입니다. 다음과 같은 다른 플러그인이 있습니다 WP Rocket 또는 서버 캐시 플러그인 Litespeed 정확히 같은 일을 하는 일부 기능이 있습니다. 이 기능들을 함께 활성화하면 충돌이 발생할 수 있습니다. 어떤 것이 가장 효과적인지 평가하고 그중 하나만 사용해야 합니다.

일반 탭

일반 탭에서 가장 일반적인 도구를 찾을 수 있습니다. 모든 도구 옆에는 해당 도움말에 대한 링크가 있습니다. 시도해 보는 것을 두려워하지 마세요. 모든 것은 되돌릴 수 있습니다. 스위치를 다시 누르면 모든 것이 원래 상태로 돌아가고 여기에는 아무 일도 일어나지 않습니다.

Perfmatters, 구성 가이드

이모티콘 비활성화

2015년 워드프레스 버전 4.2에서는 다음에 대한 지원이 추가되었습니다 이모티콘 를 코어에 추가했습니다.

너무 무겁지는 않지만(18KB + 다른 JS) 블로그의 모든 페이지에 wp-emoji-release.min.js JavaScript를 로드하고 요청이 하나 줄어들면 항상 요청이 하나 줄어들기 때문에 사용하지 않도록 설정할 수 있습니다.

Perfmatters, 구성 가이드

Perfmatters, 구성 가이드

대시 아이콘 비활성화

대시 아이콘은 출처 버전 3.8부터 공식 워드프레스 관리자 아이콘으로 설정되었습니다. 일부 템플릿은 dashicons.min.css CSS를 로드하여 프론트엔드에서 이 아이콘을 사용합니다. 그러나 많은 최신 테마와 플러그인은 이미 자체 아이콘, SVG를 사용하거나 아이콘을 전혀 사용하지 않습니다. 따라서 대시 아이콘을 사용하지 않는 경우 스타일시트가 불필요한 로딩 시간을 추가하고 렌더링도 차단하므로 비활성화할 수 있습니다.

Perfmatters, 구성 가이드

퍼프매터에서 비활성화해도 해당 기능을 사용하는 워드프레스 관리자 패널에는 영향을 주지 않습니다. 로그인하지 않은 경우 프런트엔드의 대시 아이콘만 제거됩니다.

Perfmatters, 구성 가이드

인레이 비활성화

편집기에서 블로그의 링크를 추가하면 워드프레스에서 이를 인식하고 그대로 표시합니다(스타일을 수정하지 않은 경우).

Perfmatters, 구성 가이드

임베딩이 신경 쓰이지 않는다면 임베딩을 비활성화하여 부하를 조금 줄일 수 있습니다. 미리보기가 있는 링크가 단락 사이의 관련 링크로 사용될 때 클릭률이 좋은 경향이 있다는 것을 알았기 때문에 이 기능을 끄지 않았습니다.

임베딩은 워드프레스 4.4 버전과 함께 제공되었습니다. 단점은 로드할 또 다른 자바스크립트가 포함된 추가 코드인 wp-embed.min.js가 함께 제공된다는 것입니다.

Perfmatters, 구성 가이드

블로그에서 임베드를 비활성화하면 다른 블로그에서 해당 미리보기가 있는 사이트의 링크를 임베드할 수 없지만, oEmbed 관련 JavaScript가 제거되고 oEmbed 결과의 필터링이 비활성화됩니다,
oEmbed의 링크 검색을 제거하고 모든 임베드 다시 쓰기 규칙도 제거합니다.블로그에서 임베드를 비활성화하면 다른 블로그에서 해당 미리보기가 있는 사이트의 링크를 임베드할 수 없지만, oEmbed 관련 JavaScript가 제거되고 oEmbed 결과의 필터링이 비활성화됩니다,oEmbed의 링크 검색을 제거하고 모든 임베드 다시 쓰기 규칙도 제거합니다.

Perfmatters, 구성 가이드

XML-RPC 비활성화

XML-RPC는 원격 연결을 허용하기 위해 워드프레스 3.5에 추가된 프로토콜로, 워드프레스 3.5에 추가된 워드프레스 앱 를 사용하여 휴대폰에서 블로그를 게시하거나 편집하는 것은 심각한 보안 위험을 초래할 수 있으므로 비활성화하는 것이 중요합니다.

이 플러그인이 필요한 플러그인은 거의 없으며, 이 플러그인을 사용하는 플러그인은 JetPack 하나뿐입니다. 성능을 상당히 저해하기 때문에 그다지 추천하지 않는 다기능 플러그인입니다.

XML-RPC가 비활성화된 후에는 yourdomain.com/xmlrpc.php를 방문하여 403 오류 메시지만 반환하는지 확인합니다.

다음 링크에서도 확인할 수 있습니다 이 검증자. 이와 같은 메시지가 표시되면 XML-RPC가 비활성화되었다는 뜻입니다.

Perfmatters, 구성 가이드

Perfmatters, 구성 가이드

jQuery 마이그레이션 제거

이 기능은 워드프레스 3.6에 도입되었으며 WP 5.5 이상부터는 더 이상 기본적으로 활성화되지 않습니다.

대부분의 템플릿과 플러그인에는 필요하지 않지만 일부 사소한 기능을 위해 필요한 몇 가지 플러그인이 여전히 있습니다. 제 경우에는 이를 사용하는 플러그인이 두 개 있습니다, Ultimate Membership Pro 및 순위 수학에 대한 통계 바 (저는 사용하지 않습니다)는 관리자에게만 표시됩니다. 일부 쿠키 동의 관리 플러그인은 최근까지도 이 기능을 사용했습니다.

jQuery 마이그레이션은 이전 종속성이 있는 코드가 새 코드와 통신할 수 있도록 하는 개발자용 리소스입니다.

이 기능이 필요한 플러그인이 없을 가능성이 높기 때문에 jQuery Migrate는 jquery-migrate.min.js JavaScript의 불필요한 오버헤드를 추가하고 있습니다.

Perfmatters, 구성 가이드

그래도 비활성화하기 전에 플러그인 설명서를 확인하거나 개발자에게 문의하세요(특정 위치에 대해 비활성화하는 방법은 나중에 살펴보겠습니다).

Perfmatters, 구성 가이드

워드프레스 버전 숨기기

이 옵션은 보안을 위해 설치한 워드프레스 버전을 눈에 띄지 않게 숨겨주는 기능일 뿐, 비밀이 있는 것은 아닙니다.

다양한 방법으로 수행할 수 있는 이 기능은 버전 업데이트가 늦어져 취약점이 악용될 수 있거나 핵심이 손상될 수 있는 경우에 유용합니다. 적어도 버전을 숨기면 공격자가 허점을 찾기 어렵게 만들 수 있습니다.

한 줄의 코드만 제거되고 이는 주로 보안상의 이유로 수행되지만, 최적화 애호가에게는 총합에서 빼야 할 부분을 더하는 또 다른 핀치일 뿐입니다.

Perfmatters, 구성 가이드

wlwmanifest 링크 제거

이 태그는 모든 워드프레스 설치에 표시되며 다음에서 사용하는 태그입니다. Windows Live Writer, 2017년 1월에 업데이트 및 지원이 중단되었습니다.

앞의 경우와 마찬가지로 이것은 불필요한 코드이므로 한 줄이 줄어듭니다.

Perfmatters, 구성 가이드

RSD 링크 제거

모든 워드프레스 설치에 표시되는 또 다른 남은 태그입니다.

브라우저에서 해당 사이트를 편집하는 경우에는 전혀 필요하지 않습니다. 또한 이미 비활성화해야 하는 XML-RPC 요청을 사용하는 일부 타사 애플리케이션에서도 사용됩니다. 따라서 제거해야 할 불필요한 코드입니다.

Perfmatters, 구성 가이드

짧은 링크 제거

이 태그를 추가하는 페이지 및 글에 숫자가 포함된 짧은 링크를 만드는 데 사용됩니다:

<link rel='shortlink' href='https://dominio.com?p=123' />
Perfmatters, 구성 가이드

도메인닷컴과 같은 "멋진" 짧은 퍼머링크를 사용하는 경우/%postname% 를 사용하면 아무 쓸모도 없이 버려야 할 불필요한 코드가 더 많아지므로 이를 보관할 이유가 없습니다.

Perfmatters, 구성 가이드

RSS 피드 비활성화

워드프레스에서는 기본적으로 다양한 유형의 RSS 피드를 생성합니다. RSS 피드는 블로그에 여전히 유용하지만 사이트가 다소 정적이거나 단순히 블로그로 사용하지 않는 경우 피드를 비활성화할 수 있습니다.

Perfmatters, 구성 가이드

RSS 피드에서 링크 제거

워드프레스에서 RSS 피드를 생성하는 것처럼 페이지, 글, 댓글, 카테고리, 태그 등에 대한 해당 RSS 피드 링크도 생성합니다. RSS 피드를 활성화한 상태로 두어도 RSS 피드 링크를 제거할 수 있습니다. 이 작업의 목적은 페이지에서 사용하지 않을 가능성이 높은 코드를 추가로 제거하기 위한 것입니다.

Perfmatters, 구성 가이드

자동 핑백 사용 안 함

핑백은 기본적으로 다른 블로그가 나를 링크할 때 내 블로그에 알림으로 생성되는 링크가 포함된 자동 댓글입니다. 자동 핑백은 내 블로그에 있는 글을 링크할 때 생성됩니다.

요즘에는 핑백을 사용하는 사람이 거의 없으며 외부에서 받는 핑백은 대개 스팸이며 리소스를 낭비할 뿐 아니라 악의적이거나 일시적인 링크를 생성한 후 끊어져 SEO에 해로울 수 있습니다.
처럼 트랙백 에 속하는 블로그의 과거, 링크 연결이 네티켓의 일부로 블로깅 철학으로 자리 잡았던 시절부터 이어져 왔습니다.

REST API 비활성화

Perfmatters, 구성 가이드

워드프레스 REST API는 개발자가 JSON 객체를 주고받으며 사이트와 원격으로 상호작용할 수 있는 워드프레스 데이터 유형에 대한 API 엔드포인트를 제공합니다.

다른 사이트 및 PHP 또는 다른 언어로 작성된 소프트웨어와 상호 참조할 수 있습니다.

Perfmatters에 따르면 REST API를 사용하는 다양한 플러그인, 서비스 및 애플리케이션이 있으며, 그 중 일부는 다음과 같습니다:

Yoast SEO 및 Ryte 대시보드 위젯, 젯팩, 일부 문의 양식, 워드팬스 및 일부 특정 WooCommerce 대시보드 위젯.
또한 구텐베르크 블록 편집기에서 페이지 및 글 편집 시 통신하는 데 사용됩니다. 완전히 비활성화하면 "업데이트 실패" 오류가 발생합니다.Yoast SEO 및 Ryte 대시보드 위젯, 젯팩, 일부 문의 양식, 워드팬스 및 일부 특정 WooCommerce 대시보드 위젯.또한 구텐베르크 블록 편집기에서 페이지 및 글 편집 시 통신하는 데 사용됩니다. 완전히 비활성화하면 "업데이트 실패" 오류가 발생합니다.

Perfmatters는 세 가지 옵션을 제공합니다. 활성화(기본값), 관리자가 아닌 경우 비활성화, 로그아웃 시 비활성화.

Perfmatters, 구성 가이드

REST API 바인딩 제거

기본적으로 REST API 링크는 유형 헤더에 포함되어 있습니다:

<link rel='https://api.w.org/' href='https://domain.com/wp-json/' />

또한 각 요청에서 헤더가 전송되고 API 태그가 엔드포인트에 추가됩니다. Really Simple Discovery (RSD). 이 모든 코드는 링크 제거 옵션을 활성화하여 발송할 수 있습니다.

Perfmatters, 구성 가이드

Google 지도 비활성화

Google 지도 API를 비활성화하면 됩니다.

일부 워드프레스 템플릿과 플러그인에는 Google 지도 API가 내장되어 있지만 비활성화할 수 있는 방법을 제공하지 않는 경우가 많습니다. Google 지도는 요청이 비동기적으로 로드되더라도 블로그의 성능을 저하시킬 수 있습니다. 일반적으로 요청은 공식 Google 지도 API를 통해 이루어집니다.

블로그에 지도를 로드하는 것만으로도 Google 지도에 최대 20번의 HTTP 요청을 할 수 있습니다. 통합에 따라 요청 횟수가 줄어들거나 늘어날 수 있습니다.

필요하지 않은 경우 비활성화해야 합니다.

게시물 ID 번호로 Google 지도 비활성화 제외하기

그러나 지도를 삽입할 수밖에 없는 경우 지도를 추가해야 하는 글에 대해서만 비활성화를 제외할 수 있습니다. 이렇게 하려면 다음 상자에 각 글의 ID를 쉼표로 구분하여 추가해야 합니다.

Perfmatters, 구성 가이드
글의 ID를 찾으려면 관리 메뉴에서 글/모든 글로 이동하여 각 제목 위에 마우스를 올려놓으면 하단에 표시되는 수정 링크에서 찾을 수 있습니다.

Perfmatters, 구성 가이드

Perfmatters, 구성 가이드

비밀번호 강도 측정기 비활성화하기

이 기능은 최신 버전의 워드프레스와 우커머스에서 도입되었습니다. 이 기능은 사용자가 강력한 비밀번호를 사용하도록 강제하는 내장 비밀번호 강도 측정기이며 /wp-admin/js/password-strength-meter.min.js 및 /wp-includes/js/zxcvbn.min.js와 같은 여러 파일을 로드합니다.

Perfmatters, 구성 가이드

zxcvbn.min.js는 800KB보다 클 수 있습니다.

Perfmatters, 구성 가이드

WooCommerce를 사용하는 경우 이 경로에서 파일을 찾을 수도 있습니다:

/wp-content/plugins/woocommerce/assets/js/frontend/password-strength-meter.min.js

각 템플릿과 개발자가 대기열에 올린 방식에 따라 이러한 파일이 사이트 전체에 로드되는 경우도 있습니다. 성능상의 이유로 이러한 파일은 '계정', '결제', '비밀번호 재설정' 페이지에만 로드되어야 합니다.

비활성화한 후에도 요청에서 이러한 스크립트가 계속 발견되면 템플릿 문서와 이 기능을 사용하는 것으로 생각되는 플러그인 문서를 참조하세요.

Perfmatters, 구성 가이드

댓글 비활성화

댓글이 필요하지 않거나 가장 근본적인 방법으로 스팸을 없애기로 결정했다면 독자가 댓글을 달 수 있는 옵션을 비활성화할 수 있습니다. 댓글 양식이 사라집니다.

다음은 댓글 사용 안 함 옵션이 활성화된 경우 Perfmatters가 수행하려고 시도하는 작업 목록입니다:

  • 기본 제공된 최근 댓글 위젯을 비활성화합니다.
  • X-Pingback 헤더를 제거합니다.
  • 댓글 피드 링크를 제거합니다.
  • 댓글 피드 요청을 비활성화합니다.
  • 관리 표시줄에서 댓글 링크를 제거합니다.
  • 모든 유형의 글에서 댓글 지원을 제거합니다.
  • 댓글 필터를 닫습니다.
  • 관리 메뉴에서 댓글 링크를 제거합니다.
  • 기본 제공 토크 페이지를 비활성화합니다.
  • 제어판 댓글을 숨깁니다.
  • 프로필 페이지에서 댓글 설정 옵션을 숨깁니다.
  • 요청 시 빈 댓글 템플릿을 반환합니다.
  • 댓글에 답글을 달기 위한 스크립트를 제거합니다.

더 부드러운 옵션을 선택하면 이 확인란을 선택 취소하여 각 글의 편집에서 특정 글에 대해서만 댓글을 닫을 수 있다는 점을 기억하세요.

Perfmatters, 구성 가이드

또는 설정/댓글에서 특정 일수 후에 닫히도록 설정할 수 있습니다.

Perfmatters, 구성 가이드

Perfmatters, 구성 가이드

댓글에서 URL 제거

기본적으로 워드프레스 댓글에는 댓글 작성자 이름에 노팔로우 링크를 생성하는 웹사이트 필드가 포함되어 있습니다(스패머는 상관없지만).

시간이 지나면서 끊어지는 링크를 처리하고 싶지 않거나 댓글 수가 너무 적거나 단순히 스팸을 근절하고 싶다면 방문자가 댓글에 추가한 모든 URL을 한 번에 삭제할 수 있습니다.

이 기능을 활성화하면 나중에 댓글을 달 수 있도록 양식에서 URL 필드도 제거됩니다.

Perfmatters, 구성 가이드

빈 파비콘 추가

사이트에 이미 파비콘이 있는 경우 이 옵션을 비활성화한 상태로 두어야 합니다.

흰색 파비콘을 추가하는 것은 새 워드프레스 설치를 많이 만들고 테스트하는 경우에 유용합니다. 빈 파비콘을 추가하면 각 사이트마다 파비콘을 업로드하지 않아도 됩니다. 또한 잊어버리면 속도 테스트 도구에서 404 오류가 발생할 수 있습니다.

Perfmatters, 구성 가이드

글로벌 스타일 제거

워드프레스 5.9부터 추가 인라인 코드가 추가되어 듀오톤 스타일 (CSS 및 SVG 코드). 대부분의 사용자는 이 기능을 사용하지 않을 것이며, 문제는 이렇게 펼쳐진 사이트의 각 페이지에 311줄의 (축소되지 않은) 코드가 추가된다는 것입니다:

본문 태그 앞에 196줄의 CSS와 115줄의 SVG 코드도 /body 태그 앞에 추가됩니다.

많은 코드가 !중요; 태그를 사용하는데, 이 또한 이상적이지 않습니다.
퍼프매터스는 이것이 버그일 수 있다고 판단하여 버그가 해결되는 동안 불필요한 코드를 쉽게 제거할 수 있는 방법으로 이 옵션을 추가했습니다.많은 코드가 !중요; 태그를 사용하는데, 이 또한 이상적이지 않습니다.퍼프매터스는 이것이 버그일 수 있다고 판단하여 버그가 해결되는 동안 불필요한 코드를 쉽게 제거할 수 있는 방법으로 이 옵션을 추가했습니다.

히어비트, 리뷰 및 자동 저장

Perfmatters, 구성 가이드

워드프레스 하트비트 API는 /wp-admin/admin-ajax.php를 사용하여 웹 브라우저에서 AJAX 호출을 실행합니다.

이 기능은 초안을 저장하고 예기치 않은 종료로 인해 초안을 잃어버리는 것을 방지할 수 있어 좋지만, CPU 사용량과 엄청난 양의 PHP 호출을 유발할 수도 있습니다. 예를 들어 제어판을 열어두면 15초마다 일정한 간격으로 이 파일에 POST 요청을 계속 보내게 됩니다. 이 문제를 완화하기 위해 빈도를 60초로 늘릴 수 있습니다.

첫 번째 옵션에서는 활성화 시기와 위치를 선택할 수 있습니다.

세 번째 옵션을 사용하면 항목의 수정 횟수를 제한하여 공간을 절약할 수 있습니다(예: 10개로 설정하면 마지막 10개만 저장되고 이전 항목은 삭제됨).

마지막으로 초안의 자동 저장 간격을 설정할 수 있습니다. 기본적으로 워드프레스는 60초마다 자동으로 저장합니다. 그러나 간격을 늘리면 수동으로 더 자주 저장해야 하므로 관리 영역에 있는 동안 브라우저가 너무 많이 "중단"되는 것을 방지하고 데이터베이스에 대한 쓰기 횟수도 줄일 수 있습니다.

우커머스

Perfmatters, 구성 가이드

WooCommerce의 최적화 옵션에 대해서는 존재한다고만 말할 것이지만,이 집에서는 내가 명확하지 않은 것을 검토하지 않는 것이 관례이므로 어떤 언급도 피할 것입니다. 다음에서 WooCommerce를 제거했습니다 2021년 7월 이러한 최적화에 대한 반응에 대해서는 거의 기억이 나지 않으므로 해당 문서를 참조하시기 바랍니다:

로그인 URL

Perfmatters, 구성 가이드

또 다른 흥미로운 기능은 기본 로그인 URL을 워드프레스에서 yourdomain/wp-admin에 설정한 관리자 영역으로 변경하는 기능입니다. 다음과 같은 푸긴과 똑같은 기능을 합니다. WPS Hide Login.

세 개의 필드가 있습니다:

첫 번째에서는 wp-admin 액세스 URL을 "yourdomain.com/potato"와 같이 원하는 대로 변경할 수 있으므로 일반적으로 기본 URL을 대상으로 하는 무차별 암호 대입 공격 등을 피할 수 있습니다. 그냥 적어 두거나 너무 많은 문자가 포함된 이상한 URL을 만들지 않도록 주의하세요(언제든지 wp_options / perfmatters_options 테이블로 이동하여 검색할 수 있지만).

Perfmatters, 구성 가이드

두 번째 필드(비활성화된 동작)는 도메인/wp-admin에 방문한 방문자가 어떤 URL로 이동할지 세 가지 가능성으로 설정합니다:

  • 메시지(기본값): 방문자에게 메시지를 표시합니다. 메시지 필드에 원하는 텍스트를 추가하여 메시지를 사용자 지정할 수 있습니다.
  • 404 템플릿: 사용자가 404 페이지로 이동합니다.
  • 홈 URL: 사용자가 홈 페이지로 리디렉션됩니다.

자산

여기서 정말 흥미로운 점이 있습니다.

Perfmatters, 구성 가이드

스크립트 관리자, 케이크의 장식

퍼프매터스 스크립트 매니저는 의심할 여지 없이 가장 강력하고 유용한 도구입니다. 이것만 는 플러그인 및 지원 비용을 지불한 모든 가치가 있습니다.

각 플러그인에서 사용하는 스크립트와 CSS를 비활성화하고 글이나 페이지에서 또는 사이트 전체에서 로드되지 않도록 할 수 있으며, 로그인 또는 로그아웃한 사용자, 디바이스별로 필터링하고 카테고리와 태그를 비롯한 예외를 추가할 수 있습니다.

Perfmatters, guía de configuración y uso. Script manager

이렇게 하면 양식 등 플러그인을 사용하지 않는 불필요한 요청을 제거하여 로딩 속도(특히 홈페이지의 경우)를 크게 높일 수 있습니다.

Perfmatters, 구성 가이드

필수 사용 모드(MU)는 스크립트 매니저의 기능을 훨씬 더 강화합니다. 훨씬 더 많은 제어 기능을 제공하고 워드프레스 플러그인 쿼리와 후크는 물론 인라인 CSS와 JS를 비활성화할 수 있는 기능을 제공합니다. 이제 프런트엔드 스크립트, 인라인 코드, MySQL 쿼리 등 플러그인의 모든 측면을 원하는 곳에서 제어할 수 있습니다.

글로벌 보기에서는 구성을 재구성, 수정, 새 구성 추가 또는 일부 삭제해야 할 경우를 대비하여 적용된 모든 구성을 찾을 수 있습니다.

Perfmatters, 구성 가이드

여기에는 문서 아주 완벽합니다. 이러한 유형의 도구에 익숙하지 않은 경우 처음에는 겁이 날 수 있지만 익숙해지면 사용하기가 매우 쉽다는 것을 알게 될 것입니다.

자바스크립트

Perfmatters, 구성 가이드

자바스크립트 지연 및 지연.

두 가지 모두 FCP 그리고 LCP

중요하지 않은 모든 JavaScript 파일에 defer 속성을 추가하면 페이지의 첫 번째 콘텐츠 페인팅(FCP) 속도가 빨라집니다. 즉, HTML 구문 분석 중에 자바스크립트가 다운로드되고 페이지 로딩이 완료된 후(구문 분석이 완료된 경우) 실행됩니다. 즉, 자바스크립트 다운로드가 페이지 하단으로 푸시되어 프로세스가 끝날 때 완료됩니다.

지연은 LCP의 결과를 개선하고 TBT. 자바스크립트는 사용자 상호 작용에 따라 지연되므로 Google 애드센스, Google 애널리틱스, Facebook 전환 픽셀 또는 Google 광고 등과 같은 무거운 타사 스크립트가 즉시 필요하지 않은 경우 페이지의 첫 번째 페인팅 속도가 크게 빨라집니다.

두 옵션 모두 예외를 추가하고 지연 시간 초과 동작을 활성화하면 사용자 상호 작용이 감지되지 않은 경우 10초 후에 스크립트를 자동으로 로드하는 시간 초과를 설정할 수 있습니다. 이 옵션은 선택 사항이며 기본적으로 비활성화되어 있습니다.

Perfmatters, 구성 가이드

지연 시간 초과

이 옵션을 활성화하면 다음 옵션 중 하나를 사용하여 타임아웃을 다른 값으로 설정할 수 있습니다 이러한 필터.

예제에서는 7초로 설정되어 있습니다.

add_filter('perfmatters_delay_js_timeout', function($timeout) {
    return '7';
});

타임아웃 값을 너무 짧게 설정하지 않는 것이 좋으며, 그렇지 않으면 JS 지연 기능이 제대로 작동하지 않습니다. 또한 타임아웃 값에 관계없이 99%의 경우 스크롤, 클릭 또는 첫 번째 마우스 움직임 등 첫 번째 사용자 상호 작용에 의해 모든 것이 트리거됩니다.

CSS

Perfmatters, 구성 가이드

Perfmatters에 따르면 "사용하지 않는 CSS 줄이기" 경고를 해결하는 가장 쉬운 방법은 이 기능을 활성화하는 것입니다 아직 베타 버전이었을 때 리뷰했습니다, 이 모든 것을 자동으로 수행합니다. 개발자는 다양한 템플릿과 구성을 사용하여 수백 개의 URL에서 테스트했다고 주장하며, 다음은 그들이 얻은 결과 중 일부입니다:

  • PCF 평균 15.20% 감소.
  • 평균 LCP가 19.66% 감소했습니다.
  • 평균 TTI 14.95% 감소.

Perfmatters에서 "사용하지 않는 CSS 제거" 기능을 활성화하기 전에 Perfmatters에 설정된 기존 CSS 프리로드를 모두 제거하는 것이 좋습니다(Google 글꼴 로컬 스타일시트 제외).
CSS를 병합하지 마세요(WP Rocket, Litespeed, 자동 최적화 등으로 자주 수행되는 작업). CSS 병합은 HTTP/2 이후 더 이상 사용되지 않는 최적화 기법입니다. 경우에 따라 CSS를 병합하면 성능이 저하될 수 있으며(제 경우에는 그렇지 않았습니다), 마지막으로 다른 플러그인으로 사용하지 않는 CSS를 제거하려고 하지 않는지 확인해야 합니다.Perfmatters에서 "사용하지 않는 CSS 제거" 기능을 활성화하기 전에 Perfmatters에 설정된 기존 CSS 프리로드를 모두 제거하는 것이 좋습니다(Google 글꼴 로컬 스타일시트 제외).CSS를 병합하지 마세요(WP Rocket, Litespeed, 자동 최적화 등으로 자주 수행되는 작업). CSS 병합은 HTTP/2 이후 더 이상 사용되지 않는 최적화 기법입니다. 경우에 따라 CSS를 병합하면 성능이 저하될 수 있으며(제 경우에는 그렇지 않았습니다), 마지막으로 다른 플러그인으로 사용하지 않는 CSS를 제거하려고 하지 않는지 확인해야 합니다.

제거 방법에는 세 가지가 있습니다:

  • 지연(기본값): 모든 원본 CSS 스타일시트(사용되지 않은 CSS)가 지연되어 사용자 상호 작용 시 로드됩니다. 이 옵션이 권장됩니다.
  • 비동기: 모든 원본 CSS 스타일시트(사용되지 않는 CSS)가 비동기를 통해 로드됩니다. 이 방법은 페이지가 로드되는 동안 스타일시트가 비동기적으로 실행되므로 팝인을 방지하는 데 도움이 될 수 있습니다. 이 방법을 사용하면 지연 동작보다 LCP/FCP가 약간 높아집니다.
  • 삭제: 모든 원본 CSS 스타일시트(사용하지 않는 CSS)가 제거됩니다. 이 방법은 가장 공격적인 방법이지만 예외를 추가해야 할 수도 있습니다. 고급 사용자에게만 권장됩니다.

테스트 환경에서 실험하고 단독으로 또는 다른 기능과의 상호 작용을 통해 결과를 측정하는 것 외에는 비밀이 없습니다.

Perfmatters, 구성 가이드

이러한 기능 중 일부는 WP 편집의 모든 글 또는 페이지에서 비활성화할 수 있습니다.

코드

Perfmatters, 구성 가이드

다른 많은 플러그인에 포함되어 있는 유용한 클래식 플러그인으로, 손으로도 할 수 있지만 블로그의 헤더, 본문 또는 바닥글에 사용자 정의 코드를 추가하는 작업을 단순화하고 용이하게 해줍니다.

다음 필드는 코드를 프런트엔드에 직접 인쇄하므로 유효한 HTML이어야 합니다. 여기에는 <스타일> 태그 내부의 인라인 CSS 또는 <스크립트> 태그 내부의 인라인 JS가 포함됩니다. JS 또는 CSS 파일을 업로드할 수도 있습니다.

PHP와 같은 서버 측 언어는 지원하지 않습니다. 사용자 정의 PHP 코드를 추가하려면 플러그인을 사용하는 것이 좋습니다 코드 스니펫.

사전 로드

Perfmatters, 구성 가이드

사전 로드에서 첫 번째 옵션인 '인스턴트 페이지'는 서점 에서 instant.page 를 호출하여 사이트에 로컬로 2KB 미만의 작은 JS 파일(인스턴트페이지.js)을 로드하며, 데스크톱 버전에서는 사용자가 링크 또는 이미지에 마우스를 가져갈 때 URL을 미리 로드하는 데 사용됩니다. 모바일에서는 사용자가 화면에서 링크를 탭하기 시작한 후 링크를 놓기 전에 URL이 미리 로드됩니다.

65밀리초가 지나면 백그라운드에서 URL 프리로드가 자동으로 시작됩니다.

이 도구는 "즉시 클릭" 의 라이트스피드와 "링크 미리 로드" 따라서 이 두 플러그인 중 하나에서 이 옵션을 사용하는 경우 Perfmatters를 사용하려면 해당 옵션을 비활성화해야 합니다.

제 경우에는 Litespeed의 동등한 옵션보다 다소 더 잘 작동했지만 경우에 따라 서버 부하가 증가 할 수 있습니다.

자바스크립트 및 CSS 옵션과 마찬가지로 사전 로딩 및 사전 연결 사용은 다양한 테스트에 따라 필요에 따라 사용해야 합니다.

Perfmatters, 구성 가이드

중요한 이미지(폴드 위 이미지)의 사전 로딩은 아직 베타 버전인 옵션으로, 코어 웹 바이탈에서 큰 콘텐츠(LCP)를 페인팅하는 시간을 줄이는 데 도움이 될 수 있습니다.

이러한 이미지는 일반적으로 로고, 글의 추천 이미지, 랜딩 페이지의 메인 이미지 등과 같은 이미지입니다. 미리 로드되면 폭포의 상단으로 이동하여 브라우저에 우선순위가 있으므로 즉시 로드해야 함을 알립니다.

0, 아무것도 미리 로드하지 않음(기본 옵션), 5개의 이미지 중에서 선택할 수 있습니다. 퍼매터 추천 Chrome에는 폭포 상단에 표시되는 미리 로드된 이미지가 두 개로 제한되어 있으므로 최대 두 개 또는 세 개를 선택하세요.

지연 로딩

Perfmatters, 구성 가이드

워드프레스에서 2020년에 출시된 버전 5.4부터 이미 기본적으로 포함된 또 다른 성능 관련 클래식입니다.

제 경우에는 라이트스피드 옵션 테스트에서 약간 더 나은 결과를 얻었지만 여전히 Perfmatters는 정말 잘 작동하고 배경 이미지의 CSS에도 적용합니다.

Fonts

Perfmatters, 구성 가이드

또 다른 좋은 점이 있습니다. 1.7.4 버전에 추가된 이 옵션은 Perfmatters, 은 2022년 6월 7일에 출시되었습니다. 몇 번의 클릭만으로 로컬에서 Google 글꼴을 호스팅하고 업로드할 수 있습니다.

글꼴을 로컬에서 호스팅하면 글꼴을 완전히 제어할 수 있고, 모든 요청을 제거하여 로딩 시간을 단축할 수 있으며, 글꼴 제공 방법도 결정할 수 있다는 장점이 있습니다.

이 기능은 블로그에 존재하는 모든 Google 글꼴 참조를 자동으로 찾아 fonts.google.com에서 해당 글꼴을 다운로드한 다음 서버의 로컬 디렉터리(/wp-content/cache/perfmatters/your-domain.com/fonts/)에 호스팅합니다.

이 다른 게시물에서 에 더 자세히 설명되어 있습니다.

CDN

Perfmatters, 구성 가이드

여기에는 특별한 것이 없으며 언급할 것이 거의 없습니다. 사용하는 CDN을 추가하는 데 항상 유용한 도구입니다. 사용 방법QUIC.CLOUD, 아직 필요하지 않았습니다.

Analytics

Perfmatters, 구성 가이드

지금은 이 기능을 사용하지 않지만 마토모로 전환 그리고 애널리틱스 스크립트 관리를 내 플러그인 쿠키 동의 관리 시스템은 RGPD/CCPA를 위한 쿠키 동의 관리 시스템도 올바르게 관리하지만, 예전에 사용한 적이 있기 때문에 Perfmatters와 매우 잘 작동한다는 것을 알고 있습니다.

여기에서 Google 애널리틱스 스크립트를 로컬로 호스팅할 수 있습니다. 이렇게 하면 추가 DNS 조회를 줄이고 스크립트의 '브라우저 캐시 활용' 문제를 해결하여 사이트 속도를 높일 수 있습니다.

에 따르면 Perfmatters, 아이러니하게도 구글의 자체 스크립트는 캐싱에 대한 경고를 표시하지만, 이는 HTTP 캐시 헤더 만료가 매우 짧기 때문입니다. 직접 호스팅하는 경우 자체 CDN 또는 서버의 HTTP 캐시 헤더가 자동으로 적용됩니다. 즉, 스크립트 캐싱을 완전히 제어할 수 있습니다.

또한 다음과 같이 경고합니다 이 도구 는 Google에서 공식적으로 지원하지는 않지만 수년 동안 문제 없이 사용되어 왔습니다.

Google 애널리틱스를 로컬에서 호스팅하고 자체 CDN 또는 서버에서 스크립트를 제공하면 단일 HTTP/2 연결을 활용할 수 있습니다.

이 게시물에는 일부 제휴사 링크가 포함되어 있습니다.

Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting