Sponsored by Vmake Labs Video Enhancer - Vmake Labs Video Enhancer는 AI를 활용해 동영상 화질을 개선하고, 디테일을 복원하며, 흐림을 줄이고 최대 8K까지 업스케일링합니다.

AI 광고 라이브러리

Openclaw Skills

WebPerf: 로딩 성능

Openclaw용 WebPerf: 로딩 성능

Chrome DevTools 워크플로우를 사용하여 TTFB 조사, 렌더링 차단 감지 및 스크립트 최적화를 자동화하는 지능형 성능 분석 제품군입니다.

nucliweb

v0.1.0

Mar 11, 2026

설치

정보

Skill.md

설치 및 다운로드

1. ClawHub CLI

레지스트리에서 스킬을 바로 설치하는 가장 빠른 방법입니다.


                  npx clawhub@latest install webperf-loading

2. 수동 설치

스킬 폴더를 다음 위치 중 하나로 복사하세요

글로벌

~/.openclaw/skills/

워크스페이스

<project>/skills/

우선순위: 워크스페이스 > 로컬 > 번들

3. 프롬프트 설치

이 프롬프트를 OpenClaw에 복사하면 자동으로 설치됩니다.


                  Clawhub를 사용해서 webperf-loading 설치를 도와줘. Clawhub가 설치되어 있지 않다면 먼저 설치해 줘 (npm i -g clawhub).

다운로드를 원하시나요?

ZIP 아카이브 형태의 원본 스킬 파일을 받으세요.

WebPerf: 로딩 성능란 무엇인가요?

WebPerf 로딩 성능은 복잡한 웹 성능 병목 현상을 진단하고 해결하기 위해 설계된 전문 기술 툴킷입니다. Openclaw Skills를 활용하여 개발자는 Chrome DevTools 내에서 고급 JavaScript 코드 조각의 실행을 자동화하여 Time to First Byte (TTFB), First Contentful Paint (FCP) 및 리소스 로딩 우선순위와 같은 중요한 지표를 측정할 수 있습니다. 이 스킬은 원시 브라우저 데이터와 실행 가능한 성능 엔지니어링 사이의 간극을 효과적으로 메워줍니다.

이 시스템은 단순한 측정을 넘어 스크립트 실행, 폰트 로딩 전략 및 SSR 하이드레이션(hydration) 비용에 대한 심층 포렌식을 제공합니다. 데이터 기반 성능 최적화 접근 방식을 가능하게 하여 브라우저에 전달되는 모든 바이트가 더 빠르고 응답성이 뛰어난 사용자 경험에 기여하도록 합니다. 이러한 Openclaw Skills를 워크플로우에 통합하면 리소스 힌트 및 로딩 전략의 안티 패턴을 식별하는 일관되고 반복 가능한 감사가 가능합니다.

WebPerf: 로딩 성능 활용 사례

TTFB를 DNS, 연결 및 서버 처리 하위 부분으로 분해하여 느린 서버 응답 시간을 진단합니다.
초기 페이지 렌더링을 지연시키는 렌더링 차단 CSS 및 JavaScript를 식별하고 완화합니다.
폰트 로딩 전략을 감사하여 보이지 않는 텍스트의 깜빡임 (FOIT) 및 레이아웃 이동을 제거합니다.
서드파티 스크립트와 퍼스트파티 애플리케이션 코드의 성능 영향을 분석합니다.
최적의 리소스 검색을 위해 preload, prefetch 및 fetchpriority와 같은 리소스 힌트의 구현을 검증합니다.
Next.js, Nuxt 및 Remix와 같은 현대 프레임워크에서 SSR 하이드레이션 오버헤드를 조사합니다.

WebPerf: 로딩 성능 작동 원리

AI 에이전트가 Chrome DevTools MCP 서버를 사용하여 브라우저 환경에 연결합니다.
고해상도 성능 데이터를 수집하기 위해 evaluate_script 도구를 통해 대상 스크립트를 실행합니다.
에이전트가 콘솔 출력을 모니터링하고 캡처하여 타이밍 메트릭 및 리소스 메타데이터를 추출합니다.
통합된 의사 결정 트리가 결과를 분석합니다. 예를 들어 TTFB가 600ms를 초과하면 시스템이 자동으로 하위 부분 분해 분석을 트리거합니다.
스킬은 발견된 내용을 개발자를 위한 구체적인 개선 단계가 포함된 포괄적인 성능 보고서로 요약합니다.

WebPerf: 로딩 성능 설정 가이드

Openclaw Skills를 통해 이러한 성능 코드 조각을 활용하려면 환경에 Chrome DevTools MCP 서버가 구성되어 있어야 합니다.

# AI 에이전트가 chrome-devtools MCP 서버로 구성되어 있는지 확인하십시오
# 코드 조각은 mcp__chrome-devtools__evaluate_script 명령을 통해 호출됩니다

자동화된 로딩 감사를 시작하려면 에이전트가 성능 스크립트가 포함된 저장소를 가리키도록 하십시오.

WebPerf: 로딩 성능 데이터 스키마 및 분류 체계

카테고리	캡처된 데이터 포인트	주요 스크립트
서버 타이밍	DNS, TCP, SSL 및 요청/응답 타이밍	TTFB-Sub-Parts.js
렌더링	렌더링 차단 리소스, 크리티컬 CSS 상태	Find-render-blocking-resources.js
스크립트	실행 시간, 서드파티 속성, 로딩 패턴	Script-Loading.js
에셋	폰트 사용량, 이미지 지연 로딩 상태, 우선순위 힌트	Fonts-Preloaded-Loaded.js
프레임워크	SSR 하이드레이션 데이터 크기 및 실행 비용	SSR-Hydration-Data-Analysis.js