WordPress에서 사용하지 않는 CSS를 제거하는 방법(2가지 쉬운 방법)

설치하는 모든 테마와 플러그인은 WordPress 사이트에 불필요한 CSS를 추가할 수 있습니다. 이로 인해 로딩 시간이 느려질 수 있습니다. 일반적으로 이러한 스타일시트는 페이지의 콘텐츠를 렌더링하는 데 필요하지 않지만 여전히 코드에 있습니다. 따라서 WordPress에서 사용하지 않는 CSS를 제거하는 쉬운 방법을 찾고 있을 수 있습니다.

다행히도 프로세스는 생각보다 간단합니다. 사이트에서 불필요한 코드를 식별한 후에는 플러그인을 사용하여 코드를 삭제하고 사이트 속도를 개선할 수 있습니다.

사용하지 않는 CSS를 제거해야 하는 이유

미사용 CSS는 페이지를 로드하는 데 실제로 필요하지 않은 코드입니다. WordPress의 경우 일반적으로 사이트에 설치하는 테마 및 플러그인에서 찾을 수 있습니다.

그런 다음 사용자가 웹 사이트에 액세스하면 브라우저는 여전히 이 사용되지 않는 CSS를 다운로드하고 렌더링해야 합니다. 이로 인해 로딩 시간이 길어져 사이트의 전반적인 성능에 부정적인 영향을 미칠 수 있습니다.

실제로 CSS를 사용하지 않으면 Core Web Vitals에서 LCP(Largest Contentful Paint) 점수가 낮아질 수 있습니다.

가장 큰 콘텐츠 페인트는 페이지가 화면에서 가장 큰 항목을 완전히 로드하는 데 걸리는 시간을 측정하는 메트릭입니다. 이것은 일반적으로 영웅 이미지와 같은 시각적 요소입니다.

간단히 말해서, 사용하지 않는 CSS 코드는 페이지에 부풀림을 추가합니다. 결과적으로 이미지와 같은 콘텐츠를 로드하는 데 시간이 더 오래 걸립니다.

사이트가 느리면 잠재적인 전환을 놓치고 있을 수 있습니다. 또한 검색 결과에서 순위가 ​​낮아질 수 있습니다. 따라서 사용하지 않는 CSS를 제거하고 사이트 속도를 높이기 위한 적절한 조치를 취하는 것이 중요합니다.

사이트에서 사용하지 않는 CSS를 식별하는 방법

좋은 소식은 사이트에서 사용하지 않는 CSS를 식별하는 것이 쉽다는 것입니다. PageSpeed ​​Insights에서 성능 테스트를 실행하여 시작할 수 있습니다. URL을 입력하고 분석을 클릭하기만 하면 됩니다.

테스트가 준비되면 기회 섹션으로 이동하여 사용하지 않는 CSS 줄이기 탭을 찾습니다. 클릭하면 이 코드에 대한 자세한 정보가 표시됩니다.

또한 로딩 시간에 영향을 미치는 CSS 파일 및 플러그인도 표시됩니다.

사용하지 않는 CSS 제거 에 대한 주황색 사각형은 "개선 필요"를 의미하고 빨간색 삼각형은 매우 낮은 점수를 나타냅니다. 테스트 결과에서 이 섹션을 볼 수 없다면 사이트( 또는 적어도 테스트한 특정 페이지) 에 심각한 CSS 문제가 없다는 의미입니다. ).

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

PageSpeed ​​Insights가 사이트에서 사용하지 않는 CSS를 표시한 경우 사이트 성능을 최적화하기 위해 이를 제거하는 것이 좋습니다.

당신을 위해 모든 무거운 작업을 수행하는 WordPress 플러그인을 사용하여 이 작업을 수행할 수 있습니다. 또는 일부 수작업이 필요한 다른 플러그인을 사용할 수 있지만 보상으로 프로세스를 더 잘 제어할 수 있습니다. 이 섹션에서는 더 쉬운 방법부터 시작하여 두 가지 방법을 모두 안내합니다.

방법 1: Debloat로 사용하지 않는 CSS 제거

논의한 바와 같이 "사용하지 않는" CSS는 필수가 아닙니다. 따라서 이러한 파일을 삭제해도 웹 페이지 디자인에는 영향을 미치지 않습니다.

그러나 실수로 잘못된 코드를 제거하면 사이트가 손상될 수 있습니다. 따라서 코딩에 익숙하지 않은 경우 플러그인을 사용하여 사용하지 않는 CSS를 제거하고 싶을 것입니다.

이를 염두에 두고 사용하지 않는 CSS 코드를 제거하기 위해 Debloat를 권장합니다. 렌더링 차단 리소스 지연, 코드 축소 등을 통해 Core Web Vitals를 개선하는 데 도움이 되는 무료 최적화 플러그인입니다.

