CSS를 최적화하세요

시리즈 개요

모바일 웹이 대두되는 시대, 모바일의 네트워크 환경과 성능이 PC에 비해 훨씬 열악하기 때문에 속도 최적화가 다시 주목받고 있는 것으로 추정된다. 휴대폰을 사용하여 웹 페이지를 여는 것은 누구나 느낄 수 있습니다. 읽을 때 페이지의 달팽이 같은 속도를 분명히 느낄 수 있습니다.

본 시리즈의 최적화는 물론 대부분의 규칙이 PC에도 적합합니다.

최적화의 기본 원칙

속도 최적화를 위한 기본 아이디어가 있으니 미리 정리해두세요

온디맨드 로딩(필요한 것만 로딩)

병렬(직렬적인 작업을 병렬로 실행)

압축(압축을 통해 볼륨 감소)

캐시(캐시를 사용하여 요청 대기 시간 감소)

예측(사용자 행동 예측) 및 사전 요청 발행)

병합(흩어진 여러 파일을 병합하여 요청 감소)

자동화(속도 최적화를 루틴으로 만들고 자동화 도구(예: gulp, grunt, fis)와 결합, 비용 절감)

본질적으로 CSS를 최적화하세요

첫 번째 기사에서 CSS에 대해 이야기하는 이유는 CSS가 가장 최적화하기 어렵기 때문입니다. 예, dom 앞에 CSS를 로드해야 하며 CSS가 dom 렌더링을 차단한다는 현실을 받아들여야 합니다.

CSS 최적화 압축(cssshrink)

저희는 일반적으로 CSS에 대해 일반 압축을 수행하며 주로 공백과 줄바꿈을 제거합니다. 여기에서 권장하는 cssshrink는 먼저 CSS 파서를 통해 CSS를 구문 분석한 다음 대상 최적화를 수행하는 보다 자세한 작업을 수행합니다. 예를 들어 Huiba는 0px와 0%를 0으로, Bold를 700으로 변환합니다. 이는 작성자 수준의 궁극적인 압축입니다.

Cssshrink 특정 최적화 전략을 보려면 여기를 클릭하세요

cssshrink: GitHub 주소

Css 최적화 병합

gulp-concat을 사용하여 여러 CSS를 함께 병합

차단 및 요청을 줄이기 위해 @import를 사용하지 마세요

css 분할

위 내용과 충돌하는 것 같습니다. 이는 CSS와 다른 최적화 부분의 차이점이기도 합니다. 일반적으로 우리 모두는 CSS를 상단에, js를 하단에 배치하는 데 익숙합니다. 이는 좋은 습관이지만 CSS에 있어서 최선의 선택은 아닙니다.

모바일에서는 모두가 사용자가 페이지를 보는 시간인 첫 화면 시간을 매우 중요하게 생각합니다. 전체 페이지의 CSS를 상단에 배치합니다. 첫 화면에서 사용되지 않는 CSS가 많으면 첫 화면 표시가 차단됩니다.

헤드는 첫 화면에서 사용할 수 있는 CSS만 넣고, 첫 화면 밖의 CSS는 아래로 이동

CSS 사용률

일반적으로 여러 후 사람들은 페이지를 유지 관리하는데 CSS를 사용하지 않기 때문에 사람들이 마음대로 삭제할 수는 없습니다.

unu
1.1 unu는 페이지에서 사용되지 않는 CSS를 감지하는 데 사용되는 Node.js 모듈입니다.
1.2 장점: 시각적 인터페이스를 제공하고 사용이 매우 간단하며 URL을 입력하면 사용법을 볼 수 있습니다. 페이지에 CSS
1.3 단점: 현재 스타일 태그 CSS만 지원하고 페이지를 실행할 js가 없습니다

uncss
2.1 uncss는 페이지에서 사용하지 않는 CSS를 제거할 수 있는 모듈입니다. 페이지
2.2 장점: 명령줄과 gulp 및 grunt 플러그인 지원, 링크 모드 지원, phantomjs 기반, 브라우저 실행 시뮬레이션, js 실행 지원
2.3 단점: 하나의 URL로만 내보낸 CSS는 없음 실용적인 가치가 있으며, 스타일 태그를 지원하지 않습니다

tical
3.1 important는 첫 화면에서 사용하지 않는 CSS를 감지하는 데 사용하는 모듈입니다
3.2 장점: 첫 화면의 너비와 높이를 입력할 수 있습니다. 감지하고, 꿀꺽꿀꺽, 꿀꺽꿀꺽 플러그인이 있습니다
3.3 단점 : URL 미지원, 로컬 HTML만 지원, 스타일 태그 미지원

요약

속도 최적화 개발자의 생산성을 저하시키는 요소이므로 자동화하고 가능한 한 많은 규칙을 설정하고 고통 없이 최적화하는 동시에 후속 성능 저하를 방지해야 합니다.