플러그인 없이 WordPress에서 Javascript 및 CSS를 축소하는 방법

WordPress 웹 사이트 의 속도를 높이고 싶다면 할 수 있는 가장 간단한 작업 중 하나는 CSS 및 JavaScript 파일을 축소하는 것입니다. 이는 해당 파일의 크기를 줄여 페이지 로드 시간에 상당한 영향을 줄 수 있음을 의미합니다. CSS 및 JavaScript 파일을 축소하는 몇 가지 방법이 있습니다. 수동으로 할 수도 있고 플러그인을 사용할 수도 있습니다. 두 가지 방법을 모두 보여드릴 테니 자신에게 맞는 방법을 선택하시면 됩니다. JavaScript 및 CSS 파일 수동 축소 첫 번째 방법은 파일을 수동으로 축소하는 것입니다. 이것은 보다 기술적인 접근 방식이지만 소리만큼 어렵지는 않습니다. CSS 파일을 축소하려면 CSS Minifier와 같은 도구를 사용할 수 있습니다. CSS 코드를 도구에 붙여넣고 "축소" 버튼을 클릭하기만 하면 됩니다. 축소된 CSS 코드가 자동으로 생성됩니다. JavaScript 파일을 축소하려면 JSMin과 같은 도구를 사용할 수 있습니다. 다시 말하지만 JavaScript 코드를 도구에 붙여넣고 "축소" 버튼을 클릭하면 됩니다. 축소된 JavaScript 코드가 자동으로 생성됩니다. 축소된 CSS 및 JavaScript 코드가 있으면 WordPress 사이트에 업로드해야 합니다. FTP 또는 WordPress 대시보드를 통해 이 작업을 수행할 수 있습니다. FTP를 사용하는 경우 압축된 파일을 WordPress 디렉토리에 업로드하기만 하면 됩니다. WordPress 대시보드를 사용하는 경우 "모양 > 편집기"로 이동하여 파일을 "테마 디렉토리"에 업로드합니다. 파일이 업로드되면 축소된 버전을 참조하도록 WordPress 파일을 편집해야 합니다. CSS의 경우 이는 "style.css" 파일을 편집하는 것을 의미합니다. JavaScript의 경우 이는 "functions.js" 파일을 편집하는 것을 의미합니다. 두 경우 모두 CSS 또는 JavaScript 파일을 참조하는 행을 찾아야 합니다. CSS의 경우 다음과 같이 표시됩니다. JavaScript의 경우 다음과 같이 표시됩니다. 파일 이름을 축소된 버전으로 변경하기만 하면 됩니다. 따라서 CSS의 경우 "style.min.css"로 변경합니다. JavaScript의 경우 "functions.min.js"로 변경합니다. 일단 당신은

코드를 확대하는 과정을 통해 크기를 줄이면서 기능을 유지할 수 있습니다. 이는 페이지 속도를 높이므로 브라우저에서 웹사이트를 로드할 때 필요합니다. 페이지 다운로드가 빠를수록 사용자 인터페이스에서 더 빠른 변경 사항을 볼 수 있습니다. WordPress 사이트를 최적화하면 사이트의 속도와 응답성을 높일 수 있습니다. 파일 크기를 줄이면 웹 사이트가 더 빨리 로드되고 더 적은 대역폭을 사용합니다. 또한 이러한 파일을 제거하면 잠재적인 보안 취약성의 위험이 줄어듭니다. 불필요한 공백, 줄 또는 문자가 포함된 파일은 제거하면 크기가 줄어듭니다.