시작하려면 사이트에 플러그인을 설치하고 활성화해야 합니다. 그런 다음 설정 > Debloat: 최적화 로 이동하여 CSS 최적화 탭을 선택합니다.

사용하지 않는 CSS를 제거하려는 경우 캐싱 플러그인을 사용하라는 메시지가 상단에 표시됩니다. 관심이 있는 경우 W3 Total Cache 또는 WP-Optimize와 같은 무료 도구를 사용해 볼 수 있습니다.

그런 다음 페이지 하단으로 스크롤하여 사용하지 않는 CSS 제거 확인란을 선택합니다.

그러면 몇 가지 다른 옵션이 표시됩니다. 그러나 코드 처리에 익숙하지 않더라도 몇 가지 설정만 선택하면 되므로 걱정하지 마십시오.

Enable for Plugins CSS 및 Enable for Theme CSS 상자를 선택하고 싶을 것입니다.

그런 다음 아래로 스크롤하여 CSS 제거를 켜고 모든 페이지 상자를 선택합니다.

준비가 되면 변경 사항 저장 을 클릭합니다. 그러면 플러그인이 플러그인 및 테마 파일에서 사용하지 않는 CSS를 제거합니다.

이 방법은 100% 정확하지 않으며 일부 사용하지 않는 코드는 균열을 통해 떨어질 수 있습니다. 그래도 이러한 설정을 활성화한 후 다른 속도 테스트를 실행하면 사이트 성능이 크게 향상되는 것을 볼 수 있습니다.

더 강력한 플러그인을 사용하려면 WP Rocket을 살펴보는 것이 좋습니다. 이 프리미엄 도구에는 페이지 및 브라우저 캐싱, GZIP 압축, 코드 축소 및 지연 로딩을 비롯한 최적화 기능이 포함되어 있습니다. 사이트에서 사용하지 않는 CSS를 제거할 수도 있습니다.

방법 2: 자산 정리로 사용하지 않는 CSS 제거

첫 번째 방법에서는 사이트에서 불필요한 코드를 자동으로 제거하는 플러그인을 사용했습니다. 이 방법은 몇 가지 설정만 활성화하면 되기 때문에 매우 편리합니다.

그러나 어떤 파일을 제거하고 어떤 파일을 보관할지에 대해 더 많은 제어를 제공하는 방법을 찾고 있을 수 있습니다. 이 경우 자산 정리가 더 나은 선택일 수 있습니다. 이 플러그인을 사용하면 페이지별로 원치 않는 CSS 파일을 선택하고 제거할 수 있습니다.

이 접근 방식은 약간의 시간이 소요될 수 있으며 약간의 기술 지식이 필요할 수 있습니다. 또한 변경 사항이 사이트의 디자인과 기능에 영향을 미치지 않았는지 확인하기 위해 모든 페이지를 지속적으로 테스트하고 새로 고쳐야 합니다.

1단계: Asset CleanUp 플러그인 설치 및 테스트 모드 활성화

여전히 이 방법을 시도하고 싶다면 사이트에 Asset CleanUp을 설치하십시오. 그런 다음 자산 정리 > 설정 으로 이동합니다. 그런 다음 사이드 메뉴에서 테스트 모드를 선택하고 토글 스위치를 사용하여 이 기능을 활성화합니다.

이렇게 하면 사이트에 대한 모든 변경 사항이 프런트 엔드의 사용자 경험에 영향을 미치지 않습니다. 안전한 환경에서 사용하지 않는 CSS 파일을 제거하고 모든 것이 제대로 작동하는지 확인한 후 테스트 모드를 비활성화할 수 있습니다.

2단계: 모든 페이지에서 사용하지 않는 CSS 파일 언로드

이제 CSS & JS 관리자 탭을 클릭합니다. 여기에서 홈페이지부터 시작하여 사이트에서 원치 않는 파일을 제거할 수 있습니다.

아래로 스크롤하면 이 페이지에 로드된 모든 파일 목록이 표시됩니다.

CSS 파일을 제거하려면 이 페이지에서 언로드 에 대한 토글 스위치를 사용하기만 하면 됩니다.

Asset CleanUp은 이 파일에 종속된 "하위" 파일이 있는지, 제거로 인해 영향을 받을 수 있는지 알려줍니다. 종속성 규칙 무시 확인란을 선택하고 이러한 파일을 유지하기 위해 로드된 "자식"을 유지할 수 있습니다.

제거할 CSS 파일이 확실하지 않은 경우 PageSpeed ​​Insights에서 결과를 참조할 수 있습니다. 사용하지 않는 CSS 줄이기 섹션 아래에 이러한 파일의 URL이 표시됩니다.

그런 다음 Asset CleanUp에서 찾을 수 있습니다. 페이지 탭으로 이동하면 사이트에서 특정 페이지를 조회하고 여기에 로드된 CSS 파일을 검토할 수 있습니다.

