WordPress에서 CSS 문제 최소화를 수정하는 방법은 무엇입니까?

WordPress는 핵심 소프트웨어, 테마 및 플러그인을 사용하여 웹사이트에 모양을 부여합니다. 계단식 스타일시트 또는 CSS는 레이아웃 디자인의 중추이며 이러한 각 항목은 고유한 CSS를 추가합니다. 브라우저에서 페이지 소스를 보면 사이트에서 사용되는 CSS 파일을 볼 수 있습니다. 이러한 CSS 파일을 최적화하는 것은 WordPress 사이트의 페이지 로딩 속도를 향상시키는 데 필요합니다.

CSS 축소란 무엇입니까?

이것은 파일의 크기를 압축하고 줄이는 데 도움이 되므로 서버에서 이러한 파일을 다운로드하는 데 필요한 시간을 줄일 수 있습니다. 개발자는 이해 및 추적 목적으로 CSS 파일의 주석을 사용합니다. 그러나 이러한 주석은 기능에 필요하지 않으므로 제거해도 웹사이트의 작동 디자인에는 영향을 미치지 않습니다.

CSS를 축소해야 하는 이유

다음 질문은 왜 누군가가 텍스트 파일에서 공백과 주석을 제거하여 몇 KB 크기를 줄여야 하는지에 대한 것입니다. 문제는 파일 크기를 줄이지 않으면 Google PageSpeed ​​Insights 및 기타 속도 측정 도구에 CSS 파일 축소에 대한 권장 사항이 표시된다는 것입니다.

• 이 문제는 Google PageSpeed ​​Insights 도구의 "기회" 섹션에서 "CSS 축소"로 찾을 수 있습니다.
• 이 도구는 CSS 축소로 얻을 수 있는 절감액의 크기도 보여줍니다.
• "CSS 축소" 문제는 FCP(First Contentful Paint) 및 LCP(Large Contentful Paint)에 영향을 미칩니다. LCP는 Core Web Vitals의 일부이므로 CSS 파일을 축소하지 않으면 페이지 경험이 영향을 받습니다.
• 축소된 CSS 파일을 제공하면 이 문제가 해결되며 "Passed Audits" 섹션에서 검사가 통과되고 녹색으로 표시되는 것을 확인할 수 있습니다.

콘텐츠 및 파일 축소의 예

