WordPress에서 사용하지 않는 CSS 및 JS를 제거하는 방법(매우 쉬움)

웹사이트에 사용되지 않는 CSS와 JS가 많으면 웹사이트 로드 시간이 단축될 수 있습니다. 웹사이트를 다음 방법으로 실행하는 경우 속도 테스트 도구 등 Google PageSpeed ​​Insight, 사용되지 않는 CSS를 제거하라는 경고가 표시될 수 있습니다.

다행히도, 그렇게 하는 매우 쉬운 방법이 있습니다. WordPress 사이트에서 사용하지 않는 CSS와 JS를 제거하는 데 특별한 기술 지식이 필요하지 않습니다.

이는 다음과 같은 놀라운 플러그인 때문입니다. 자산 정리: 페이지 속도 부스터. 이 플러그인을 사용하면 사용하지 않는 CSS를 제거하는 것이 몇 개의 버튼을 클릭하는 것만큼 쉽습니다. 또는 1년에 몇 달러를 쓰는 것이 불편하지 않다면 WP Rocket, 사용되지 않는 CSS 제거 버튼이 있는데, 이를 활성화하면 플러그인이 사용되지 않는 모든 CSS를 자동으로 제거합니다.

체크 아웃 : 최고의 7개 관리형 Google Cloud WordPress 호스팅

사용되지 않는 CSS란 무엇인가요?

사용되지 않는 CSS는 페이지에 있지만 대부분 페이지를 로드하는 데 필요하지 않은 CSS 파일입니다. 방문자가 웹사이트를 열면 브라우저는 일반적으로 방문한 페이지의 모든 외부 스타일시트를 다운로드, 구문 분석 및 처리한 후에야 방문자에게 페이지 콘텐츠를 표시할 수 있습니다. 해당 페이지에 사용되지 않는 CSS가 있으면 브라우저는 시간을 낭비하게 됩니다.

이것의 전형적인 예는 사용되는 대부분의 연락처 양식 플러그인입니다. 이러한 플러그인은 주로 연락처 페이지에서만 사용되지만 웹사이트 전체에 CSS를 로드합니다. 사용되지 않는 홈페이지인 경우 CSS가 로드됩니다.

필요하지 않은 CSS가 너무 많아서 브라우저가 페이지를 읽고 표시하는 데 걸리는 시간을 지연시키고 있다면 문제가 될 수 있습니다.

플러그인 외에도 테마 개발자는 style.css에 대부분 필요하지 않은 많은 것을 작성합니다. 하지만 필요하든 아니든 사이트가 로드될 때마다 로드됩니다!

사용되지 않는 CSS 하나가 문제가 되지 않을 수도 있지만, 사용되지 않는 CSS가 많으면 웹사이트 로드 시간에 영향을 미칠 수 있습니다.

체크 아웃 : 가장 빠르고 최고의 WordPress 테마 10선 

사용되지 않는 CSS를 식별하는 방법

사용되지 않는 CSS와 JS를 찾는 것은 매우 쉬운 일입니다. 제가 추천할 두 가지 접근 방식이 있습니다.

하나는 Google PageSpeed ​​Insight를 통해 웹사이트를 분석하는 것입니다. 웹사이트에 사용되지 않는 CSS 제거 문제가 있는지 확인하세요. 클릭하면 해당 문제를 담당하는 사이트 구성 요소를 식별할 수 있습니다.

위에서 볼 수 있듯이 사용되지 않은 CSS가 기록된 사례가 하나 있습니다. 이것을 보면 플러그인과 사용되지 않은 CSS의 위치를 ​​볼 수 있습니다.

두 번째 옵션은 더 자세한 분석을 얻는 것입니다. Chrome Dev 도구를 사용하여 이를 달성할 수 있습니다.

크롬 브라우저에서 Chrome Dev 도구를 열고 커버리지로 이동합니다. 그런 다음 커버리지 영역 내에서 다시 로드 버튼을 클릭합니다. Google 개발자 도구에서 이 작업을 수행하는 방법에 대한 포괄적인 가이드.

다른 옵션은 다음을 사용하는 것입니다. 사용하지 않는 CSS 선택기를 스캔하기 위한 jitbit. 당신은 또한 사용할 수 있습니다 정화 CSS 사용하지 않는 CSS 찾기

사용하지 않는 CSS를 제거하는 방법

WordPress에서 사용하지 않는 CSS를 제거하려면 다음 단계를 따르세요.

1. Asset CleanUp 설치

플러그인으로 가서 새로 추가를 클릭합니다. 그런 다음 새 플러그인 추가 페이지의 검색 상자에 "Asset CleanUp"을 입력합니다. 플러그인을 설치하고 활성화합니다.

2. 플러그인 설정으로 이동

플러그인 설정에 액세스하려면 WordPress 대시보드에서 설정을 클릭한 다음 자산 정리를 클릭하세요.