언로드할 파일을 선택한 후 이러한 변경 사항을 저장하려면 업데이트를 클릭해야 합니다.

3단계: 사이트 테스트

마지막으로 각 파일을 제거한 후 사이트를 테스트하여 제대로 작동하는지 확인하는 것이 좋습니다. 이러한 변경 사항을 보려면 WordPress 관리자 대시보드에 로그인해야 합니다. 방문자(즉, 로그아웃한 사용자)로 사이트에 액세스하면 테스트 모드가 활성화되어 있으므로 페이지에서 어떤 문제도 발견할 수 없습니다.

테스트 모드를 사용하는 동안에는 PageSpeed ​​Insights에서 어떤 개선 사항도 볼 수 없다는 점에 유의하는 것도 중요합니다. 결과에는 사용되지 않은 CSS 파일이 계속 표시됩니다.

제거된 파일이 사이트에 영향을 미치지 않았다고 확신하면 테스트 모드를 비활성화할 수 있습니다. 그런 다음 PageSpeed ​​Insights에서 속도 테스트를 실행합니다. 이 시점에서 삭제된 CSS 파일은 결과에 나타나지 않아야 합니다.

사용하지 않는 CSS를 제거하는 프리미엄 WordPress 플러그인

위의 두 도구는 모두 무료이지만 지불할 의향이 있다면 사용하지 않는 CSS를 제거하는 매우 간단한 WordPress 플러그인도 찾을 수 있습니다.

가장 좋은 두 가지 옵션은 WP Rocket($59부터)과 FlyingPress($60부터)입니다.

WP Rocket을 사용하면 전체 사이트를 스캔하고 페이지별로 사용하지 않는 CSS를 제거하는 원클릭 제거 사용하지 않는 CSS 기능을 사용할 수 있습니다.

FlyingPress는 또한 유사한 원클릭 미사용 CSS 제거 기능을 제공하며, 미사용 CSS를 보다 최적의 방법으로 로드하거나 완전히 제거할 수 있는 옵션이 있습니다.

두 도구 모두 자체 서버에서 사이트의 코드를 처리하는 데 의존하므로 이러한 간단한 페이지별 제거 접근 방식을 제공할 수 있습니다.

사용하지 않는 CSS를 줄이는 데 도움이 되는 몇 가지 추가 팁

사이트(또는 적어도 대부분)에서 사용하지 않는 CSS를 제거한 후에는 앞으로 불필요한 코드를 추가하지 않는 것이 좋습니다. 이와 관련하여 사이트를 원활하게 실행하기 위해 수행할 수 있는 몇 가지 작업이 있습니다.

먼저 가벼운 테마를 사용하고 있는지 확인해야 합니다. 일반적으로 경량 WordPress 테마는 빠른 WordPress 테마입니다. 간단히 말해서 테마는 최소한의 코드를 포함하고 Core Web Vitals에 최적화되어야 합니다.

예를 들어 Neve 테마는 속도와 성능을 우선시합니다. 실제로 기본 WordPress 설치에서 이 테마는 로드하는 데 1초도 걸리지 않으며 파일 크기는 28KB입니다.

마찬가지로 사이트에 대한 경량 플러그인을 선택하고 싶을 것입니다. 플러그인을 탐색할 때 경량 태그를 찾을 수 있습니다.

새 플러그인을 설치한 후 속도 테스트를 실행하는 것이 좋습니다. 이렇게 하면 사용하지 않는 CSS가 포함되어 있는지 확인할 수 있습니다.

또한 사이트의 플러그인 수를 제한할 수 있습니다. 이렇게 하면 페이지에 사용되지 않는 CSS가 있을 가능성을 최소화하면서 전반적인 성능을 향상시키는 데 도움이 될 수 있습니다.

따라서 더 이상 필요하지 않은 플러그인이 있으면 제거하는 것이 좋습니다. 비활성화하는 것만으로는 충분하지 않을 수 있습니다. 여전히 불필요한 코드를 로드하고 데이터베이스 공간을 차지할 수 있습니다. 따라서 사이트에서 완전히 삭제하는 것이 중요합니다.

오늘 귀하의 웹사이트에서 사용하지 않는 CSS를 제거하십시오

사이트에서 이를 제거하면 Core Web Vitals 성능을 개선하고 더 나은 사용자 경험을 제공할 수 있습니다.

요약하자면 WordPress에서 사용하지 않는 CSS를 제거하는 방법은 다음과 같습니다.

사이트의 Core Web Vitals 메트릭을 개선하는 몇 가지 다른 방법에 대해서는 Largest Contentful Paint의 속도를 높이는 방법과 누적 레이아웃 이동을 줄이는 방법에 대한 가이드를 읽을 수도 있습니다.

WordPress에서 사용하지 않는 CSS를 제거하는 방법에 대해 질문이 있습니까? 아래 댓글 섹션에서 알려주세요!