JavaScript 및 CSS 파일의 크기를 줄이는 데 도움이 되도록 가장 효과적인 온라인 도구 목록을 작성했습니다. 도구를 사용하여 폴더 또는 파일 이름을 축소할 수 있습니다. 코드를 붙여넣으면 JS 및 CSS 축소자가 표시됩니다. 그런 다음 드롭다운 메뉴에서 음소거 또는 압축 옵션으로 이동합니다. 웹 사이트를 빠르게 로드하려면 JS 및 CSS를 축소해야 하는 경우가 많습니다. 네트워크를 통해 전송되는 바이트 수를 줄이면 브라우저를 사용하는 모든 사람이 웹사이트에 쉽게 액세스할 수 있습니다. WordPress 파일을 압축하는 데 사용할 수 있는 플러그인이 많이 있습니다.

JSCompress는 모든 JS 파일을 원래 크기의 80%만큼 작은 크기로 압축하고 축소할 수 있는 온라인 JavaScript 압축기 입니다. 코드를 복사하여 붙여넣거나 여러 파일을 업로드 및 결합한 다음 압축할 수 있습니다. 모든 JavaScript 압축 및 축소를 위해 UglifyJS 3 및 babel-minify를 사용하여 구현됩니다.

CSS와 Javascript를 어떻게 축소합니까?

minifycode.com 메뉴에서 CSS 축소기 탭을 선택합니다. CSS 축소 버튼을 클릭하여 CSS 코드를 입력 상자에 직접 붙여넣을 수 있습니다. 코드를 더 작게 만들려면 축소된 새 코드를 즉시 복사하세요. 다음 단계에서 웹사이트의 CSS 파일로 돌아가 압축된 코드를 새 버전으로 교체합니다.

웹 사이트를 로드하는 데 필요한 시간을 줄이면 이를 수행하는 데 필요한 리소스가 줄어듭니다. 웹 디자인 작업을 완료하는 데 사용할 수 있는 우수한 무료 도구가 너무 많다는 사실을 알게 된 것은 놀라운 일이 아닙니다. 축소는 웹 디자인 세계의 표준 관행이 되었기 때문에 무료로 제공되는 수많은 우수한 기능이 있다는 사실을 알고도 놀랄 일이 아닙니다. WordPress에서 HTML, CSS 및 JavaScript를 업데이트하는 가장 편리한 방법은 플러그인을 사용하는 것입니다. 가장 일반적인 축소 플러그인은 아마도 Autooptimize 및 Autooptimize일 것입니다. 무료이고 강력한 플러그인인 Fast Velocity Minify는 잘 알려진 또 다른 플러그인입니다. 스크립트를 집계(결합)하고, 축소하고, 모두 캐시하는 기능이 있습니다. W3 Total Cache는 CSS와 Javascript를 통합하여 서버에 대한 HTTP 요청 수를 줄이는 데 사용할 수 있습니다.

기본 설정이 올바르게 설정되어 있으면 대부분의 웹 사이트에 최적화를 추가해도 문제가 없습니다. 상태 탭을 클릭하면 처리된 JavaScript 및 CSS 파일 목록을 볼 수 있습니다. 설정 섹션에서 기본 옵션을 변경하거나 특정 코드 유형에 대한 축소를 비활성화할 수 있습니다. HTML, JS 및 CSS를 축소하는 기능을 포함하는 W3 Total Cache는 환상적인 캐싱 도구입니다. JavaScript의 프로 버전에는 축소가 포함되어 있습니다. 플러그인을 사용하여 HTML CSS 결합 및 축소와 같은 다양한 성능 최적화 를 수행할 수 있습니다. JavaScript는 컴퓨터에서 더 잘 수행될 수 있습니다.

