WordPress에서 중요한 CSS를 생성하는 방법(2가지 방법)

귀하의 웹사이트를 방문하는 사람들은 귀하의 콘텐츠를 보기 위해 오랜 시간을 기다리기를 원하지 않습니다. 코드를 최적화하지 않으면 CSS와 같은 렌더링 차단 리소스로 인해 방문자가 더 느린 로드 시간을 인식할 수 있습니다.

다행스럽게도 웹 사이트에 중요한 CSS를 쉽게 생성할 수 있습니다. Jetpack Boost와 같은 플러그인을 설치하면 스크롤 없이 볼 수 있는 콘텐츠를 표시하는 데 필요한 모든 CSS를 추출할 수 있습니다. 이는 웹 사이트를 더 빠르고 사용자 친화적으로 표시하는 데 핵심이 될 수 있습니다.

이 게시물에서는 중요한 CSS와 웹사이트용 CSS 생성을 고려해야 하는 이유에 대해 설명합니다. 그런 다음 WordPress에서 이를 수행하는 두 가지 방법을 보여 드리겠습니다.

WordPress의 중요한 CSS는 무엇입니까?

방문자가 웹사이트 링크를 클릭하면 브라우저는 콘텐츠를 완전히 렌더링하기 위해 일련의 작업을 처리해야 합니다. 코드를 다운로드, 처리 및 픽셀로 변환하는 것과 관련된 모든 단계가 주요 렌더링 경로를 구성합니다.

브라우저는 이 로드 프로세스 동안 사이트의 HTML, CSS 및 JavaScript 코드를 위에서 아래로 읽습니다. 페이지를 렌더링하는 데 어떤 리소스가 가장 중요한지 자동으로 알지 못하므로 브라우저가 불필요한 코드를 처리하는 데 멈출 수 있습니다.

특정 CSS 파일이 웹 사이트 렌더링을 중지하면 렌더링 차단 리소스가 됩니다. 페이지를 표시하는 데 필요하지 않더라도 이 렌더링 차단 CSS가 완전히 처리될 때까지 방문자는 콘텐츠를 볼 수 없습니다.

중요한 CSS는 스크롤 없이 볼 수 있는 웹 콘텐츠에 필요한 CSS 코드를 나타냅니다. 기본적으로 브라우저가 방문자에게 콘텐츠의 첫 번째 섹션을 표시하는 데 필요한 최소한의 코드입니다.

중요한 CSS 생성의 이점

웹 페이지에 중요한 CSS를 생성하려면 렌더링을 차단하는 CSS를 제거하고 브라우저가 필요한 것만 처리하도록 합니다.

1. 콘텐츠 전달 최적화

WordPress 웹사이트의 CSS 제공을 최적화하면 렌더링 프로세스를 개선할 수 있습니다. 프런트 엔드 방문자에게는 페이지가 더 빨리 로드되는 것처럼 보일 수도 있습니다.

누군가 귀하의 웹사이트를 방문하면 가장 먼저 보게 되는 것은 스크롤 없이 볼 수 있는 콘텐츠입니다. 이것은 스크롤할 필요 없이 첫 페이지에 표시되는 모든 것입니다.

중요한 CSS를 추출하여 이 초기 섹션을 표시하는 데 필요한 CSS 파일을 최적화합니다. 이것이 없으면 사용자는 완전히 렌더링되지 않은 부분 요소를 볼 수 있습니다.

일반적인 오해는 중요한 CSS가 로딩 시간을 줄여준다는 것입니다. 이것이 사실이 아니지만 최적화 기술은 체감 성능을 향상시킬 수 있습니다.

본질적으로 사용자는 브라우저가 스크롤 없이 볼 수 있는 요소를 더 효율적으로 표시할 수 있기 때문에 페이지가 더 빨리 로드된다고 생각할 것입니다.

WordPress에 중요한 CSS를 생성함으로써 방문자는 사이트에서 더 나은 사용자 경험(UX)을 갖게 됩니다. 결과적으로 이탈률을 줄이고 재방문을 장려할 수 있습니다.

2. 핵심 성능 보고서 개선

WordPress에 중요한 CSS가 페이지 로딩 시간을 늘리거나 줄이지는 않지만 Core Web Vitals를 개선할 수 있습니다. 이러한 지표는 웹사이트의 사용자 경험을 분석합니다.

핵심 성능 보고서는 다음과 같습니다.

• LCP(Largest Contentful Paint) : 웹사이트의 로딩 성능
• FID(First Input Delay) : 웹사이트의 상호작용성
• CLS(Cumulative Layout Shift) : 웹사이트의 시각적 안정성

