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

사용하지 않는 코드가 많으면 웹사이트 속도가 상당히 느려질 수 있습니다. 그리고 WordPress의 일반적인 용의자 중 하나는 불필요한 CSS 코드입니다. 다행히도 웹 사이트의 성능 저하를 방지하고 사용자 경험을 망치는 것을 막을 수 있는 몇 가지 방법이 있습니다. 이를 수행하는 한 가지 방법은 수동 방법이지만 상당한 개발 경험이 필요합니다. 초보자에게 친숙한 또 다른 옵션은 몇 번의 클릭으로 기존 도구에 집중하고 테마 및 플러그인으로 추가된 WordPress에서 사용하지 않는 CSS를 제거하는 것입니다.

WordPress에서 사용하지 않는 CSS를 성공적으로 제거하는 방법

아시다시피 WordPress는 많은 플러그인, 테마 및 기타 타사 라이브러리를 사용하고 있습니다. 그들은 모두 웹 사이트 기능을 향상시키는 수많은 기능을 제공합니다. 그러나 대부분의 경우 실제로 사용하지 않는 많은 기능이 함께 제공됩니다. 그럼에도 불구하고 WordPress 전문가를 사용하여 웹 사이트를 유지 관리하고 최적화하지 않으면 모든 방문자에게 모든 것이 로드됩니다. 이로 인해 사용하지 않는 CSS가 대량으로 전송되고 웹 사이트 자체가 느려집니다. 결과적으로 성능이 저하되면 웹사이트 트래픽이 감소하고 검색 순위가 낮아집니다.

많은 경우 사용하지 않는 코드를 100% 제거하는 것은 매우 어렵고 거의 불가능합니다. 그러나 약간의 양이나 충돌하는 스크립트를 제거하더라도 웹 사이트 성능이 향상됩니다. 코드의 일반적인 "최소화" 외에도 웹사이트를 손상시키지 않고 사용하지 않는 CSS 코드의 영향을 줄이는 몇 가지 방법이 있습니다.

사용하지 않는 CSS가 있는 이유는 무엇입니까?

CSS는 WordPress 웹 사이트의 모양을 지정하는 역할을 하기 때문에 찾을 수 있는 모든 테마에 CSS가 포함되어 있습니다. 테마뿐만 아니라 많은 플러그인이 고유한 스타일 및 사용자 지정 옵션과 함께 제공됩니다. 모든 종류의 웹 사이트 빌더, 라이브러리, 심지어 일부만 사용하는 개별 요소는 말할 것도 없습니다. 일반적으로 몇 가지 플러그인은 웹사이트에 그다지 영향을 미치지 않습니다. 그러나 충분한 경우 누적 효과로 인해 웹 사이트가 실제로 느려질 수 있습니다.

사용하지 않는 CSS 제거 도구

사용하지 않는 CSS를 제거하는 데 도움이 되는 많은 도구가 있지만 대부분은 모든 상황에 적용할 수 없습니다. 물론 정적 웹 사이트의 경우 대부분이 매우 유용합니다. 그러나 동적 웹 사이트는 종종 CSS 클래스에 JavaScript를 삽입하여 요소를 로드하고 스타일을 지정합니다. 그리고 이것은 이러한 클래스를 감지하기 어렵기 때문에 더 어려운 부분입니다. 예를 들어 제품 및 장바구니 페이지의 스타일을 동적으로 지정하는 전자 상거래 웹사이트입니다.

개발할 때 생각해 보세요.

처음부터 사용하지 않는 CSS를 제거하는 한 가지 솔루션은 웹 사이트 개발 중에 고려하는 것입니다. 기본적으로 CSS 코드를 특정 용도로 사용하는 다른 파일로 분할할 수 있습니다. 그러나 대부분의 사람들은 웹 사이트를 처음부터 구축하지 않기 위해 WordPress 테마를 사용하는 것을 선호합니다. 그리고 이것은 매우 능숙하거나 WordPress 전문가를 찾아야 하는 곳입니다.

UnusedCSS 온라인 솔루션 사용

또 다른 방법은 UnusedCSS와 같은 프리미엄 솔루션을 사용하여 CSS 문제를 쉽게 찾고 정리하는 것입니다. 이 도구의 장점은 JavaScript 파일을 스캔하고 주입을 검색할 수 있다는 것입니다. 가장 주목할만한 기능은 다음과 같습니다.

• 사용하지 않는 CSS 규칙 자동 찾기
• 다운로드를 위한 깨끗한 CSS 제공
• 반응형 디자인 및 미디어 쿼리 규칙 살펴보기
• 웹사이트에서 변경 사항 확인 중
• 변경사항 미리보기
• 그리고 더

추가 CSS 제거를 위한 PurgeCSS

