WordPress의 중요한 CSS: 정의 및 CSS 전달 최적화 방법
게시 됨: 2021-10-19Google PageSpeed Insights에서 성능 감사를 실행할 때 거의 매번 Google에서 "렌더링 차단 리소스를 제거"할 것을 권장합니다. 중요한 CSS와 JavaScript를 항상 우선적으로 로드해야 함을 의미합니다.
그러나 어떤 CSS가 중요하고 어떤 것이 중요하지 않은지 결정하는 방법은 무엇입니까? 다른 웹사이트의 속도를 높이려면 웹사이트의 어느 부분을 "지연"해야 합니까? 우선 순위와 필수 CSS 리소스와 전달을 최적화하는 방법을 찾는 것이 중요합니다.
뛰어들어봅시다.
Critical CSS란 무엇이며 성능에 중요한 이유는 무엇입니까?
크리티컬 CSS는 페이지를 최대한 빨리 표시하기 위해 스크롤 없이 볼 수 있는 부분의 CSS를 추출하는 기술입니다. 방문자가 보고 있는 콘텐츠를 표시하기 위해 최소한의 CSS를 사용하는 것과 같습니다.
| Critical CSS는 브라우저가 CSS를 로드하는 방법을 재고하게 합니다. 스크롤 없이 볼 수 있는 콘텐츠에 대해 CSS의 우선 순위를 지정해야 합니다. |
즉, 중요한 CSS는 성능 최적화의 핵심입니다. 페이지를 렌더링하기 전에 브라우저는 CSS 파일을 다운로드하고 구문 분석하여 해당 파일을 렌더링 차단 리소스로 만들어야 합니다. CSS 파일이 클수록 브라우저에서 파일을 처리하는 데 더 오래 걸립니다. 무거운 CSS 파일에 의해 생성된 모든 요청은 웹 페이지가 로드되는 시간을 증가시켜 방문자를 화나게 합니다. 그리고 구글.
Core Web Vitals를 포함한 새로운 순위 요소로 인해 페이지 속도도 SEO 성능에 영향을 미칠 수 있습니다. 페이지 속도를 포함하여 사용자 경험을 측정하기 위해 Google에서 구현한 일련의 요소입니다. 경험이 많을수록 순위가 높아집니다.
성능을 측정하는 6가지 Lighthouse 측정항목에 대해 알고 있습니까? FCP(First Contentful Paint)와 FID(First Input Delay)는 웹사이트의 인지 속도를 측정합니다. 이러한 측정항목의 상태가 양호하면 Google에서 측정하는 사용자 경험도 마찬가지입니다. 그러나 두 KPI가 모두 빨간색이면 중요한 CSS를 더 잘 최적화하는 것입니다.
일반 영어로 설명된 중요한 CSS
일반 영어에서 중요한 CSS는 최적화 작업입니다. 방문자가 보고 있는 CSS만 로드하도록 브라우저에 지시하는 것과 같습니다. 이것은 웹사이트가 방문자에게 얼마나 빨리 보이는지를 의미하는 인지된 속도를 개선하는 데 도움이 됩니다.
아래 이미지를 가지고 빠르게 운동을 해봅시다. 당신이 웹사이트에 액세스하는 모바일 사용자라고 상상해 보십시오.
시나리오 #1 – 맨 위에 렌더링 차단 CSS가 있는 페이지가 있습니다. 전체 CSS 파일이 로드될 때까지 빈 페이지가 표시됩니다.
시나리오 #2 – 맨 아래에서 중요한 CSS가 먼저 렌더링됩니다. 브라우저가 이미 가장 중요한 스타일시트를 로드하기 시작했기 때문에 페이지를 훨씬 더 일찍 보기 시작합니다.
질문: 어떤 시나리오가 더 빨리 "느끼나요"?
하단: 인라인 중요 CSS(스크롤 없이 볼 수 있는 콘텐츠)
답변: 우리 모두는 수익의 인지 속도가 더 좋다는 데 동의합니다.
방문자는 제대로 완료되면 더 빠른 페이지 렌더링으로 인해 페이지 로드 시간이 감소하는 것을 느낄 것입니다.
중요한 CSS가 필요한 이유는 무엇입니까?
CSS 스타일시트 로드는 일반적으로 WordPress 사이트의 스타일을 지정하는 방법입니다. CSS는 색상, 레이아웃 및 글꼴과 같은 웹 페이지를 설명하는 데 사용되는 언어입니다. CSS가 없으면 웹은 아래의 왼쪽 열처럼 보일 것입니다.
| CSS가 없는 WP Rocket의 사이트 | CSS가 있는 WP Rocket 사이트 |
 |  |