3. 원치 않는 CSS 및 JS 언로드

플러그인 설정에서, 시작하기 전에 스트리핑 팻 탭에서 플러그인이 어떻게 작동하는지 알고 있어야 한다는 것을 수락해야 할 수도 있습니다.

CSS와 JS를 언로드하려면 CSS 및 JSS 관리자를 클릭하세요. 거기에서 필요 없는 CSS와 JS를 제거할 수 있습니다. 홈페이지만, 전체 사이트 또는 특정 URL만 제거할 수 있습니다. 게시물, 페이지 또는 카테고리도 제거할 수 있습니다.

예를 들어 연락처 페이지를 제외한 전체 사이트에서 모든 연락처 양식을 로드에서 언로드하는 것입니다.

시간을 내어 필요하지 않다고 생각하는 모든 CSS와 JS를 언로드하세요. 작업이 끝나면 사이트를 테스트하여 모든 것이 괜찮은지 확인하세요.

사용하지 않는 CSS WordPress 플러그인 제거

WordpPress에서 사용되지 않는 CSS를 제거하는 데 사용할 수 있는 몇 가지 플러그인은 다음과 같습니다.

1. 자산 정리: 페이지 속도 향상

자산 정리: 페이지 속도 부스터 초보자라도 WordPress에서 사용하지 않는 CSS와 JS를 쉽게 제거할 수 있습니다. 특정 페이지에 필요하지 않은 특정 CSS를 비활성화하기만 하면 됩니다.

개별 게시물에 대해서만 비활성화할 수도 있습니다. 프리미엄 버전에서는 플러그인으로 사용하지 않는 CSS/JS를 비활성화할 수 있습니다.

이 플러그인은 WordPress 속도를 높이기 위한 다른 많은 옵션이 포함된 완전한 성능 플러그인입니다. 사용하지 않는 CSS/JS를 제거하는 것은 그 일부에 불과합니다.

이 게시물에서는 이 플러그인을 사용하는 가이드를 소개합니다.

2. WP 로켓

WP Rocket 는 1위 WordPress 프리미엄 성능 플러그인입니다. 초보자라면, 즉 WordPress에 익숙하지 않거나 익숙하지 않다면 WP Rocket은 사용하지 않는 CSS를 제거하는 가장 쉬운 방법입니다.

플러그인을 구매해야 합니다. 구매가 완료되면 계정에서 다운로드하거나 이메일에서 다운로드 링크를 확인할 수 있습니다.

대시보드>플러그인>새로 추가>업로드를 통해 플러그인을 설치하세요.

WP Rocket 설정으로 이동한 다음 "파일 최적화" 탭을 클릭합니다. 그런 다음 아래로 스크롤하면 "사용하지 않는 CSS 제거"가 표시되고 상자를 체크하고 저장한 다음 캐시를 지웁니다.

3. Perfmatters

Perfmatters Brian Jackson과 그의 형제 Brett Jackson이 개발한 프리미엄 플러그인입니다. 이 플러그인은 사용하지 않는 CSS를 매우 쉽게 제거하는 데 도움이 될 수 있습니다.

먼저 플러그인을 구매해야 합니다. 그런 다음 설치합니다. 라이선스를 활성화합니다. 설정으로 이동하면 스크립트 관리자를 켭니다.

웹사이트의 어떤 페이지나 게시물로 가세요. 대시보드 메뉴에 스크립트 관리자 아이콘이 보일 겁니다. 클릭하세요. 사용하지 않는 CSS와 JS를 페이지나 전역에서 제거할 수 있습니다.

이 플러그인은 성능 플러그인으로, WordPress 속도를 높이기 위한 다른 많은 옵션과 함께 제공됩니다. 사용하지 않는 CSS/JS를 제거하는 것도 그 일부입니다.

4. CSS JS 관리자

CSS JS 관리자 모바일이나 데스크톱에서 CSS나 JS를 특별히 제거할 수 있습니다. 달성하고자 하는 바에 따라 다릅니다.

이 플러그인은 CSS나 JS 파일의 로딩을 지연시킬 수도 있습니다.

결론

사용하지 않는 CSS와 JS가 많다면 속도와 성능 점수가 크게 향상되는 것을 느낄 수 있습니다.

사용하지 않는 CSS를 모두 제거하는 것은 불가능할 수 있지만 최소한으로 줄일 수는 있습니다. 저는 Asset CleanUp을 사용하여 사용하지 않는 CSS를 제거합니다. 타겟트렌드.

기억하세요, 최적화는 하지만 사이트를 다음과 같이 보이게 하려는 경우가 아니면 너무 집착하지 마세요. 세계에서 가장 빠른 웹사이트.

또한 읽기 :

WordPress에서 렌더링 차단 리소스를 제거하는 방법

WordPress를 매우 빠르게 만드는 방법

블로그로 트래픽을 유도하는 방법