이것은 개발 중에 매우 유용한 또 다른 도구입니다. Bootstrap, Foundation 및 유사한 CSS 프레임워크로 작업하는 사람들은 매우 유용합니다. CSS 규칙의 일부만 사용하고 있기 때문에 이 도구를 사용하면 사용하지 않는 모든 스타일을 필터링할 수 있습니다. 기본적으로 이것은 CSS 파일을 상당히 작게 만드는 좋은 방법입니다.

플러그인 자동 최적화

다음 줄은 매우 인기 있는 WordPress 플러그인입니다. 이를 통해 스타일을 쉽게 축소, 결합 및 캐시할 수 있습니다. 페이지 헤드에 필요한 규칙을 삽입하고 중요한 CSS를 인라인하고 HTML을 축소하고 스크립트를 바닥글로 이동합니다. 본질적으로 이미지에 대한 "지연 로드"를 구현하고 글꼴을 최적화하며 비동기 비결합 JavaScript를 구현하는 데 사용할 수 있습니다. 모든 웹사이트는 이 광범위한 플러그인의 이점을 누릴 수 있습니다.

WP 로켓

찾을 수 있는 가장 초보자 친화적인 옵션 중 하나입니다. WP Rocked는 페이지 및 속도 최적화를 위한 효과적인 솔루션을 제공합니다. 속도 테스트에서 만족스러운 결과를 얻을 뿐만 아니라 방문자에 대한 사용자 경험도 눈에 띄게 향상됩니다. 사용하지 않는 CSS를 제거하려면 활성화하고 "파일 최적화"를 켜고 "CSS 전달 최적화" 옵션을 진행하면 됩니다. 필요한 CSS 규칙만 포함된 CSS 파일을 제공하며 다른 규칙보다 먼저 로드됩니다. 또한 WP Rocket은 캐시를 자동으로 지우고 CSS 파일을 축소 및 집계할 수 있습니다.

Asset CleanUp으로 사용하지 않는 CSS 제거

Asset CleanUp을 사용하여 테마 및 플러그인에서 사용하지 않는 파일을 언로드할 수 있습니다. 이를 통해 각 페이지에 대해 이 작업을 개별적으로 완료할 수 있습니다. 이것은 다소 복잡하고 시간이 많이 걸리는 방법이지만 사용하기에 매우 효과적인 방법입니다. 다른 플러그인과 마찬가지로 "테스트 모드" 옵션이 있어 라이브 웹사이트에서 원하지 않는 영향을 방지할 수 있습니다. 그러나 Asset CleanUp은 사용하지 않는 JavaScript 파일도 제거하는 데 도움이 될 수 있습니다. 마지막으로 방문자가 보는 것을 테스트할 때 필요하지 않은 모든 것을 언로드하도록 선택할 수 있습니다.

Perfmatters로 CSS 최적화

이 목록에서 마지막으로 가장 중요한 것은 프리미엄 성능 플러그인 중 하나입니다. Perfmatters는 사용하지 않는 CSS와 JavaScript를 모두 제거하는 데 도움이 됩니다. 등록, 설치 및 활성화 후에 스크립트 관리자에 액세스할 수 있습니다. 이 옵션을 사용하면 각 페이지나 게시물을 쉽게 수정할 수 있습니다. 본질적으로 별도의 페이지 또는 전체 웹사이트에서 사용하지 않는 CSS 및 JavaScript를 제거하는 데 사용할 수 있는 간단한 대시보드 메뉴를 제공합니다. CSS와 마찬가지로 더 나은 성능을 위해 JavaScript 파일을 결합하거나 축소하는 데 사용할 수 있습니다.

웹사이트 속도 향상을 위한 추가 고려 사항

CSS 파일을 전달하기 위해 CDN을 사용하는 것을 고려하십시오. CSS 또는 다른 파일의 로딩 속도를 상당히 줄이십시오.

대부분의 CSS 파일을 정기적으로 축소 및 결합하여 WordPress의 CSS에서 불필요한 규칙, 클래스 및 추가 문자를 제거합니다. 그러나 이것이 코드의 복잡성, 그러한 파일의 크기 및 추가적인 추후 최적화로 인해 모든 대형 웹사이트에 도움이 되는지에 대해서는 논쟁의 여지가 있습니다.

WordPress에서 사용하지 않는 CSS의 모든 부분을 완전히 제거하는 것은 거의 불가능합니다. 그러나 위의 방법을 사용하여 웹 사이트 속도를 상당히 높일 수 있습니다. 경우의 수에 따라 다르지만 WordPress 웹 사이트에 실제로 사용하지 않는 코드가 많으면 그 차이가 상당히 눈에 띌 것입니다. 반면에 때로는 작은 변화가 모든 것을 의미할 수도 있습니다. 목표가 세계에서 가장 빠른 웹사이트를 갖는 것은 아니지만 약간의 변화가 중요합니다. 그러나 다른 노력은 검색 엔진 테스트에서 최고 속도의 위치를 ​​차지하기보다는 사용자에게 콘텐츠와 유용성에 중점을 두어야 합니다.