CSS 축소기

CSS 축소기란 무엇입니까?

CSS 축소기는 웹사이트에서 CSS 파일을 축소하는 것을 목표로 합니다. 영어에 상응하는 것으로 사용되는 이 개념(CSS Minifier)은 CSS 파일에 배열을 포함합니다. CSS가 준비되면 주요 목표는 웹 사이트 관리자 또는 코더가 라인을 올바르게 분석하는 것입니다. 따라서 많은 라인으로 구성됩니다. 이 줄 사이에는 불필요한 주석 줄과 공백이 있습니다. 이것이 CSS 파일이 매우 길어지는 이유입니다. CSS minifier를 사용하면 이러한 모든 문제가 제거됩니다.

CSS 축소자는 무엇을 합니까?

CSS 파일의 변경 사항과 함께; 치수가 줄어들고 불필요한 줄이 제거되고 불필요한 주석 줄과 공백이 삭제됩니다. 또한 CSS에 둘 이상의 코드가 포함된 경우 이러한 코드도 삭제됩니다.

대부분의 사용자가 수동으로 수행할 수 있는 이러한 작업을 위한 다양한 플러그인 및 응용 프로그램이 있습니다. 특히 WordPress 시스템을 사용하는 사람들의 경우 이러한 프로세스는 플러그인으로 자동화할 수 있습니다. 따라서 실수의 가능성이 제거되고 보다 효과적인 결과를 얻을 수 있습니다.

CSS용 WordPress를 사용하지 않거나 기존 플러그인을 선호하지 않는 사람들도 온라인 도구를 사용할 수 있습니다. CSS를 인터넷을 통해 온라인 도구에 다운로드하여 CSS에 있는 기존 파일을 변경하여 축소합니다. 모든 프로세스가 완료되면 기존 CSS 파일을 다운로드하여 웹사이트에 업로드하면 됩니다. 따라서 CSS 축소 또는 축소와 같은 작업이 성공적으로 완료되고 사이트에 대한 CSS를 통해 겪을 수 있는 모든 문제가 제거됩니다.

CSS 파일을 축소해야 하는 이유는 무엇입니까?

빠른 웹사이트는 Google을 행복하게 할 뿐만 아니라 웹사이트의 검색 순위를 높이는 데 도움이 되며 사이트 방문자에게 더 나은 사용자 경험을 제공합니다.

40%의 사람들은 홈페이지가 로드될 때까지 3초도 기다리지 않으며 Google에서는 최대 2-3초 이내에 사이트를 로드할 것을 권장합니다.

CSS 축소 도구로 압축하면 많은 이점이 있습니다.

• 파일이 작을수록 사이트의 전체 다운로드 크기가 줄어듭니다.
• 사이트 방문자는 페이지를 더 빨리 로드하고 액세스할 수 있습니다.
• 사이트 방문자는 더 큰 파일을 다운로드하지 않고도 동일한 사용자 경험을 얻을 수 있습니다.
• 사이트 소유자는 네트워크를 통해 전송되는 데이터가 적기 때문에 대역폭 비용이 낮아집니다.

CSS 축소기는 어떻게 작동합니까?

사이트의 파일을 축소하기 전에 백업하는 것이 좋습니다. 한 단계 더 나아가 평가판 사이트에서 파일을 축소할 수도 있습니다. 이렇게 하면 라이브 사이트를 변경하기 전에 모든 것이 제대로 작동하는지 확인할 수 있습니다.

파일을 축소하기 전과 후의 페이지 속도를 비교하는 것도 중요하므로 결과를 비교하고 축소가 영향을 미쳤는지 확인할 수 있습니다.

GTmetrix, Google PageSpeed ​​​​Insights 및 오픈 소스 성능 테스트 도구인 YSlow를 사용하여 페이지 속도 성능을 분석할 수 있습니다.

이제 감소 프로세스를 수행하는 방법을 살펴보겠습니다.

1. 수동 CSS 축소기

