WordPress 파일을 축소하는 방법(CSS, HTML 및 JavaScript)

CSS, HTML 또는 JavaScript와 같은 WordPress 파일을 축소하시겠습니까? 어떻게 진행되는지 알고 싶으시면 저희가 준비했습니다. 이 기사에서는 WordPress 파일을 최소화하고 WordPress 웹 사이트의 속도를 높이는 방법을 보여줍니다.

그러나 그 전에 축소가 무엇이며 축소의 장점이 무엇인지 논의합시다. 시작하자.

축소란 무엇입니까?

축소 는 HTML, CSS 및 JavaScript와 같은 정적 파일을 압축하여 웹 개발자가 전체 웹 사이트의 로드 시간을 줄이는 데 사용하는 인기 있는 기술입니다. 프로세스의 요점은 정적 파일의 크기를 더 작게 만드는 것입니다.

축소가 하는 일은 사람의 가독성을 높이는 것 외에 다른 목적으로 사용되지 않는 파일의 모든 공백을 제거하는 것입니다. 서버는 가독성에 신경 쓰지 않기 때문에 모든 공백을 안전하게 제거할 수 있습니다. 결과적으로 파일 크기가 약간 줄어듭니다. 그러나 모든 정적 파일을 약간만 줄이면 전체 효과가 훨씬 더 중요합니다.

예를 들어 일반 CSS 코드는 다음과 같습니다.

 신체 {
 여백:25px;
 패딩:25px;
 색상:#000000;
 배경:#f5f5f5;
 }
 h1 {
 글꼴 크기:32px;
 색상#ff6200;
 여백-하단:15px;
 }

그러나 축소 후에는 다음과 같이 만들 수 있습니다.

 본문{margin:25px;padding:25px;color:#000000;background:#f5f5f5;}h1{font-size:32px;color#ff6200;margin-bottom:15px;}

보시다시피 축소 프로세스는 코드에서 추가 줄 바꿈과 공백을 제거했습니다. 이렇게 하면 파일 크기가 줄어들고 서버가 파일을 더 빨리 읽고 방문자에게 웹사이트를 빠르게 제공할 수 있습니다.

CSS와 유사하게 최적화 기술은 HTML과 JavaScript도 압축할 수 있습니다.

워드프레스 웹사이트 주변에 정적 파일이 많다면 이를 최소화해야 합니다. 아마도 파일 크기를 줄이고 웹 사이트를 더 빠르게 만드는 데 도움이 될 것입니다.

WordPress에서 HTML, CSS 및 Javascript를 축소해야 하는 이유

캐싱, 지연 로딩 등과 같은 다른 최적화 기술과 함께 WordPress에서 HTML, CSS 및 JavaScript를 최소화하여 웹 사이트를 더욱 빠르게 만들어야 합니다.

통계에 따르면 WordPress는 전 세계 웹 사이트의 64% 이상 에서 사용됩니다. 따라서 동일한 업계의 다른 WordPress 블로그와 경쟁하고 있다고 말하는 것이 안전합니다.

또한 Google은 웹 사이트의 속도를 순위 요소 중 하나로 고려할 것이라고 말했습니다.

따라서 축소 및 기타 최적화 기술을 구현하여 웹사이트/블로그를 더 빠르게 만들고 있습니다. 그러면 더 많은 전환, 판매(WooCommerce 스토어를 사용하는 경우) 및 수익이 발생합니다. 그러나 사이트에 제한된 양의 정적 파일만 있는 경우 축소로 인해 성능이 크게 향상되지 않습니다.

반면에 웹 사이트에서 수많은 CSS, JS 및 HTML 파일을 처리하는 경우 축소가 가장 좋은 방법 중 하나가 될 수 있습니다.

이제 축소와 파일을 축소해야 하는 이유를 알게 되었습니다. 다음으로 주요 주제인 WordPress에서 HTML, CSS 및 JS를 축소하는 방법으로 이동하겠습니다.

WordPress에서 HTML, CSS 및 Javascript를 축소하는 방법

WordPress에서 HTML, CSS 및 JavaScript를 두 가지 방법으로 축소할 수 있습니다.

• 수동으로
• 전용 플러그인 사용

아래에서 두 가지 방법을 모두 보여드리겠습니다. 따라서 요구 사항에 맞는 방법을 선택할 수 있습니다.

수동으로 WordPress 파일 축소

축소를 위해 WordPress 사이트에서 추가 플러그인을 사용하지 않으려면 이 온라인 도구를 사용할 수 있습니다. 그러나 수동 방법을 사용할 때는 모든 파일을 개별적으로 최적화해야 합니다. 이것이 수행되는 방법입니다.

웹사이트를 확인하면 제출 상자가 표시됩니다.

거기에 축소해야 하는 코드를 붙여넣어야 합니다.

CSS, JS 또는 HTML 코드를 축소할 수 있습니다. 코드를 붙여넣은 후 축소 를 클릭합니다.

다음 페이지에서 CSS의 축소 버전을 얻을 수 있습니다.

스크린샷에서 볼 수 있듯이 이 도구는 코드에서 초과 공백과 줄 바꿈을 모두 제거했습니다. 이런 식으로 CSS, JavaScript 및 HTML을 최적화할 수 있습니다.

그런 다음 이 축소된 버전의 코드를 서버에 업로드해야 합니다.

이 도구는 사용하기 쉽습니다. 그러나 주요 단점은 모든 WordPress 파일을 수동으로 축소해야 한다는 것입니다. 이것은 꽤 시간이 걸리고 지루한 과정일 수 있습니다. 서버의 모든 파일에 대한 전체 프로세스를 자동화할 수 있다면 어떨까요?

이것이 WordPress 축소 플러그인이 필요한 곳입니다. WordPress에서 CSS, HTML 및 JavaScript를 축소하는 방법을 살펴보겠습니다.

WordPress 플러그인을 사용하여 CSS, HTML 및 JavaScript 축소

정적 파일을 최소화하는 데 사용할 수 있는 최고의 WordPress 플러그인 두 가지는 다음과 같습니다.

• WP 로켓
• 자동 최적화

튜토리얼로 이동하기 전에 각 플러그인이 제공하는 기능을 살펴보겠습니다.

1) WP 로켓

