CSS 성능을 최적화하기위한 20 가지 팁

이 기사에서는 CSS를 최적화하는 20 가지 방법에 대해 설명하고 로딩 속도를 개선하고 개발을 단순화하며 효율성을 향상시키는 것을 목표로합니다. 최신 HTTP 아카이브 보고서에 따르면 웹 사이트에서 리소스 중복성의 광범위한 문제가 있으며, 중간 웹 사이트에는 1700KB의 데이터, 80 HTTP 요청이 필요하며 모바일 장치에 완전히로드하는 데 17 초가 걸립니다. 페이지 무게를 줄이기위한 완전한 가이드는 다양한 제안을 제공 하며이 기사는 CSS 최적화에 중점을 둘 것입니다. CSS는 일반적으로 성능 문제의 범인이 아니지만 일반적인 웹 사이트는 5 개의 스타일 시트에 흩어져있는 40KB의 CSS 만 사용하지만 여전히 최적화의 여지가 있으며 CSS가 사용하는 방식을 변경하면 웹 사이트 성능을 향상시킬 수 있습니다.

키 포인트

브라우저 도구 및 온라인 분석기 사용 : 브라우저 개발자 도구 및 Google Pagespeed Insights와 같은 온라인 플랫폼을 사용하여 CSS로드가 느린 문제를 식별하고 해결하십시오.

주요 개선보다 선호 :

http/2 활성화, GZIP 압축을 사용하고 CDN을 사용하여 더 큰 자원을 효율적으로 처리하여 로딩 속도를 크게 향상시킵니다.
• 그림 대신 CSS를 사용하여 그림자 및 기울기와 같은 시각적 효과를 달성하여 다운로드 크기를 줄이고 유지 관리 가능성을 향상시킵니다. 글꼴 오버 헤드 최소화 :
사용자 지정 글꼴 사용을 제한하고 필요한 스타일과 두께 만 선택하고 시스템 폰트를 사용하여 로딩 시간을 줄입니다.
• 효율적인 CSS 사례 구현 : Flexbox 및 그리드와 같은 최신 레이아웃 방법을 사용하여 CSS 코드를 최소화하고 비용이 많이 드는 속성을 피하기 위해 성능 및 유지 보수를 단순화합니다.
• 분석 도구 사용을 배우십시오
문제를 알지 않으면 성능 문제를 해결할 수 없습니다. 브라우저 개발자 도구는 최상의 시작점입니다. 메뉴에서 시작하거나 f12
• , ctrl shift 또는 safari on macoS
cmd
• alt
i

. 모든 브라우저는 비슷한 기능을 제공하며, 수행되지 않는 페이지에서 도구가 천천히로드됩니다! 그러나 가장 유용한 탭에는 다음이 포함됩니다. 네트워크 탭에는 리소스 다운로드의 폭포 다이어그램이 표시됩니다. 최상의 결과를 얻으려면 캐싱을 비활성화하고 네트워크 속도 속도를 늦추는 것을 고려하십시오. 천천히 다운로드하는 파일을 찾거나 다른 리소스를 차단하십시오. 브라우저는 일반적으로 CSS 및 JavaScript 파일을 다운로드하여 구문 분석 할 때 브라우저 렌더링을 차단합니다. 성능 탭은 브라우저 프로세스를 분석합니다. 녹음을 시작하고 페이지 재 장전과 같은 활동을 실행 한 다음 녹음을 중지하여 결과를보십시오. 검색 : 1. 너무 많은 레이아웃/재 배열

