PageSpeed Insights에서 보셨을 수 있습니다 . WordPress 사이트의 로딩 속도를 높이고 성능 점수를 개선하기 위해 사용되지 않는 CSS를 제거하고 싶으신가요?
워드프레스 테마와 플러그인이 추가하는 CSS 코드 중에는 필요하지 않은 코드가 많습니다. 사용하지 않는 CSS 코드를 제거하면 워드프레스의 성능과 사용자 경험을 향상시킬 수 있습니다. 이 글에서는 웹사이트에 아무런 영향을 주지 않고 워드프레스 웹사이트에서 사용하지 않는 CSS 코드를 쉽게 제거하는 방법을 설명합니다.
워드프레스에서 사용하지 않는 CSS를 제거하는 다양한 방법
워드프레스 웹사이트에서 사용하지 않는 CSS의 양을 줄이고 싶다면 몇 가지 방법을 시도해 볼 수 있습니다.
워드프레스에서 불필요한 CSS를 모두 제거하는 것은 가능하지만, 상당히 어려운 작업입니다. 게다가 워드프레스의 내부 작동 방식 때문에 일부 사용자는 불필요한 CSS를 찾아 제거하는 데 어려움을 겪을 수도 있습니다.
이 경우, 사용하지 않는 CSS를 제거하는 다양한 방법을 보여드리겠습니다. 필요에 가장 적합한 방법을 선택하시면 됩니다.
가장 큰 CSS 파일을 찾아보세요
가장 많이 사용되는 CSS 파일을 확인하려면 Chrome 개발자 도구에서 "사용량 시각화" . URL에는 일반적으로 파일을 생성한 플러그인, 테마 또는 타사 코드의 이름이 포함됩니다. 따라서 최적화가 필요한 부분을 더 쉽게 파악할 수 있습니다.
사용하지 않는 CSS를 제거하고, 사용하는 CSS는 별도의 파일에 저장하세요
HTML 크기가 증가하지 않고 인라인 방식과 달리 캐시할 수 있으므로 별도의 파일을 생성하는 것이 더 빠릅니다. 또한 LiteSpeed Cache의 CSS와 FlyingPress에서도 별도의 파일로 로드됩니다. 게다가 WP Rocket은 다른 대부분의 플러그인과 달리 방문자 수보다는 검색 엔진 최적화(SEO) 점수를 기준으로 최적화합니다. 다른 플러그인들은 단순히 속도를 높이기 위해 별도의 파일을 사용하는 경우가 많습니다.
CSS를 추가하는 플러그인은 사용하지 마세요
Query Monitor나 WP Hive 같은 도구는 유용하지만, 플러그인이 프런트엔드에 추가적인 CSS/JS 코드를 추가하는지 여부를 항상 보여주지는 않습니다. 따라서 플러그인의 전체적인 영향은 프런트엔드에 콘텐츠를 추가한 후 웹사이트를 다시 테스트해봐야만 확인할 수 있습니다. 가장 흔한 원인으로는 갤러리, 슬라이더, 문의 양식, 댓글, 채팅, 캘린더, 디자인 관련 페이지 빌더 플러그인 등이 있습니다.
가벼운 테마와 페이지 빌더를 사용하세요.
프런트엔드에 CSS, JavaScript, 폰트가 과도하게 사용되었습니다. 그 결과, Elementor Pro나 Ultimate Addons 같은 추가 페이지 빌더 플러그인을 함께 사용하면 웹사이트 속도가 느려질 수밖에 없습니다.
페이지 빌더에서 CSS 최적화를 활성화하세요
이러한 설정에는 Elementor의 실험 기능과 Divi의 성능 설정이 포함되어 있으며, 여기에는 CSS 크기를 줄이는 여러 옵션(예: Elementor의 에셋 및 CSS 로딩 개선, Divi의 동적 CSS)이 있습니다. 일반적으로 성능 관련 설정을 더 활성화할수록 더 나은 결과를 얻을 수 있습니다.
사용하지 않는 아이콘은 비활성화하세요
Elementor 아이콘을 사용하지 않는다면 아이콘 기능을 끄세요. Google Fonts와 Font Awesome을 사용하는 경우, Perfmatters 또는 Elementor 설명서에서 설정할 수 있습니다.
자산 언로딩 플러그인에서 CSS 제거
Perfmatters를 사용하면 필요하지 않은 CSS/JS(또는 전체 플러그인)를 비활성화하고, 사용하지 않는 CSS를 제거하고, YouTube iframe을 미리보기 이미지로 대체할 수 있습니다. 이러한 모든 방법을 통해 남아 있는 사용하지 않는 CSS에 대한 접근성을 높일 수 있습니다. Asset CleanUp 플러그인을 사용해서도 CSS/JS 파일을 비활성화할 수 있습니다.
CSS에서 찾은 배경 이미지를 지연 로드합니다
대부분의 캐시 플러그인은 배경 이미지가 별도의 CSS 파일에 포함되어 있는 경우 해당 이미지를 지연 로드하지 않습니다.
따라서 배경 이미지를 지연 로딩하려면 캐시 플러그인의 설명서를 참조하십시오. FlyingPress는 추가 CSS 클래스에 추가할 수 있는 lazy-bg 헬퍼 클래스를 제공하는 반면, WP Rocket은 인라인 HTML을 요구합니다. lazy-bg 헬퍼 클래스는 수동으로 추가하거나, Optimole은 CSS 선택자를 사용하는 솔루션을 제공합니다.
구텐베르크 CSS 제거
구텐베르크 블록을 사용하지 않는 경우, 구텐베르크 블록 라이브러리를 큐에서 제거할 수 있습니다. 이를 위해 코드 스니펫이나 functions.php 파일을 활용하세요.
CSS를 결합할지 여부
CSS와 JavaScript를 합칠 경우 파일 크기는 10KB를 넘지 않아야 합니다. 하지만 대부분의 경우 CSS와 JavaScript를 합치는 것은 거의 불가능하므로 합치지 않는 것이 좋습니다.
WooCommerce 스타일 비활성화
WooCommerce는 기본적으로 웹사이트 전체에 스타일을 적용합니다. 만약 이러한 스타일을 전자상거래 페이지에서만 사용한다면, 모든 곳에서 스타일 적용을 비활성화할 수 있습니다. WooCommerce 공식 문서도 있지만, 더 많은 설정 옵션을 제공하는 "WooCommerce 스타일 비활성화(Disable WooCommerce Bloat)" 도구를 사용하는 것을 권장합니다.
Seahawk Media 에서 이와 유사한 기사를 더 찾아보세요 .
