WordPress에서 CSS/JavaScript 정보를 최소화하는 방법(3가지 전략)

WordPress 웹 페이지에서 문서를 축소하시겠습니까?

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

이 매뉴얼에서는 WordPress에서 CSS/JavaScript 파일을 간단히 축소하여 성능과 속도를 향상시키는 방법을 보여줍니다.

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

'축소'라는 표현은 인터넷 사이트 파일 크기를 작게 만드는 시스템을 설명하는 데 사용됩니다. 리소스 코드에서 공백, 줄 및 원치 않는 사람을 제거하여 이를 수행합니다.

다음은 표준 CSS 코드의 예입니다.

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

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

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

일반적으로 사용자의 브라우저로 발송되는 문서만 축소하는 것을 권장합니다. 여기에는 HTML, CSS 및 JavaScript 파일이 있습니다.

PHP 문서도 축소할 수 있지만 축소해도 고객의 페이지 로드 속도가 빨라지지는 않습니다. PHP는 서버 측 프로그래밍 언어이기 때문에 방문자의 인터넷 브라우저에 무언가가 전달되기 전에 서버에서 작동합니다.

압축된 정보가 더 빨리 로드된다는 점을 고려하면 데이터 파일을 축소하면 WordPress 속도와 전반적인 성능이 향상됩니다.

그럼에도 불구하고 일부 전문가는 기능 향상이 대부분의 웹 사이트에서 거의 없으며 어려움을 겪을 가치가 없다고 생각합니다. 축소는 대부분의 WordPress 웹 사이트에서 몇 킬로바이트의 데이터만 제거합니다. 월드 와이드 웹에 이미지를 최적화하여 훨씬 더 많은 사이트 로드 시간을 최소화할 수 있습니다.

Google Pagespeed 또는 GTMetrix 소프트웨어에서 100/100 등급을 달성하려는 경우 CSS 및 JavaScript를 축소하면 점수가 상당히 높아집니다.

언급하면서 WordPress 웹 페이지에서 CSS/JavaScript를 손쉽게 축소하는 방법을 한 눈에 살펴보겠습니다.

우리는 당신이 선택할 수 있는 3가지 이상의 독특한 선택을 할 것입니다:

모든 설정? 가장 잘 제안된 프로세스를 시작하겠습니다.

프로세스 1. WP Rocket을 사용하여 WordPress에서 CSS/JavaScript 축소

이 기술은 더 쉽고 모든 소비자에게 제안됩니다. 사용 중인 WordPress 호스팅에 관계없이 작동합니다.

초기에는 WP Rocket 플러그인을 설치하고 활성화해야 합니다. 추가 세부 사항은 WordPress 플러그인 설정 방법에 대한 이동 가이드북을 참조하십시오.

WP Rocket은 시중에서 판매되는 최고의 WordPress 캐싱 플러그인입니다. 이를 통해 WordPress에 캐싱을 매우 쉽게 삽입하고 웹 사이트 속도와 웹 사이트 로드 순간을 크게 높일 수 있습니다.

더 자세한 정보는 WordPress에서 WP Rocket을 설치하고 설정하는 방법에 대한 자습서를 참조하십시오.

활성화되면 설정»WP Rocket 웹 페이지를 확인하고 '파일 최적화'탭으로 전환하려고합니다.

바로 여기에서 Minify CSS 문서 솔루션을 살펴봐야 합니다.

그러면 WP Rocket이 웹사이트에서 포인트를 분할할 수 있다는 경고를 표시합니다. 계속해서 'CSS 축소 활성화' 버튼을 클릭하기만 하면 됩니다. 인터넷 사이트에 문제가 발생하면 이 선택 항목을 지속적으로 비활성화할 수 있습니다.

그런 다음 아래의 JavaScript 문서 부분까지 아래로 스크롤해야 합니다.

바로 여기에서 '자바스크립트 파일 축소' 가능성에 이어 상자를 테스트하기만 하면 됩니다.

다시 말하지만, 이것이 귀하의 웹사이트에 크랙을 일으킬 수 있다는 경고를 보게 될 것입니다. 계속해서 'Minify JavaScript 활성화' 버튼을 클릭하기만 하면 됩니다.

그 직후에는 구성을 유지하기 위해 조정 유지 버튼을 클릭하는 것을 절대 무시하지 마십시오.

WP Rocket은 이제 CSS 및 JavaScript 정보를 축소하기 시작합니다. 플러그인 설정에서 캐시를 매우 지워 향후 웹 페이지 방문자를 위해 축소된 CSS 및 JavaScript를 사용하기 시작할 수 있습니다.

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

SiteGround를 WordPress 웹 호스팅 서비스 제공업체로 적용하는 경우 SiteGround Optimizer로 작업하는 CSS 파일을 축소할 수 있습니다.

SiteGround Optimizer는 시스템에서 수행하는 일반 성능 최적화 플러그인입니다. Ultrafast PHP와 함께 잘 작동하여 사이트의 로딩 시간을 강화합니다.

WordPress 인터넷 사이트에서 SiteGround Optimizer 플러그인을 설정하고 활성화하기만 하면 됩니다. 자세한 내용은 WordPress 플러그인을 삽입하는 방법에 대한 단계별 지침을 참조하세요.

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

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

이 기사에서 '기타 최적화'보다 적은 '프론트엔드로 이동' 버튼을 클릭해야 합니다.

다음 모니터에서 'CSS 파일 축소' 솔루션으로 곧 출시될 토글을 바꿔야 합니다.

앞으로는 JavaScript 탭으로 전환하고 'JavaScript 파일 축소' 선택으로 전환될 토글을 켜야 합니다.

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

접근법 3. Autooptimize를 활용한 CSS/JavaScript 축소

이 방법은 SiteGround에 없고 WP Rocket을 사용하지 않는 소비자를 위해 제안됩니다.

처음에는 Autooptimize 플러그인을 설정하고 활성화해야 합니다. 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 지침을 참조하세요.

활성화 시 옵션 » 자동 최적화 웹 페이지를 살펴보고 플러그인 옵션을 구성해야 합니다.

이 글에서 이니셜에서 자바스크립트 옵션에서 '자바스크립트 코드 최적화' 옵션을 확인해야 합니다.

그런 다음 CSS 선택 항목까지 아래로 스크롤하고 'CSS 코드 최적화' 옵션 옆에 있는 상자를 검사해야 합니다.

조정 보존 버튼을 클릭하여 구성을 저장하는 것을 절대 게을리하지 마십시오.

그런 다음 Vacant Cache 버튼을 클릭하기만 하면 축소된 데이터 파일 작업을 시작할 수 있습니다. 플러그인은 WordPress에서 JavaScript 및 CSS를 차단하는 렌더링을 처리하는 데에도 사용할 수 있습니다.

이 게시물이 WordPress 웹 페이지에서 CSS 및 JavaScript를 최소화하는 데 도움이 되었기를 바랍니다. 또한 WordPress에서 핵심 네트 바이탈 최적화에 대한 자습서를 보고 최고의 WordPress 일반 성능 자습서를 준수하고 싶을 수도 있습니다.

이 게시물이 마음에 들면 WordPress 동영상 자습서용 YouTube 채널을 구독하십시오. 트위터와 페이스북에서도 만나보실 수 있습니다.