CSS 소스 축소는 브라우저에서 CSS 파일의 기능을 유지하면서 파일 크기를 줄이기 위해 소스에서 불필요한 코드를 제거하는 프로세스입니다. 축소는 다양한 방식으로 작동합니다. 축소에는 웹 사이트의 텍스트 기반 부분을 수정하여 파일의 전체 크기를 줄이는 작업이 포함됩니다. 스크립트, 스타일 시트 및 기타 구성 요소와 같이 웹 개발에 사용되는 요소가 크게 줄어듭니다. 응답이 브라우저로 전송되기 전에 웹 서버에서 축소가 발생합니다. 결과적으로 주석, 공백 및 세미콜론과 같이 텍스트가 아닌 모든 코드가 제거됩니다. 이 프로세스는 단일 폴더 또는 대용량 파일과 같은 모든 유형의 파일에 적용할 수 있습니다. CSS 축소 기능 은 브라우저에 파일이 표시되는 방식을 변경하지 않고 CSS 파일의 파일 크기를 줄입니다. 대역폭이 제한된 상황이나 모바일 장치에서 웹사이트를 로드하는 경우에도 유용할 수 있습니다. 음소거된 CSS 파일은 그렇지 않은 CSS 파일보다 적은 공간을 사용하고 더 빨리 로드됩니다. 또한 호환성 문제가 발생할 가능성이 적습니다. CSS 축소의 결과로 CSS 파일을 볼 때 브라우저 동작을 변경할 필요가 없습니다. 대역폭이 제한적이거나 셀룰러 네트워크가 혼잡할 때 모바일 장치에서 사용하는 것이 좋습니다.

CSS와 자바스크립트를 축소해야 하는 이유

CSS 및 JavaScript 파일을 최적화하려면 다양한 이유로 먼저 최적화해야 합니다. 코드는 일반적으로 훨씬 작기 때문에 더 작은 파일 크기는 파일 크기를 30%에서 90%까지 줄일 수 있습니다. 코드를 축소하면 웹 페이지에서 실행되는 코드의 양을 줄여 페이지 속도를 높일 수도 있습니다. 이와 관련하여 CSS와 JavaScript를 축소하는 것이 좋습니다.

WordPress에서 코드를 어떻게 축소합니까?

WordPress에서 코드를 축소하려면 WP Super Minify와 같은 플러그인을 사용할 수 있습니다. 이 플러그인은 HTML, CSS 및 JavaScript 코드를 축소하여 웹사이트 속도를 높이는 데 도움이 됩니다.

이 가이드를 사용하여 WordPress에서 CSS, HTML 및 JavaScript 파일을 축소하십시오. 프로세스는 불필요한 문자, 공백 및 행으로 코드를 생성합니다. WordPress 플랫폼의 구성에 따라 WordPress 리소스를 수동으로 축소하거나 WordPress 축소 플러그인을 사용할 수 있습니다. 프로세스 속도를 높이는 데 도움이 되는 다양한 도구를 사용할 수 있습니다. WP minify 를 사용하여 웹사이트의 성능을 높일 수 있습니다. 이 도구는 또한 어떤 파일이 크고 그렇지 않은지 표시합니다. 예를 들어, 테스트에서 CSS에 대해 99점을 받았지만 두 파일은 개선이 필요합니다. 우리는 100점 만점을 받았습니다. 문제를 해결한 후입니다.

HTML이 PHP 페이지에서 제거되면 파일 크기가 작아질 수 있습니다. ob_start() 함수는 콜백을 사용하여 HTML 출력을 축소하는 데 사용됩니다. 함수가 실행되기 전후에 태그, 주석 및 공백 시퀀스에서 공백이 제거됩니다.

Google의 핵심 Web Vital이 성능에 미치는 작은 영향

GTMetrix에 따르면 성능은 결정에 중요한 요소가 아니었습니다.

CSS와 J를 축소해야 하나요?

CSS를 최소화하고 JavaScript 파일을 최소화하여 웹 페이지에서 더 빠르게 로드할 수 있습니다. 다음과 같은 다양한 이유로 CSS 및 JavaScript를 축소합니다. 파일 크기 줄이기: 파일에 표시되는 코드가 많을수록 크기가 커집니다. 이전 버전에서 복사할 수 있는 줄 수는 일반적으로 이전 버전에서 복사할 수 있는 줄 수보다 훨씬 적습니다.

