워드프레스 CSS 이해하기
본격적으로 시작하기 전에 WordPress에서 일반 CSS가 어떻게 작동하는지 알아보겠습니다.
각 WordPress 테마는 사이트 스타일을 지정하는 데 필요한 모든 코드가 포함된 style.css로 구성됩니다. 테마 개발자는 블로그 게시물, 댓글, 제품 페이지, 회원 페이지, 양식 등을 포함하는 모든 WordPress 기능을 지원해야 합니다. 설치한 다른 플러그인도 유사한 CSS 스타일시트를 추가할 수 있습니다.
이로 인해 CSS 파일이 부풀려지고 크기가 200kb 이상 커질 수 있습니다.
중요 경로 CSS란 무엇입니까?
CSS 파일이 커짐에 따라 브라우저는 이러한 대용량 파일을 다운로드하고 구문 분석하고 렌더링해야 합니다. 렌더링 차단이라고도 합니다. 또한 첫 번째 의미 있는 렌더링과 첫 번째 의미 있는 렌더링을 증가시킵니다.
Critical Path CSS는 모든 웹 페이지에서 위의 콘텐츠를 렌더링하는 데 필요한 CSS입니다. 이름에서 알 수 있듯이 브라우저가 전체 CSS 파일을 로드하기 전에 빠르게 그리고 렌더링하도록 도와주는 "중요" CSS입니다.
일반적으로 중요 경로의 CSS는 헤더에 포함되고 소스 CSS 파일은 사용 편의성을 위해 비동기식으로 로드되거나 바닥글에 로드됩니다.
Critical Path CSS가 왜 그렇게 중요한가요?
Google PageSpeed Insights 또는 GTmetrix와 같은 도구에서 "css 전달 최적화" 또는 "사용하지 않는 CSS 연기"라는 경고를 이미 본 적이 있을 것입니다.
중요한 CSS는 페이지 로드 시간과 관련이 없습니다. 로딩 시간을 늘리거나 줄이지 않습니다. 그러나 훨씬 더 나은 사용자 경험을 제공합니다. 웹 페이지를 빠르게 "렌더링"하거나 "색상화"하는 데 도움이 됩니다.
- FCP(First Content Draw) 개선
- FMP(First Significant Payment) 개선
- 사용하지 않는 CSS 제거(기술적으로 제거하지 말고 "유용한" CSS 우선 순위 지정)
다음은 중요한 CSS가 있거나 없는 내 블로그의 두 스크린샷입니다.
"중요한 CSS 경로 없음" 섹션에서 볼 수 있듯이 모바일 장치에서 사용자에게 유용한 것을 표시하는 데 거의 5초가 걸렸습니다. 브라우저는 렌더링을 시작하기 위해 CSS 파일에 추가 HTTP 요청을 하고 다운로드하고 구문 분석해야 합니다. 그러나 중요한 CSS를 사용할 때 필요한 모든 CSS는 인라인이어야 하며 브라우저는 HTML 파일을 로드한 후 1초 이내에 즉시 렌더링을 시작할 수 있습니다.
WordPress에서 중요한 CSS를 만드는 방법은 무엇입니까?
WordPress에서 중요한 CSS를 생성하는 방법에는 여러 가지가 있습니다.
캐싱 플러그인 사용
WP Rocket은 정말 잘 작동하는 프리미엄 캐싱 플러그인입니다.
모든 사이트에서 WP Rocket을 사용하는 이유 중 하나는 중요한 CSS 생성 자체입니다. 홈페이지, 게시물 페이지, 카테고리 페이지, 상품 페이지 등에 Critical CSS를 별도로 생성하여 임베딩합니다. 테마나 설정이 변경되면 중요한 CSS를 복원합니다.
버튼 하나로 모든 것이 가능합니다.
중요한 CSS를 생성할 수 있는 기타 캐싱 플러그인
Swift Performance 및 LiteSpeed (LiteSpeed/OpenLiteSpeed 서버 필요)는 Critical CSS를 생성할 수 있는 유사한 플러그인입니다. 이 두 플러그인 모두 서버에 클라우드 및 전체 캐시가 내장되어 있습니다.
Autooptimize + 무료 중요 CSS 생성기 사용
사이트의 URL을 입력하여 중요한 CSS를 제공하는 타사 온라인 도구가 있습니다. pegasasaas는 훌륭한 무료 도구입니다.
방법은 다음과 같습니다.
1 단계. https://pegasaas.com/critical-path-css-generator/로 이동하여 URL을 입력합니다. 생성된 "Critical Path CSS"를 복사합니다.
2 단계 자동 최적화 설정(고급 설정 사용)의 "CSS 옵션"에서 "Inline and Defer CSS"를 선택하고 복사한 CSS를 붙여넣습니다.
장점:
- 무료
빼기:
- 다양한 페이지 유형(예: 홈 페이지, 게시물 페이지, 카테고리 페이지, 제품 페이지 등)에 대해 별도의 중요한 CSS가 없습니다.
- 테마/설정 변경 시 자동으로 다시 빌드하지 않음
WordPress 자체에서 중요한 CSS를 생성할 수 없는 이유는 무엇입니까?
눈치채셨겠지만 CSS 중요 경로를 생성하면 외부 서비스가 활성화됩니다. 그렇다면 WordPress 자체에서 생성할 수 없는 이유는 무엇입니까?
Critical CSS 생성은 Critical(by Google), CriticalCSS 또는 펜트하우스와 같은 오픈 소스 프로젝트를 통해 가능합니다. 이 모든 프로젝트는 PHP가 아닌 NodeJS를 기반으로 합니다. 따라서 서버에 NodeJS를 설치해야 합니다. 대부분의 공유/관리 호스팅 제공업체는 여러 가지 이유로 이를 허용하지 않습니다.