수동으로 파일을 축소하려면 상당한 시간과 노력이 필요합니다. 파일에서 개별 공백, 줄 및 불필요한 코드를 제거할 시간이 있습니까? 아마 그렇지 않을 것입니다. 시간과 별도로 이 감소 프로세스는 인적 오류의 여지도 더 많이 제공합니다. 따라서 이 방법은 파일 축소에 권장되지 않습니다. 다행히 사이트에서 코드를 복사하여 붙여넣을 수 있는 무료 온라인 축소 도구가 많이 있습니다.

CSS 축소기는 CSS 를 축소하는 무료 온라인 도구입니다. 코드를 복사하여 "Input CSS" 텍스트 필드에 붙여넣으면 도구가 CSS를 축소합니다. 축소된 출력을 파일로 다운로드하는 옵션이 있습니다. 개발자를 위해 이 도구는 API도 제공합니다.

JSCompress , JSCompress는 JS 파일을 원래 크기의 최대 80%까지 압축하고 줄일 수 있는 온라인 JavaScript 압축기입니다. 코드를 복사하여 붙여넣거나 여러 파일을 업로드하고 결합하여 사용할 수 있습니다. 그런 다음 "JavaScript 압축 - JavaScript 압축"을 클릭합니다.

2. PHP 플러그인이 포함된 CSS 축소기

수동 단계를 수행하지 않고도 파일을 축소할 수 있는 무료 및 프리미엄 플러그인이 있습니다.

• 병합,
• 작게 하다,
• 새로 고치다,
• 워드프레스 플러그인.

이 플러그인은 코드를 축소하는 것 이상을 수행합니다. CSS와 JavaScript 파일을 결합한 다음 Minify(CSS용) 및 Google Closure(JavaScript용)를 사용하여 생성된 파일을 축소합니다. 축소는 사이트 속도에 영향을 미치지 않도록 WP-Cron을 통해 수행됩니다. CSS 또는 JS 파일의 내용이 변경되면 다시 렌더링되므로 캐시를 비울 필요가 없습니다.

JCH Optimize 에는 무료 플러그인에 대한 몇 가지 꽤 좋은 기능이 있습니다. CSS와 JavaScript를 결합 및 축소하고, HTML을 축소하고, 파일을 결합하기 위한 GZip 압축을 제공하고, 배경 이미지에 대한 스프라이트 렌더링을 제공합니다.

CSS 축소 , CSS 축소로 CSS를 축소하려면 설치하고 활성화하기만 하면 됩니다. 설정 > CSS 축소로 이동하여 CSS 코드 최적화 및 축소 옵션 하나만 활성화합니다.

Fast Velocity Minify 20,000개 이상의 활성 설치 및 별 5개 등급을 보유한 Fast Velocity Miniify는 파일 축소에 사용할 수 있는 가장 인기 있는 옵션 중 하나입니다. 그것을 사용하려면 설치하고 활성화하기만 하면 됩니다.

설정 > 빠른 속도 축소로 이동합니다. 여기에서 개발자를 위한 고급 JavaScript 및 CSS 제외, CDN 옵션 및 서버 정보를 포함하여 플러그인 구성을 위한 여러 옵션을 찾을 수 있습니다. 기본 설정은 대부분의 사이트에서 잘 작동합니다.

플러그인은 캐시되지 않은 첫 번째 요청 동안에만 실시간으로 프런트엔드에서 축소를 수행합니다. 첫 번째 요청이 처리된 후 동일한 CSS 및 JavaScript 세트가 필요한 다른 페이지에 동일한 정적 캐시 파일이 제공됩니다.

3. WordPress 플러그인이 포함된 CSS 축소기

CSS 축소기는 일반적으로 캐싱 플러그인에서 찾을 수 있는 표준 기능입니다.

• WP 로켓,
• W3 총 캐시,
• WP 슈퍼캐시,
• WP 가장 빠른 캐시.

위에서 제시한 솔루션이 CSS 축소기를 수행하는 방법을 알려주고 웹사이트에 적용하는 방법을 이해할 수 있기를 바랍니다. 이전에 이 작업을 수행했다면 웹 사이트를 더 빠르게 만들기 위해 어떤 다른 방법을 사용했습니까? Softmedal의 의견 섹션에서 저희에게 글을 작성하고 콘텐츠를 개선하기 위한 경험과 제안을 공유하는 것을 잊지 마십시오.