분류 css

CSS 축소를 위한 완벽한 모범 사례(5)

컨텐츠 정보

  • 조회 174 (작성일 )

본문

중요한 렌더링을 위한 인라인 CSS – 나머지는 미리 로드하십시오! 


사용자가 콘텐츠를 볼 수 있는 시점에 큰 영향을 미치기 때문에 불필요한 CSS (특히 CSS의 경우)를 제거한다는 동일한 철학에 따라 주문 페이지 및 쇼핑 카트 페이지에 CSS가 사용되지 않은 CSS의 자격이 있다고 주장 할 수 있습니다. 홈페이지에 있고 아직 로그인하지 않은 사용자


우리는 심지어 홈페이지 접는 부분 (사용자가 아래로 스크롤 해야 하는 홈페이지의 일부)에 해당하는 CSS가 그러한 사용자에게 불필요한 CSS로 간주 될 수 있다고 CSS에 추가 할 수 있습니다. 이 추가 CSS는 2G (대부분 신흥 시장) 사용자 또는 느린 3G 사용자 (세계 대부분의 시간) 사용자가 1 ~ 2 초 더 기다려 웹 앱에서 아무 것도 볼 수 없는 이유 일 수 있습니다. 축소 코드가 배송되었습니다!


최상의 성능을 위해 중요한 CSS를 HTML 문서에 직접 인라인하는 것이 좋습니다. 이렇게 하면 중요한 경로에서 추가 왕복이 필요하지 않으며 올바르게 수행하면 HTML 만 차단 리소스인 "한 왕복"임계 경로 길이를 전달하는 데 사용될 수 있습니다. 

– Addy Osmani on Critical 


중요한 CSS를 추출하고 인라인 하면 링크 CSS를 사용하여 나머지 CSS (예 : 앱의 다른 경로)를 미리 로드 할 수 있습니다. Critical (Addy Osmani 제공)은 중요한 CSS를 추출하고 인라인하기 위해 실험 할 수 있는 도구입니다.


또한 이러한 중요한 경로 CSS를 특정 파일에 배치하고 이를 앱의 진입 점 HTML에 인라인 할 수 있습니다. 즉, HTML 문서의 STYLE 태그 내에서 CSS를 직접 작성하지 않는 경우가 있습니다.


사용하지 않는 CSS 제거 


CSS 코드를 최소화하기 위해 PostCSS에 연결하는 cssnano와 마찬가지로 Purgecss를 사용하여 죽은 CSS 코드를 제거 할 수 있습니다. 독립형 npm 모듈로 실행하거나 번 들러에 플러그인으로 추가 할 수 있습니다. 샘플 프로젝트에서 사용해보기 위해 다음과 같이 설치합니다.


npm install @fullhuman/postcss-purgecss --save-dev
yarn add @fullhuman/postcss-purgecss -D

cssnano와 마찬가지로 이전 postcss.config.js 파일에서 cssnano를 위한 플러그인 항목 다음에 Purgecss에 대한 플러그인 항목을 추가하여 구성 파일이 다음과 같이 표시되도록 합니다.


module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
        require('@fullhuman/postcss-purgecss')({
            content: ['./**/*.html']
        }),
    ],
};

Chrome DevTools를 사용하여 프로덕션 용 프로젝트를 빌드하고 CSS 적용 범위를 검사하면 제거 및 축소 된 CSS가 이제 축소 된 이전 버전의 352B (CSS 코드 55 % 이상 감소)임을 알 수 있습니다.


새로운 출력 파일을 살펴보면 .pull-left 및 .pull-right 스타일이 HTML에서 빌드 타임에 클래스 이름으로 사용되는 곳이 없기 때문에 .pull-left 및 .pull-right 스타일이 제거되었음을 알 수 있습니다.


Purged Minified CSS In DevTools 



다시 말하지만, 이러한 도구가 사용되지 않은 것으로 표시된 CSS를 삭제하여 주의해서 밟고 싶습니다. 추가 조사 후에 만 ​​그렇게 하면 실제로 필요하지 않습니다.


신중하게 CSS 선택기 디자인 


샘플 프로젝트에서 .pull-right 및 pull-left 클래스를 사용하여 앱에서 일시적인 상태를 스타일 지정하여 화면의 맨 왼쪽이나 오른쪽에 조건부 오류 메시지를 표시하려고 했습니다.


방금 보았 듯이 Purgecss는 CSS 축소 기가 이러한 스타일이 사용되지 않는 것을 감지하여 이러한 스타일을 제거하도록 도와주었습니다. 선점 적 CSS 데드 코드 제거를 유지하고 향후 일시적인 앱 상태에서 필요할 때 스타일을 유지하도록 선택기를 의도적으로 디자인하는 방법이 있을 수 있습니다.


CSS 속성 선택기로 그렇게 할 수 있습니다. 기본적으로 숨겨져 있고 어느 시점에 보이는 오류 메시지 요소에 대한 CSS 규칙은 다음과 같이 만들 수 있습니다.


body [msg-type] {
    width: 350px;
    height: 250px;
    padding: 1em;
    position: absolute;
    left: -999px;
    top: -999px;
    opacity: 0;
    transition: opacity .5s ease-in
}
body [msg-type=error] {
    top: calc(50% - 125px);
    left: calc(50% - 150px);
    opacity: 1
}

현재 이러한 선택기와 일치하는 DOM 요소가 없으며 향후 앱에서 필요할 때 생성 될 것이라는 것을 알고 있지만 축소 프로세스는 이러한 CSS 규칙이 사용되지 않은 것으로 표시되어 있어도 여전히 유지합니다. .


CSS 속성 선택기는 빌드시 DOM에서 사용할 수 없는 오류 메시지 요소의 스타일을 지정하기 위한 규칙 보존을 알리는 마술 지팡이를 흔들도록 도와줍니다.


DevTools Results With CSS Attribute Selectors 


이 디자인 구조는 모든 CSS 축소기에서 작동하지 않을 수 있으므로 빌드 프로세스 설정에서 작동하는지 실험하고 확인하십시오.


요약 및 결론 


오늘날보다 복잡한 웹 앱을 구축하고 있으며 이는 최종 사용자에게 더 많은 코드를 제공하는 것을 의미합니다. 코드 축소는 앱 사용자에게 제공되는 코드 크기를 줄이는 데 도움이 됩니다.


JavaScript와 마찬가지로 사용자를 위해 코드 최적화에 참여할 권리가 있는 CSS를 일급 시민으로 취급해야 합니다. CSS 축소는 우리가 할 수 있는 최소한의 일입니다. 프로젝트에서 죽은 CSS를 제거하여 더 나아가도 됩니다.


CSS가 사용자가 앱의 콘텐츠를 볼 때 영향을 크게 받는다는 것을 인식하면 게재 최적화의 우선 순위를 정하는 데 도움이 됩니다.


마지막으로 빌드 프로세스를 채택하거나 기존 빌드 프로세스가 CSS 코드를 최적화 하는지 확인하는 것은 Parcel을 사용하여 cssnano를 설정하거나 웹팩 또는 롤업을 위한 몇 가지 플러그인 및 구성을 사용하는 것만 큼 간단합니다.