초고속 CSS를위한 5 가지 팁

사이트의 CSS 크기에 대해 생각해 보셨습니까? 스타일 시트가 부풀어 오르면 페이지 렌더링이 지연 될 수 있습니다.

CSS는 제공 할 가장 큰 자산 유형은 아니지만 브라우저가 가장 먼저 발견하는 자산 유형 중 하나입니다. 브라우저는 CSS가 다운로드되고 파싱 될 때까지 페이지를 렌더링하지 못하도록 차단되므로 가능한 한 간결해야합니다. 여기에 도달하는 데 도움이되는 5 가지 팁이 있습니다.



복잡한 사이트가 있습니까? 당신은 완벽한 것이 필요합니다 웹 호스팅 서비스. 또는 소란스럽지 않은 사이트를 만들고 싶다면 웹 사이트 빌더 .



01. 얕은 선택자 사용

부모님은 얕은 것이 미덕이 아니라 CSS에 관해서는 틀렸다고 말했습니다. 일관되게 사용되는 얕은 선택기는 큰 스타일 시트에서 킬로바이트를자를 수 있습니다. 이 선택기를 사용하십시오.

nav ul li.nav-item

이것은 더 간결하게 표현할 수 있습니다.



.nav-item

CSS를 날렵하게 유지하는 데 도움이 될뿐만 아니라 브라우저는 얕은 선택기가 대상으로하는 요소를 더 빠르게 렌더링합니다. 브라우저는 오른쪽에서 왼쪽으로 선택기를 읽습니다. 선택기가 깊을수록 브라우저가 해당 선택기가 적용된 요소를 렌더링하고 다시 렌더링하는 데 더 오래 걸립니다. 자주 리플 로우되는 복잡한 DOM의 경우 짧은 선택기가 버벅 거림을 줄일 수도 있습니다.

이상적으로는 선택기를 가능한 한 얕게 만들고 싶지만 모든 것을 뼈대로 잘라야한다는 의미는 아닙니다. 때로는 구성 요소를 확장하기 위해 추가 특수성이 필요합니다. 적절한 균형을 유지하되 실용적이어야합니다.

02. 속기 속성 사용

속기 CSS를 사용하면 사이트 속도가 빨라집니다.



속기 CSS를 사용하면 사이트 속도가 빨라집니다.

이것은 상식처럼 보이지만, longhand 속성이 불필요하게 사용되는 빈도에 놀랄 것입니다. 다음은 사용중인 몇 가지 긴 속성의 예입니다.

font-size: 1.5rem; line-height: 1.618; font-family: 'Arial', 'Helvetica', sans-serif;

그것은 많은 CSS입니다! 정리해 보겠습니다.

사자 머리를 그리는 방법
font: 1.5rem/1.618 'Arial', 'Helvetica', sans-serif;

그만큼 하다 속기 속성은 여러 선언을 훨씬 적은 공간을 차지하는 편리한 한 줄로 압축합니다.

위의 예에서 속기는 긴 손보다 약 40 % 적은 공간을 사용합니다. 언뜻보기에는 가독성이 좋지 않지만, 사용하는 데 시간을 투자 한 후에는 구문이 두 번째 특성이됩니다.

물론이야, 하다 사용할 수있는 유일한 속기가 아닙니다. 예를 들면 여유 다음과 같은 더 긴 속성 대신 사용할 수 있습니다. 여백 상단 , 여백-오른쪽 등등.

그만큼 속성은 같은 방식으로 작동합니다. CSS를 정리하는 더 많은 방법을 위해 Mozilla Developer Network는 유용한 목록을 제공합니다. 속기 속성 참조 .

캐스케이드에서 더 낮은 값을 재정의해야하는 경우 어떻게하나요? 예를 들어 더 큰 디스플레이를 위해 글꼴 크기를 변경해야하는 제목 요소가 있다고 가정 해 보겠습니다.

이 경우 더 구체적인 글꼴 크기 대신 속성 :

h1{ font: 1.5rem/1.618 'Arial', 'Helvetica', sans-serif; } @media (min-width: 60rem){ h1{ font-size: 2rem; } }

이것은 편리 할뿐만 아니라 구성 요소의 유연성도 증가시킵니다. 기본의 다른 부분이 하다 속성이 수정되면 이러한 변경 사항이 더 큰 디스플레이에 반영됩니다. 이는 새 컨텍스트에 다른 처리가 필요한 구성 요소 재정의에 적합합니다.

03. 미리로드 리소스 힌트 사용

그만큼 예압 리소스 힌트를 사용하면 브라우저가 사이트의 CSS를로드 할 때 더 빨리 시작할 수 있습니다. 그만큼 예압 리소스 힌트는 브라우저에 자산에 대한 조기 가져 오기를 시작하도록 지시합니다.

당신은 그것을 HTML의 태그 :

