속도 체감을 위한 css 정리 > 팁자료실

본문 바로가기

회원로그인

회원가입

공지

속도 체감을 위한 css 정리

페이지 정보

profile_image
작성자 그누웹
댓글 0건 조회 1,134회 작성일 24-07-02 19:48

본문

 Node.js 설치 및 PurgeCSS를 사용한 CSS 최적화 과정을 다시 정리해드리겠습니다.

Node.js 설치

  1. Node.js 설치 확인

    • 먼저, 시스템에 Node.js가 설치되어 있는지 확인합니다.
                     
      bash
      코드 복사
      node --version
  2. Node.js 설치

    • Node.js가 설치되어 있지 않은 경우, 공식 웹사이트에서 다운로드 받아 설치합니다: Node.js 공식 웹사이트

PurgeCSS 설치 및 사용

  1. PurgeCSS 설치

    • npm을 이용하여 PurgeCSS를 전역으로 설치합니다.
                     
      bash
      코드 복사
      npm install -g purgecss
  2. PurgeCSS 실행

    • 웹 페이지에서 사용되는 CSS 파일을 최적화합니다.
                     
      bash
      코드 복사
      purgecss --css /path/to/your/css/style.css --content '/path/to/your/php/files/*.php' --output /path/to/your/build/
      • --css : 최적화할 CSS 파일의 경로를 지정합니다.
      • --content : CSS에서 참조하는 PHP 파일들의 경로를 지정합니다.
      • --output : 최적화된 CSS 파일이 생성될 경로를 지정합니다.
  3. 최적화된 CSS 사용

    • PurgeCSS가 생성한 최적화된 CSS 파일을 웹 페이지에 적용합니다.
    • 필요에 따라 원본 CSS 파일을 백업하고, 최적화된 CSS 파일로 교체합니다.

추가 팁

  • 테스트: PurgeCSS를 실행하기 전에 웹 페이지에서 사용되는 모든 CSS 클래스와 요소를 정확히 확인하고 경로를 지정하세요.
  • 백업: 원본 CSS 파일을 백업하고, 최적화된 CSS 파일이 예상대로 작동하는지 테스트해보세요.
  • 자동화: 정기적으로 PurgeCSS를 실행하고, 자동으로 최적화된 CSS 파일을 적용하는 스크립트를 작성하여 작업을 자동화할 수 있습니다.
  • 테스트 환경: 개발 환경과 프로덕션 환경에서 동작을 테스트하고, 예상치 못한 문제가 발생하지 않도록 주의하세요.

이러한 방법을 통해 사용되지 않는 CSS 코드를 제거하고, 웹 페이지의 성능을 향상시킬 수 있습니다.

  

등록된 댓글이 없습니다.



사이트 정보

회사명 : 회사명 / 대표 : 대표자명
주소 : OO도 OO시 OO구 OO동 123-45
사업자 등록번호 : 123-45-67890
전화 : 02-123-4567 팩스 : 02-123-4568
통신판매업신고번호 : 제 OO구 - 123호
개인정보관리책임자 : 정보책임자명

Copyright © 소유하신 도메인. All rights reserved.