중요한 CSS 생성기
고급 핵심 CSS 생성기 및 스크롤 없이 볼 수 있는 최적화 도구를 위한 무료 브라우저 위젯입니다.
스크롤 없이 볼 수 있는 옵티마이저
소개
Critical CSS 생성기를 사용하면 Google의 핵심 웹 바이탈 문제를 해결할 수 있으며 순전히 최소 CSS를 기준으로 미사용 CSS 페널티를 제거합니다 . 이를 통해 픽셀 완벽한 결과를 얻을 수 있습니다.
가장 중요한 CSS 결과는 실제 브라우저에서 달성됩니다.
브라우저 위젯은 중요한 CSS가 추출되는 페이지에서 실행되므로 원래 CSS 환경에 대한 전체 기본 액세스 권한이 있습니다.
중요한 CSS를 추출할 스타일시트 또는 인라인 스타일시트 요소를 선택할 수 있습니다. 이는 페이지 간에 공유할 수 있는 중요한 CSS를 만드는 데 편리합니다.
브라우저 위젯에는 스타일시트에서 중요한 CSS를 제거하는 기능도 있습니다.
이 도구는 스파이가 없습니다. Google 애널리틱스 또는 추적이 없습니다. 안전하게 사용할 수 있으며 Service Worker 캐시를 통해 로컬에서 사용할 수 있습니다.
브라우저 위젯은 Google Cloud의 Chrome 브라우저를 통해 사용할 수 있는 고급 핵심 CSS 소프트웨어의 예를 제공합니다. 자세한 내용은 전문 최적화 플러그인을 참조하세요.
설치하다
위젯을 설치하려면
하거나 아래 코드를 복사하여 붙여넣으세요.x.pagespeed.pro
에 대한 Service Worker 및 Cache-API를 승인하여 여러 도메인에서 설정을 유지하고 오프라인 또는 localhost
에서 위젯을 사용합니다.특징
고급 중요 CSS 생성기
- 최고의 CSS 파서 중 하나인 PostCSS를 기반으로 맞춤 개발되었습니다.
- 반응형 핵심 CSS 를 위한 다중 뷰포트(데스크톱 + 모바일)를 지원합니다.
- 클릭, 마우스 이벤트(호버, 이동 등), 스크롤, 사용자 지정 자바스크립트 코드 실행 등을 포함한 브라우저 컨트롤과 같은 꼭두각시 인형.
- 원시 최적화되지 않은 순수 중요 CSS 출력.
스크롤 없이 볼 수 있는 옵티마이저
- 중요한 CSS를 원본 CSS와 비교하십시오.
- 사용자 정의 가능한 픽셀 측정 눈금자.
고급 최적화 도구
- 스타일시트에서 중요한 CSS를 제거하기 위해 사용하지 않은 CSS 제거기.
- 전문 CSS 압축(축소) 및 최적화 소프트웨어.
- 손상된 CSS 복구. 잘못된 CSS를 수정하는 도구입니다.
- 자동접두사. CSS에 브라우저 접두사를 적용하는 도구입니다.
- CSS 통계 및 분석.
- CSS 미화.
- 고급 CSS 린트.
- 중복 CSS 제거기.
- 최적화 팁과 함께 CSS lint에 연결된 고급 CSS 편집기.
사용하는 방법
1단계: 페이지에서 브라우저 위젯 시작
중요한 CSS를 추출하려는 페이지로 이동하고 브라우저 위젯을 시작하십시오. 설치 지침을 보려면 여기를 클릭하세요 .
2단계: 중요한 CSS 생성
중요한 CSS 생성기는 헤더의 도구 탭을 통해 액세스할 수 있습니다.
설명서 의 옵션을 사용하여 JSON을 구성합니다.
3단계: 결과 최적화
중요한 CSS 생성기의 출력은 원시이며 압축과 같은 추가 최적화가 필요합니다.
편집기 메뉴의 최적화 버튼을 사용하면 고급 코드 최적화 및 압축을 적용할 수 있습니다.
선적 서류 비치
중요한 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
현재 UI 상태에서 중요한 CSS 생성기를 실행합니다. 스크롤 없이 볼 수 있는 새 CSS 코드를 검색하려면 UI 상태가 변경될 때마다 이 작업을 반복해야 합니다.
{
"run": true
}
wait
다음 작업을 계속하기 전에 몇 밀리초 동안 기다리십시오.
{
"wait": 1000
}
viewport
뷰포트 크기를 설정합니다.
{
"viewport": "1300x900"
}
scroll
뷰포트를 스크롤합니다. 이 옵션은 숫자 값(위에서 픽셀), 백분율 문자열( 50%
) 또는 [x,y]
위치가 픽셀인 배열을 허용합니다.
{
"scroll": 400
}
event
선택적 DOM 선택기에서 브라우저 이벤트( new Event()
)를 트리거합니다.
{
"event": "click",
"selector": "a.link"
}
mouseevent
선택적 DOM 선택기에서 마우스 이벤트( new MouseEvent()
)를 트리거합니다. 이 작업은 x,y 좌표를 설정하는 기능이 포함된 MouseEvent 옵션 과 함께 mouseEventInit
매개변수를 허용합니다. mouseEventInit
생략된 경우 기본 옵션은 {"bubbles": true,"cancelable": true}
입니다.
{
"mouseevent": "mouseover",
"selector": "a.link",
"mouseEventInit": {
"bubbles": true,
"cancelable": true
}
}
script
자바스크립트 코드를 평가합니다. 이 작업을 통해 UI 상태를 추가로 변경하기 전에 팝업을 닫는 등 페이지에서 자바스크립트 코드를 실행할 수 있습니다.
{
"script": "Popups.close();"
}
fn
자바스크립트 함수를 실행합니다. 이 작업을 통해 미리 구성된 자바스크립트 기능을 실행할 수 있습니다. 추가 옵션 "promise":true
하면 약속을 예상하고 다음 작업을 계속하기 전에 약속이 해결될 때까지 기다릴 수 있습니다.
{
"fn": "action_to_perform",
"promise": true
}
notes
각 작업 개체는 설명 텍스트를 추가하는 데 사용할 수 있는 notes
매개 변수를 허용합니다.
{
"script": "add_to_cart();",
"notes": "개인용 UI 작업 설명"
}
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를 추출할 수도 있습니다.
사용하지 않는 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를 제거하거나 추출할 수 있습니다.
중복 CSS 제거기 구성 예
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"strictParser": false
}
두 번째 입력 필드는 스타일시트 색인 번호를 허용합니다. 설정 탭의 스타일시트 개요에서 스타일시트 색인을 찾을 수 있습니다.
새 스타일시트를 만들어 스타일시트를 업로드하거나 외부 URL에서 스타일시트를 비교할 수 있습니다. 그런 다음 URL을 가져오거나 스타일시트를 업로드하고 중복 CSS 제거기에서 새 스타일시트의 색인을 사용할 수 있습니다.
구성이 완료되면 버튼을 눌러 중복 CSS 제거기를 시작합니다. CSS 주석은 축소된 CSS의 기본 통계를 표시합니다.