Core Web Vitals 보고서에 대한 웹사이트를 스캔한 후 FCP(First Contentful Paint) 또는 TTFB(Time to First Byte)와 같은 추가 메트릭을 볼 수 있습니다. 이는 LCP에 영향을 미치며 로드 프로세스에서 중요한 역할을 합니다.

중요한 CSS는 FCP에 직접적인 영향을 미칩니다. 간단히 말해서 FCP는 웹 페이지가 로드되기 시작한 후 첫 번째 요소를 렌더링하는 데 걸리는 시간을 측정합니다. 사이트의 FCP 점수가 낮으면 방문자에게 한동안 빈 페이지가 표시되는 경우가 많습니다.

WordPress 웹사이트 소유자는 1.8초 미만의 FCP를 얻는 것을 목표로 해야 하지만 다음과 같은 많은 요소가 이 점수에 부정적인 영향을 미칠 수 있습니다.

• 렌더링 차단 JavaScript 및 CSS
• 느린 서버
• 부피가 큰 글꼴 파일
• 대용량 DOM(문서 개체 모델) 크기

렌더링 차단 CSS는 FCP에 기여하므로 중요한 CSS를 생성하면 이 점수를 높일 수 있습니다. 이 과정에서 스크롤 없이 볼 수 있는 콘텐츠를 렌더링하는 데 필요한 모든 CSS를 인라인합니다.

렌더링 차단 CSS에 대해 웹 사이트를 테스트하는 방법

WordPress에 중요한 CSS를 생성하기 전에 웹 사이트에 필요한지 여부를 알아야 합니다. 큰 CSS 파일은 렌더링 차단 리소스로 간주되므로 속도 최적화 도구를 사용하여 스캔할 수 있습니다.

시작하려면 웹사이트 URL을 PageSpeed ​​Insights에 입력하세요. 이 Google 소프트웨어는 다양한 속도 감사를 통해 사이트 성능을 분석합니다.

페이지 상단에 Core Web Vitals 평가가 표시됩니다. 여기에는 가장 큰 콘텐츠가 포함된 페인트, 첫 번째 입력 지연, 누적 레이아웃 이동, 첫 번째 콘텐츠가 포함된 페인트, 다음 페인트에 대한 상호 작용 및 첫 번째 바이트까지의 시간에 대한 메트릭이 포함됩니다.

앞에서 배운 것처럼 렌더링 차단 CSS는 FCP 점수와 밀접하게 연결되어 있습니다. 모바일 및 데스크탑 평가 결과가 모두 1.8초 이하인지 확인하십시오.

낮은 점수를 받았다면 웹 사이트에 부피가 크고 최적화되지 않은 CSS 파일이 있을 수 있습니다. 이것이 사실인지 확인하려면 기회 까지 아래로 스크롤하십시오. 이 섹션에서는 웹사이트 로딩 시간을 개선하기 위한 구체적인 제안을 제공합니다.

여기에서 렌더링 차단 리소스를 제거 하라는 경고가 표시될 수 있습니다. 이 메시지는 JavaScript 파일을 참조할 수 있지만 중요한 CSS를 생성해야 한다는 신호일 수도 있습니다.

WordPress에서 중요한 CSS를 생성하는 방법

이제 WordPress에 중요한 CSS와 그것이 중요한 이유에 대해 더 많이 이해했으므로 생성할 시간입니다! 기술 수준에 관계없이 초보자에게 친숙한 자습서를 따라 WordPress에서 CSS 제공을 최적화하는 방법을 쉽게 배울 수 있습니다.

방법 1: 플러그인으로 중요한 CSS 생성

직접 생성할 수도 있지만 WordPress 플러그인으로 CSS 전달을 최적화하는 것이 더 쉬운 경우가 많습니다. 올바른 도구는 덜 중요한 CSS를 자동으로 연기할 수 있습니다. 또한 코드를 수동으로 편집할 필요가 없습니다.

Jetpack Boost는 사이트의 로딩 성능을 빠르게 향상시킬 수 있습니다. 간단한 설정 프로세스 후에 이 플러그인을 사용하여 중요한 CSS를 생성하고 필수적이지 않은 JavaScript를 연기하는 등의 작업을 수행할 수 있습니다.

Jetpack Boost를 사용하려면 WordPress에서 설치하고 활성화하세요. 그런 다음 웹사이트의 현재 성능에 따라 점수를 받게 됩니다.

무료 플러그인을 사용하면 CSS 로딩 최적화 옵션이 표시됩니다. 또는 유료 구독으로 업그레이드하여 중요한 CSS를 자동으로 생성할 수 있습니다. 이렇게 하면 변경할 때마다 CSS를 다시 생성하지 않아도 됩니다.