작업, 브라우저는 페이지 요소의 위치와 크기를 다시 계산해야합니다. 3. 구성
1. 작동, 화면에 표시되도록 페이지의 그린 부분을 함께 그룹화합니다. 이것은 일반적으로 가장 적은 프로세서 리소스 소비 작업입니다. 크롬 기반 브라우저는 Google의 Lighthouse 도구를 실행하는 "감사"탭을 제공합니다. 일반적으로 프로그레시브 웹 애플리케이션 개발자가 사용하지만 CSS 성능 권장 사항도 제공합니다.

   온라인 옵션

   또는 장치 및 네트워크 속도 및 기능의 영향을받지 않는 온라인 분석 도구를 사용하십시오. 대부분의 도구는 전 세계 여러 위치에서 테스트 할 수 있습니다. Pingdom 웹 사이트 속도 테스트 gtmetrix Google Pagespeed Insights WebPagetest

   주요 진전이 먼저 이루어졌습니다

   CSS는 성능 문제의 직접적인 원인이 아닐 것입니다. 그러나 몇 분 안에 최적화 해야하는 헤비급 리소스를로드 할 수 있습니다. 예를 들면 :
   • 서버에서 http/2 및 gzip 압축을 활성화합니다 CDN (Content Delivery Network)을 사용하여 동시 HTTP 연결 수를 늘리고 전 세계의 다른 위치로 파일을 복사하십시오. 사용하지 않은 파일을 삭제하십시오
   이미지는 일반적으로 가장 큰 페이지 크기의 이유이지만 많은 웹 사이트가 효과적으로 최적화되지 않습니다.
   • 비트 맵 이미지를 조정하십시오. 엔트리 레벨 스마트 폰에서 촬영 한 멀티 메가 픽셀 이미지는 가장 큰 HD 화면에 완전히 표시 할 수 없습니다. 너비가 1600 픽셀 이상인 이미지가 필요한 웹 사이트는 거의 없습니다.
   적절한 이미지 형식을 사용하십시오. 일반적으로 JPG는 사진에 가장 적합하며 SVG는 벡터 이미지에 가장 적합하며 PNG는 다른 모든 이미지에 가장 좋습니다. 최상의 유형을 찾기 위해 실험 할 수 있습니다.
   • 메타 데이터를 제거하고 압축 계수를 늘려서 이미지 도구를 사용하여 파일 크기를 줄입니다.
   • 즉,
   x
   KB의 이미지 데이터는 kb의 CSS 코드와 같지 않습니다. 이진 이미지는 병렬로 다운로드되며 페이지에 처리 할 처리가 거의 필요하지 않습니다. CSS는 렌더링을 차단하고 계속하려면 객체 모델로 구문 분석해야합니다.
   2. 그림 대신 CSS 효과를 사용하십시오 배경 이미지를 사용하여 테두리, 그림자, 둥근 모서리, 그라디언트 및 기하학적 모양을 만드는 것은 드 rare니다. CSS 코드로 "이미지"를 정의하면 대역폭이 적으며 나중에 수정하거나 애니메이션하기가 더 쉽습니다.

   불필요한 글꼴을 삭제하십시오

   Google Fonts와 같은 서비스를 통해 모든 페이지에 사용자 정의 글꼴을 쉽게 추가 할 수 있습니다. 불행히도, 한 줄의 코드 라인은 수백 킬로바이트의 글꼴 데이터를 검색 할 수 있습니다. 제안 :
   필요한 글꼴 만 사용하십시오.
   • 필요한 두께와 스타일 만로드 - 로마, 400 두께, 이탤릭체가 없습니다.

   제한 문자 세트를 가능한 한 많이 제한합니다. Google Fonts를 사용하면 FONT URL에

   값을 추가하여 특정 문자를 선택할 수 있습니다 (예 :
   )은 Open Sans에 "sitepoint"를 표시합니다.
   2. 보간을 통해 여러 두께와 스타일을 정의하는 가변 글꼴을 고려하여 파일이 더 작습니다. 현재 지원은 Chrome, Edge 및 일부 버전의 Safari로 제한되지만 빠르게 성장해야합니다.
2. 운영 체제 글꼴을 고려하십시오. 500KB 웹 글꼴이 브랜드 친화적 일 수 있지만 일반적으로 사용되는 Helvetica 또는 Arial으로 전환하면 누구나 알 수 있습니까? 많은 웹 사이트에서 사용자 정의 웹 글꼴을 사용하므로 표준 운영 체제 글꼴이 이전보다 훨씬 적습니다!