중요한 CSS 렌더링 경로는 무엇을 의미합니까?
중요 렌더링 경로는 방문자 화면에 페이지를 렌더링하기 위해 브라우저가 수행해야 하는 일련의 작업입니다. 예를 들어, 이러한 작업에는 웹 페이지에 표시할 사진, 글꼴 및 텍스트 다운로드가 포함됩니다.
이전에 보았듯이 브라우저는 페이지의 적절한 레이아웃을 렌더링하기 위해 CSS 파일도 다운로드해야 합니다. 파일이 정말 큰 경우 방문자는 전체 파일이 다운로드될 때까지 기다리게 됩니다.
그러나 다운로드가 진행됨에 따라 브라우저가 CSS를 렌더링하기 시작할 수 있다면 어떻게 될까요?
차단을 완화하고 가능한 한 빨리 CSS 전달을 시작하는 방법을 상상해 보십시오. 이 기술은 중요 렌더링 경로의 최적화로 정확히 알려져 있습니다.
브라우저는 방문자에게 페이지를 렌더링할 때까지 5단계를 따릅니다. 이 과정에서 많은 일이 일어날 수 있습니다. 그렇기 때문에 각 단계를 최대한 빨리 완료해야 합니다.
이제 두 가지 질문이 나옵니다. 각 단계를 최적화하는 방법은 무엇입니까? 가장 효율적인 CSS 전달을 보장하는 방법은 무엇입니까?
이러한 질문은 우리를 다음 섹션으로 안내합니다. 중요한 CSS 기술(CSS 전달 최적화)로 렌더링 시간을 개선하고 렌더링 차단 CSS 오류를 제거하는 방법을 배우게 됩니다.
CSS 전달을 최적화하는 3단계
CSS는 WordPress 사이트의 시각적 형식과 스타일을 제어하지만 CSS 파일이 최적으로 전달되지 않으면 웹 페이지 속도가 느려질 수 있습니다.
따라서 WordPress 사이트의 성능을 향상시키는 가장 좋은 방법 중 하나는 CSS 코드가 전달되는 방법 과 시기 를 최적화하는 것입니다. WordPress 사이트에 대한 CSS 전달을 최적화하는 세 가지 주요 단계가 있습니다.
1단계: 스크롤 없이 볼 수 있는 콘텐츠를 표시하는 데 필요한 최소 CSS 코드를 식별 하는 중요한 CSS를 찾고 생성합니다 . 사용자가 페이지를 처음 로드할 때 뷰포트에서 무엇을 볼 수 있는지 알아내야 합니다. 방문자가 데스크톱, 태블릿 및 모바일과 같은 다양한 화면 크기를 사용하기 때문에 페이지에 적합한 중요한 CSS를 결정하는 것은 복잡할 수 있습니다.
출처: Kinsta
중요한 CSS를 찾는 방법
WebDev는 중요한 CSS를 식별하는 데 사용할 수 있는 세 가지 도구를 제공합니다.
- 중요 – 스크롤 없이 볼 수 있는 CSS를 추출합니다(또한 인라인 및 축소).
- CriticalCSS – 중요한 CSS를 추출하는 또 다른 모듈
- Penthouse – 사이트에 CSS가 많은 경우 좋은 선택
2단계: 이 중요한 CSS를 인라인합니다 . HTML 문서의 <head>에 중요한 CSS를 추가하여 이러한 스타일을 가져오기 위한 모든 추가 요청을 제거합니다.
아래 WebDev 예제에서 <head> 파일에 중요한 CSS를 인라인하여 브라우저가 더 빠르게 전달하고 가능한 한 빨리 사용자에게 무언가를 렌더링할 수 있습니다.
3단계: CSS의 나머지 부분을 비동기식 으로 로드합니다. 그러면 중요하지 않은 CSS가 지연되어 방문자가 웹 페이지 콘텐츠 를 볼 수 있을 때 로드될 수 있습니다. 이 기술은 "지연 로딩"이라고도 합니다. WebDev는 전체 수동 프로세스를 매우 잘 설명합니다.
이 세 가지 수동 단계를 따르면 CSS 전달과 중요한 렌더링 경로를 최적화할 수 있습니다. 그러나 WordPress CSS 전달을 최적화하는 더 간단한 방법이 있습니다. WordPress 플러그인을 사용하는 것입니다!
플러그인으로 중요한 CSS를 생성하고 중요한 렌더링 경로를 최적화하는 방법
운 좋게도 WordPress 플러그인을 사용하여 중요한 CSS 전달을 최적화하고 덜 중요한 리소스를 연기할 수 있습니다. 그러면 시간이 절약되고 코드 파일을 수동으로 수정하지 않아도 됩니다. 어떤 도구가 가장 적합한지 테스트할 수 있도록 목록을 작성했습니다.
- WP Rocket – 중요한 CSS를 인라인으로 감지하고 가장 간단한 방법으로 지연시키는 가장 완벽한 캐시 플러그인입니다. 다음 섹션에서 실제 예제를 살펴보겠습니다.
- 자동 최적화 – 기본적으로 페이지 헤드에 CSS를 삽입하고 중요한 CSS를 인라인하고 지연할 수도 있습니다.
- 자산 정리 – CSS 파일을 인라인합니다(스타일시트에 대한 경로를 지정하여 자동으로).
WP Rocket으로 CSS 전달을 최적화하는 방법
WP Rocket 3.10에서 CSS 비동기식 로드 옵션은 이전에 본 페이지 속도 권장 사항인 "렌더링 차단 리소스 제거"를 해결합니다. WP Rocket은 두 가지 주요 CSS 최적화를 다룹니다.
- 웹사이트에서 볼 수 있는 부분(스크롤 없이 볼 수 있는 콘텐츠)을 렌더링하는 데 필요한 중요한 CSS를 생성합니다.
- 다른 모든 CSS 파일을 비동기식으로 로드합니다(먼저 로드해야 할 파일 우선순위 지정).
CSS 전달을 최적화하려면 WP Rocket 대시보드에서 다음 단계를 따르세요.
- 설정 > WP 로켓 으로 이동
- 파일 최적화 탭을 클릭합니다.
- CSS 파일 섹션까지 아래로 스크롤하고 CSS 전달 최적화 라고 표시된 상자를 클릭합니다.
- 사용하지 않는 CSS 제거 옵션( 권장 옵션 )을 선택합니다. 이렇게 하면 페이지에 필요한 CSS만 추출되고 인라인도 됩니다.
또는 WP Rocket을 사용하면 CSS를 비동기식으로 로드할 수 있으며 중요한 CSS에 대한 대체 옵션을 제공합니다. 플러그인이 올바른 중요 CSS를 생성할 수 없는 경우 이 대체 필드를 사용하십시오.
| 사용하지 않는 CSS 제거는 렌더링 차단 CSS를 제거하는 데 권장되는 방법입니다. 둘 다 활성화할 수는 없습니다. |
마지막으로 WP Rocket은 PageSpeed Insights의 "사용하지 않는 CSS 줄이기" 권장 사항도 해결합니다.
사용하지 않은 CSS는 브라우저에서 여전히 로드해야 하기 때문에 페이지의 로드 시간에 영향을 줍니다. LCP(Large Contentful Paint) 및 TBT(총 차단 시간 )와 같은 Google 성능 측정항목도 영향을 받습니다. LCP 및 TBT는 Google PageSpeed 및 Core Web Vitals 등급에서 총 55%의 가중치를 갖기 때문에 이러한 지표를 건강하게 유지하는 것이 중요합니다.
PSI(모바일) 등급이 낮은 WordPress 사이트에서 WP Rocket 옵션을 테스트해 보겠습니다. 페이지 속도 최적화 프로세스에서 WP Rocket이 어떻게 도움이 되는지 알게 될 것입니다.
내 중요한 CSS를 최적화하기 전에 내 성능 등급은 43/100에 불과하여 내 모바일 사이트가 빨간색으로 표시되었습니다.
또한 "사용하지 않는 CSS 줄이기" 및 "렌더링 차단 리소스 제거"라는 두 가지 경고가 표시됩니다.
이제 WP Rocket을 설치하고 " 사용하지 않는 CSS 제거" 옵션을 활성화해 보겠습니다.
성능 결과는 이제 모바일에서 훌륭합니다 . 몇 번의 클릭만으로 94/100에 도달했습니다. WP Rocket은 내 렌더링 경로를 최적화했으며 중요한 CSS도 처리했습니다.
"렌더링 차단 리소스 제거" 및 "사용하지 않는 CSS 줄이기" 경고가 이제 "통과된 감사" 섹션에 있습니다.
저처럼 WP Rocket을 사용하여 중요한 CSS 전달을 최적화할 수 있습니다. 몇 번의 클릭으로 놀라운 성능 목표를 달성하는 데 도움이 된 안정적이고 효율적인 플러그인입니다.
| PSI의 KPI 및 감사 섹션 (이동하는) | WP 로켓 없음 | WP 로켓과 함께 |
| 전반적인 등급 | 43/100 | 94/100 |
| 가장 큰 콘텐츠가 포함된 페인트 | 10.2초 | 0.7초 |
| 총 차단 시간 | 540ms | 0ms |
| "사용하지 않는 CSS 줄이기" | 문제 | 감사 통과 |
| "렌더링 차단 리소스 제거" | 문제 | 감사 통과 |
마무리
중요한 CSS를 최적화하는 것은 어려운 일처럼 보이지만 WP Rocket과 같은 플러그인 덕분에 이 방법이 필요하지 않습니다. 우리는 WP Rocket이 Google PageSpeed Insights의 렌더링 차단 리소스와 관련된 빨간색 경고를 제거하는 데 도움이 되었음을 확인했습니다.
WP Rocket은 웹 성능 모범 사례의 80%를 자동으로 적용하기 때문에 귀중한 시간을 절약 할 수 있으며 활성화 시 즉각적인 속도 향상을 볼 수 있습니다 .
또한, 항상 100% 환불 보장을 믿을 수 있습니다. 우리는 당신이 원할 것이라고 생각하지 않지만 구매 후 14일 이내에 요청하면 기꺼이 환불해 드리겠습니다.