HTML, CSS 및 JS에서 이러한 파일을 축소하면 다운로드 속도가 빨라지고 렌더링 시간이 빨라질 수 있습니다. 일반적으로 이러한 파일 크기 감소는 파일 속도에 큰 영향을 미치지 않으므로 파일 크기에 큰 영향을 미치지 않을 것입니다. 웹 사이트 구성에서 CSS 및 JS 파일을 편집해야 하는지 여부를 알아보려면 계속 읽으십시오. 웹 사이트가 본질적으로 정적인 경우 HTML, CSS 및 JS 파일을 축소하는 데 사용하는 것이 유용할 수 있습니다. 이러한 CMS 플랫폼은 반복적인 변경이 필요하지 않기 때문에 파일 정리에 대해 걱정할 필요가 없습니다. 웹 서버는 이 프로세스의 일부로 데이터를 처리해야 하므로 시간이 걸립니다. 동일한 CSS 및 JS 파일을 여러 페이지에서 사용하는 경우 한 번 축소하면 충분합니다.

그러나 CSS와 JS 파일을 결합하면 이 이점을 잃을 수 있습니다. 한 페이지의 결합된 파일이 이전에 일치한 개별 파일과 더 이상 일치하지 않을 수 있습니다. 사이트에서 HTML/전체 페이지 캐싱을 사용하는 경우 웹페이지당 한 번만 축소가 필요합니다. 웹 페이지를 대폭 단순화하면 항상 로드 속도가 느려져 서버 리소스에 과도한 부담이 가해집니다. HTML 캐싱을 사용하지 않는 경우 HTML 파일을 축소하면 웹사이트에 영향을 미칩니다. 웹사이트 방문자가 적은 경우 HTML, CSS 또는 JS를 포함하지 않으면 비용을 절약할 수 있습니다. 최상의 결과는 일반적으로 CDN 수준이 아닌 웹 서버 수준에서 축소하여 얻을 수 있습니다. DDoS 공격을 사용하여 200개 이상의 PoP를 통해 하나의 웹 페이지를 Cloudflare에 연결하는 경우 웹 페이지를 한 번이 아니라 200번 이상 축소해야 합니다.

애플리케이션의 성능을 향상시키려면 축소 사용을 고려해야 합니다. 코드를 리팩토링할 때 불필요한 공백과 주석을 제거하면 성능이 향상될 수 있습니다. 그러나 이 방법의 주요 목표는 다운로드 속도를 높이는 것이므로 궁극적으로 서버 응용 프로그램과 관련이 없습니다.

자바스크립트와 CSS를 축소하여 웹 페이지 성능을 향상시키는 방법

JavaScript는 뛰어난 프로그래밍 언어이기 때문에 웹 페이지 속도가 느려집니다. 더 많은 공간을 확보하고 페이지 로딩 속도를 높이려면 더 작은 JavaScript 코드 를 사용해야 합니다. 결과적으로 JavaScript 코드의 축소 버전은 파일 크기를 30%에서 90%까지 줄일 수 있습니다. CSS를 축소하는 것은 성능에 영향을 미치지 않는다는 사실에도 불구하고 대역폭 및 다운로드 시간 측면에서 여전히 유리할 수 있습니다. CSS 파일이 누락된 경우 최대 50%까지 줄일 수 있습니다. CSS 축소는 성능에 거의 영향을 미치지 않지만 다운로드 속도를 높이기 위한 것입니다. 대부분의 경우 축소된 CSS 파일은 축소되지 않은 파일보다 더 빨리 로드됩니다.

CSS 축소

CSS 축소는 CSS 코드를 가져와 파일 크기를 줄이는 프로세스입니다. 이것은 추가 공백, 주석 및 불필요한 코드와 같은 것을 제거하여 수행됩니다. CSS를 축소하면 웹사이트 로드 속도가 빨라지고 CSS 코드를 읽기가 더 어려워질 수도 있습니다.

