WordPress 사이트에서 사용하지 않는 CSS를 제거(또는 연기)하는 방법

WordPress에서 사용하지 않는 CSS를 제거하시겠습니까? 웹사이트를 더 빠르게 만드시겠습니까?

웹사이트 최적화의 주요 목표는 불필요한 코드를 제거하는 것입니다. 이렇게 하면 웹사이트 페이지의 전체 크기가 줄어들고 페이지 로드 시간이 빨라지고 방문자에게 더 나은 사용자 경험이 제공됩니다.

웹 사이트 페이지의 크기를 크게 줄일 수 있는 영역 중 하나는 스타일입니다. 웹 사이트 스타일은 HTML 및 Javascript와 함께 World Wide Web의 핵심 빌딩 블록 중 하나인 Cascading Style Sheets라는 규칙 기반 언어를 통해 제어됩니다.

일반적으로 CSS로 약칭되는 스타일시트는 페이지 색상, 글꼴, 배경, 이미지 스타일, 여백, 패딩 등을 정의하는 데 사용할 수 있습니다. 아래 예에서 CSS 코드는 헤드라인이 중앙에 있고 빨간색으로 표시되도록 합니다.

h1 {
 text-align: center;
 color: red;

}

일반적인 WordPress 웹사이트는 페이지를 올바르게 표시하기 위해 많은 스타일시트가 필요합니다. WordPress의 핵심 버전에서 사용되는 CSS 스타일 외에도 활성화된 WordPress 테마 및 WordPress 플러그인에 의해 CSS 호출이 이루어집니다. 따라서 WordPress 웹사이트는 모든 스타일을 올바르게 지정하기 위해 12개의 CSS 파일이 필요할 수 있습니다.

Cascading Style Sheets는 파일이 너무 크거나 너무 많은 CSS 파일이 호출되는 경우 페이지 로딩 시간을 증가시킬 수 있습니다. Defer, Minify 및 Combine과 같은 여러 기술을 사용하여 이 문제를 해결할 수 있습니다.

다음은 이러한 기술을 요약한 것입니다.

CSS의 가중치를 더 줄이고 싶다면 WordPress에서 사용하지 않는 CSS 규칙을 제거하는 것이 좋습니다. 방문자는 필요한 스타일링만 다운로드할 수 있습니다. 브라우저가 불필요한 CSS 코드를 로드하는 것을 방지하여 페이지 로드 속도를 높이고 방문자에게 더 나은 사용자 경험을 제공할 수 있습니다.

사용하지 않는 CSS를 자세히 살펴보고 WordPress 웹사이트에서 사용하지 않는 CSS 코드를 제거하는 방법을 살펴보겠습니다.

WordPress에서 사용되지 않는 CSS란 무엇이며 왜 발생합니까?

미사용 CSS는 현재 페이지에서 호출되지 않는 CSS 규칙을 나타냅니다. 이는 페이지가 스타일시트에서 모든 단일 CSS 규칙을 호출할 필요가 거의 없기 때문에 자주 발생합니다. 예를 들어, 스타일시트에 빨간색을 사용하여 헤드라인을 표시하기 위한 CSS 규칙이 포함될 수 있지만 실제로 요청하지 않은 경우 사용하지 않은 CSS로 분류됩니다.

브라우저는 사용하지 않는 CSS 규칙을 요구하지 않기 때문에 코드는 CSS 파일의 크기를 불필요하게 증가시킵니다. 따라서 WordPress에서 사용하지 않는 CSS 코드를 제거하여 페이지 로딩 시간을 개선할 수 있습니다.

워드프레스 테마는 styles.css 파일을 기본 스타일시트로 사용해야 하지만 테마는 글꼴, 테마 스킨 및 기타 디자인 요소에 대해 추가 스타일시트를 사용하는 것이 일반적입니다. 테마 CSS 파일에 포함된 많은 CSS 규칙은 특정 상황에서만 필요합니다. 그럼에도 불구하고 이러한 CSS 파일은 일반적으로 웹사이트의 모든 페이지에 로드됩니다.

WordPress 플러그인은 개발자가 기본적으로 모든 페이지에 스타일시트를 자주 로드하기 때문에 사용하지 않는 CSS를 페이지에 삽입하는 데 특히 좋지 않습니다.

WordPress에서 사용하지 않는 CSS를 제거하는 것은 좋은 습관이지만 웹사이트 디자인에 중요한 CSS 코드를 제거하면 웹사이트 디자인이 손상됩니다.

중요한 CSS는 어떻습니까?

자주 들을 수 있는 또 다른 용어는 Critical CSS입니다. . 스크롤하지 않고 즉시 사용자에게 콘텐츠를 표시하는 데 필요한 모든 스타일을 나타냅니다. 이 영역을 스크롤 없이 볼 수 있는 부분이라고 합니다. 브라우저에서 스크롤 없이 볼 수 있는 부분의 콘텐츠를 로드하는 데 걸리는 시간을 콘텐츠가 포함된 첫 번째 페인트라고 합니다. (FCP).

Google에서는 첫 번째 콘텐츠가 포함된 페인트가 빠르게 로드되도록 중요한 CSS를 추출, 축소하고 HEAD 요소에 인라인으로 표시할 것을 권장합니다. Defer는 덜 중요한 CSS 파일이 초기 페이지 로드 속도를 늦추지 않도록 나중에 중요하지 않은 CSS 파일을 로드하는 데 사용할 수 있습니다.