3. @Import 사용을 피하십시오

   규칙에 따라 모든 CSS 파일이 다른 CSS 파일에 포함될 수 있습니다. 예를 들면 :

   이것은 작은 구성 요소와 글꼴을로드하는 합리적인 방법 인 것 같습니다. 이것은 사실이 아닙니다. 규칙을 중첩 할 수 있으므로 브라우저에 각 파일을 순서대로로드하여 구문 분석해야합니다. HTML의 여러 태그는 CSS 파일을 병렬로로드합니다. 특히 HTTP/2를 사용할 때 훨씬 더 효율적입니다.
다시 말해서, 더 나은 선택이있을 수 있습니다 ...

연결 및 압축 @import

대부분의 빌드 도구를 사용하면 모든 부품을 불필요한 공간, 주석 및 문자를 제거한 큰 CSS 파일로 결합 할 수 있습니다. 파이프와 다중화를 요청하는 HTTP/2를 사용하면 연결의 필요성이 줄어 듭니다. 경우에 따라 CSS 리소스가 작고 자주 변경된 경우 별도의 파일이 더 유리할 수 있습니다. 그러나 대부분의 웹 사이트는 브라우저에서 즉시 캐시되는 단일 파일을 보내는 이점도가 있습니다. GZIP가 활성화되면 압축이 상당한 이점을 가져 오지 못할 수 있습니다. 즉, 실제 결점은 없습니다. 마지막으로, 선언에서 속성을 일관되게 정렬하는 빌드 프로세스를 고려할 수 있습니다. GZIP는 파일 전체에 공통 문자열을 사용할 때 압축을 극대화 할 수 있습니다.

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

현대 레이아웃 기술 사용 @import 수년 동안 CSS 플로트에 레이아웃 페이지를 사용해야했습니다. 이 기술은 기술입니다. 레이아웃이 효과적인지 확인하려면 많은 코드와 마진/충전 조정이 필요합니다. 그럼에도 불구하고 미디어 쿼리가 추가되지 않으면 플로트는 더 작은 화면 크기로 분해됩니다. 현대 대안 : <link> CSS Flexbox는 1 차원 레이아웃에 사용되며 각 블록의 폭에 따라 선을 다음 줄로 감을 수 있습니다. Flexbox는 메뉴, 사진 갤러리, 카드 등에 매우 적합합니다.

CSS 그리드는 명백한 행과 열이있는 2 차원 레이아웃에 사용됩니다. 그리드는 페이지 레이아웃에 적합합니다.

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

모두 브라우저가 로컬로 최상의 레이아웃을 결정할 수 있으므로 두 옵션은 개발하기 쉽고, 코드를 적게 사용하고, 화면 크기에 적응할 수 있으며, 플로팅 렌더링보다 빠릅니다.

