중요한 CSS 생성기

고급 핵심 CSS 생성기 및 스크롤 없이 볼 수 있는 최적화 도구를 위한 무료 브라우저 위젯입니다.

스크롤 없이 볼 수 있는 옵티마이저

중요한 CSS 생성기 및 접기 이상 최적화 프로그램

소개

Critical CSS 생성기를 사용하면 Google의 핵심 웹 바이탈 문제를 해결할 수 있으며 순전히 최소 CSS를 기준으로 미사용 CSS 페널티를 제거합니다 . 이를 통해 픽셀 완벽한 결과를 얻을 수 있습니다.

가장 중요한 CSS 결과는 실제 브라우저에서 달성됩니다.

브라우저 위젯은 중요한 CSS가 추출되는 페이지에서 실행되므로 원래 CSS 환경에 대한 전체 기본 액세스 권한이 있습니다.

중요한 CSS를 추출할 스타일시트 또는 인라인 스타일시트 요소를 선택할 수 있습니다. 이는 페이지 간에 공유할 수 있는 중요한 CSS를 만드는 데 편리합니다.

브라우저 위젯에는 스타일시트에서 중요한 CSS를 제거하는 기능도 있습니다.

이 도구는 스파이가 없습니다. Google 애널리틱스 또는 추적이 없습니다. 안전하게 사용할 수 있으며 Service Worker 캐시를 통해 로컬에서 사용할 수 있습니다.

브라우저 위젯은 Google Cloud의 Chrome 브라우저를 통해 사용할 수 있는 고급 핵심 CSS 소프트웨어의 예를 제공합니다. 자세한 내용은 전문 최적화 플러그인을 참조하세요.

설치하다

위젯을 설치하려면 이 링크를 드래그🗔 중요한 CSS 하거나 아래 코드를 복사하여 붙여넣으세요.

javascript:(function(r,a,k,l,f,g,b,m){function n(c,b,d){a.open();b&&(r.onmessage=b);d&&a.addEventListener("securitypolicyviolation",d);a.write(c);a.close()}f="https://x.pagespeed.pro/";g="중요한 CSS widget";var c=a.createElement("script");c.src=f+"x.js";c.onerror=function(){function p(d){if(c=d?d.violatedDirective:0){if("script-src"==c||m)return;m=1;b&&l(b)}if(!q){var h=f+"#"+a.location;a.getElementById("e").innerHTML='<h2 style="color:red;">'+g+(c?' blocked by CSP <font color="blue">'+c+"</font>":" failed to load")+'.</h2><h3>Redirecting <a href="'+h+'">'+h+"</a>...</h3>";b=k(function(){a.location.href=h},3E3)}}var q;n("<h2>Loading "+g+" via Service Worker...</h2><iframe src="+f+'go height=50></iframe><p id="e"></p>',function(a){q=1;b&&l(b);n("<script>"+a.data+"\x3c/script>")},p);b=k(p,2E3)};a.head.appendChild(c)})(window,document,setTimeout,clearTimeout);

특징

1. 고급 중요 CSS 생성기

   1. 최고의 CSS 파서 중 하나인 PostCSS를 기반으로 맞춤 개발되었습니다.
   2. 반응형 핵심 CSS 를 위한 다중 뷰포트(데스크톱 + 모바일)를 지원합니다.
   3. 클릭, 마우스 이벤트(호버, 이동 등), 스크롤, 사용자 지정 자바스크립트 코드 실행 등을 포함한 브라우저 컨트롤과 같은 꼭두각시 인형.
   4. 원시 최적화되지 않은 순수 중요 CSS 출력.

2. 스크롤 없이 볼 수 있는 옵티마이저

   1. 중요한 CSS를 원본 CSS와 비교하십시오.
   2. 사용자 정의 가능한 픽셀 측정 눈금자.

3. 고급 최적화 도구

   1. 스타일시트에서 중요한 CSS를 제거하기 위해 사용하지 않은 CSS 제거기.
   2. 전문 CSS 압축(축소) 및 최적화 소프트웨어.
   3. 손상된 CSS 복구. 잘못된 CSS를 수정하는 도구입니다.
   4. 자동접두사. CSS에 브라우저 접두사를 적용하는 도구입니다.
   5. CSS 통계 및 분석.
   6. CSS 미화.
   7. 고급 CSS 린트.
   8. 중복 CSS 제거기.
   9. 최적화 팁과 함께 CSS lint에 연결된 고급 CSS 편집기.

사용하는 방법

1단계: 페이지에서 브라우저 위젯 시작

중요한 CSS를 추출하려는 페이지로 이동하고 브라우저 위젯을 시작하십시오. 설치 지침을 보려면 여기를 클릭하세요 .

2단계: 중요한 CSS 생성

중요한 CSS 생성기는 헤더의 도구 탭을 통해 액세스할 수 있습니다.