중요한 CSS를 활성화하려면 왼쪽에 있는 스위치를 사용하기만 하면 됩니다. 마찬가지로 필수적이지 않은 JavaScript를 연기하고 이미지에 대한 지연 로딩을 켤 수 있습니다. 이러한 설정을 함께 사용하면 페이지 로드 시간을 크게 줄이고 방문자가 콘텐츠를 더 일찍 볼 수 있습니다.

방법 2: 중요한 CSS를 수동으로 생성

플러그인을 사용하지 않으려면 중요한 CSS를 수동으로 생성할 수도 있습니다. 이 방법은 사이트의 코드 편집을 포함하므로 초보자에게는 더 복잡한 프로세스가 될 수 있음을 기억하는 것이 중요합니다.

1단계: 웹사이트 백업

시작하려면 WordPress 사이트의 백업을 생성해야 합니다. 사이트 파일에 실수가 있으면 이 저장된 버전으로 쉽게 되돌릴 수 있습니다. 이렇게 하면 중요한 데이터가 손실되지 않습니다.

백업을 쉽게 관리해야 하는 경우 Jetpack VaultPress 백업 플러그인을 설치할 수 있습니다. 이 도구는 백업을 오프사이트에 저장하고 사이트가 완전히 다운된 경우에도 원클릭 복원을 제공합니다.

시작하는 방법은 다음과 같습니다.

플러그인 → WordPress 대시보드에서 새로 추가 로 이동합니다. "Jetpack VaultPress 백업"을 검색하고 지금 설치 → 활성화 를 클릭합니다.

그러면 플러그인을 설정할 수 있는 새 창이 표시됩니다. Jetpack 설정 을 클릭합니다.

그런 다음 사이트를 WordPress.com 계정에 연결합니다. 사이트로 다시 리디렉션되면 지금 업그레이드 를 클릭하여 Jetpack VaultPress 백업 계획에 대한 여러 옵션을 봅니다.

최소한 백업 계획이 필요하지만 보안 및 전체는 사이트를 보호, 확장 및 가속화하기 위한 추가 도구를 제공합니다.

첫 번째 백업이 자동으로 시작되며 WordPress 대시보드에서 Jetpack → 백업 으로 이동하여 진행 상황을 확인할 수 있습니다.

다음 몇 단계 동안 실수가 발생하면 이 페이지로 돌아와 이 시점으로 복원을 누르십시오. 이렇게 하면 사이트가 이전 버전으로 되돌아가 발생한 오류가 제거됩니다.

2단계: 중요한 CSS 생성기 사용

웹 사이트가 백업되었음을 알게 되면 중요한 CSS 생성을 시작할 수 있습니다. 이를 수행하는 가장 쉬운 방법 중 하나는 중요한 CSS 생성기를 사용하는 것입니다. 이 도구는 중요한 CSS를 자동으로 생성하므로 수동으로 코드를 생성할 필요가 없습니다.

먼저 CoreWebVitals Critical CSS 생성기를 엽니다. 최적화하려는 웹사이트 또는 특정 페이지의 URL을 입력합니다. 그런 다음 중요한 CSS 생성 을 누르십시오.

로드가 완료되면 텍스트 상자에 생성된 CSS 코드가 표시됩니다. 이 코드를 복사하십시오.

이 코드를 저장한 후 웹사이트에 인라인할 수 있습니다!

3단계: 인라인 크리티컬 CSS

누군가 귀하의 웹사이트를 방문하면 브라우저가 서버에서 귀하의 사이트 파일을 검색합니다. 구문 분석 프로세스 중에 필요한 콘텐츠에 대해 먼저 <head> 섹션을 확인합니다. 그런 다음 <body> 콘텐츠 렌더링을 계속합니다.

중요한 CSS의 우선순위를 지정하려면 파일의 <head> 섹션에 배치하세요. 이것을 인라인이라고 합니다. CSS를 인라인하면 브라우저는 나머지 페이지를 렌더링하기 전에 이 스타일시트를 검색하도록 요청합니다.

기본적으로 인라인 CSS는 코드를 사용해야 하는 곳에 코드를 배치합니다. 따라서 방문자의 브라우저는 대상 콘텐츠를 표시 하기 전에 렌더링 차단 파일을 구문 분석할 필요가 없습니다.

생성된 중요한 CSS를 복사한 후에는 파일에 인라인할 수 있습니다. FTP를 통해 public_html 폴더로 이동합니다. 그런 다음 wp-content → 테마 → 활성 테마 로 이동하여 header.php 파일을 엽니다.

