WordPress에서 CSS/JavaScript 파일을 축소하는 방법(3가지 방법)

최근 게시물 게시판 wordpress WordPress에서 CSS/JavaScript 파일을 축소하는 방법(3가지 방법)

  • WordPress 사이트에서 파일을 축소하시겠습니까?

    WordPress CSS 및 JavaScript 파일을 축소하면 더 빠르게 로드하고 WordPress 사이트 속도를 높일 수 있습니다.

    이 가이드에서는 WordPress에서 CSS/JavaScript 파일을 쉽게 축소하여 성능과 속도를 향상시키는 방법을 보여줍니다.

    축소란 무엇이며 언제 필요합니까?

    ‘축소’라는 용어는 웹사이트 파일 크기를 작게 만드는 방법을 설명하는 데 사용됩니다. 소스 코드에서 공백, 줄 및 불필요한 문자를 제거하여 이를 수행합니다.

    다음은 일반 CSS 코드의 예입니다.

    body {
    margin:20px;
    padding:20px;
    color:#333333;
    background:#f7f7f7;
    }
    h1 {
    font-size:32px;
    color#222222;
    margin-bottom:10px;
    }
    

    코드를 축소하면 다음과 같이 표시됩니다.

    body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
    h1{font-size:32px;margin-bottom:10px}
    

    일반적으로 사용자의 브라우저로 전송되는 파일만 축소하는 것이 좋습니다. 여기에는 HTML, CSS그리고 자바스크립트 파일.

    PHP 파일도 축소할 수 있지만 축소해도 사용자의 페이지 로드 속도가 향상되지는 않습니다. 그것은 왜냐하면 PHP 방문자의 웹 브라우저로 전송되기 전에 서버에서 실행되는 서버 측 프로그래밍 언어입니다.

    파일 축소의 장점은 향상된 WordPress 속도 및 성능압축 파일이 더 빨리 로드되기 때문입니다.

    그러나 일부 전문가들은 대부분의 웹사이트에서 성능 향상이 매우 미미하고 문제가 될 가치가 없다고 생각합니다. 축소는 대부분의 WordPress 사이트에서 몇 킬로바이트의 데이터만 제거합니다. 다음을 통해 더 많은 페이지 로드 시간을 줄일 수 있습니다. 웹용 이미지 최적화.

    Google Pagespeed 또는 GTMetrix 도구CSS 및 JavaScript를 축소하면 점수가 크게 향상됩니다.

    그렇다면 WordPress 사이트에서 CSS/JavaScript를 쉽게 축소하는 방법을 살펴보겠습니다.

    선택할 수 있는 3가지 옵션을 살펴보겠습니다.

    준비가 된? 가장 권장되는 방법으로 시작해 보겠습니다.

    방법 1. WP Rocket을 사용하여 WordPress에서 CSS/JavaScript 축소

    이 방법은 더 쉽고 모든 사용자에게 권장됩니다. 상관없이 작동합니다. 워드프레스 호스팅 당신은 사용하고 있습니다.

    먼저 설치하고 활성화해야 합니다. WP 로켓 플러그인. 자세한 내용은 단계별 가이드를 참조하세요. WordPress 플러그인을 설치하는 방법.

    WP 로켓 시장에서 최고의 WordPress 캐싱 플러그인입니다. 이를 통해 WordPress에 캐싱을 쉽게 추가하고 웹사이트 속도와 페이지 로드 시간을 크게 개선할 수 있습니다.

    자세한 내용은 에 대한 자습서를 참조하십시오. WP Rocket 설치 및 설정 방법 워드프레스에서.

    활성화 시 다음을 방문해야 합니다. 설정 » WP 로켓 페이지에서 ‘파일 최적화’ 탭으로 전환합니다.

    WP Rocket에서 CSS 파일 축소

    여기에서 CSS 파일 축소 옵션을 확인해야 합니다.

    그러면 WP Rocket이 사이트에서 문제가 발생할 수 있다는 경고를 표시합니다. 계속해서 ‘Minify CSS 활성화’ 버튼을 클릭합니다. 웹사이트에 문제가 발생하면 이 옵션을 언제든지 비활성화할 수 있습니다.

    CSS 축소 활성화

    다음으로 아래의 JavaScript 파일 섹션으로 스크롤해야 합니다.

    여기에서 ‘자바스크립트 파일 축소’ 옵션 옆에 있는 확인란을 선택하기만 하면 됩니다.

    WP Rocket은 JavaScript 파일을 축소합니다.

    다시 말하지만, 이로 인해 사이트가 손상될 수 있다는 경고가 표시됩니다. 계속해서 ‘Minify JavaScript 활성화’ 버튼을 클릭하십시오.

    그런 다음 변경 사항 저장 버튼을 클릭하여 설정을 저장하는 것을 잊지 마십시오.

    WP Rocket은 이제 CSS 및 JavaScript 파일을 축소하기 시작합니다. 당신은 할 수 있습니다 캐시 지우기 플러그인 설정에서 다음 웹사이트 방문자를 위해 축소된 CSS 및 JavaScript를 사용하기 시작하는지 확인합니다.

    방법 2. SiteGround를 사용하여 WordPress에서 CSS/JavaScript 축소

    사용하는 경우 사이트그라운드 당신의 워드프레스 호스팅 공급자를 사용하여 CSS 파일을 축소할 수 있습니다. 사이트그라운드 옵티마이저.

    SiteGround Optimizer는 자체 플랫폼에서 작동하는 성능 최적화 플러그인입니다. 그것은 그들의 초고속 PHP 사이트의 로딩 시간을 개선합니다.

    설치하고 활성화하기만 하면 됩니다. 사이트그라운드 옵티마이저 WordPress 사이트의 플러그인. 자세한 내용은 단계별 가이드를 참조하세요. WordPress 플러그인을 설치하는 방법.

    그런 다음 WordPress 관리자 사이드바에서 SG Optimizer 메뉴를 클릭해야 합니다.

    SG 옵티마이저

    SG Optimizer 설정으로 이동합니다.

    여기에서 ‘기타 최적화’ 아래의 ‘프론트엔드로 이동’ 버튼을 클릭해야 합니다.

    SiteGround 프론트엔드 최적화

    다음 화면에서 ‘CSS 파일 축소’ 옵션 옆에 있는 토글을 켜야 합니다.

    SiteGround에서 CSS 축소

    다음으로 JavaScript 탭으로 전환하고 ‘JavaScript 파일 축소’ 옵션 옆에 있는 토글을 켜야 합니다.

    그게 다야! 이제 WordPress 캐시를 비우고 웹사이트를 방문하여 CSS 및 JS 파일의 축소 버전을 로드할 수 있습니다.

    방법 3. 자동 최적화를 사용하여 CSS/JavaScript 축소

    이 방법은 SiteGround에 있지 않고 WP Rocket을 사용하지 않는 사용자에게 권장됩니다.

    먼저 설치하고 활성화해야 합니다. 자동 최적화 플러그인. 자세한 내용은 단계별 가이드를 참조하세요. WordPress 플러그인을 설치하는 방법.

    활성화 시 다음을 방문해야 합니다. 설정 » 자동 최적화 플러그인 설정을 구성하는 페이지입니다.

    여기에서 먼저 JavaScript 옵션에서 ‘자바스크립트 코드 최적화’ 옵션을 확인해야 합니다.

    JavaScript 옵션 자동 최적화

    그런 다음 CSS 옵션까지 아래로 스크롤하고 ‘CSS 코드 최적화’ 옵션 옆에 있는 확인란을 선택해야 합니다.

    CSS 코드 자동 최적화

    변경 사항 저장 버튼을 클릭하여 설정을 저장하는 것을 잊지 마십시오.

    그런 다음 캐시 비우기 버튼을 클릭하여 축소된 파일 사용을 시작할 수 있습니다. 플러그인을 사용할 수도 있습니다. 렌더링 차단 JavaScript 및 CSS 수정 워드프레스에서.

    이 기사가 WordPress 사이트에서 CSS 및 JavaScript를 최소화하는 데 도움이 되었기를 바랍니다. 에 대한 자습서를 볼 수도 있습니다. WordPress의 핵심 웹 바이탈 최적화 그리고 우리의 궁극적 인 것을 따르십시오 워드프레스 성능 가이드.

    이 기사가 마음에 들면 구독하십시오. 유튜브 채널 WordPress 비디오 자습서용. 당신은 또한 우리를 찾을 수 있습니다 트위터 그리고 페이스북.

    포스트 WordPress에서 CSS/JavaScript 파일을 축소하는 방법(3가지 방법) 에 처음 등장 WPB초보자.

    Source link

    신고하기
'WordPress에서 CSS/JavaScript 파일을 축소하는 방법(3가지 방법)'에 답변달기
글쓴이 정보: