웹사이트 성능 향상을 위해 CSS를 최소화하는 방법

CSS를 최소화하는 이유는 무엇인가요?

CSS 축소는 캐스케이딩 스타일 시트(CSS) 파일의 크기를 줄여 더 빠르게 로드되도록 합니다. CSS 축소는 브라우저의 해석 방식에 영향을 주지 않으면서 CSS 마크업에서 불필요한 문자와 공백을 모두 제거하는 방식으로 작동합니다.

CSS 파일에는 HTML 요소 서식을 지정하는 지침이 포함되어 있습니다. 가벼운 옷을 입으면 조깅할 때 더 빨리 달릴 수 있는 것처럼 웹페이지가 더 빨리 로드되면 전체적으로 웹페이지가 더 빨리 로딩됩니다. 빠른 로딩은 사용자 경험과 SEO 페이지의 가치를 향상시키며, 페이지 속도 개선은 전환율을 높이는 데에도 도움이 될 수 있습니다.

예를 들어, 이 간단한 스타일시트에는 여러 줄의 코드와 함께 이를 읽는 개발자를 위한 주석이 포함되어 있습니다:

/* paragraph styling here */

p {
font-family: arial;
color: green;
background-color: white;
}

/* links */

a:link {
color: blue;
}

a:visited {
color: white;
}

CSS 축약 후에는 압축된 한 줄만 남고 주석이 제거됩니다:

p{글꼴가족:돋움꼴;색상:녹색;배경색:흰색;}a:link{색:파란색;}a:visited{색:흰색;} 

이 텍스트는 사람의 가독성이 떨어지지만 브라우저는 두 번째 버전을 첫 번째 버전과 똑같은 방식으로 읽고 해석합니다. 미니화된 버전은 공간을 덜 차지하므로 로딩 속도가 빠르다는 장점이 있습니다.

페이지 렌더링 작동 방식

브라우저가 웹페이지를 표시하려면 먼저 웹페이지에 어떤 요소(텍스트, 이미지, 기타 멀티미디어 등)가 있는지, 페이지의 모든 요소가 어디에 있는지 파악해야 합니다. 건축업자가 공사를 시작하기 전에 건물의 청사진이 필요한 것처럼 브라우저는 페이지 렌더링을 시작하기 전에 웹페이지의 "청사진(" )이 필요합니다.

웹페이지의 HTML 파일을 받으면 브라우저는 페이지의 모든 요소에 대한 대략적인 개요 또는 스케치와 같은 DOM(문서 객체 모델) 트리를 구성하기 시작합니다. 브라우저는 또한 <style> 태그와 연결된 CSS 파일을 모두 구문 분석하여 모든 페이지 요소의 스타일을 매핑하는 CSSOM 트리를 구축합니다.

마지막으로 브라우저는 DOM과 CSSOM을 결합하여 "렌더 트리를 생성합니다(" ). 렌더링 트리가 생성되면 브라우저에서 페이지 페인팅을 시작합니다. 이렇게 될 때까지 사용자는 빈 화면을 보게 됩니다.

결론: 브라우저가 CSS 다운로드 및 읽기를 완료할 때까지 페이지가 표시되지 않습니다.

CSS로 웹페이지가 표시되지 않도록 차단하는 방법은 무엇인가요?

웹 개발에서 최종 사용자에게 페이지를 표시하기 전에 로드해야 하는 요소나 기능을 "렌더링 차단 리소스라고 합니다(" ). CSS가 바로 그런 리소스입니다. 렌더링 차단 리소스는 가능한 한 빠른 로딩을 위해 최적화되어야 합니다.

렌더링을 차단하는 대용량 리소스는 다운로드하는 데 시간이 오래 걸리므로 브라우저가 대기(말 그대로 페이지가 차단됨)하게 되어 사용자에게 아무 일도 일어나지 않는 것처럼 보입니다. 이러한 지연으로 인해 사용자가 페이지를 이탈하는 경우가 많습니다("바운스").

또한 Google이 페이지 성능을 측정하는 데 사용하는 지표, 특히 페이지에서 가장 큰 요소가 로드되는 데 걸리는 시간을 측정하는 LCP(Largest Contentful Paint)에도 영향을 미칩니다. 코어 웹 바이탈 점수가 낮으면 Google 검색 결과에서 페이지의 순위가 낮아져 페이지의 전체 트래픽이 감소할 수 있습니다.

CSS를 최소화하는 방법

다행히도 CSS에 사용할 수 있는 축소 도구가 많이 있습니다. 가장 편리한 방법은 웹사이트의 콘텐츠 전송 네트워크(CDN), 캐싱하여 콘텐츠를 전송하는 서비스( )와 통합된 축소 도구를 사용하는 것입니다. CDN은 성능을 더욱 향상시키기 위해 축소 서비스를 제공할 수 있어야 합니다.

Cloudflare 자동 축소 는 Cloudflare CDN에 포함되어 있습니다. 사이트 소유자는 Cloudflare 대시보드에서 축소할 CSS 파일(JavaScript 및 HTML 파일과 함께)을 선택할 수 있습니다.

CSS 축약과 압축의 차이점은 무엇인가요?

기술적으로 CSS 축소는 파일 크기를 줄인다는 목표는 같지만 CSS 압축과는 다릅니다. 축약은 주석과 문자를 제거하여 코드를 변경합니다. 압축은 압축 알고리즘(예: gzip)을 사용하여 파일을 더 작게 만들며 실제로 파일 내용을 변경하지 않습니다.

CSS를 최소화하면 단점이 있나요?

축소된 CSS는 가독성이 떨어지는 경우가 많기 때문에 축소하면 개발자가 CSS 마크업의 버그를 수동으로 식별하고 수정하기가 더 어려워질 수 있습니다.

또한 CSS를 축소하는 것만으로는 웹사이트의 성능()을 개선하기에 충분하지 않습니다. 웹 사이트 밀리초를 절약할 수 있지만, 웹사이트 운영자가 이미지 최적화, 브라우저 HTTP 캐싱 등을 포함하여 상당한 성능 개선( )을 보기 위해 수행해야 하는 추가 조치가 있습니다.

CSS와 자바스크립트 축소

자바스크립트 축소( )도 비슷한 개념이지만 실행 가능한 자바스크립트 코드를 위한 것입니다. 주석, 공백 및 기타 추가 문자가 제거되어 .js 파일을 더 빠르게 로드하고 실행할 수 있습니다. 자바스크립트와 CSS 축소는 모두 웹사이트 로딩 속도를 높이는 데 기여하며, 사용자 참여도를 높이고 유기적 트래픽을 증가시킬 수 있습니다.

웹사이트 운영자는 Cloudflare CDN을 사용하여 CSS와 JavaScript를 모두 최소화할 수 있습니다 - 여기에서 사용 가능한 Cloudflare 요금제에 대해 알아보세요.