설명서 의 옵션을 사용하여 JSON을 구성합니다.

3단계: 결과 최적화

중요한 CSS 생성기의 출력은 원시이며 압축과 같은 추가 최적화가 필요합니다.

편집기 메뉴의 최적화 버튼을 사용하면 고급 코드 최적화 및 압축을 적용할 수 있습니다.

선적 서류 비치

중요한 CSS 생성기

중요한 CSS 생성기는 다음 옵션을 허용합니다.

예시 구성 보기

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [
    "/\#C/",
    "/\.chattxt/"
  ],
  "propertiesToKeep": [],
  "propertiesToRemove": [
    "/(.*)transition(.*)/i",
    "cursor",
    "pointer-events",
    "/(-webkit-)?tap-highlight-color/i",
    "/(.*)user-select/i"
  ],
  "pseudoSelectorsToKeep": [
    "::before",
    "::after",
    "::first-letter",
    "::first-line",
    ":before",
    ":after",
    ":first-letter",
    ":first-line",
    ":visited",
    "/:nth-child.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "maxEmbeddedBase64Length": 1000,
  "strictParser": false,
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "스크롤 없이 볼 수 있는 CSS 검색을 위한 표시 영역을 설정합니다."
    },
    {
      "wait": 1000,
      "notes": "뷰포트가 렌더링되도록 1000ms 동안 기다립니다."
    },
    {
      "run": true,
      "notes": "중요한 CSS 생성기(Above-the-fold CSS 계산)를 실행합니다."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": ".nav-menu DOM 요소에서 새 MouseEvent를 실행합니다."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "스크립트를 실행합니다. 이 경우 다음 뷰포트로 계속 진행하기 전에 메뉴를 닫습니다."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

중요 CSS 생성기의 UI 작업

중요한 CSS 생성기는 Puppeteer와 같은 브라우저 컨트롤을 제공합니다. ui_actions 매개변수는 시간순으로 UI 상태 변경을 정의하는 UI 작업 개체가 있는 배열을 허용합니다.

{
  "run": true
}

{
  "wait": 1000
}

{
  "viewport": "1300x900"
}

{
  "scroll": 400
}

{
  "event": "click",
  "selector": "a.link"
}

{
  "mouseevent": "mouseover",
  "selector": "a.link",
  "mouseEventInit": {
    "bubbles": true,
    "cancelable": true
  }
}

{
  "script": "Popups.close();"
}

{
  "fn": "action_to_perform",
  "promise": true
}

{
  "script": "add_to_cart();",
  "notes": "개인용 UI 작업 설명"
}

예시 구성 보기

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "스크롤 없이 볼 수 있는 CSS 검색을 위한 표시 영역을 설정합니다."
    },
    {
      "wait": 1000,
      "notes": "뷰포트가 렌더링되도록 1000ms 동안 기다립니다."
    },
    {
      "run": true,
      "notes": "중요한 CSS 생성기(Above-the-fold CSS 계산)를 실행합니다."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": ".nav-menu DOM 요소에서 새 MouseEvent를 실행합니다."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "스크립트를 실행합니다. 이 경우 다음 뷰포트로 계속 진행하기 전에 메뉴를 닫습니다."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

사용하지 않는 CSS 제거제

사용하지 않는 CSS 제거기는 중요한 CSS 추출기와 동일한 소프트웨어를 사용하며 UI 작업을 통한 Puppeteer와 같은 브라우저 제어를 포함하여 거의 동일한 구성 옵션을 허용합니다. 이 도구를 사용하면 사용하지 않는 CSS를 추출할 수도 있습니다.

예시 구성 보기

{
  "atRulesToKeep": [
    "charset",
    "keyframes",
    "import",
    "namespace",
    "page"
  ],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "pseudoSelectorsToKeep": [
    "/:.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "strictParser": false,
  "ui_actions": [
    {
      run: true
    }
  ]
}

중복 CSS 제거기

중복 CSS 제거기를 사용하면 두 개의 스타일시트를 비교하고 중복 CSS를 제거하거나 추출할 수 있습니다.

예시 구성 보기

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "strictParser": false
}

두 번째 입력 필드는 스타일시트 색인 번호를 허용합니다. 설정 탭의 스타일시트 개요에서 스타일시트 색인을 찾을 수 있습니다.

스타일시트 색인 개요

새 스타일시트를 만들어 스타일시트를 업로드하거나 외부 URL에서 스타일시트를 비교할 수 있습니다. 그런 다음 URL을 가져오거나 스타일시트를 업로드하고 중복 CSS 제거기에서 새 스타일시트의 색인을 사용할 수 있습니다.

스타일시트 가져오기 또는 업로드

구성이 완료되면 버튼을 눌러 중복 CSS 제거기를 시작합니다. CSS 주석은 축소된 CSS의 기본 통계를 표시합니다.

중복 CSS 제거 결과