가장 강력한 WordPress 캐싱 및 속도 최적화 플러그인을 찾고 있다면 WP Rocket을 살펴봐야 합니다. WP Rocket은 가벼우면서도 기능이 풍부한 WordPress용 캐싱 플러그인으로 모든 블로거와 비즈니스 소유자가 간단한 마우스 클릭으로 웹사이트의 속도를 높일 수 있습니다.

WP Rocket의 주요 장점은 사용하기 쉬운 인터페이스입니다. 플러그인에는 사용하기 쉬운 대시보드가 ​​있어 모든 사람이 최고의 기능과 언제 켜야 하는지 이해하는 데 도움이 됩니다. 이 플러그인을 사용하면 WordPress에서 CSS, HTML 및 JavaScript 파일을 축소하는 것 외에도 훨씬 더 많은 작업을 수행할 수 있습니다.

WP Rocket 플러그인에서 우리가 좋아하는 인기 기능은 CDN 통합, WooCommerce 통합 및 데이터베이스 통합입니다.

CDN 통합을 제공하므로 플러그인을 원하는 CDN 서비스와 통합할 수 있습니다. CDN(Content Delivery Network) 서비스는 파일 제공 속도를 높이기 위해 만들어졌습니다. BunnyCDN, Cloudflare, Stackpath 또는 원하는 모든 것을 사용할 수 있습니다.

또한 WooCommerce 최적화 기능을 통해 장바구니, 결제 및 관련 중요 페이지가 캐시에서 제거됩니다. 이렇게 하면 WooCommerce 스토어가 더 사용자 친화적으로 만들어집니다.

마지막으로 데이터베이스 최적화 기능은 MySQL 데이터베이스에서 원치 않는 테이블, 주석 및 쓰레기 게시물을 모두 제거합니다. 아마도 이것은 웹사이트 소유자가 웹사이트 속도를 높이고 서버의 부하를 줄이는 데 도움이 될 것입니다.

특징

• 경량
• 사용하기 쉬운
• CDN 통합
• WooCommerce 통합
• 데이터베이스 최적화
• 파일 최적화

가격

WP Rocket은 프리미엄 캐싱 플러그인입니다. 필요에 따라 구독을 받을 수 있습니다. 참고로 가장 저렴한 요금제는 연간 $49입니다.

2) 자동 최적화

경량 WordPress 플러그인을 사용하여 WordPress 파일 축소를 관리하려는 경우 Autooptimize 를 시도해야 합니다.

Autooptimize는 WordPress 또는 WooCommerce 웹사이트의 속도를 높이는 인기 있는 플러그인입니다. 이 플러그인은 전 ​​세계 백만 개 이상의 WordPress 사이트에서 사용됩니다. 그 외에도 독특한 기능도 있습니다.