6. CSS 코드를 줄입니다 가장 신뢰할 수 있고 가장 빠른 코드는 쓸 필요가없는 코드입니다! 스타일 시트가 작을수록 다운로드 및 구문 분석이 더 빠릅니다. 모든 개발자는 좋은 의도로 시작하지만 기능의 수가 증가함에 따라 시간이 지남에 따라 CSS가 부풀어 오를 수 있습니다. 제거하고 무언가를 깨는 것보다 오래되고 불필요한 코드를 유지하는 것이 더 쉽습니다. 고려해야 할 몇 가지 제안 사항 :
   큰 CSS 프레임 워크를 조심하십시오. 대부분의 스타일을 사용하지는 않으므로 필요한 경우 모듈을 추가하십시오.
   • 명확한 책임이있는 CSS를 작은 문서 (부품)로 구성하십시오. CSS가
   에 명확하게 정의되면 회전 목마 위젯을 제거하는 것이 더 쉽습니다.
   • 독립형 구성 요소를 개발하는 데 도움이되는 BEM과 같은 이름 지정 방법을 고려하십시오. widgets/_carousel.css 깊은 중첩 Sass/Preprocessor 선언을 피하십시오. 확장 된 코드가 예기치 않게 더 커질 수 있습니다.
   • 캐스케이드를 덮어 쓰는 데
   를 사용하지 마십시오.
   • HTML에서 인라인 스타일을 사용하지 마십시오.
   • UNCSS와 같은 도구는 HTML을 분석하여 중복 코드를 제거하는 데 도움이 될 수 있지만 JavaScript 상호 작용으로 인한 CSS 상태에주의를 기울일 수 있습니다. !important
   • 계단식을 준수하십시오!
   CSS-in-JS의 상승으로 개발자는 CSS 글로벌 네임 스페이스를 피할 수 있습니다. 일반적으로 무작위로 생성 된 클래스 이름은 빌드 타임에 생성되므로 구성 요소는 충돌 할 수 없습니다. CSS-in-JS가 삶을 향상 시키면 계속 사용하십시오. 그러나 CSS 계단식의 장점을 모든 프로젝트에서 싸우는 대신 CSS 계단식의 장점을 이해하는 것이 좋습니다. 예를 들어, 단일 위치에서 각 요소에 일반적으로 적용되는 기본 글꼴, 색상, 크기, 테이블 및 양식 필드를 설정할 수 있습니다. 각 구성 요소에서 각 스타일을 선언하는 것은 드 rare니다.
   단순화 된 선택기
   9. 가장 복잡한 CSS 선택기조차도 구문 분석하는 데 몇 밀리 초 정도 걸리지 만 복잡성을 줄이면 파일 크기가 줄어들고 브라우저 구문 분석이 도움이됩니다. 이 선택기가 정말로 필요합니까? ! 마찬가지로, 복잡한 선택기가 실수로 만들어 질 수있는 Sass와 같은 전처리 기의 깊은 둥지에주의하십시오.

   비용이 많이 드는 속성을 조심하십시오

   10. 일부 속성은 다른 속성보다 느리게 렌더링됩니다. 지연을 늘리려면 모든 요소에 상자 그림자를 배치 해보십시오! 브라우저 성능은 다르지만 일반적으로 말하면, 도면 전에 재 계산을 유발하는 모든 작업은 성능 측면에서 더 비쌉니다.

   /* main.css */
   @import url("base.css");
   @import url("layout.css");
   @import url("carousel.css");

   CSS 애니메이션을 사용하는

   <link rel="stylesheet" href="base.css">
   <link rel="stylesheet" href="layout.css">
   <link rel="stylesheet" href="carousel.css">

   >

   기본 CSS 변환 및 애니메이션은 동일한 속성을 수정하는 JavaScript 드라이버보다 항상 빠릅니다. CSS 애니메이션은 IE9 이하와 같은 이전 브라우저에서 작동하지 않지만 이러한 사용자는 누락 된 내용을 결코 알지 못할 것입니다. 즉, 애니메이션의 애니메이션을 피하십시오. 미묘한 효과는 성능에 악영향을 미치지 않고 사용자 경험을 향상시킬 수 있습니다. 애니메이션이 너무 많으면 브라우저의 속도가 느려질 수 있으며 일부 사용자에게는 멀어 질 수 있습니다.

   13. 애니메이션의 고가의 속성을 피하십시오 요소의 크기 또는 위치를 애니메이션하면 전체 페이지가 모든 프레임에서 다시 층화 될 수 있습니다. 애니메이션이 합성
   스테이지에만 영향을 미치는 경우 성능을 향상시킬 수 있습니다. 가장 효과적인 애니메이션 사용 :

   및/또는 팬 (이동), 스케일 또는 회전 요소 (요소가 사용하는 원래 공간은 변경되지 않습니다).

   브라우저는 일반적으로 하드웨어로 인한 GPU를 사용하여 이러한 효과를 렌더링합니다. 이상적이지 않다면
   • 를 사용하여 페이지 스트림에서 요소를 제거하여 자체 레이어에서 애니메이션 할 수 있도록 고려하십시오. opacity
   는 어떤 요소가 애니메이션 될지
   • 를 나타냅니다 transform
   속성을 ​​통해 CSS 저자는 요소가 애니메이션이되어 브라우저가 미리 성능 최적화를 수행 할 수 있음을 나타냅니다. 예를 들어, 응용 프로그램이 요소로 변환되었다고 선언합니다.

   쉼표로 구분 된 수의 수는 정의 될 수 있습니다. 그러나 : <.> position: absolute

   성능 문제를 해결하기 위해 마지막 수단으로 를 사용하십시오
   너무 많은 요소에 적용하지 마십시오 일할 시간을 충분히 제공하십시오. 즉, 즉시 애니메이션을 시작하지 마십시오.
   14. SVG 이미지를 사용하는
   >
   스케일블 벡터 그래픽 (SVG)은 일반적으로 로고, 차트, 아이콘 및 간단한 차트에 일반적으로 사용됩니다. SVG는 JPG 및 PNG 비트 맵과 같은 각 픽셀의 색상을 정의하는 대신 XML을 사용하여 선, 사각형 및 원과 같은 모양을 정의합니다. 예를 들면 :

   will-change 더 간단한 SVG는 동등한 비트 맵보다 작으며 선명도를 잃지 않고 무한대로 스케일링 할 수 있습니다. SVG는 CSS 코드의 배경 이미지로 직접 인쇄 할 수 있습니다. 이것은 작고 재사용 가능한 아이콘에 이상적이며 추가 HTTP 요청을 피합니다. 예를 들면 :

   /* main.css */
   @import url("base.css");
   @import url("layout.css");
   @import url("carousel.css");

   css 로 SVG 스타일을 설정하십시오
   더 일반적인 SVG는 HTML 문서에 직접 내장되어 있습니다.
   • 이것은 SVG 노드를 DOM에 직접 추가합니다. 따라서 모든 SVG 스타일 속성은 CSS를 사용하여 적용 할 수 있습니다. will-change 임베디드 SVG 코드의 수는 줄어들고 CSS 스타일은 필요에 따라 재사용 또는 애니메이션을 할 수 있습니다. 내부 태그 또는 CSS 배경 이미지로 SVG를 사용하면 DOM에서 분리되어 CSS 스타일이 작동하지 않습니다.
   Base64 비트 맵 이미지를 사용하지 마십시오
   • 표준 비트 맵 JPG, PNG 및 GIF는 데이터 URI에서 Base64 문자열로 인코딩 될 수 있습니다. 예를 들면 :
   불행히도 :
   Base64 인코딩은 일반적으로 이진 등가 보다 30% 더 큽니다. 브라우저는 문자열을 구문 분석하여 를 사용해야합니다 이미지를 변경하면 전체 (캐시 된) CSS 파일이 무효화됩니다.
   • HTTP 요청을 줄이는 동안 특히 HTTP/2 연결에서 명백한 이점을 제공하지 않습니다. 일반적으로 이미지가 자주 변경 될 가능성이없고 결과 Base64 문자열이 수백자를 초과하지 않을 경우 인라인 비트 맵을 피하십시오.
   키 CSS
   를 고려하십시오

   Google Page Analytics 도구를 사용하는 사용자는 일반적으로 "Inline Critical CSS"

   또는
   "제안을 볼 수 있습니다. CSS 파일 블록 렌더링을로드하므로 다음 단계를 사용하여 성능을 향상시킬 수 있습니다.
   18. 화면 위의 요소를 렌더링하는 데 사용되는 스타일을 추출하십시오. CriticalCSS와 같은 도구가 도움이 될 수 있습니다. 이 스타일을 html 의 요소에 추가하십시오.
   JavaScript를 사용하여 기본 CSS 파일을 비동기로로드하십시오 (아마도 페이지가로드 된 후).

   이 기술은 의심 할 여지없이 성능을 향상시키고 연속 인터페이스를 통해 프로그레시브 웹 또는 단일 페이지 응용 프로그램에 도움이 될 수 있습니다. 다른 웹 사이트/앱의 경우 혜택이 덜 분명 할 수 있습니다. "붕괴"는 인식되지 않으며 각 장치에서 변경됩니다. 대부분의 웹 사이트에는 페이지 레이아웃이 다릅니다. 각 페이지마다 다른 중요한 CS가 필요할 수 있으므로 구축 도구가 중요 해집니다. 동적 인 JavaScript 중심 이벤트는 중요한 CSS 도구에서 인식하지 못하는 화면의 변경 사항을 유발할 수 있습니다.

   이 기술은 주로 사용자의 첫 페이지로드에 도움이됩니다. CSS는 후속 페이지로 캐시되므로 추가 인라인 스타일로 인해 페이지 가중치가 증가합니다.

   1. 즉, Google은 귀하의 웹 사이트를 좋아하고 각 검색어에 대한 No. 1 순위로 푸시됩니다. (SEO "Expert"는 저를 인용 할 수 있습니다. 다른 모든 사람들은 이것이 말도 안되는 것을 알 것입니다.)
   2. 진보적 인 렌더링을 고려하십시오 <style></style>
   Progressive Rendering은 단일 사이트 전체 CSS 파일을 사용하는 대신 개별 구성 요소에 대한 별도의 스타일 시트를 정의하는 기술입니다. 각 스타일 시트는 구성 요소가 html에서 참조되기 직전에로드됩니다.
   각각

   는 여전히 렌더링을 차단하지만 파일이 더 작기 때문에 짧아집니다. 각 구성 요소가 순서대로 렌더링되므로 페이지를 더 빨리 사용할 수 있습니다. 이 기술은 Firefox, Edge 및 IE에 적합합니다. Chrome 및 Safari는 모든 CSS 파일을로드하고 이런 일이 발생할 때 흰색 화면을 표시하여 경험하지만 각 파일을 에로드하는 것보다 나쁘지 않습니다. 프로그레시브 렌더링은 다양한 구성 요소의 선택으로 개별 페이지를 구축하는 대형 웹 사이트에 도움이 될 수 있습니다.

   20. 사랑하는 법을 배우십시오. CSS 가장 중요한 팁 :
   스타일 시트를 배우십시오! stackoverflow 또는 bootstrap에서 많은 CSS를 추가하면 빠른 결과가 발생할 수 있지만 사용되지 않은 쓰레기로 코드베이스도 팽창 할 수 있습니다. 추가 사용자 정의는 실망스럽게 어려워지고 응용 프로그램은 결코 효율적이지 않을 것입니다. CSS는 배우기 쉽지만 마스터하기가 어렵습니다. 유효한 클라이언트 코드를 만들려면이 기술을 피할 수 없습니다. 일부 CSS 기본 사항을 이해하면 워크 플로에 혁명을 일으키고 응용 프로그램을 향상 시키며 성능을 크게 향상시킬 수 있습니다. 내가 좋아하는 CSS 성능 팁을 놓치고 있습니까?

   CSS 성능 최적화에 대한 질문

   CSS 성능에 영향을 미치는 주요 요인은 무엇입니까? CSS 성능은 다양한 요인의 영향을받습니다. 첫 번째는 CSS 파일의 크기입니다. 더 큰 파일은 다운로드 및 구문 분석하는 데 시간이 오래 걸리므로 웹 사이트의 속도가 느려집니다. 두 번째 요소는 CSS 선택기의 복잡성입니다. 복잡한 선택기는 페이지의 요소와 일치하기 위해 더 많은 처리 능력이 필요합니다. 마지막으로, CSS 애니메이션 및 변환을 사용하면 특히 처리 능력이 제한된 모바일 장치에서 성능에 영향을 줄 수 있습니다. 성능을 향상시키기 위해 CSS 파일의 크기를 줄이는 방법은 무엇입니까?

   CSS 파일의 크기를 줄이기위한 다양한 전략이 있습니다. 하나는 사용하지 않은 스타일을 삭제하는 것입니다. PurifyCSS와 같은 도구는 사용하지 않은 CS를 식별하고 삭제하는 데 도움이 될 수 있습니다. 또 다른 전략은 공간 및 주석과 같은 불필요한 문자를 제거하는 CSS를 압축하는 것입니다. 마지막으로 CSS 압축 도구를 사용하거나 서버에서 GZIP 압축을 활성화하여 파일 크기를 추가로 줄입니다.

   복잡한 CSS 선택기는 성능에 어떤 영향을 미칩니 까? Complex CSS Selector는 페이지의 요소와 일치하기 위해 더 많은 처리 능력이 필요하기 때문에 웹 사이트 속도를 늦 춥니 다. 예를 들어, 자손 선택기 (예 : )는 클래스 선택기 (예 : )보다 비싸다. 경험상 선택기는 성능을 향상시키기 위해 가능한 한 간단하고 구체적으로 유지해야합니다. CSS 애니메이션과 성능에 대한 전환의 영향은 무엇입니까?

   CSS 애니메이션 및 변환은 특히 처리 능력이 제한된 모바일 장치에서 성능에 크게 영향을 줄 수 있습니다. 레이아웃 오프 세트와 다시 그리기를 유발할 수있어 웹 사이트 속도가 느려질 수 있습니다. 성능을 향상 시키려면

   속성을 ​​사용하여 브라우저를 미리 알리십시오.

   모바일 장치의 CSS를 최적화하는 방법은 무엇입니까?

   모바일 장치의 CSS 최적화에는 다양한 전략이 필요합니다. 먼저 미디어 쿼리를 사용하여 장치 특성에 따라 다양한 스타일을 제공하는 것을 고려하십시오. 둘째, 모바일 장치의 성능을 늦추는 복잡한 애니메이션과 변환을 피하십시오. 마지막으로 반응 형 이미지와 게으른로드를 사용하여 다운로드해야 할 데이터의 양을 줄입니다.

   CSS 성능을 측정하는 데 어떤 도구를 사용할 수 있습니까?

   다양한 도구를 사용하여 CSS 성능을 측정 할 수 있습니다. Google의 등대 및 Pagespeed Insights는 CSS를 포함한 웹 사이트 성능에 대한 포괄적 인 개요를 제공 할 수 있습니다. 또한 Chrome 개발자 도구의 성능 패널을 통해 비용이 많이 드는 CSS를 식별하고 최적화하는 데 도움이됩니다.

   CSS는 SEO에 어떤 영향을 미칩니 까?

   CSS 자체는 SEO에 직접적인 영향을 미치지 않지만 순위에 간접적으로 영향을 미칩니다. 느리게로드하는 웹 사이트 (일반적으로 최적화되지 않은 CSS로 인한)는 사용자 경험이 잘못되어 SEO에 부정적인 영향을 줄 수 있습니다. 또한 Google은 페이지 속도를 순위 요소로 취급하므로 CSS를 최적화하면 SEO를 개선하는 데 도움이됩니다.

   CSS 전 처리기를 사용하여 성능을 향상시키는 방법은 무엇입니까?

   SASS 및 LESS와 같은 CSS 전 처리기는 코드를보다 효율적이고 쉽게 작성할 수 있도록함으로써 성능을 향상시키는 데 도움이 될 수 있습니다. 변수, 중첩 및 믹스 인과 같은 기능을 제공하여 작성하는 데 필요한 코드의 양을 줄이고 관리하기 쉽습니다.

   중요한 CSS는 무엇이며 성능을 향상시키는 방법은 무엇입니까?

   중요한 CSS는 콘텐츠를 웹 페이지 화면 위로 렌더링하는 데 필요한 최소 차단 CSS입니다. 중요한 CSS를 식별하고 인화함으로써 페이지의 초기 렌더링 속도를 높이면 지각 성능을 향상시킬 수 있습니다.

   CSS 전달을 최적화하는 방법은 무엇입니까?

   CSS 전달 최적화에는 다양한 전략이 포함됩니다. 먼저, 추가 HTTP 요청을 피하기 위해 작은 CSS를 HTML에 직접 인출하는 것을 고려하십시오. 둘째, 렌더링 차단 자원을 줄이기 위해 비정규 CSS를 지연시킵니다. 마지막으로 HTTP/2를 사용하여 CSS 파일을보다 효율적으로 제공하는 것을 고려하십시오.

위 내용은 CSS 성능을 최적화하기위한 20 가지 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!