사이트와 사이트에 게시된 콘텐츠의 로딩 속도를 높이려면 HTML 코드와 CSS(Cascading Style Sheets)를 최적화하는 것이 필요합니다. 일반적으로 최적화 후 시간과 트래픽을 절약하는 것은 속도 변화가 겉으로 눈에 띄지 않더라도 중요합니다.
HTML 코드 최적화
HTML 코드가 사이트의 빠른 로딩을 촉진하려면 다음과 같은 몇 가지 조건을 충족해야 합니다.
- 간단하고 유익하게 작성하세요. 유효성을 확인한 후 봇이 분석하기 쉽도록 오류를 수정해야 합니다. 코드는 페이지의 구조를 명확하게 나타내야 합니다.
- 제목, 색인, 정보 블록 등 페이지의 주요 구성 요소를 쉽고 빠르게 식별할 수 있어야 합니다.
- 코드에서 불필요한 정보를 제거하고 별도의 파일에 저장하면(예: CSS 및 JS 제거 가능) 로딩 속도가 빨라지고 봇 작업도 단순화됩니다.
이러한 조건을 달성함으로써 사이트를 더 빠르고 편리하게 만들 수 있으며 검색 엔진 봇에 의한 색인 생성 효율성을 높일 수 있습니다.
코드 감소 및 CSS 최적화
볼륨을 줄여 사이트 코드를 더 간단하게 만들 수 있습니다. 이렇게 하려면 여러 작업을 수행해야 합니다.
우선, 플래시 기술, 자바스크립트, 프레임, 그림으로 표현되는 텍스트를 피해야 합니다. 가능한 모든 요소는 별도의 외부 파일(예: 위에서 언급한 CSS 및 JS)로 형식을 지정해야 합니다. 특수 플러그인은 코드를 최적화하는 데 도움이 됩니다. 예를 들어, HTML, CSS, JS 코드를 자동으로 최적화하는 Autoptimize 플러그인을 설치할 수 있습니다(해당 상자를 선택한 경우). 사용자가 이해할 수 있고 검색 엔진에서 올바르게 인식할 수 있는 유능하고 편리한 사이트 탐색을 설정하는 것이 필요합니다. 이렇게 하면 사이트 로딩 및 색인 생성 속도, 품질이 향상됩니다.
CSS 최적화는 직접 수행할 수도 있고 특별한 리소스나 프로그램에 맡길 수도 있습니다. 수동 최적화는 노동 집약적이고 시간이 많이 소요되는 프로세스이므로 일부 오류를 놓칠 수 있습니다. 최적화를 위한 프로그램이나 서비스는 단점을 더 잘 제거하지만 사이트에서 작동하는 일부 기능을 방해할 수 있으며, 확인 후에도 콘텐츠가 올바르게 표시되지 않을 수 있으므로 작업을 수정해야 합니다.
CSS 구조를 수동으로 개선하는 몇 가지 방법:
- CSS 파일에 과부하를 주어 로봇의 작동을 어렵게 만드는 추가 공백과 줄 바꿈을 제거합니다.
- 유사한 명령을 여러 번 반복하는 대신 일반화 속성을 작성합니다.
- 댓글에는 간결하고 이해하기 쉬운 설명을 사용하세요.
- 특이한 글꼴은 이미지가 아닌 스타일을 사용하여 작성해야 합니다.
- 사진의 경우 검색 엔진 봇이 콘텐츠를 인식할 수 있도록 대체 및 제목(이미지마다 다름)을 만듭니다.
- 제목 등에 H1 도구를 적용하여 색인 생성 중에 올바르게 인식되도록 합니다.
- 페이지에서 사용되는 키워드만 키워드에 포함하고 해당 키워드의 수를 최소화합니다.
- 다양하고 간결한 메타태그를 사용하세요.
CSS 및 HTML 최적화 도구
다음과 같은 특수 서비스를 사용하여 브라우저에서 직접 편리하고 빠르게 최적화할 수 있습니다.
- CleanCSS.com;
- CSS 최적화;
- CSS 압축기;
- CY-PR.com;
- 자동 최적화 플러그인.
SEO 및 IT 전문가는 압축 수준을 낮은 수준에서 높은 수준으로 선택하거나 개별 설정을 선택할 수 있는 CleanCSS.com 사용을 권장합니다. 최고 및 최고 수준의 최적화 후에 사이트 코드는 거의 읽을 수 없는 형식을 취하며 변경이 거의 불가능합니다. 따라서 먼저 표준 최적화를 사용해야 합니다. 특정 콘텐츠에 대한 압축 모드를 선택하거나 글꼴, 이미지 압축, 공백 제거 등 개별 매개변수를 최적화할 수 있습니다.
CY-PR.com 리소스에도 CSS 구조를 25~30% 경량화하는 유사한 최적화 도구가 있지만 작업을 수행한 후 코드가 포함된 파일을 생성할 수 있는 방법이 없습니다.
다른 서비스에서는 코드를 상당히 근본적으로 변경하여 사이트의 일부 기능이 작동을 멈출 수 있습니다. 따라서 도움을 받으면 특정 사이트 매개변수만 로컬로 변경하는 것이 좋습니다.
최적화 후에는 사이트의 기능, 디자인의 올바른 표시 및 로딩 속도를 확인해야 합니다. 사이트의 페이지와 사용자 옵션이 3~5초 이상 로드되지 않으면 상황은 정상적인 것으로 간주됩니다.
최적화 정도를 확인하고 HTML 코드가 얼마나 효과적으로 작성되었는지 이해하려면 다음과 같은 서비스를 사용할 수 있습니다.
- 최적화.com;
- SEO 체크리스트 포털;
- 방화범 플러그인.
이러한 도구는 HTML 코드의 양을 줄이고 구조를 개선하기 위한 모든 작업이 완료되었는지 확인하는 데 도움이 됩니다. SEO 체크리스트 리소스에서는 최적화를 위해 이미 완료된 사항과 아직 완료되지 않은 사항의 목록을 확인하고, 완료된 사항을 표시할 수 있습니다.
확인
검증 서비스(검증기)를 사용하여 사이트 코드에 오류가 있는지 확인할 수 있습니다. 효과적인 코드 검증은 validator.w3c.org를 사용하여 수행됩니다.
첫 번째 검사에서 시스템에서 5,000개 이상의 오류가 발생하더라도 당황하지 마십시오. 특정 결함을 수정한 후 검사를 다시 실행할 수 있으며 오류가 훨씬 줄어들 것입니다. 왜냐하면 하나의 결함이 다른 결함을 수반하고 수정되면 사라지기 때문입니다.
수정되고 최적화된 코드가 있는 사이트는 오류가 포함된 HTML 코드가 오버로드된 리소스보다 검색 결과에서 높은 순위를 차지할 확률이 더 높습니다.
좋은 오후에요 오랫동안 기술 최적화에 대한 메모가 없었기 때문에 오늘은 CSS 압축.
질문이 즉시 발생합니다. 이것이 왜 필요한가요? 대답은 간단합니다. 스타일 시트를 최적화하면 다운로드되는 코드의 양과 style.css 파일의 무게가 줄어듭니다. 결과적으로 페이지의 무게가 줄어들어 트래픽이 절약되고 사이트 로딩 속도가 향상됩니다.
또한 Google은 인터넷 페이지의 로딩 속도를 검색 결과 중 하나로 인식합니다.
최신 제공업체 채널의 높은 용량과 유비쿼터스 환경에도 불구하고 동의합니다. 무제한 인터넷, 이는 중요한 요소입니다. 따라서 크기뿐만 아니라 크기에도주의를 기울이는 것이 좋습니다.
CSS를 최적화하고 파일 크기를 줄이는 방법
최적화에 접근할 수 있습니다. 다양한 방법으로. 가장 안전한 방법은 스타일 파일을 수동으로 정리하는 것입니다. 논쟁할 수는 있지만 무지한 사람이 악마가 다리를 부러뜨리는 일을 할 수 있기 때문에 여전히 최대 압축을 달성할 수 없습니다.
CSS를 최적화할 때 수행할 수 있는 활동은 무엇입니까?
- 사용하지 않는 선택기를 제거하십시오.
- 사용하지 않는 주석 행을 제거하십시오.
- 스타일 파일의 주석 양을 줄이세요. 공통적인 특성에 따라 요소를 그룹화하고 일반 사용자의 눈에 보이지 않는 설명을 포함하는 것은 항상 편리합니다. 그러나 CSS에서 높은 수준의 압축성을 달성하려면 이를 제거해야 하는 경우가 많습니다. 향후 작업 중에 코드를 더 쉽게 탐색할 수 있도록 계속 사용할 수 있지만 그대로 두세요. 간략한 설명.
- 빈 줄과 공백을 제거합니다. 하지만 너무 너무 몰입해서는 안 됩니다. 코드는 쉽게 변경할 수 있도록 읽기 쉬운 상태로 유지되어야 합니다.
- 동일한 속성을 가진 요소를 결합합니다.
- 글꼴을 최적화하세요. 하나의 글꼴을 사용하는 것이 좋습니다. 페이지의 각 개별 블록에 다른 글꼴을 사용하는 것은 잘못된 형식이며, 보시다시피 스타일 파일에 과부하가 걸립니다.
- 색상을 최적화합니다. 이것은 매우 간단하지만 말로 설명하기 어렵기 때문에 명확한 예를 들어 보겠습니다.
물론 다른 최적화 방법을 찾을 수도 있지만 여기서는 여기서 멈추고 온라인 CSS 최적화 도구에 대한 이야기를 계속하겠습니다.
온라인 서비스를 사용하여 CSS 최적화
모두에게 온라인 서비스나무가 부러지지 않도록 특별한 주의와 주의를 기울여 다루어야 합니다. 그리고 백업 복사본을 만드는 것이 필수이지만 이 권장 사항은 편집되는 모든 파일에 적용됩니다.
CSS 최적화를 수행할 수 있는 온라인 도구(CleanCSS, Online CSS Optimizer 등)는 충분합니다. 이들은 서로 크게 다르지 않으며 종종 동일한 알고리즘과 압축 라이브러리(예: YUICompressor 또는 CSSTidy)를 사용합니다.
내가 가장 자주 사용하는 것에 대해 더 자세히 설명하겠습니다. 이것은 웹마스터 CY-PR.com 포털의 CSS 최적화 프로그램입니다.
시작하려면 CSS 조각이나 스타일시트의 전체 내용을 텍스트 필드에 붙여넣어야 합니다. 오른쪽의 드롭다운 목록을 사용하세요. 빠른 설정 :
- 최대(읽을 수 없는 코드, 가장 작은 크기);
- 높음(적당한 가독성, 작은 크기);
- 표준(가독성과 크기 사이의 균형)
- 낮음(읽을 수 있는 코드);
- 자신을 선택하십시오(아래 매개변수를 입력하십시오).
안전한 최적화를 위해서는 표준 압축을 사용하는 것이 좋습니다. 단지 재미를 위해 다른 빠른 설정을 사용하세요. 단, 기억하세요. 백업 복사본. CSS 압축 매개변수가 설정된 후 버튼을 눌러 스크립트 작업을 직접 시작할 수 있습니다. CSS 최적화.
원본 및 최적화된 코드 크기와 압축률(%)을 나타내는 결과가 아래에 표시됩니다.
마지막 추가사항: CSS 파일을 결합해 보세요. 일부 플러그인은 별도의 파일에 저장된 스타일을 사용하므로 하나로 결합하는 것이 좋습니다. 다음번 이 섹션에서는 압축된 CSS를 출력으로 자동으로 얻는 방법을 설명하겠습니다. 곧 봐요!
계속합니다. 이제 Google이 제게 제안한 요점이 하나 더 있습니다. 페이지 상단에서 렌더링 차단 JavaScript 및 CSS를 제거합니다.. 이제 거기에 불필요한 것이 무엇인지, 불필요한 JavaScript 및 CSS를 제거하는 방법을 알아 내려고 노력하겠습니다.
이 서비스로 테스트를 수행한다는 점을 상기시켜 드리겠습니다. 여기서 JavaScript 및 CSS에 관한 구체적인 조언을 받았습니다.
보시다시피 나에겐 이게 있어요 큰 문제, 8개의 스크립트가 한 번에 로드되고 이로 인해 첫 번째 화면이 원하는 만큼 빨리 로드되지 않습니다. 최적화되지 않은 CSS 파일도 10개 있습니다. 자, 문제를 해결해 봅시다!
이 문제에 대한 주장은 다음과 같습니다.
표시를 방해하는 JavaScript 코드를 제거하십시오.
- https://prostolinux.ru/...-includes/js/jquery/jquery.js?ver=1.10.2
- https://prostolinux.ru/...s/jquery/jquery- migration.min.js?ver=1.2.1
- https://prostolinux.ru/...query-ui-1.8.10.custom.min.js?ver=1.8.10
- https://prostolinux.ru/…ial-textboxes/js/wstb.js.php?ver=3.10.60
- https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver=1.6.1
저는 최근에 흥미로운 해결책을 찾았습니다. function.php에 즉시 로드하지 않아야 하는 스크립트를 명령하는 코드를 삽입해야 합니다.
function jquery_in_footer() ( wp_register_script('tie-easing', get_template_directory_uri() . '/js/jquery.tipsy.js', array('jquery')); wp_register_script('tie-easing', get_template_directory_uri() . '/ js/jquery.easing.1.3.js', array('jquery')) ;
예제에서는 두 개의 스크립트가 추가되었지만 원하는 만큼 추가하고 페이지 로딩 속도를 늦추는 스크립트를 추가합니다. 이 솔루션을 적용해 보았는데 제게는 효과가 없었습니다. 제가 뭔가 잘못한 것일까요?
Google 자체에서는 스크립트에 속성을 삽입하도록 권장합니다. 비동기, 이는 로딩을 비동기화하게 됩니다. 하지만 이 솔루션은 외부 스크립트에만 적합합니다. 예를 들어 광고가 첫 번째 화면에 표시되는 경우 이 비동기 속성을 Yandex Direct 광고 스크립트에 삽입할 수 있습니다. Yandex에도 비동기 코드가 있지만 문제가 발생했습니다. 한 블록에는 비동기 로딩이 있고 두 번째 블록에는 그렇지 않은 경우 그 중 하나만 표시됩니다. 하지만 지금은 그게 다가 아닙니다...
이런 방식으로 플러그인을 최적화하는 것은 어렵습니다. 각 플러그인의 코드로 가서 이 속성이나 그 대안을 작성해야 합니다. 나는 프로그래머가 아니며 그렇게 하지 않을 것입니다. 게다가 플러그인을 지속적으로 업데이트하면 업데이트 후 모든 작업이 손실됩니다.
놀랍게도 저는 이 문제에 대한 매우 간단한 또 다른 해결책을 찾았습니다. 즉, 플러그인을 설치했습니다. 비동기 자바스크립트. 설치 후 다음과 같은 결과를 얻었습니다.
보시다시피 스크립트는 하나만 남았으며 이는 플러그인 자체의 스크립트입니다. 설치 후 개인적으로 사이트 테마를 표시하는 데 아무런 문제가 없었지만 어떤 종류의 문제가 있고 즉시 로드할 스크립트가 필요한 경우 플러그인 설정에서 예외에 추가할 수 있습니다.
이것이 첫 번째 요점을 쉽게 해결하는 방법이지만 보시다시피 아직 충분하지 않습니다. CSS를 최적화해야 합니다. 어떻게 해야 할까요?
CSS 성능을 최적화하는 방법은 무엇입니까?
불만 사항 목록을 상기시켜 드리겠습니다.
다음 리소스에서 CSS를 최적화하세요.
- https://prostolinux.ru/...wp-special-textboxes.css.php?ver=3.10.60
- https://prostolinux.ru/...plugins/wp-ds-blog-map/wp-ds-blogmap.css
- https://prostolinux.ru/...t/themes/rockwell_new/rockwell/style.css
이상적으로는 다음을 수행해야 합니다. 이러한 CSS 파일에서 모든 데이터를 가져와 기본 stile.css로 이동하고 플러그인 자체에서 해당 요청을 비활성화합니다. 그러나 아시다시피 이것은 많은 함정이 도사리고 있는 길고 지루한 작업입니다. 어쩌면 미래에는 이 일을 하게 될지도 모르지만 지금은 그렇게 많은 시간과 경험이 없습니다.
모든 스타일을 하나의 파일로 결합하는 플러그인을 설치하면 문제를 해결할 수 있습니다. 이 기능만 수행하는 플러그인을 찾을 수 없어서 모든 작업을 한 번에 수행하고 스크립트를 제거하고 CSS를 최적화하는 플러그인에 대해 알려 드리겠습니다.
모든 것을 한 번에 최적화하는 방법은 무엇입니까?
플러그인을 설치하기로 결정했습니다 자동 최적화, 이는 스크립트와 CSS를 동시에 최적화합니다. 플러그인을 설치한 후 해당 설정으로 이동하여 올바른 위치의 확인란을 선택하기만 하면 됩니다.
그 후 Google Page Speed에는 다음이 표시됩니다.
스크립트는 로드되지 않으며 모든 스타일을 포함하는 두 개의 CSS 파일만 로드되며 모든 스크립트는 바닥글 영역으로 이동됩니다. 이제 페이지의 소스 코드를 보면 최적화된 PORridge가 있는데, 병 없이는 알 수 없습니다.
처음에는 이 플러그인이 내 문제를 완전히 해결하지 못할 것이라고 생각했는데, 알고 보니 플러그인을 완전히 구성하지 않았기 때문이었습니다! 올바른 위치의 상자를 확인한 후 훌륭한 결과를 얻었습니다! 모든 문제가 사라졌습니다! 
그러기 위해서는 상단의 버튼을 눌러야 합니다. 고급 설정 표시그러면 그들은 나타날 것이다 추가 설정. 다음 항목을 선택해야 합니다.
HTML 코드를 최적화하시겠습니까?
JavaScript 코드를 최적화하시겠습니까?
다음에서만 스크립트를 찾으세요. ? (더 이상 사용되지 않음)
CSS 코드를 최적화하시겠습니까?
모든 CSS를 인라인화하시겠습니까?
집계된 스크립트/CSS를 정적 파일로 저장
그 후 위젯을 수정하는 플러그인이 작동을 멈춘 것은 사실이지만 이는 전혀 문제가 되지 않으며 사이트의 로딩 속도가 훨씬 더 중요합니다. 그리고 Google 삼촌을 기쁘게 하는 것이 더 중요합니다...
한 가지 뉘앙스도 언급하고 싶습니다. 이 사이트에 적응형 템플릿이 있는데, 이를 사용하면 표시할 때 플러그인이 표시됩니다. 모바일 버전모든 문제를 완전히 제거할 수는 없습니다. 모바일 버전 플러그인을 활성화하면 오류가 남지 않습니다. 반응형 디자인이 반응형 디자인보다 낫다는 것을 다시 한번 확신했습니다.
또 다른 유사한 플러그인은 WP 축소 수정, 그는 똑같은 일을 하지만 나는 그를 덜 좋아했거나 어쩌면 그를 완전히 이해하지 못했을 수도 있습니다.
나는 플러그인 없이 수동으로 이 모든 작업을 수행하는 것이 이상적이라는 것을 이해합니다. 하지만 이는 매우 길고 지루하며 실제로는 그럴 가치가 없습니다. 평점 100, 귀하의 사이트를 상위권에 올리지 못할 것입니다. 사이트 로딩 속도는 수백 가지 순위 요소 중 하나일 뿐이며 매우 중요한 요소입니다. 하지만 우리는 할 수 있는 모든 것을 해야 합니다!
JavaScript 및 CSS Google PageSpeed 코드 제거
답을 찾지 못하셨나요? 사이트 검색을 이용하세요
웹페이지 최적화는 . 여기에는 사이트의 프로그램 코드 최적화뿐만 아니라 많은 웹마스터가 간과하는 CSS(Cascading Style Sheet) 최적화도 포함됩니다.
코드 최적화와 마찬가지로 페이지 로딩 속도를 높이고 트래픽을 절약하려면 CSS 최적화가 필요합니다. CSS 파일의 무게는 최대 100kb이므로 많은 사람들은 최적화의 중요성을 이해하지 못합니다. 그러나 최적화된 파일이 연간 얼마나 많은 시간과 대역폭을 절약할 수 있는지 계산해 보면 이 파일이 얼마나 과소평가되었는지 깨닫게 될 것입니다.
수동으로 또는 특수 서비스를 사용하여 CSS를 최적화할 수 있습니다. 두 옵션 모두 단점이 있습니다. 테이블을 수동으로 최적화하면 많은 것을 놓칠 수 있으므로 최적화는 기계 최적화만큼 효과적이지 않습니다. 더욱이 CSS에는 수천 줄의 코드가 포함될 수 있으므로 수동 최적화에는 많은 시간이 걸립니다. 그러나 기계 최적화를 통해 중요한 선을 제거할 수 있으며, 이것이 없으면 설계가 올바르게 표시되지 않습니다. 이 기사에서는 CSS를 수동으로 최적화하려는 사람들과 온라인 서비스를 사용하여 이를 수행하려는 사람들에게 유용한 팁을 제공합니다.
먼저 일반 속성을 사용해야 합니다. margin-bottom, margin-left, margin-right 및 margin-top 대신 이전 네 가지 값으로 하나의 여백을 사용하면 몇 줄을 절약할 수 있습니다(예: body( margin: 10px 2px 10px 5px) ;)
공백을 현명하게 사용하세요. 공백과 추가 줄 바꿈은 일반적으로 CSS의 유용성을 향상시키는 데 사용됩니다. 그러나 각 공간은 파일의 무게에 소량을 추가합니다. 따라서 사이트 디자인이 이미 완료되었다면 불필요한 공간을 완전히 없애는 데 방해가 되는 것은 없습니다.
누구도 댓글의 중요성을 의심하지 않습니다. 이를 완전히 제거하면 Firebug 플러그인 없이는 필요한 코드 조각을 찾기가 더 어려워집니다. 그러나 style.css 파일의 내용 중 가장 큰 부분을 차지한다는 사실을 잊지 마십시오. 이러한 오해를 바로잡기 위해 더 짧은 설명을 사용하는 것이 좋습니다. 예를 들어 ///* 긴 서정적 여담 */// 대신 기억에 남는 /* 로고 */를 사용할 수 있습니다.
물론 다른 최적화 방법도 있지만 브라우저에서 직접 CSS를 최적화할 수 있는 특수 리소스를 사용하는 것이 훨씬 쉽습니다.
그 중 가장 대표적인 것이 CleanCSS.com이었습니다. 이 사이트는 낮음, 표준, 높음, 슈퍼 및 사용자 정의 등 여러 가지 압축 옵션을 제공합니다. 표준 압축 옵션은 무게와 가독성 사이에서 가장 균형이 잘 잡혀 있습니다. 높음과 최고는 코드를 완전히 읽을 수 없게 되므로 나중에 CSS를 변경하지 않을 경우에만 사용하는 것이 좋습니다. 또한 색상 및 글꼴 압축, 정렬 선택기 등과 같은 다양한 추가 옵션도 제공합니다. 완성된 결과를 텍스트 형식으로 얻거나 파일로 내보낼 수 있습니다.
러시아 서비스 중에서 CY-PR.com 웹사이트의 CSS 최적화 프로그램은 괜찮은 결과를 보여주었습니다. 그 기능은 CleanCSS와 실질적으로 다르지 않습니다. 표준 설정을 사용하면 압축률은 25%에 도달할 수 있으며 최대 설정은 30% 이상입니다. 안타깝게도 파일로 내보낼 수 없습니다.
다른 서비스는 앞서 언급한 CleanCSS.com 및 CY-PR.com과 동일한 체계에 따라 작동하지만 존재하고 기능적이므로 설명하는 것은 의미가 없습니다.
CSS 코드를 압축해야 하나요?
우선 CSS 코드를 압축해야 하는 이유를 결정해 봅시다. CSS 파일의 크기가 작다면 자랑할 것이 없지만 탄탄한 프로젝트를 개발한다면 이것은 완전히 다른 대화입니다. 그래서 CSS를 압축하는 방법을 배우러 왔습니다. 더 중요한 점은... CSS 압축은 여러 가지 방법으로 구현될 수 있다는 것입니다. 다음은 내가 알고 있는 모든 CSS 압축 방법 목록입니다.
CSS 압축 방법
참고: 정적 압축, 최대 - 80%-90% 압축
참고: 동적 압축, 최대 -75%-95%까지 압축(사용자에 따라 다름)
참고: 정적 압축, 최대 - 50% 압축
마음에 드는 CSS 압축 방법을 선택하고 클릭하거나, 모든 방법을 읽고 자신만의 결론을 도출해 보세요. 이 방법을 적극 권장합니다.
온라인 압축기를 사용하여 CSS 압축
CSS 압축기의 작동을 분석하면 CSS 압축 정도에 대해 다음과 같은 결론을 내릴 수 있습니다. 실험은 다음 매개변수를 사용하는 두 개의 CSS 파일을 기반으로 수행되었습니다.
첫 번째 - 7,372바이트
두 번째 - 62,609바이트
첫 번째 CSS는 짧고 읽기 쉽게 작성되었으므로 압축률이 더 나빠집니다.
온라인 압축기 CleanCSS
주소: www.cleancss.com
매우 견고한 서비스입니다. CSS 압축 결과를 살펴보겠습니다.
결과:
첫 번째 - 7,075바이트(96%)로 압축
두 번째는 52,797바이트(84.3%)로 압축됩니다.
온라인 형식CSS 압축기
주소: www.lonniebest.com/FormatCSS
이 서비스는 CSS 파일을 압축하는 것보다 형식을 지정하는 데 더 적합하도록 설계되었습니다. CSS 텍스트는 복사/붙여넣기를 사용하여 입력됩니다.
결과:
첫 번째 - 8,105바이트(109.9%)로 압축됨
두 번째는 61,715바이트(98.5%)로 압축됩니다.
온라인압축기롭슨 CSS 압축기
주소: iceyboard.no-ip.org/projects/css_compressor
이 서비스는 CSS 소스 코드 로드 측면에서 유연합니다. 로컬 디렉터리, 인터넷 또는 복사/붙여넣기에서 CSS를 로드할 수 있습니다. CSS 파일을 압축한 결과를 살펴보겠습니다.
결과:
첫 번째 - 6,326바이트(86.3%)로 압축됨
두 번째는 48,985바이트(78.2%)로 압축됩니다.
온라인CSSHTML 압축기 Tabifier
주소: tools.arantius.com/tabifier
CSS뿐만 아니라 HTML 코드도 압축할 수 있습니다. 그러나 결과는 그다지 인상적이지 않습니다. 스스로 결론을 내리십시오.
결과:
첫 번째 - 7,876바이트(106.8%)로 압축됨
두 번째는 60,706바이트(96.9%)로 압축됩니다.
PHP를 사용하여 CSS 압축
PHP를 사용한 CSS 압축은 여러 가지 방법으로 사용할 수 있지만 이해하기에 가장 흥미로운 방법 하나만 제공하겠습니다. PHP에서 CSS 압축의 장점은 압축 설정 측면에서 역동성과 유연성이 있다는 점입니다. 자체 PHP 스크립트를 사용하여 직접 설정하기 때문입니다. 내 스크립트는 다음과 같습니다
가장 친숙한 방식으로 연결되어야 하는 CSS 파일에 삽입하는 매우 간단하고 편리한 코드입니다. 이 PHP 스크립트의 특징은 모든 주석과 공백 문자를 제거하여 CSS를 압축하는 정규식을 사용한다는 것입니다.
Base 62 CSS 압축
이 방법은 매우 흥미롭고 효과적이지만 정적입니다. 즉, CSS 파일을 변경할 때마다 CSS 파일을 압축하는 절차를 거쳐야 합니다. 이 절차는 아래에서 단계별로 설명됩니다.
1. 압축압축기를 사용하는 CSS
모든 공백 문자를 제거하고 CSS 코드를 한 줄로 정렬하려면 CSS 압축기 중 하나를 사용해야 합니다.
2. 창조js 파일
js 파일을 만들고 다음 코드를 삽입해야 합니다.
Document.write("");
/*사용자 스타일 */ 대신 압축 절차의 첫 번째 단계에 결과 문자열을 삽입하십시오.
3. 베이스 62 압축
보시다시피 이제 서비스를 사용하여 압축하는 js 파일이 있습니다. 포장 기계http://dean.edwards.name/packer/
js 파일의 코드를 상단 필드에 붙여넣고 확인란을 선택하세요. Base62 인코딩, 그 후에는 아래쪽 필드에 결과가 표시됩니다.
이 방법을 사용하면 15kb에서 8kb 크기의 CSS 파일을 거의 50% 압축할 수 있습니다. 이러한 복잡한 절차의 장점은 결과 코드를 나머지 js 스크립트가 있는 js 파일에 삽입하고 모두 함께 로드된다는 것입니다.
압축에 대한 지식을 모두 펼쳤습니다.CSS. 더 생각나는 부분이 있다면 효과적인 방법압축CSS는 댓글로 달아주세요. 관심을 가져주셔서 감사합니다!
