Perfmatters 1월 19일 1.8.5 버전에 사용하지 않는 CSS를 제거하는 새로운 기능이 추가되었습니다. 블로그의 성능을 향상시키고 싶다면 필수품이 된 이 플러그인을 계속 추천하고 싶습니다.
의 경우 25 USD 1년이라는 짧은 기간 동안 계속해서 개선 사항을 추가하는 강력한 도구를 제공합니다. 다음은 그 중 하나입니다 구성 가이드.
이미 워드프레스 5.8과 5.9-RC에서 테스트했는데 지금까지 아무 문제도 발생하지 않았습니다. 이미 사용하지 않는 CSS는 Script Manager 이 플러그인의 경우 이 옵션을 활성화하는 것만으로도 최소 몇 개의 요청과 몇 Kb를 절약할 수 있습니다.
사용하지 않는 CSS를 제거하는 이유는 무엇인가요?
의 일반적인 경고는 PageSpeed 플러그인이나 템플릿에 의해 로드된 CSS가 필요하지 않거나 특정 페이지에서 사용되지 않는 경우 '사용되지 않는 CSS 제거' 또는 '사용되지 않는 CSS 콘텐츠 줄이기'가 표시되는 경우가 많습니다.
개발자는 일반적으로 스타일시트를 사용 중인 경우에만 대기열에 추가합니다. 그러나 필요하지 않은 스타일도 추가되는 경우가 많습니다. 이로 인해 사용하지 않는 CSS가 많아져 로딩 속도가 느려집니다.
때때로 "렌더링을 차단하는 리소스 제거" 경고가 트리거될 수도 있습니다.
사용하지 않는 CSS를 제거하면 페이지 속도 점수를 높이는 것 외에도 페이지 로딩 시작 후 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지 걸리는 시간(FCP), 웹 페이지의 주요 콘텐츠가 다운로드되어 사용자에게 완전히 준비되는 데 걸리는 시간(LCP), 페이지 로딩 시작 후 완전한 인터랙티브 상태가 될 때까지 걸리는 시간(TTI)을 줄이는 데 큰 영향을 미칩니다. 요컨대, 웹 페이지의 주요 콘텐츠가 다운로드되고 페이지가 완전히 상호 작용할 때까지 걸리는 시간은 Core Web Vitals.
사용하지 않는 CSS는 어떻게 찾나요?
사용하지 않는 CSS를 찾는 가장 쉬운 방법은 PageSpeed로 URL을 테스트하는 것입니다. 사용되지 않는 CSS가 있는 경우 경고가 표시되며, 이 경고는 Google에서 경고할 만큼 중요하다고 생각하는 임계값을 초과하는 경우에만 트리거되므로 인지된 로딩 속도(실제 체감 속도)가 좋다면 너무 신경 쓰지 마세요.
사용하지 않는 CSS를 찾는 다른 방법은 Chrome 개발자 도구를 사용하는 것입니다. Chrome에서 인스펙터를 열고(Ctrl+Shift-I) Shitft+Control+P를 누른 다음 "범위"를 입력하면 CSS와 JS 모두에서 사용되지 않은 바이트를 찾을 수 있습니다. 빨간색은 미사용, 파란색/녹색은 사용됨을 나타냅니다.
여기에서 각 CSS가 무엇을 하는지, 어떤 기능을 하는지, 측정 중인 페이지에서 제거하거나 비활성화할 수 있는지 등을 파악한 후 특정 플러그인을 다른 가벼운 플러그인으로 교체하거나, 템플릿을 검토하거나 변경을 고려하거나, 스크립트 관리자를 사용하여 JS 및 CSS를 선택적으로 비활성화하는 등 몇 가지 옵션을 사용할 수 있습니다.
PageSpeed 경고를 제거하는 가장 쉬운 방법은 Perfmatters에서 "사용하지 않는 CSS 제거" 기능을 활성화하면 모든 작업을 자동으로 수행합니다. 다양한 템플릿과 구성으로 수백 개의 URL에서 이 기능을 테스트하고 그 결과를 보고했다고 합니다:
FCP 평균 15.20% 감소.
LCP 평균 19.66% 감소.
TTI 평균 14.95% 감소.
활성화하기 전
이 옵션을 활성화하기 전에 Perfmatters에서 구성된 기존 CSS 사전 로딩을 제거할 것을 권장합니다(로컬 스타일시트 제외) Google 소스) 를 사용하고 CSS를 결합하지 않습니다.
CSS 병합은 HTTP/2 이후 더 이상 사용되지 않는 최적화 기법입니다. 경우에 따라 CSS 병합이 성능에 해가 될 수도 있습니다. 다시 한 번 강조하지만 모든 페이지는 구성에 따라 다르게 작동하므로 오류 없는 최상의 결과를 찾을 때까지 테스트하고 관찰하는 것이 가장 좋습니다.
또한 사용 중인 다른 성능 또는 캐싱 플러그인의 구성이 동일한 기능을 사용하도록 설정하여 서로 충돌하거나 재정의될 수 있음을 알고 있어야 합니다.
활성화되면 두 가지 설정이 있는 두 가지 옵션이 표시됩니다:
1- 사용된 CSS 방법
1.1- 인라인(기본값): 사용된 CSS가 사이트 소스 코드의 스크롤 위쪽에 정렬되어 표시됩니다. 이 옵션은 페이지 속도 점수에 가장 적합합니다.
1.2 -파일: 사용된 CSS가 별도의 CSS 스타일시트(파일)에 배치됩니다. 이 옵션은 반복 방문 시 파일을 캐시할 수 있고 HTML 문서의 크기를 줄일 수 있으므로 사용자와 체감 성능에 가장 적합합니다.
2 스타일 시트의 동작
2.1- 지연(기본값 및 권장 사항).
이전에는 CSS가 인라인이었으며 모든 CSS 스타일시트(사용되지 않는 CSS)는 사용자 상호 작용과 함께 지연되어 로드되었습니다.
2.2- 비동기
사용한 CSS는 인라인으로 변환되고 모든 CSS 스타일시트(사용하지 않은 CSS)는 비동기적으로 로드됩니다. 이 방법은 페이지가 로드되는 동안 스타일시트가 비동기적으로 실행되므로 팝인을 방지하는 데 도움이 될 수 있습니다. 이 방법을 사용하면 이전 지연 동작보다 LCP/FCP가 약간 높아집니다.
2.3- 제거
사용한 CSS는 인라인이 되고 모든 원본 CSS 스타일시트(사용하지 않은 CSS)는 제거됩니다. 이 방법은 가장 적극적인 방법이지만 예외를 추가해야 할 가능성이 높습니다. 고급 사용자에게만 권장됩니다.
활성화되면 페이지와 항목이 다르게 작동합니다.
페이지에는 고유한 CSS가 많은 경향이 있으므로 처음 방문 시 페이지별로 사용된 CSS가 별도로 생성되어 인라인이 됩니다.
그러나 엔트리는 많은 CSS를 공유하는 경향이 있으므로 사용된 CSS는 첫 번째 방문 시 한 번만 생성되어 인라인이 됩니다. 항목과 페이지의 차이점은 사용된 CSS의 생성이 한 번만 이루어진다는 점입니다.페이지에는 고유한 CSS가 많은 경향이 있으므로 처음 방문 시 페이지별로 사용된 CSS가 별도로 생성되어 인라인이 됩니다.그러나 엔트리는 많은 CSS를 공유하는 경향이 있으므로 사용된 CSS는 첫 번째 방문 시 한 번만 생성되어 인라인이 됩니다. 항목과 페이지의 차이점은 사용된 CSS의 생성이 한 번만 이루어진다는 점입니다.
Perfmatters에서 생성된 모든 사용된 CSS는 이 경로에 로컬로 저장됩니다:
/wp-content/cache/perfmatters/tudominio.com/css/
페이지, 글, 카테고리, 태그, 검색, 홈페이지 또는 404에 대해 Perfmatters에서 생성한 CSS의 모습은 다음과 같습니다.
"제외된 스타일시트" 상자에서 전체 소스 URL(loquesea.css)을 추가하거나 소스 URL의 한 부분을 추가하여 "사용하지 않는 CSS 제거" 기능에서 특정 스타일시트를 제외할 수 있습니다. 형식: 한 줄당 하나씩.
다음 "제외된 선택자" 상자에서 요소 ID, 클래스 이름 등(#id, .class)을 추가하여 "사용하지 않는 CSS 제거" 기능에서 특정 CSS(선택자)를 제외할 수 있습니다. 형식: 한 줄당 하나씩.
어느 시점에서 사용된 CSS를 삭제해야 할 가능성이 높습니다. 예를 들어 페이지를 다시 디자인한 후 또는 새 요소를 추가한 후입니다. 생성된 CSS를 삭제하고 다음 방문 후에 다시 생성하려면 '사용된 CSS 지우기' 하단에 있는 옵션을 클릭하기만 하면 됩니다.
개별 글, 페이지 또는 사용자 정의 글 유형은 사용하지 않는 CSS 제거 기능 사용에서 제외할 수 있습니다. 편집기의 오른쪽에서 "사용되지 않는 CSS"를 선택 취소합니다.
이렇게 하면 전체 페이지가 제외되며 사이트의 나머지 부분보다 문제가 더 많을 수 있는 카트, 결제 또는 연락처 페이지 등에 유용할 수 있습니다.
또한 perfmatters_remove_unused_css 필터를 사용하여 사이트에서 사용하지 않는 CSS가 제거되는 위치를 변경할 수도 있습니다. 이 예에서는 페이지에서만 사용하지 않는 CSS를 비활성화합니다.
add_filter('perfmatters_remove_unused_css', function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
