웹사이트의 CSS, HTML 및 자바스크립트를 축소하는 방법
게시 됨: 2018-12-27웹사이트의 CSS, HTML 및 Javascript 파일을 축소하면 사이트의 페이지 로드 속도에서 귀중한 시간을 단축할 수 있습니다. 이제 페이지 로드 속도를 절반으로 줄이는 것이 아니라 웹사이트의 속도와 관련하여 약간의 도움이 됩니다. 사이트 로드 속도는 처음 방문자에게 중요할 뿐만 아니라 검색 엔진 순위를 옮기는 데도 중요합니다.
"축소"라는 용어는 소스 코드에서 불필요한 문자를 제거하는 프로세스를 설명하는 프로그래밍 용어입니다. 이러한 문자에는 공백, 줄 바꿈, 주석 및 블록 구분 기호가 포함되며 인간에게는 유용하지만 기계에는 필요하지 않습니다. 웹 브라우저에서 더 빨리 읽을 수 있도록 CSS, HTML 및 Javascript 코드가 포함된 웹사이트의 파일을 축소합니다.
다음은 CSS 축소의 예입니다.
축소 전 CSS
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
축소 후 CSS
.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
분명히 이것은 CSS 코드 스니펫을 사용한 작은 예일 뿐이지만 수천 줄의 코드를 축소할 때 절약되는 공간의 양을 상상할 수 있습니다. 따라서 수동으로 이 작업을 수행하려는 경우 기술적으로 할 수 있습니다. 그러나 오류의 위험이 크며 귀중한 시간이나 생명을 불필요하게 단축할 수 있습니다!
내 충고를 받아들이고 마음대로 도구를 사용하십시오.
파일을 수동으로 축소하는 온라인 도구
고맙게도 사이트 파일을 축소하기 위해 개발자가 아니거나 프로그래밍 언어를 알 필요가 없습니다. 축소는 웹 디자인 세계의 표준 관행이 되었기 때문에 작업을 수행할 수 있는 훌륭한(무료) 도구가 많이 있다는 사실을 알게 되더라도 놀랄 일은 아닙니다.
다음은 시작하는 데 도움이 되는 몇 가지 도구 목록입니다. 이들 중 다수가 둘 이상의 코드 유형을 축소할 수 있으므로 코드 유형 옵션을 괄호 안에 포함했습니다.
- Closure Compiler(JS만 해당) – Closure Compiler는 Google Developers의 도구 모음인 Closure Tools의 일부입니다. 다른 유용한 최적화와 함께 Javascript를 축소할 수 있습니다. js 파일 위치의 URL을 입력하여 Javascript를 가져온 다음 코드를 최적화하고 형식을 지정할 방법을 선택할 수 있습니다. 예를 들어 원하는 경우에만 공백에 대해 코드를 최적화하도록 선택합니다. 컴파일 버튼을 누르면 코드를 축소(또는 컴파일)하고 코드에 오류가 있는지 확인합니다.
- cssminifier.com 및 javascript-minifier.com(CSS 및 JS) – Andrew Chilton의 이 두 축소기는 사용하기 쉽습니다. 코드를 붙여넣고 축소 버튼을 클릭하면 축소된 코드가 출력됩니다. 편의를 위해 출력 코드를 파일로 다운로드할 수도 있습니다.
- csscompressor.net(CSS만 해당) – 이 온라인 CSS 압축기는 빠르고 쉽고 무료입니다.
- jscompress.com(JS 전용) - 이 JavaScript 압축 도구를 사용하면 복사 및 붙여넣기를 통해 JavaScript 코드를 압축할 수 있지만 한 번에 여러 JavaScript 파일을 업로드할 수도 있습니다. 이것은 더 나은 페이지 로드 속도를 위해 JavaScript 파일을 하나의 파일로 결합하는 데 유용합니다.
- refresh-sf.com(HTML, CSS 및 JS) – 이 압축기는 JavaScript, CSS 및 HTML 코드 유형을 축소합니다. 또한 필요한 경우 각 코드 유형에 대한 모든 압축기 옵션이 포함되어 있습니다.
- htmlcompressor.com(HTML, CSS 및 JS) – 이 온라인 압축기/축소 도구는 HTML, CSS 및 JS 코드 유형을 지원합니다. CSS + PHP 및 JavaScript + PHP와 같은 다양한 코드 유형 조합도 지원합니다. 또한 압축된 코드에 오류가 있는지 확인할 수도 있습니다.
- minifycode.com(HTML, CSS 및 JS) – 이 사이트는 버튼 클릭 한 번으로 코드를 축소하는 간단하고 깔끔한 UI로 JavaScript, CSS 및 HTML용 축소자를 제공합니다. 또한 읽기 쉽게(기본적으로 축소의 반대) 축소된 코드를 압축 해제하는 "미화" 도구가 포함되어 있습니다.
- Dan의 도구 – Dan의 도구는 CSS 축소기와 JavaScript 축소기를 제공합니다. 두 도구 모두 정말 깔끔하고 사용하기 쉬운 UI를 가지고 있습니다. 그들은 고급 옵션을 제공하지 않지만 일반적인 축소 목적에 적합합니다.
HTML CSS 또는 JavaScript를 로컬로 축소할 수 있는 오프라인 도구를 찾고 있다면 다음과 같은 몇 가지 옵션이 있습니다.
- 더 작게(HTML, CSS 및 JS)
- phpied.com/cssmin-js/ (CSS만 해당)
- yui.github.io/yuicompressor(JS 및 CSS)
웹사이트의 CSS, HTML 및 자바스크립트를 축소하는 방법
YouTube 채널 구독
온라인 도구를 사용하여 HTML, CSS 및 JavaScript를 축소하는 방법
이러한 온라인 도구 중 다수는 다음 단계를 포함하는 유사한 프로세스를 가지고 있습니다.
소스 코드를 붙여넣거나 소스 코드 파일을 업로드합니다.
특정 출력에 대한 설정 최적화(옵션을 사용할 수 있는 경우)
버튼을 클릭하여 코드를 축소하거나 압축합니다.
축소된 코드 출력을 복사하거나 축소된 코드 파일을 다운로드합니다.
이 예에서는 minifycode.com의 축소 도구를 사용하겠습니다.
먼저 사이트 파일에서 CSS 파일(일반적으로 style.css라고 함)을 찾고 페이지 편집기를 사용하여 파일을 엽니다. 그런 다음 전체 CSS 코드를 클립보드에 복사합니다.
minifycode.com으로 이동하여 CSS 축소기 탭을 클릭합니다. 그런 다음 CSS 코드를 입력 상자에 붙여넣고 CSS 축소 버튼을 클릭합니다.
새 축소 코드가 생성된 후 코드를 복사합니다.
그런 다음 웹사이트의 CSS 파일로 돌아가서 코드를 새로운 축소 버전으로 교체합니다.
그게 다야!
동일한 프로세스를 반복하여 사이트의 JavaScript 및 Html 파일도 축소합니다.
플러그인을 사용하여 WordPress에서 HTML, CSS 및 JavaScript를 축소하는 방법
WordPress에서 HTML, CSS 및 JavaScript를 최소화하는 가장 쉬운 방법은 플러그인을 사용하는 것입니다. 이를 통해 몇 번의 버튼 클릭으로 자동으로 페이지 로드 시간을 줄이기 위해 WordPress 사이트 파일을 최적화할 수 있습니다.
작업을 수행할 플러그인이 많이 있지만 몇 가지 눈에 띄는 플러그인을 간단히 언급하겠습니다.
자동 최적화(무료)
Autooptimize는 아마도 가장 인기 있는 minify 플러그인일 것입니다. 사용하기 쉽고 강력한 성능 기능이 가득하기 때문에 인기가 있습니다. 코드를 집계(스크립트 결합), 축소 및 캐시할 수 있습니다. 보너스로 Google 글꼴, 이미지 등을 최적화하기 위한 추가 옵션이 있습니다.
Autooptimize를 사용하려면 플러그인 > 새로 추가 아래의 WordPress 대시보드에서 플러그인을 다운로드, 설치 및 활성화할 수 있습니다.
플러그인이 활성화되면 설정 > 자동 최적화로 이동합니다. 그런 다음 기본 설정 탭에서 최적화하려는 코드(HTML, CSS 및/또는 JavaScript)를 확인하고 변경 사항 저장을 클릭합니다.
페이지 상단의 고급 설정 표시 버튼을 클릭하여 코드 최적화 방법을 추가로 사용자 지정할 수도 있습니다.
그게 다야! 매우 간단하고 강력합니다.
빠른 속도 축소(무료)
Fast Velocity Minify는 단순한 축소 이상을 수행하는 또 다른 인기 있고 무료이며 강력한 WordPress 플러그인입니다. CSS와 Javascript를 축소하고 결합하여 서버에 대한 HTTP 요청을 줄임으로써 그 이름에 걸맞게 빠른 속도의 페이지 로드 시간을 제공합니다. 추가 최적화 옵션을 사용할 수 있지만 기본 설정은 대부분의 사이트에서 훌륭하게 작동합니다.
플러그인을 사용하려면 먼저 플러그인 > 새로 추가로 이동하여 WordPress 대시보드에서 설치하고 활성화하십시오. 그런 다음 "fast velocity minify"를 검색하고 검색 결과에 팝업이 나타나면 클릭하여 설치하고 활성화합니다.
플러그인이 활성화되면 파일이 자동으로 축소되고 최상의 성능을 위해 최적화됩니다. 그것은 쉽다!
사용 가능한 모든 옵션을 보려면 플러그인 설정 페이지(설정 > 빠른 속도 축소)로 이동하십시오. 상태 탭에서 처리된 JavaScript 및 CSS 파일의 유용한 목록을 볼 수 있습니다.
설정 탭에서 파일이 최적화되는 방식을 사용자 지정할 수 있습니다. HTML, CSS 및 JavaScript의 축소가 이미 활성화되어 있으므로 이러한 설정을 사용하여 기본 옵션을 조정하거나 특정 코드 유형에 대한 축소를 비활성화할 수 있습니다. Google Fonts 및 Font Awesome을 최적화하는 옵션도 있습니다.
그게 다야!
W3 총 캐시(무료)
W3 Total Cache는 HTML, JS 및 CSS를 축소하는 옵션이 포함된 훌륭한 캐싱 플러그인입니다.
WP 가장 빠른 캐시(무료)
WP Fastest Cache – 이 무료 WordPress 캐싱 플러그인은 높은 리뷰로 매우 유명합니다. 플러그인은 더 나은 성능을 위해 HTML CSS와 JavaScript를 결합 및 축소하는 것을 포함하여 다양한 성능 최적화를 수행합니다.
플러그인이 설치되면 WordPress 대시보드 사이드바에서 WP Fastest Cache 탭(놀라운 치타 아이콘이 있는 탭)을 클릭하기만 하면 됩니다. 설정 탭에서 HTML 및 CSS 파일을 결합하고 축소하는 옵션을 찾을 수 있습니다. JavaScript 축소는 프로 버전에서만 사용할 수 있습니다.
마지막 생각들
더 빠른 페이지 로드 시간과 더 나은 성능 점수를 원하면 HTML, CSS 및 Javascript 파일을 축소해야 합니다. 모든 온라인 도구를 사용할 수 있으므로 모든 웹사이트의 코드를 쉽게 축소할 수 있습니다. 그리고 WordPress 사용자를 위해 몇 번의 클릭만으로 해당 파일을 자동으로 축소할 수 있는 강력한 플러그인이 있습니다. 위의 플러그인은 다른 성능 최적화 중에서 최소화를 처리하는 훌륭한 플러그인 중 일부에 불과합니다. 사실 축소가 이미 사용 가능한 성능 유형 플러그인이 이미 있을 수 있습니다. 예를 들어, 많은 캐싱 플러그인에는 축소 옵션이 포함되어 있습니다. 이 게시물이 귀하에게 가장 적합한 옵션을 결정하는 데 도움이 되기를 바랍니다.
아래 의견에서 여러분의 의견을 기다리겠습니다.
건배!