또는 서버 구성에서 HTTP 헤더로 :

Link: ; rel=preload; as=style

이 두 가지 시나리오에서 예압 로드시 브라우저가 먼저 시작됩니다. /css/styles.css . 사용 예압 이는 브라우저가 나중에 응답 본문에서가 아니라 응답 헤더에서 더 일찍 힌트를 발견한다는 것을 의미하므로 HTTP 헤더에있는 것이 좋습니다.

사용하는 또 다른 이유 예압 HTTP 헤더에서 대부분의 HTTP / 2 구현에서 서버 푸시 이벤트를 시작한다는 것입니다. 서버 푸시는 콘텐츠 요청이있을 때 애셋이 클라이언트에 선제 적으로 푸시되는 메커니즘으로, 인라인 CSS와 유사한 성능 이점을 제공합니다.

HTTP / 1에서는 서버 푸시를 사용할 수 없습니다. 그러나 예압 HTTP / 1 환경에서 여전히 성능을 향상시킬 수 있습니다.

04. csscss로 중복 제거

csscss는 사용자가 제공 한 모든 CSS 파일을 분석하고 어떤 규칙 세트에 중복 된 선언이 있는지 알려줍니다.

csscss는 사용자가 제공 한 모든 CSS 파일을 분석하고 어떤 규칙 세트에 중복 된 선언이 있는지 알려줍니다.

중복 검사기를 사용하여 CSS에서 중복 규칙을 확인하는 데 비용을 지불 할 수 있습니다. 예를 들어 Ruby 기반 도구 csscss를 사용하십시오.

Ruby 사용자는 다음을 사용하여 설치할 수 있습니다.

gem install csscss

일단 설치되면 다음과 같이 CSS에서 중복성을 검사 할 수 있습니다.

csscss -v styles.css

이 명령은 공간을 절약하기 위해 중복을 제거 할 수있는 규칙을 공유하는 선택기를 나열합니다.

{h1} AND {p} share 3 declarations - color: #000 - line-height: 1.618 - margin: 0 0 1.5rem

하나의 선택기 아래에서 중복 규칙을 이동할 수 있습니다.

h1, p{ color: #000; line-height: 1.618; margin: 0 0 1.5rem; }

이 프로세스가 대규모 프로젝트에서 얼마나 많은 공간을 절약 할 수 있는지에 놀랄 것입니다. 사용 --도움 더 많은 항목을 조정하는 데 사용할 수있는 더 많은 명령을 볼 수있는 옵션입니다.

05. cssnano와 함께 한층 더 나아가세요

cssnano는 멋진 형식의 CSS를 가져 와서 많은 집중 최적화를 통해 실행합니다.

cssnano는 멋진 형식의 CSS를 가져 와서 많은 집중 최적화를 통해 실행합니다.

위에 체리는 사용할 수 있습니다. cssnano – 노드 및 PostCSS 종속 도구. cssnano는 CSS를 축소 할뿐만 아니라 CSS를 더욱 줄일 수있는 집중 최적화를 많이합니다. 다음과 같이 npm으로 시스템에 설치하십시오.

npm i -g cssnano-cli

그런 다음이를 사용하여 CSS를 최적화하십시오.

cssnano styles.css optimized-styles.css

임시 명령을 실행하는 것이 스타일이 아닌 경우 빌드 시스템으로 cssnano를 자동화 할 수 있습니다. gulpfile에서 cssnano를 사용하는 방법은 다음과 같습니다.

const gulp = require('gulp'); const postcss = require('gulp-postcss'); const cssnano = require('cssnano'); const buildCSS = ()=>{ return gulp.src('css/styles.css') .pipe(postcss([cssnano()]) .pipe(gulp.dest('css/optimized')); }; const watch = ()=>{ gulp.watch('css/styles.css', buildCSS); }; exports.buildCSS = buildCSS; exports.watch = watch;

그만큼 buildCSS 작업은 작성한 CSS를 읽습니다. css / styles.css 그런 다음 최적화 된 출력을 css / 최적화 예배 규칙서. 그만큼 손목 시계 작업 시작 buildCSS 변경이 발생할 때마다 css / styles.css .

CLIP STUDIO PAINT에서 커스텀 브러쉬를 만드는 방법

그만큼 손목 시계 그런 다음 다음과 같이 터미널에서 작업을 호출 할 수 있습니다.

gulp watch

약간의 조정을 통해 Sass / Less 파일 빌드, 자동 접두사 등과 같은 다른 CSS 관련 작업 외에도이 특정 최적화를 수행하는 워크 플로를 구축 할 수 있습니다.

웹 사이트 페이지를 저장 하시겠습니까? PDF로 내보내고 안정적으로 저장 클라우드 스토리지 .

이 기사는 원래 그물 , 웹 디자이너를위한 세계 최고의 잡지. 여기에서 구독 .

관련 기사: