PWA 성능 향상을위한 CSS 최적화 도구

PWA 성능 향상 : CSS 최적화 안내서

이 기사는 CSS 최적화를 통해 PRWA (Progressive Web Applications)의 성능을 크게 향상시키는 방법을 살펴볼 것입니다. 사용하지 않은 CSS, 인라인 임계 경로 CSS를 제거하고 최종 코드를 압축하는 방법을 배웁니다. 이러한 기술은 일반 웹 사이트 및 응용 프로그램에도 적합합니다.

키 포인트 :

CSS 최적화는 사용하지 않는 CSS, 인라인 중요 경로 CSS 및 코드 압축을 제거하여 PWA 성능을 크게 향상시킬 수 있습니다.

Google 오픈 소스 감사 도구 등대는 CSS 최적화 기회를 식별하는 데 도움이 될 수 있습니다.

PurifyCSS와 같은 도구는 사용하지 않은 CSS 스타일을 제거하고 CSS 파일의 크기를 줄일 수 있습니다. 중요한 CSS 추출기와 같은 도구는 주요 CSS 규칙을 추출하고 인라인으로 만들어 HTTP 요청 수와 브라우저 구문 분석 코드의 양을 줄일 수 있습니다.

CSS 파일은 DOM이 준비된 후 JavaScript를 사용하여 페이지 끝에서 CSS 파일을로드하여 렌더링을 차단하는 것을 방지 할 수 있습니다. 예제 PWA 및 감사

데모의 경우 간단한 PWA 예제를 사용합니다 (코드는 GitHub 저장소에서 사용 가능하거나 온라인 버전에 직접 액세스). 이 PWA는 CSS 스타일에 압축되지 않은 부트 스트랩 v4를 사용하고 정적으로 생성 된 JSON API에서 가져온 게시물 세트를 표시합니다.

PWA에는 다음의 주요 요소가 포함되어 있습니다
• Performance File (Manifest.json) : 이름, 설명, 아이콘, 시작 URL 등과 같은 웹 응용 프로그램에 대한 브라우저 정보를 제공합니다.
<:> 서비스 작업자 : 응용 프로그램 쉘을 캐시합니다 (사용자 인터페이스의 최소 HTML, CSS 및 JavaScript) 및 모든 네트워크 요청을 프록시합니다.
• https : PWA는 안전한 소스를 통해 서비스를 제공해야합니다.

검토를 위해 Google Lighthouse를 사용하십시오

Lighthouse는 Google에서 개발 한 오픈 소스 감사 도구로, 웹 사이트 및 PWA의 성능, 접근성 및 SEO를 개선하는 데 사용할 수 있습니다. Chrome 개발자 도구의 "감사"탭에서 Lighthouse에 액세스하고 PWA 주소를 입력하고 (예 :

) 감사를 실행하고 보고서를 봅니다.

최적화 제안은 차단 CSS 감소, 사용하지 않는 CSS 규칙 제거 및 CSS 압축과 같은 등대 보고서에 제공됩니다.

• CSS 최적화 : 사용하지 않은 CSS 규칙을 제거하십시오 Lighthouse는 샘플 PWA에서 CSS의 96%가 사용되지 않는다고 지적합니다. PurifyCSS를 사용하여 사용하지 않은 CSS를 제거 할 수 있습니다.

  purifycss 설치 :

  run purifycss :

  블록 렌더링 CSS 감소

  중요한 CSS 추출기 (Chrome Extension)를 사용하여 임계 CSS를 추출하여 index.html 파일에 들어 올릴 수 있습니다.

  npm install -g purify-css

  css purifycss styles/bootstrap.css index.html -o styles/purified.css -i 압축 CSSNANO 또는 CSSO와 같은 도구를 사용하여 CSS 파일을 압축 할 수 있습니다.

  CSSNANO 및 PostCSS CLI 설치 :

  postcss.config.js 파일을 만들고 cssnano를 구성하십시오.

  압축 명령을 실행하십시오

  javaScript를 사용한 부트 스트랩의 늦은로드 렌더링 차단을 피하기 위해 페이지 끝에 JavaScript를 사용하여 CSS 파일을로드하십시오.

  최적화 된 결과 및 기타 도구

  등대 감사를 다시 실행하여 성능 향상을 확인하십시오.

  기타 사용 가능한 도구는 CSSO, Critical, UNCSS, Purgecss 등입니다.

  요약

  중복 코드, 인라인 임계 리소스를 제거하고 CSS를 압축함으로써 PWA 성능을 크게 향상시킬 수 있습니다.

  faq

  이 기사에는 CSS 최적화 및 PWA 성능에 대한 자주 묻는 질문, CSS 최적화 전략, 성능 측정 방법, 서비스 작업자 역할, 이미지 최적화, 일반적인 오류 회피, PWA 접근성, 검색 엔진 최적화 및 PWA 및 비교가 포함되어 있습니다. 전통적인 웹 응용 프로그램.
  (참고 : 그림을 직접 처리 할 수 ​​없으므로 그림 경로는 변경되지 않았습니다. 그림 경로가 정상적으로 표시되도록 올바른지 확인하십시오.)

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