WordPress에서 사용하지 않는 CSS 코드를 쉽게 제거하는 방법
게시 됨: 2022-07-08로딩 시간을 단축하는 것은 검색 결과에서 사이트 성능을 개선하고 더 많은 트래픽을 유도하려는 사이트 소유자의 위시리스트에 항상 있습니다. 신뢰할 수 있는 호스팅 제공업체를 선택하고, SEO용으로 이미지를 최적화하고, 캐싱 플러그인을 설치하고, 이를 달성하기 위해 다른 많은 작업을 수행할 수 있습니다.
사용하지 않는 CSS를 제거하는 것은 WordPress 사이트 속도를 높이는 또 다른 효과적인 방법입니다.
그러나 WordPress에서 사용되지 않는 CSS는 무엇입니까? 사이트 로딩에 어떤 영향을 미칩니까? 어떻게 제거할 수 있습니까?
우리는 이 기사에서 이 모든 질문에 답할 것입니다. 먼저 WordPress에서 사용하지 않는 CSS 코드를 함께 정의합시다!
WordPress에서 사용되지 않는 CSS는 무엇입니까?
CSS 또는 Cascading Style Sheets는 HTML과 함께 WordPress 사이트의 모양과 느낌을 결정할 수 있는 스타일 시트 언어를 나타냅니다. 각 WordPress 테마에는 WordPress 페이지의 형식(레이아웃, 글꼴, 색상 등)을 결정하는 스타일 규칙이 포함된 style.css 파일이 함께 제공됩니다.
그러나 페이지를 표시하는 데 모든 CSS 코드가 필요한 것은 아닙니다. 그들 중 일부는 페이지를 렌더링하는 데 완전히 쓸모없는 것으로 판명되었습니다. 즉, 어떤 기능도 수행하지 않으므로 페이지 모양에 영향을 주지 않고 제거할 수 있습니다.
WordPress 미사용 CSS의 영향
의심할 여지 없이 CSS를 사용하지 않으면 페이지 로딩 시간이 늘어납니다. 더 나은 이해를 돕기 위해 브라우저가 기능이나 목적 없이 다운로드, 구문 분석 및 렌더링하는 데 시간이 걸립니다.
결과적으로 방문자는 페이지를 렌더링하고 완전히 보려면 더 오래 기다려야 합니다. 이것은 확실히 사용자에게 좋지 않은 경험을 만듭니다.
또한 로딩 시간이 짧으면 검색 순위에 직접적인 영향을 미칩니다. Google은 귀하의 WordPress 사이트를 실적이 저조한 사이트로 표시합니다. 이로 인해 사이트에 대한 트래픽이 줄어듭니다.
사용하지 않은 CSS를 WordPress에 추가하는 방법
언급했듯이 CSS는 대부분 WordPress 테마의 style.css 파일에 포함되어 있습니다. 여전히 일부 WordPress 플러그인은 CSS 코드도 제공합니다.
예를 들어 가장 인기 있는 전자 상거래 플러그인인 WooCommerce는 CSS를 사용하여 제품을 제공합니다. 페이지 빌더 플러그인은 CSS를 채택하여 사용자 정의 페이지를 표시합니다. 반면에 WordPress 양식 빌더는 CSS를 실행하여 양식에 스타일을 지정합니다. 전체 기능을 활성화하기 위해 자체 CSS 파일을 생성하는 많은 플러그인 유형이 있습니다.
여러 플러그인의 작은 CSS 파일 몇 개로 인해 사이트 속도가 느려지지 않습니다. 그러나 이들 중 하나라도 추가되면 사이트 로딩 시간에 상당한 영향을 미치게 됩니다.
WordPress에서 사용하지 않는 CSS를 식별하는 방법
WordPress 사이트에서 사용하지 않는 CSS를 확인하는 방법에는 여러 가지가 있습니다. Google Pagespeed Insights, Chrome DevTools 또는 Purifycss.online 도구를 사용하여 사용되지 않은 WordPress CSS를 파악할 수 있습니다.
#1 Google Pagespeed Insights 사용
이름에서 알 수 있듯이 이 도구는 페이지 속도를 개선하기 위한 권장 사항과 함께 페이지 속도에 대한 통찰력을 제공합니다.
페이지 URL을 입력한 후 페이지에 쓸모없는 CSS가 포함된 경우 기회 섹션에서 주황색 또는 빨간색 플래그로 처리됩니다. 아래 예에서 페이지 로딩 시간에 영향을 미치는 CSS 파일을 명확히 하는 미사용 CSS 줄이기 를 볼 수 있습니다.
#2 Chrome DevTools 사용
사용하지 않는 기존 CSS에 대한 더 자세한 식별 정보를 원하면 Chrome DevTools로 이동하세요.
도구를 시작하려면 먼저 원하는 웹 페이지를 연 다음 Control+Shift+P(Windows) 또는 Command+Shift+P(Mac)를 누릅니다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 검사 를 선택할 수도 있습니다.
그런 다음 소스 로 이동하여 오른쪽 상단 모서리에 있는 점 3개 아이콘을 클릭하고 적용 범위 를 선택합니다.
시작 계측 범위 및 새로고침 페이지 를 선택하면 아래와 같은 보고서가 표시됩니다. 이제 개별 파일을 열고 사용된 CSS와 사용하지 않은 CSS를 모두 다시 확인하십시오.
#3 Purifycss.online 도구 사용
WordPress 미사용 CSS를 식별하는 또 다른 강력한 장치는 Purifycss.online 도구입니다. WordPress 페이지 또는 게시물을 크롤링하고 모든 CSS 파일과 인라인 스타일을 검사하는 데 주로 도움이 됩니다.
이 도구는 모든 페이지가 아니라 특정 페이지의 사용되지 않는 CSS 코드를 줄입니다. CSS를 정리할 페이지가 너무 많을 때 이것은 당신을 압도할 수 있습니다.
https://purifycss.online/ 으로 이동하여 웹사이트 URL 상자에 사이트 URL을 입력합니다.
보고서는 사용된 CSS와 사용하지 않은 CSS의 비율과 깨끗한 CSS 코드의 모양을 보여줍니다.
WordPress에서 사용하지 않는 CSS를 제거하는 방법
WordPress에서 사용하지 않는 CSS를 수동으로 제거할 수 있지만 플러그인을 사용하는 것이 좋습니다. 이 방법은 시간을 절약할 뿐만 아니라 style.css 파일에 대한 부적절한 변경도 줄여줍니다.
WP Rocket은 사용하지 않는 CSS를 줄이기 위한 첫 번째 옵션이어야 합니다. 이 간단하면서도 강력한 플러그인을 사용하면 사용하지 않는 CSS 코드를 대부분 제외하여 CSS 파일을 개선할 수 있습니다.
플러그인을 사용하려면 사이트에 플러그인을 설치하고 활성화하세요.
- 사이트에서 WP Rocket 플러그인 다운로드
- 플러그인 → 새로 추가 로 이동하고 관리 대시보드에서 플러그인 업로드 를 누르십시오.
- 방금 다운로드한 플러그인의 zip 파일을 선택합니다.
- 관리자 메뉴에서 설정 → WP Rocket 을 방문하십시오.
- 파일 최적화 탭을 엽니다.
- CSS 파일 섹션으로 이동하여 사용하지 않는 CSS 제거(베타) 옵션을 확인합니다.
- 사용하지 않는 CSS 제거 활성화 를 눌러 플러그인이 CSS 지우기 작업을 수행하는지 확인합니다.
'CSS 수신 허용 목록' 상자에 CSS 파일 이름, ID 또는 클래스를 입력하여 건드리지 말아야 할 파일을 결정할 수 있습니다.
이 모든 작업을 수행한 후에는 변경 사항을 저장해야 합니다. 사용하지 않은 CSS를 성공적으로 제거하면 " 사용하지 않은 CSS 제거가 완료되었습니다! " 이제 Google Pagespeed Insights 도구로 돌아가서 페이지 속도가 개선되었는지 확인할 수 있습니다.
WP Rocket 외에도 WordPress 사이트에서 사용하지 않는 CSS를 줄이기 위한 Asset CleanUp이라는 또 다른 플러그인이 있습니다. 전자와 달리 WordPress 저장소에서 무료로 다운로드할 수 있습니다.
Asset CleanUp은 별점 4.9/5로 전 세계 100,000명 이상의 사용자로부터 신뢰를 얻었습니다. 페이지 속도를 높이는 강력한 솔루션을 약속합니다.
사용하지 않는 CSS WordPress를 제거할 준비가 되었습니다.
사용하지 않은 CSS는 사이트 형식 및 스타일에서 어떤 기능도 수행하지 않습니다. 무익한 CSS를 줄이는 것은 WordPress 페이지 로딩 시간을 단축하는 가장 효과적인 방법 중 하나로 밝혀졌습니다.
WP Rocket 플러그인을 사용하여 사용하지 않는 CSS를 정리하는 방법을 안내받았습니다. 플러그인을 설치하기 전에 사용하지 않는 CSS 코드가 Google Pagespeed Insights, Chrome DevTools 또는 Purifucss.online과 같은 기존 도구인지 식별하는 것을 고려할 수 있습니다.
위의 섹션이 혼란스럽습니까? 아래 댓글 섹션에서 CSS 제거 경험을 공유하십시오.