다음은 공백과 주석이 있는 작은 CSS 코드의 예입니다.

 /* Content */ div.content{ padding-left: 390px; background: #fff; position: relative; } div.panes{ max-width: 1400px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 40px; } .section{ padding-top: 40px; } /* End Content */

CSS 축소 도구로 이동하여 위의 코드를 붙여넣습니다.

결과적으로 축소된 코드를 얻으려면 "제출" 버튼을 클릭하십시오.

축소된 코드는 다음과 같습니다.

 div.content{padding-left:390px;background:#fff;position:relative;}div.panes{max-width:1400px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 40px;}.section{padding-top:40px;}

보시다시피 모든 주석과 공백은 축소된 출력에서 ​​제거됩니다. 대부분의 WordPress 테마는 style.css 파일을 사용하며 동일한 도구를 사용하여 전체 style.css 파일을 업로드하고 결과적으로 축소된 파일을 얻을 수 있습니다.

"다운로드" 버튼을 클릭하여 축소된 파일을 컴퓨터로 가져옵니다.

최종 출력 파일에는 축소된 크기로 모든 공백과 주석을 제거하는 한 줄이 있습니다.

WordPress에서 CSS 및 JS 축소

이제 축소의 목적과 작동 방식을 이해했습니다. 그러나 온라인 도구를 사용하여 파일을 축소하면 다음과 같은 이유로 WordPress에서 작동하지 않습니다.

• 테마, 플러그인 및 핵심 WordPress에서 사용하는 파일이 많이 있습니다. 원본 파일을 수동으로 축소하고 바꾸는 것은 시간이 많이 걸리는 작업입니다.
• 파일은 테마, 플러그인 및 핵심 WordPress 업데이트로 업데이트됩니다. 따라서 수동으로 업로드한 파일은 업데이트할 때마다 일반 버전으로 바뀝니다.

이러한 수동적인 번거로움을 피하기 위해 업데이트 프로세스에 영향을 주지 않고 작업을 자동으로 동적으로 수행하는 축소 플러그인을 사용할 수 있습니다. 이 플러그인은 파일을 압축하고 축소된 파일이 원본 파일 대신 제공됨을 나타내는 .min 확장자로 제공됩니다.

때로는 테마와 플러그인이 파일의 축소된 버전을 제공할 수 있으며 다시 축소할 필요가 없습니다.

WordPress에서 CSS 및 JS 파일을 축소하는 방법은 무엇입니까?

WordPress에는 CSS 및 JavaScript를 축소하는 데 사용할 수 있는 플러그인이 많이 있습니다. 그러나 사용법은 상황에 따라 다르며 트릭을 수행하는 다양한 플러그인에 대해 설명합니다. Google PageSpeed ​​Insights에서 "WordPress 플러그인"에 대한 링크를 보고 클릭합니다. 검색 필터 minify+CSS를 적용하여 WordPress 플러그인 저장소 페이지로 이동합니다.

쿼리 문자열 제거

CSS 파일을 축소하기 전에 파일 URL에 첨부된 쿼리 문자열 매개변수를 제거하는 것이 좋습니다. 정적 CSS 및 JS 파일에 대한 축소 작업은 다음과 같습니다.

 https://www.your-site.com/wp-content/themes/theme-name/style.css

그러나 테마 및 플러그인 파일에는 URL에 첨부된 쿼리 문자열로 버전 매개변수가 있습니다. 일반적으로 다음과 같이 표시되며 이러한 URL은 본질적으로 동적으로 간주됩니다.

 https://www.your-site.com/wp-content/themes/theme-name/style.css?ver=1626631618

축소가 더 잘 작동하려면 파일 URL에서 쿼리 문자열을 제거하는 것이 좋습니다. 이것은 또한 CDN 및 기타 시스템(서버 및 브라우저)이 파일을 효과적으로 캐시하는 데 도움이 됩니다. 이러한 점을 고려하여 쿼리 스트링 제거 기능과 함께 축소 기능을 제공하는 플러그인에 대해 설명하도록 하겠습니다.

1. 벌새 – 무료 옵션

W3 Total Cache와 같은 플러그인에는 수백 가지 옵션이 있으며 새로운 WordPress 사용자를 위해 설정하기 어렵습니다. 반면, Autooptimize와 같은 간단한 플러그인은 파일을 별도로 수행하지 않고 결합하고 축소합니다. 이것은 특히 파일 결합이 필요하지 않은 HTTP/2 서버의 모든 호스팅 환경에서 작동하지 않을 수 있습니다. 또한 결합은 레이아웃을 쉽게 깨뜨릴 수 있으며 동작을 제어하기 위해 개별적으로 축소 및 결합 옵션을 갖는 것이 좋습니다.

Hummingbird는 WordPress에서 CSS를 축소하기 위한 최고의 무료 플러그인 중 하나입니다. 또한 완벽한 캐싱 솔루션을 제공하므로 사이트의 캐싱 플러그인으로 사용할 수 있습니다.

• WordPress 관리자 패널의 "플러그인 > 새로 추가" 섹션으로 이동합니다.
• "Minify"를 검색하여 "Hummingbird – Optimize Speed, Enable Cache, Minify CSS & Defer Critical JS" 플러그인을 찾습니다. "설치" 버튼을 클릭한 다음 "활성화"를 클릭하여 사이트에서 플러그인 사용을 시작하십시오.

• 플러그인은 옵션을 스캔하고 추천하도록 요청합니다. 그러나 이 기사에서는 쿼리 문자열을 제거하고 CSS를 축소하기 위한 설정에 중점을 둘 것입니다.
• "Hummingbird > 고급 도구" 섹션으로 이동합니다. "일반" 섹션의 "URL 쿼리 문자열"에 대해 "내 자산에서 쿼리 문자열 제거" 옵션을 활성화합니다. 아래로 스크롤하여 "변경 사항 저장" 버튼을 클릭합니다.

• "Hummingbird > Asset Optimization" 메뉴로 이동하여 "Assets" 섹션에서 "Automatic" 옵션을 활성화합니다.
• 아래로 스크롤하여 "구성" 섹션에서 "CSS 파일"을 활성화합니다. 이 섹션 바로 위에 CSS 파일을 결합하는 "자산" 섹션 아래에 "스피디"라는 옵션이 있음을 기억하십시오. 레이아웃이 깨졌다면 이 기능을 비활성화할 수 있습니다.

• "변경 사항 게시" 버튼을 클릭하여 변경 사항을 사이트에 적용합니다.

2. WP 로켓 – 프리미엄 플러그인

WP Rocket은 사람들이 WordPress 사이트를 최적화하는 방식을 변경한 프리미엄 전용 플러그인입니다. 번거로움 없이 필요한 옵션을 탐색하고 전환할 수 있는 간단한 대시보드 섹션이 있습니다.

• 개발자 사이트에서 WP Rocket을 구입하고 귀하의 사이트에 설치하십시오.
• 플러그인 업데이트 및 지원을 받으려면 라이센스 키를 활성화해야 합니다.
• "파일 최적화" 탭으로 이동하여 "CSS 파일" 섹션에서 "CSS 파일 최소화" 옵션을 활성화합니다.

위에서 언급했듯이 WP Rocket은 CSS 파일에 대한 별도의 옵션으로 축소 및 결합을 제공합니다. HTTP/2 서버에 대해 결합 옵션을 활성화하지 않는 권장 사항도 표시됩니다. 이러한 방식으로 필요한 옵션을 전환하여 Google PageSpeed ​​Insights 및 기타 도구에서 좋은 페이지 속도 점수를 얻을 수 있습니다.

3. SiteGround Optimizer – 호스팅 제공 플러그인

요즘에는 많은 호스팅 제공업체가 자체 최적화 플러그인을 제공하는 추세입니다. 플러그인이 기본 호스팅 환경에서 더 잘 작동하기 때문에 이것이 최선의 옵션입니다. 우리는 여기에서 SiteGround Optimizer 플러그인으로 설명하며 축소 목적으로 플러그인을 제공하는지 호스팅 회사에 확인해야 합니다.

• SiteGround Optimizer 플러그인은 SiteGround 호스팅에 WordPress를 설치할 때 사이트와 함께 사전 설치되어 제공됩니다.
• "SiteGround > Frontend" 메뉴로 이동하여 "CSS" 섹션에서 "Minify CSS Files"를 활성화합니다.

• 설정이 자동으로 저장되고 "CSS Minification Enabled"라는 성공 메시지가 표시됩니다. 이전에 캐시된 파일을 지우려면 상단 관리 표시줄에 표시되는 "캐시 제거" 옵션을 클릭해야 합니다.
• 프론트엔드에 문제가 있는 경우 "CSS 축소에서 제외" 옵션을 사용하여 특정 CSS 파일을 제외하고 문제를 해결합니다.

보시다시피 SiteGround Optimizer 플러그인은 결과를 효과적으로 관리하기 위해 두 가지 다른 옵션으로 축소 및 결합도 제공합니다.

4. Cloudflare와 같은 CDN으로 축소

거의 모든 WordPress 사이트 소유자는 CDN(콘텐츠 전송 네트워크)을 사용하여 HTML, CSS 및 JS 정적 파일의 전송 속도를 높입니다. 이러한 파일은 정적이며 항상 변경되지 않으므로 사이트에서 추가로 플러그인을 사용하는 대신 CDN 설정에서 축소 기능을 사용하는 것이 좋습니다. 여기에서는 Cloudflare CDN에서 축소 옵션을 활성화하는 방법에 대해 설명합니다. 축소 옵션을 활성화하는 방법은 CDN 제공업체에 문의해야 할 수 있습니다.

• Cloudflare 계정에 로그인하고 CSS 축소 옵션을 활성화하려는 사이트를 선택합니다.
• "속도" 섹션에서 "최적화" 설정으로 이동합니다.
• 오른쪽 창에서 아래로 스크롤하여 "자동 축소"에 대해 "CSS" 옵션을 활성화합니다.
• 설정이 자동으로 저장되고 Cloudflare를 사용하여 WordPress 사이트에 CSS 축소가 활성화됩니다.

CDN 설정에서 축소 기능을 사용할 때 주의해야 할 두 가지 중요한 사항이 있습니다.

• 캐싱 플러그인 또는 서버 측 축소 옵션을 사용하는 경우 이 기능이 겹치지 않는지 확인하십시오. 예를 들어, WP Rocket 플러그인은 간섭을 피하기 위해 Cloudflare 설정을 구성하는 애드온을 제공합니다. 마찬가지로 SiteGround 호스팅 패널(사이트 도구라고 함)에서 Cloudflare 설정을 구성할 수 있습니다.
• 사이트에서 무언가를 업데이트할 때마다 CDN 설정으로 이동하여 캐시를 제거하세요. 이렇게 하면 이전 CSS 및 JS 파일을 제공하지 않고 최신 업데이트 버전을 사용하기 시작합니다.

축소 작업을 어떻게 알 수 있습니까?

파일이 축소되었는지 여부를 확인하는 쉬운 방법은 페이지 소스를 확인하는 것입니다. 축소 옵션을 활성화하기 전에 Chrome이나 다른 브라우저에서 페이지를 열고 빈 영역을 마우스 오른쪽 버튼으로 클릭한 다음 "페이지 소스 보기" 옵션을 선택합니다. 그러면 테마의 style.css를 검색할 수 있는 새 탭에서 페이지의 소스 콘텐츠가 열립니다. 예를 들어, 아래는 버전 번호와 함께 style.css를 보여주는 GeneratePress 자식 테마로 어떻게 보이는지입니다.

쿼리 문자열을 제거하고 minify를 적용한 후 모든 정적 파일이 .min.css 버전으로 압축 및 축소되었음을 알 수 있습니다. 이 예에서 GeneratePress 자식 테마의 style.css는 아래와 같은 쿼리 문자열 없이 style.min.css로 사용할 수 있습니다.

확인하는 또 다른 방법은 Google PageSpeed ​​Insights 도구에서 웹사이트를 테스트하는 것입니다. "Passed Audits" 섹션 아래에 녹색으로 "Minify CSS" 항목이 표시되어야 합니다. 이는 파일이 압축되어 축소된 크기로 제공됨을 나타냅니다.

마지막 단어

WordPress에서 CSS를 축소하는 것은 파일 크기를 줄이는 데 도움이 되는 플러그인을 사용하는 간단한 작업입니다. 위에서 언급한 옵션 중 하나를 사용하고 Google PageSpeed ​​Insights 도구에서 CSS 축소 문제를 수정할 수 있습니다. 무료 플러그인으로도 충분하지만 필요한 경우 적절한 지원을 받으려면 WP Rocket과 같은 프리미엄 플러그인을 사용하는 것이 좋습니다.