축소 및 압축 과정은 소스 코드의 기능을 변경하지 않고 공백, 줄, 주석 등과 같은 불필요한 문자를 제거합니다. 대부분의 경우 압축은 웹팩과 같은 빌드 프로세스의 구성 요소로 수행됩니다. File Watcher의 범위에 CSS 요소가 있는 파일이 변경되거나 저장되면 축소가 시작됩니다. 컴퓨터가 Node.js로 구성되어 있는지 확인하십시오. 설정/기본 설정 섹션으로 이동하여 CSS 및 파일 감시자 플러그인이 활성화되어 있는지 확인하십시오. 노드 패키지 관리자를 통해 csso-cli를 설치하면 PhpStorm이 패키지를 찾아 csso 별칭 필드를 채웁니다.

코드 축소의 장단점

축소는 긍정적인 영향을 미칠 수 있지만 부정적인 결과를 초래할 수도 있습니다. 파일을 축소하는 잘못된 방법은 파일을 읽거나 이해하기 어렵게 하거나 누락되거나 불완전한 정보를 포함할 수 있습니다. 결론적으로, 축소기는 신뢰할 수 있고 정확해야 합니다.
웹사이트가 느린 경우 CSS 및 JS 코드를 축소하는 것이 좋습니다. 너무 많이 축소하지 않는 것이 중요합니다. 그렇지 않으면 파일을 읽고 이해하기가 훨씬 더 어려워집니다.

WordPress 축소 플러그인

CSS 및 JavaScript 파일을 축소하는 WordPress 플러그인을 요청한다고 가정하면 한 가지 옵션은 Autooptimize 플러그인입니다. 이 플러그인은 CSS 및 JavaScript 파일을 축소하고 HTML 코드를 최적화하여 웹사이트의 성능을 향상시킬 수 있습니다.

WP Super Minify 앱의 인라인 JavaScript 및 CSS 파일을 결합, 축소 및 캐시하여 페이지 로드 속도를 높일 수 있습니다. 이 플러그인을 활성화하면 HTML, 인라인 JS 및 CSS가 압축되었음을 알 수 있습니다. 페이지 로드 속도를 향상시키는 것 외에도 크기는 처리해야 하는 데이터의 양을 줄이는 데 도움이 됩니다.

지금 설정 업데이트

설정을 완료한 후 '지금 업데이트' 버튼을 클릭하여 필요한 사항을 변경합니다.

CSS 플러그인 웹팩 축소

minify css 플러그인 webpack은 CSS 파일을 최적화하기 위한 훌륭한 도구입니다. CSS 파일의 크기를 최대 50%까지 줄일 수 있습니다! 이 플러그인은 사용하기 쉽고 웹사이트의 로드 시간을 개선하는 데 도움이 될 수 있습니다.

CSS Nano는 CSS 최적화 및 스타일링을 위한 플러그인인 CSS Minimizer-webpack에서 CSS를 최적화 및 축소하는 데 사용됩니다. 병렬 모드에서 사용할 수 있으며 이 경우 소스 맵과 자산이 더 정확하고 쿼리 문자열을 사용할 수 있습니다. 병렬 프로세스를 실행하여 빌드 시간을 줄일 수 있습니다. 병렬화가 활성화된 경우 minimumrOptions 패키지에 액세스하려면 문자열을 사용해야 합니다. CSSNano는 플러그인 개발 시 기본 패키지로 사용됩니다. 함수 배열이 minify 옵션을 통과하는 경우 최소화 옵션도 배열이어야 합니다. 가져올 모듈을 지정하기 위해 함수 또는 문자열을 사용할 수 있습니다. 소스 맵을 놓치지 않도록 모든 로더에 소스 맵을 포함하는 것이 중요합니다.

Webpack을 축소할 수 있습니까?

프로덕션 모드에서 Webpack v4를 사용하면 기본적으로 축소됩니다.

Webpack 플러그인은 100% 효과적이지 않습니다.