예를 들어, 이미지 성능을 최적화하기 위해 Autooptimize의 지연 로딩 기능을 사용할 수 있습니다. 방문자가 아래로 스크롤할 때만 이미지가 제공됩니다.

지연 로딩 외에도 Google 글꼴 최적화는 또 다른 멋진 기능입니다. 대부분의 WordPress 테마 작성자는 일반적으로 테마 내에서 Google 글꼴을 사용하므로 최종 사용자가 사용할 때 웹사이트는 추가 HTTP 요청을 Google 글꼴의 서버로 보냅니다. Autooptimize를 사용하여 이를 줄일 수 있습니다.

가벼운 도구이기 때문에 플러그인은 서버나 전체 웹사이트의 크기에 추가 부하를 추가하지 않습니다. 필요한 모든 기능을 제공하는 간단한 솔루션이 필요한 경우 자동 최적화를 선택해야 합니다. 그러나 개발팀은 더 나은 최적화를 위해 캐싱 플러그인을 사용할 것을 제안합니다.

특징

• 지연 로딩
• 축소
• 구글 글꼴 최적화
• 경량

가격

Autooptimize는 WordPress 플러그인 저장소를 통해 다운로드할 수 있는 무료 WordPress 플러그인입니다.

따라서 이들은 WordPress 파일을 축소하는 데 가장 많이 사용되는 두 가지 플러그인이었습니다. 그러나 사용 가능한 유일한 옵션은 아닙니다. 탐색하려면 최고의 WordPress 축소 플러그인에 대한 가이드를 확인하십시오.

다음으로 이러한 플러그인을 사용하여 파일을 축소하는 방법을 보여드리겠습니다.

WP Rocket으로 WordPress 파일을 축소하는 방법

WP Rocket은 웹사이트의 성능을 한 단계 끌어올려야 하는 경우에 좋은 옵션입니다. 축소 외에도 페이지 로딩 시간을 높이는 데 도움이 되는 많은 기능이 있습니다.

프리미엄 플러그인이므로 WordPress 저장소에서 직접 설치할 수 없습니다. 대신 공식 웹 사이트에서 구매하고 거기에서 다운로드해야 합니다.

프리미엄 플러그인을 다운로드한 후에는 WordPress 웹사이트에 플러그인을 수동으로 설치해야 합니다.

설치 후 플러그인을 활성화합니다.

WordPress 설정에서 WP Rocket 구성을 볼 수 있습니다.

왼쪽에 사용할 수 있는 모든 구성 옵션이 표시됩니다.

주요 옵션은 다음과 같습니다.

• 계기반
• 은닉처
• 파일 최적화
• 미디어
• 예압
• 고급 규칙
• 데이터 베이스
• CDN

등.

파일 최적화 탭 으로 이동하기만 하면 됩니다. 거기에 JS 및 CSS 파일을 축소하기 위한 설정이 표시됩니다.

거기에서 원하는 파일을 축소하십시오.

CSS 축소

CSS 축소 섹션 내에서 옵션을 활성화하면 준비가 완료됩니다.

축소에서 사용자 정의 CSS 파일을 제외할 수도 있습니다.

자바스크립트 축소

JavaScript 축소 탭까지 아래로 스크롤하고 거기에서 축소를 활성화합니다.

이러한 변경을 수행한 후에는 설정을 저장해야 합니다. 현재 WP Rocket은 HTML 파일 축소를 지원하지 않습니다.

이런 식으로 WordPress 축소에 WP Rocket을 사용할 수 있습니다. 다음으로 축소를 위해 Autooptimize 플러그인을 사용하는 방법을 살펴보겠습니다.

Autooptimize로 WordPress 파일을 축소하는 방법

아시다시피, 먼저 WordPress 사이트 내부에 Autooptimize를 설치하고 활성화해야 합니다. 그렇게 하려면 플러그인 > 새로 추가 로 이동하여 자동 최적화를 검색할 수 있습니다. 도구를 찾으면 도구를 설치하고 활성화하십시오.

플러그인을 설치하면 WordPress 설정에서 볼 수 있습니다.

개발팀은 플러그인에 4가지 사용자 정의 옵션을 추가했습니다.

• JS, CSS 및 HTML
• 이미지
• 중요한 CSS
• 추가의

CSS, HTML 및 JavaScript 파일을 축소하려면 다음 단계를 따라야 합니다.

자바스크립트 최적화

