이미지, 비디오, SVG에 대한 자동화된 워크플로우를 통한 지능형 미디어 최적화. LCP 이미지(형식/지연 로딩/우선순위 분석 트리거)를 감지하고, 레이아웃 변경 위험(크기 누락)을 식별하고, 지연 로딩 문제(스크롤 위 게으름 또는 스크롤 아래 열성)에 플래그를 지정하는 의사결정 트리가 포함되어 있습니다. 완전한 미디어 감사, LCP 이미지 조사, 비디오 성능(포스터 최적화) 및 SVG 내장 비트맵 감지를 위한 워크플로우를 제공합니다. 핵심 웹 바이탈(LCP/CLS 영향) 및 로딩(우선순위 힌트, 리소스 사전 로딩)과의 교차 기술 통합. 콘텐츠 유형에 따라 성능 예산 및 형식 권장 사항을 제공합니다. 사용자가 이미지 최적화, LCP는 이미지/비디오, 미디어의 레이아웃 변경 또는 미디어 로딩 전략에 대해 물을 때 사용합니다. Chrome DevTools MCP와 호환됩니다.
명령줄에서 webperf-media AI 스킬을 개발 환경에 빠르게 설치
출처: nucliweb/webperf-snippets.
JavaScript snippets for measuring web performance in Chrome DevTools. Execute with mcpchrome-devtoolsevaluatescript, capture output with mcpchrome-devtoolsgetconsolemessage.
| Image Element Audit | Audits all elements on the page against image performance best practices — covering loading st | scripts/Image-Element-Audit.js | | SVG Embedded Bitmap Analysis | Scans all SVG resources on the page — both external files and inline elements — and flags any | scripts/SVG-Embedded-Bitmap-Analysis.js |
| Video Element Audit | Audits all elements on the page against video performance best practices — covering preload | scripts/Video-Element-Audit.js |
이미지, 비디오, SVG에 대한 자동화된 워크플로우를 통한 지능형 미디어 최적화. LCP 이미지(형식/지연 로딩/우선순위 분석 트리거)를 감지하고, 레이아웃 변경 위험(크기 누락)을 식별하고, 지연 로딩 문제(스크롤 위 게으름 또는 스크롤 아래 열성)에 플래그를 지정하는 의사결정 트리가 포함되어 있습니다. 완전한 미디어 감사, LCP 이미지 조사, 비디오 성능(포스터 최적화) 및 SVG 내장 비트맵 감지를 위한 워크플로우를 제공합니다. 핵심 웹 바이탈(LCP/CLS 영향) 및 로딩(우선순위 힌트, 리소스 사전 로딩)과의 교차 기술 통합. 콘텐츠 유형에 따라 성능 예산 및 형식 권장 사항을 제공합니다. 사용자가 이미지 최적화, LCP는 이미지/비디오, 미디어의 레이아웃 변경 또는 미디어 로딩 전략에 대해 물을 때 사용합니다. Chrome DevTools MCP와 호환됩니다. 출처: nucliweb/webperf-snippets.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-media이미지, 비디오, SVG에 대한 자동화된 워크플로우를 통한 지능형 미디어 최적화. LCP 이미지(형식/지연 로딩/우선순위 분석 트리거)를 감지하고, 레이아웃 변경 위험(크기 누락)을 식별하고, 지연 로딩 문제(스크롤 위 게으름 또는 스크롤 아래 열성)에 플래그를 지정하는 의사결정 트리가 포함되어 있습니다. 완전한 미디어 감사, LCP 이미지 조사, 비디오 성능(포스터 최적화) 및 SVG 내장 비트맵 감지를 위한 워크플로우를 제공합니다. 핵심 웹 바이탈(LCP/CLS 영향) 및 로딩(우선순위 힌트, 리소스 사전 로딩)과의 교차 기술 통합. 콘텐츠 유형에 따라 성능 예산 및 형식 권장 사항을 제공합니다. 사용자가 이미지 최적화, LCP는 이미지/비디오, 미디어의 레이아웃 변경 또는 미디어 로딩 전략에 대해 물을 때 사용합니다. Chrome DevTools MCP와 호환됩니다. 출처: nucliweb/webperf-snippets.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-media 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/nucliweb/webperf-snippets