워드프레스 사이트에서 CSS JavaScript 파일 줄이기 위해 워드프레스에서 3가지 방법이 있습니다.
위와 같은 파일을 왜 줄여야 할까요? CSS JavaScript 파일을 축소하게 되면 더 빠르게 로딩이 되기 때문에 사이트 속도가 빨라집니다.
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 및 JavaScript 파일이 포함됩니다.
PHP 파일도 축소할 수 있지만 축소해도 사용자의 페이지 로드 속도가 향상되지는 않습니다. PHP 는 서버 측 프로그래밍 언어 이기 때문에 방문자의 웹 브라우저로 무언가가 전송되기 전에 서버에서 실행됩니다.
파일 축소의 장점은 압축 파일이 더 빨리 로드되기 때문에 워드프레스 속도와 성능이 향상된다는 것입니다.
그러나 일부 전문가들은 성능 향상이 대부분의 웹 사이트에서 매우 작으며 문제를 일으킬 가치가 없다고 생각합니다. 축소는 대부분의 워드프레스 사이트에서 몇 킬로바이트의 데이터만 제거합니다. 웹용 이미지를 최적화 하여 페이지 로드 시간을 더 줄일 수 있습니다.
Google Pagespeed 또는 GTMetrix 도구 에서 100/100 점수를 달성하려는 경우 CSS 및 JavaScript를 축소하면 점수가 크게 향상됩니다.
그렇다면 WordPress 사이트에서 CSS/JavaScript를 쉽게 축소하는 방법을 살펴보겠습니다.
- 방법 1. WP Rocket을 사용하여 CSS/JavaScript 축소(권장)
- 방법 2. SiteGround를 사용하여 CSS/JavaScript 축소
- 방법 3. 자동 최적화를 사용하여 CSS/JavaScript 축소
WP Rocket을 사용하여 CSS/JavaScript 축소
이 방법은 더 쉽고 모든 사용자에게 권장됩니다. 사용 중인 워드프레스 호스팅 에 관계없이 작동합니다 .
먼저 WP Rocket 플러그인을 설치하고 활성화해야 합니다. 자세한 내용 은 워드프레스 플러그인 설치 방법 에 대한 단계별 가이드를 참조하십시오 .
WP Rocket 은 시장에서 가장 우수한 워드프레스 캐싱 플러그인입니다. 이를 통해 워드프레스에 캐싱을 쉽게 추가하고 웹 사이트 속도와 페이지 로드 시간을 크게 향상시킬 수 있습니다.
자세한 내용 은 워드프레스에서 WP Rocket을 설치하고 설정하는 방법 에 대한 자습서를 참조하십시오.
활성화되면 설정 » WP Rocket 페이지를 방문하여 ‘파일 최적화’ 탭으로 전환해야 합니다.
여기에서 CSS 파일 축소 옵션을 선택해야 합니다.
그러면 WP Rocket이 사이트의 문제를 일으킬 수 있다는 경고를 표시합니다. 계속해서 ‘CSS 축소 활성화‘ 버튼을 클릭합니다. 웹 사이트에 문제가 발생하면 언제든지 이 옵션을 비활성화할 수 있습니다.
다음으로 아래의 JavaScript 파일 섹션까지 아래로 스크롤해야 합니다.
여기에서 ‘JavaScript 파일 최소화‘ 옵션 옆의 상자를 선택하기만 하면 됩니다.
다시 말하지만 이로 인해 사이트에서 문제가 발생할 수 있다는 경고가 표시됩니다. 계속해서 ‘JavaScript 최소화 활성화‘ 버튼을 클릭하십시오.
그런 다음 변경 사항 저장 버튼을 클릭하여 설정을 저장하는 것을 잊지 마십시오.
WP Rocket은 이제 CSS 및 JavaScript 파일 축소를 시작합니다. 다음 웹 사이트 방문자를 위해 축소된 CSS 및 JavaScript를 사용하여 시작하도록 플러그인 설정에서 캐시를 지울 수 있습니다.
SiteGround를 사용하여 CSS/JavaScript 축소
SiteGround 를 워드프레스 호스팅 공급자로 사용하는 경우 SiteGround Optimizer 를 사용하여 CSS 파일을 축소할 수 있습니다 .
SiteGround Optimizer는 자체 플랫폼에서 작동하는 성능 최적화 플러그인입니다. Ultrafast PHP 와 잘 작동 하여 사이트 로딩 시간을 개선합니다.
워드프레스 사이트에 SiteGround Optimizer 플러그인을 설치하고 활성화하기만 하면 됩니다. 자세한 내용 은 워드프레스 플러그인 설치 방법 에 대한 단계별 가이드를 참조하십시오 .
그런 다음 워드프레스 관리자 사이드바에서 SG Optimizer 메뉴를 클릭해야 합니다.
그러면 SG Optimizer 설정으로 이동합니다.
여기에서 ‘기타 최적화‘ 아래의 ‘프론트엔드로 이동‘ 버튼을 클릭해야 합니다.
다음 화면에서 ‘CSS 파일 축소‘ 옵션 옆의 토글을 켜야 합니다.
다음으로 JavaScript 탭으로 전환하고 ‘JavaScript 파일 최소화‘ 옵션 옆의 토글을 켜야 합니다.
그게 다야! 이제 워드프레스 캐시를 비우고 웹 사이트를 방문하여 축소된 버전의 CSS 및 JS 파일을 로드할 수 있습니다.
CSS JavaScript 파일 줄이기 위한 자동 최적화
이 방법은 WP Rocket을 사용하지 않는 사용자에게 권장되며 먼저 Autooptimize 플러그인을 설치하고 활성화해야 합니다.
활성화되면 설정 » 자동 최적화 페이지를 방문하여 플러그인 설정을 구성해야 합니다.
여기에서 먼저 JavaScript 옵션에서 ‘JavaScript 코드 최적화‘ 옵션을 선택해야 합니다.
그런 다음 CSS 옵션까지 아래로 스크롤하고 ‘CSS 코드 최적화‘ 옵션 옆의 확인란을 선택해야 합니다.
변경 사항 저장 버튼을 클릭하여 설정을 저장하는 것을 잊지 마십시오.
그런 다음 캐시 비우기 버튼을 클릭하여 축소된 파일 사용을 시작할 수 있습니다. 이 플러그인은 WordPress에서 렌더링 차단 JavaScript 및 CSS를 수정하는 데에도 사용할 수 있습니다.
아무쪼록 워드프레스 사이트에서 CSS 및 JavaScript를 축소하는 데 도움이 되었으면 합니다.