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

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

고맙게도 아주 쉬운 방법이 있습니다. WordPress 사이트에서 사용하지 않는 CSS 및 JS를 제거하기 위해 특별한 기술 지식이 필요하지 않습니다.

이것은 Asset CleanUp: Page Speed ​​Booster로 알려진 놀라운 플러그인 때문입니다. 이 플러그인을 사용하면 사용하지 않는 CSS를 제거하는 것이 몇 개의 버튼을 클릭하는 것만큼 쉽습니다. 또는 WP Rocket을 사용하여 1년에 몇 달러를 지출하는 것이 마음에 들지 않으면 사용하지 않는 CSS 버튼이 제거되었습니다. 이 버튼을 활성화하기만 하면 플러그인이 사용하지 않는 모든 CSS를 자동으로 제거합니다.

체크아웃: 상위 7개 관리형 Google Cloud WordPress 호스팅

사용하지 않는 CSS란 무엇입니까?

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

이것의 고전적인 예는 사용되는 대부분의 문의 양식 플러그인입니다. 이러한 플러그인은 대부분 Contact us 페이지에서만 사용되지만 웹사이트 전체에 CSS를 로드합니다. 사용하지 않는 홈페이지여도 CSS가 로드됩니다.

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

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

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

확인: 가장 빠르고 최고의 WordPress 테마 상위 10개

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

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

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

위에서 보면 사용하지 않은 CSS가 기록된 경우가 1개 있음을 알 수 있습니다. 이것을 보면 사용하지 않는 CSS의 플러그인과 위치를 알 수 있습니다.

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

Chrome 브라우저에서 Chrome Dev 도구를 연 다음 적용 범위로 이동합니다. 그런 다음 적용 범위 내에서 다시 로드 버튼을 클릭합니다. 이 작업을 수행하는 방법에 대한 포괄적인 가이드는 Google 개발자 도구에서 찾을 수 있습니다.

다른 옵션은 jitbit를 사용하여 사용하지 않는 CSS 선택기를 검색하는 것입니다. PurifyCSS를 사용하여 사용하지 않는 CSS를 찾을 수도 있습니다.

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

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

1. 자산 정리 설치

플러그인으로 이동한 다음 새로 추가로 이동합니다. 그런 다음 새 플러그인 추가 페이지의 검색 상자에 "자산 정리"를 입력합니다. 플러그인을 설치하고 활성화합니다.

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

플러그인 설정에 액세스하려면 WordPress dasboard에서 설정을 클릭한 다음 자산 정리를 클릭하십시오.

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

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

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

예를 들어 문의 페이지를 제외한 전체 사이트에 대한 로드에서 문의 양식을 언로드하는 것입니다.

시간을 갖고 필요하지 않은 모든 CSS와 JS를 언로드하십시오. 모든 것이 정상인지 확인하기 위해 완료한 후 사이트를 테스트하십시오.

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

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

1. 자산 정리: 페이지 속도 부스터

자산 정리: Page Speed ​​Booster를 사용하면 초보자도 사용하지 않는 CSS 및 JSin WordPress를 쉽게 제거할 수 있습니다. 특정 페이지에 필요하지 않은 특정 CSS를 비활성화하기만 하면 됩니다.

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

이 플러그인은 WordPress 속도를 높이는 다른 많은 옵션이 있는 완전한 성능 플러그인입니다. 사용하지 않는 CSS/JS를 제거하는 것은 그 일부일 뿐입니다.

이 게시물에서는 가이드가 있는 이 플러그인을 사용했습니다.

2. WP 로켓

WP Rocket은 최고의 WordPress 프리미엄 성능 플러그인입니다. 당신이 멍청한 사람이라면 WordPress에 익숙하지 않거나 편안하지 않다면 WP Rocket이 사용하지 않는 CSS를 제거하는 가장 쉬운 방법입니다.

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

대시보드>플러그인>새로 추가>업로드를 통해 플러그인을 설치합니다.

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

3. 수행자

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

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

웹사이트의 아무 페이지나 게시물로 이동하면 대시보드 메뉴에 스크립트 관리자 아이콘이 표시되고 클릭하면 됩니다. 사용하지 않는 CSS 및 JS를 페이지에서 또는 전체적으로 제거할 수 있습니다.

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

4. CSS JS 관리자

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

이 플러그인은 CSS 또는 JS 파일의 로드를 연기할 수도 있습니다.

결론

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

사용하지 않는 CSS를 모두 제거하는 것은 불가능할 수 있지만 최소한으로 가져올 수는 있습니다. TargetTrend에 사용하지 않는 CSS를 제거하기 위해 Asset CleanUp을 사용합니다.

사이트를 세계에서 가장 빠른 웹사이트처럼 보이게 하고 싶지 않다면 최적화하되 너무 집착하지 마십시오.

또한 읽어보십시오:

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

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

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