WordPress 사이트에서 유료 WordPress 테마 또는 공식 WordPress 테마 저장소의 인기 테마를 사용하는 경우 테마가 다양한 사용 사례에 맞게 개발될 가능성이 있습니다. 그리고 테마에서 사용할 수 있는 모든 기능 중 일부만 사용하고 있을 수 있습니다.
이 경우 사이트는 사이트 페이지의 스타일을 지정하는 데 필요하지 않은 사용되지 않은 CSS를 많이 로드하고 있습니다. 예를 들어 사용 중인 WordPress 테마에는 WooCommerce 페이지에도 스타일이 있을 수 있지만 WordPress 사이트에서 블로그만 실행하는 경우 사이트의 WooCommerce 페이지에 포함된 CSS를 사용하지 않고 있으므로 사용하지 않는 서비스를 제공합니다. 사용자에게 CSS를 제공합니다.
Google Pagespeed 도구에서 웹사이트를 테스트했다면 사이트에 사용되지 않은 CSS 문제가 있다는 것을 이미 알고 있을 것입니다. 이 가이드에서는 먼저 사용하지 않는 CSS를 확인한 다음 무료 도구를 사용하여 WordPress 사이트에서 사용하지 않는 CSS를 제거하는 방법을 보여줍니다.
사용하지 않은 CSS를 확인하는 방법
Google Chrome DevTools(컨텍스트 메뉴에서 "검사" 옵션을 클릭할 때 표시되는 것)에는 소스 탭 내에 적용 범위 기능이 있습니다. Coverage 옵션을 사용하여 웹사이트에서 로드하는 사용하지 않는 CSS 및 JS를 찾을 수 있습니다.
- 데스크톱의 Chrome에서 웹사이트를 엽니다.
- 사이트의 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 검사 컨텍스트 메뉴에서.
- 클릭 출처 탭, 누르기 Ctrl + Shift + P 명령 창을 열려면 다음을 입력하십시오. 적용 범위 그리고 선택 범위 계측 시작 및 페이지 새로고침 사용 가능한 명령에서.
- 적용 범위 탭에서 URL 필터 필드에 사이트의 루트 도메인을 입력하여 내부 CSS/JS 파일만 표시합니다.
└ 확인 사용하지 않은 바이트 열에서 테마의 CSS/JS 파일에 로드되는 데이터의 비율을 확인합니다.
- CSS 파일을 클릭하면 사이트에서 로드한 미사용 CSS(빨간색 막대로 표시)를 볼 수 있습니다. 현재 페이지에서 사용 중인 CSS는 녹색 막대로 표시됩니다.
웹사이트에 로드되고 있는 사용하지 않는 CSS를 모두 분석했다면 이제 제거해야 합니다. 웹 페이지에서 사용하지 않는 CSS를 제거하는 데 사용할 수 있는 몇 가지 무료 도구가 있습니다. 아래는 내가 테스트하고 내 프로젝트에서 사용한 인기 있는 도구 중 하나입니다.
PurifyCSS Online을 사용하여 사용하지 않는 CSS 제거
일반적으로 WordPress에서 거의 모든 플러그인을 찾을 수 있습니다. 그러나 불행히도 사용하지 않는 CSS를 제거하는 데 사용할 수 있는 플러그인은 하나도 없습니다. 따라서 사이트에서 사용하지 않는 CSS를 제거하기 위해 wordpress와 관련되지 않은 수동 도구를 사용할 것입니다.
PurifyCSS는 가장 친숙한 비 개발자 도구 사용하지 않는 CSS를 처리하는 방법을 찾을 수 있습니다. 이 도구에는 사용자가 웹사이트 URL 또는 HTML 및 CSS 코드를 제공할 수 있는 간단한 UI가 있습니다. WordPress의 경우 URL 옵션을 사용하고 사이트의 모든 종류의 페이지에 대한 링크를 제공하여 도구가 CSS를 모두 가져오고 사용하지 않는 CSS를 최적화할 수 있도록 합니다.
도구에 넣어야 하는 페이지의 빠른 목록은 다음과 같습니다.
- 홈페이지 URL
- 사이트의 각 카테고리에서 여러 게시물 페이지 URL
└ 모든 게시물 요소에 CSS가 포함되도록 하기 위함입니다.
- 연락처, 정보, 개인 정보 및 사이트에 있을 수 있는 모든 종류의 다양한 페이지.
- 아카이브 페이지, 검색 페이지, 작성자 페이지
- 사용자 정의 게시물 유형 페이지
핫 팁: 일반적으로 사용하는 Table, Image Gallery, Code, Pre, Ordered Lists, Unordered Lists, Forms, Tabs, Accordions, Gutenberg Blocks와 같이 사용 중이거나 앞으로 사용할 모든 테마 요소로 '기능' 게시물/페이지를 만듭니다. , 등.
PurifyCSS Online 도구에서 이 '기능' 게시 URL을 사용하여 일반적으로 사용되는 요소에 대한 CSS가 포함되도록 합니다.
을 치다 CSS 정리 버튼을 클릭하면 사이트의 모든 관련 URL 유형을 PurifyCSS Online 도구에 추가할 수 있습니다.
도구에서 생성된 새 CSS를 복사하여 사이트에서 사용합니다. 당신이 원본 style.css 백업 및 PurifyCSS에 의해 생성된 새 CSS를 교체하기 전에 테마의 다른 CSS 파일.
팁: 내장된 WordPress 테마 편집기를 사용하여 테마의 CSS 파일을 편집하거나 FTP/SFTP 프로그램을 사용하여 서버에 연결하고 메모장 편집기를 사용하여 편안하게 파일을 편집할 수 있습니다.