이 헤더 파일에서 <title> 태그를 찾습니다. 그 아래에 <style> 태그를 사용하여 중요한 CSS를 추가합니다. 마지막으로 파일 업데이트 를 선택합니다.

자주 묻는 질문(FAQ)

지금까지 중요한 CSS와 이를 생성하는 방법에 대해 논의했습니다. 웹사이트에서 CSS 인라인에 대해 여전히 질문이 있는 경우 여기에서 답변해 드립니다!

중요한 CSS를 생성하면 사이트의 외관이 손상될 수 있습니까?

잘못 수행하면 중요한 CSS를 생성하여 사이트의 모양과 레이아웃에 부정적인 영향을 미칠 수 있습니다. 다행히 WordPress 사이트의 저장된 백업을 복원하기만 하면 모든 변경 사항을 되돌릴 수 있습니다. Jetpack VaultPress 백업을 사용하면 클릭 한 번으로 활동 로그를 보고 사이트의 이전 버전을 복원할 수 있습니다.

또한 Jetpack Boost와 같은 플러그인을 사용하여 필요할 때마다 중요한 CSS를 켜고 끌 수 있습니다. 이러한 간단한 설정은 WordPress 모범 사례에 따라 구축되었으므로 프런트 엔드에서 사이트에 영향을 줄 가능성이 적습니다.

내 CSS 코드를 최적화하기 위해 무엇을 더 할 수 있습니까?

사이트에서 CSS를 더욱 최적화하려면 축소하는 것이 좋습니다. CSS 축소 중에 불필요한 코드를 제거하여 CSS 파일 크기를 줄입니다.

CSS 코드에는 읽기 쉽도록 공백과 줄 바꿈이 있을 수 있습니다. 브라우저는 이러한 추가 요소 없이 코드를 처리할 수 있으므로 삭제할 수 있습니다. 이렇게 하면 파일을 실행하는 데 필요한 리소스와 시간이 줄어듭니다.

사용하지 않는 CSS를 모두 제거할 수도 있습니다. 파일을 필요한 코드로만 줄이면 웹 사이트가 더 빨리 로드되기 시작합니다.

내 페이지 속도를 개선하기 위해 무엇을 더 할 수 있습니까?

사이트 속도를 높이는 가장 좋은 방법 중 하나는 Core Web Vitals를 개선하는 것입니다. PageSpeed ​​Insights와 같은 도구를 사용하여 렌더링 차단 리소스와 같은 최적화되지 않은 요소를 식별할 수 있습니다.

브라우저는 사이트의 코드를 위에서 아래로 로드하므로 로드 프로세스는 JavaScript에 의해 쉽게 중단될 수 있습니다. JavaScript 구문 분석을 연기하면 방문자는 콘텐츠를 보기 전에 스크립트가 로드될 때까지 기다릴 필요가 없습니다.

또한 이미지에 대한 지연 로딩 구현을 고려하십시오. Jetpack Boost에서 이 설정을 사용하면 방문자가 아래로 스크롤할 때까지 접힌 부분 아래의 사진이 로드되지 않습니다. 이렇게 하면 웹 사이트에서 모든 이미지를 동시에 로드하지 못하여 렌더링 프로세스가 지연될 수 있습니다.

마지막으로 CDN(Content Delivery Network)은 웹 사이트 속도를 크게 높일 수 있습니다. 하나의 서버에 의존하는 대신 CDN은 전 세계 데이터 센터 시스템을 사용합니다. Jetpack의 CDN과 같은 옵션은 이미지 및 정적 파일의 콘텐츠 전달을 향상시킬 수 있습니다.

WordPress에서 CSS 전달 최적화

웹 사이트의 콘텐츠 제공을 개선하려는 경우 렌더링 차단 리소스를 제거하는 것이 중요합니다. 최적화되지 않은 CSS는 렌더링 프로세스를 지연시킬 수 있으므로 중요한 CSS를 생성할 가치가 있습니다. 이렇게 하면 로딩 시간이 직접적으로 개선되지는 않지만 방문자가 스크롤 없이 볼 수 있는 콘텐츠를 훨씬 빠르게 볼 수 있습니다.

검토를 위해 WordPress에서 중요한 CSS를 생성하는 방법은 다음과 같습니다.

1. Jetpack Boost와 같은 플러그인으로 중요한 CSS를 생성하세요.
2. 중요한 CSS 생성기를 사용하십시오.

Jetpack Boost를 사용하면 코드를 편집하지 않고도 CSS를 최적화할 수 있습니다. 플러그인을 다운로드하고 활성화한 후 단 한 번의 클릭으로 중요한 CSS를 생성할 수 있습니다!