Uglify 및 obfuscator와 같은 웹팩 플러그인이 코드를 난독화하는 데 도움이 될 수 있지만 100% 효과적이지는 않습니다. webpack obfuscator로 압축된 파일이 있는 경우 자동화된 도구는 여전히 프로세스를 되돌릴 수 있습니다. 또한 웹팩 플러그인은 Uglify와 같은 전용 난독화 도구와 동일한 수준의 보호를 제공하지 않습니다.

코드 축소

즉, JavaScript 소스 코드의 기능에 영향을 주지 않고 불필요한 문자를 모두 제거하는 프로세스입니다. 공백, 주석 및 세미콜론 제거 외에도 더 짧은 변수 이름, 함수 및 주석이 통합되었습니다.

축소로 알려진 프로세스는 코드에서 중복 문자를 제거하는 것으로 정의할 수 있습니다. 정식 버전과 비교할 때 축소는 일반적으로 애플리케이션이 배포되기 전에 수행됩니다. 결과적으로 사용자는 정식 버전이 아닌 축소 버전을 사용하여 웹 페이지에 쉽게 액세스할 수 있습니다. 로딩 시간이 단축되고 응답 시간이 증가합니다. 최소화의 개념은 사용자가 일반 코드 파일을 연구하고 다시 작성하여 파일 크기를 줄일 수 있도록 하는 잘 알려진 개념입니다. 웹 사이트의 스크립트, 스타일 및 기타 구성 요소에 축소가 있으면 웹 사이트 디자인을 향상시킬 수 있습니다. 요청이 웹 서버에 제출되면 수신자에게 전송되기 전에 처리됩니다. 스크립트 파일과 웹 페이지의 중요하지 않은 코드를 줄여서 줄일 수 있습니다.

이렇게 하면 로드 및 로드에 걸리는 시간이 줄어듭니다. 코드 파일을 축소하는 방법은 다양한 방법으로 사용할 수 있습니다. 중단, 공백 및 주석 제거는 모두 코드 파일의 수동 축소를 위한 옵션입니다. 이 경우 일반 코드는 변경되지 않습니다. HTML 파일의 크기를 줄이기 위해 HTML 축소 가 기술입니다. 이것은 로딩 시간과 다른 작업에 소요되는 시간을 줄여줍니다. HTML 축소자는 HTML 코드를 빠르고 쉽게 축소하는 데 사용할 수 있습니다. 그렇게 하는 가장 인기 있고 적응 가능한 방법 중 하나입니다. 또한 다른 웹 사이트 도구를 사용하여 HTML 파일을 단순화할 수 있습니다.

같은 방식으로 당신과 당신의 친구들은 웹 브라우저 역할을 하고 웹 서버는 맥주 캐리어 역할을 합니다. 친구에게 한 곳에서 다른 곳으로 서둘러 가라고 말할 필요 없이 한 번에 4개의 맥주를 운반할 수 있는 트레이를 사용하면 친구가 한 번에 4개의 맥주를 모두 선택할 수 있습니다. 그는 에너지를 덜 사용하고 걸을 때 시간이 적습니다. 이 기간 동안 웹 사이트는 일반적으로 수많은 파일로 가득 차 있습니다. 연결은 여러 파일을 결합하는 중요한 방법입니다. CSS 축소는 많은 노력이 필요하지 않기 때문에 JS 축소 보다 디버깅에 더 적합합니다. 우리는 웹 페이지에서 어떤 변화도 볼 수 없지만 빛의 속도로 접근하는 것을 볼 수 없습니다.

축소의 장점과 단점

코드와 마크업 크기를 줄이는 최적화 기술입니다. 이것이 활성화되지 않으면 코드를 읽는 방법에 부정적인 영향을 줄 수 있지만 사이트에 액세스하는 속도와 응답 속도에도 상당한 영향을 미칠 수 있습니다. 또한 웹 사이트의 콘텐츠를 최소화하여 로드 시간과 대역폭을 줄일 수 있습니다. 그러나 축소를 사용하면 코드 가독성에 부정적인 영향을 줄 수 있으므로 위험합니다.