JavaScript 최적화는 플러그인의 설정 페이지에서 가장 먼저 보게 될 것입니다. JavaScript 코드 최적화 옵션을 활성화하여 JavaScript 파일을 최소화하고 다음 단계로 이동합니다.

CSS 최적화

JavaScript 옵션 바로 아래에서 CSS 최적화를 볼 수 있습니다. CSS 파일 집계 및 인라인 CSS도 집계 옵션을 활성화하여 서버의 모든 CSS 파일을 축소합니다.

HTML 최적화

HTML 파일을 최적화하려면 HTML 옵션으로 이동하세요.

여기에서 HTML 코드 최적화 옵션을 활성화합니다.

필요한 모든 변경을 수행했으면 플러그인 설정을 저장해야 합니다.

이렇게 하면 WordPress/WooCommerce 웹사이트에서 정적 파일을 최적화할 수 있습니다. 또한, Autooptimize에는 더 많은 최적화 기능이 있으므로 플러그인을 탐색하여 더 많은 속도와 성능을 개선할 수 있습니다.

그게 다야

이것이 Autooptimize로 WordPress 파일을 축소하는 방법입니다.

참고: 특정 테마 파일을 축소하면 웹사이트가 손상되는 경우가 있습니다. 따라서 파일에 축소를 적용한 후 매번 프런트 엔드에서 웹 사이트를 확인하십시오.

축소 결과 테스트/비교

이제 WordPress 또는 WooCommerce 정적 파일(CSS, HTML 및 JavaScript)을 성공적으로 축소했습니다. 다음으로 전후 결과를 보겠습니다. 다음과 같이 웹사이트의 속도를 테스트하는 데 사용할 수 있는 여러 도구가 있습니다.

• 핑돔
• GTmetrix
• PageSpeed ​​인사이트

이 테스트를 위해 우리는 GTmetrix 를 사용할 것입니다. 웹 사이트 속도 테스트에 사용할 수 있는 인기 있는 도구입니다. 결과는 다음과 같습니다.

참고: 새로운 WordPress 웹사이트를 만들고 테스트를 위해 일부 더미 콘텐츠를 가져왔습니다. 콘텐츠가 없는 새 웹사이트의 속도를 테스트하는 것은 권장되지 않습니다.

전에

• 성능 - 88%
• 구조 - 97%
• 완전히 로드된 시간 - 3.3초

후에

• 성능 - 98%
• 구조 - 98%
• 완전히 로드된 시간 – 1.4초

보시다시피 웹사이트의 로딩 시간을 3.3초에서 1.4초로 줄였습니다. 이는 상당한 개선 사항입니다.

결론

위에서 볼 수 있듯이 WordPress 또는 WooCommerce 웹 사이트를 더 빠르게 만들어야 하는 경우 최대 수준으로 최적화해야 합니다. WordPress 정적 파일 을 축소하는 것은 사이트 속도를 높이는 일반적이고 쉬운 방법입니다. 이것의 주요 장점은 코드를 다루거나 핵심/테마 템플릿을 편집할 필요가 없다는 것입니다.

모든 정적 파일을 수동으로 최적화하는 것은 어렵고 시간이 많이 소요될 수 있습니다. 웹사이트에 새로운 CSS/HTML 또는 JS 파일을 추가할 때마다 웹사이트를 통해 최적화해야 합니다. 이것은 초보자에게 친숙하거나 편리한 방법이 아닙니다.

WP Rocket 과 Autooptimize 는 정적 파일을 최적화하는 데 사용할 수 있는 최고의 플러그인입니다. 둘 다 사용하기 쉬운 기능이 제공되며 기술에 익숙하지 않은 사람도 쉽게 구성할 수 있습니다. 기존 및 미래의 모든 정적 파일을 최적화하는 최선의 방법을 찾고 있다면 플러그인 방법이 최선의 선택입니다.

이 유용한 기사를 찾고 WordPress 파일을 축소하는 방법을 배웠기를 바랍니다. 이 게시물을 소셜 미디어에서 친구 및 동료 블로거와 공유하는 것을 고려하십시오. 또한 더 많은 관련 기사를 보려면 블로그 아카이브를 확인하십시오.

어떤 방법을 사용하시겠습니까? 댓글로 알려주세요!

읽고 싶은 유사한 기사:

• WordPress 속도 최적화 플러그인: 웹사이트 속도를 높이는 상위 5개 플러그인!
• WordPress 웹 사이트 속도를 높이는 최고의 WordPress 캐싱 플러그인
• 느린 WooCommerce 스토어를 수정하고 속도를 높이는 방법은 무엇입니까?