page-performance（页面性能） Skills下载安装命令和教程

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：page-performance（页面性能）
来源仓库：https://smithery.ai
仓库路径：page-performance
安装命令：
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。当前暂无明确安装命令，请以来源页面说明为准。

简介

page-performance 用于补充前端设计相关能力，适合在 Local Agent 中需要让 Agent 承接前端设计相关任务时使用。

它适用于前端设计类任务，可结合来源仓库和原始 README 核验具体用法。
安装方式未知，需进一步确认。
安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。
适用宿主包括 Local Agent，接入前应确认版本、权限和运行环境要求。

SKILL.md

Page Performance — Skill de Otimização

Overview

Transforma qualquer LP ou página web em uma página com score 90+ no PageSpeed Insights (mobile). Baseada em técnicas validadas empiricamente em dezenas de landing pages reais, com múltiplas iterações e trade-offs documentados.

Resultado esperado: Score 90+ mobile, LCP < 2.5s, CLS < 0.1, FCP < 1.8s.

Quando Usar

Score PageSpeed mobile abaixo de 90
LCP > 2.5s ou CLS > 0.1
Página com imagens pesadas (JPG/PNG sem otimização)
Google Fonts carregando via link externo (render-blocking)
CSS monolítico bloqueando renderização
Antes de lançamento (captação, vendas) — performance impacta conversão
Após adicionar novas seções/imagens a uma LP existente

Workflow de Otimização (6 Etapas em Ordem de Impacto)

Seguir NESTA ORDEM — cada etapa está ranqueada pelo impacto real medido.

Etapa 1: Diagnóstico

Antes de qualquer mudança, medir o estado atual.

PageSpeed Insights (web):

https://pagespeed.web.dev/analysis?url=https://SEU-DOMINIO.com.br

Lighthouse CLI (local, mais controle):

npx lighthouse https://SEU-DOMINIO.com.br --output=json --output-path=./report.json --preset=perf --chrome-flags="--headless"

Métricas a registrar:

Métrica	Meta	O que mede
Performance Score	90+	Score geral
LCP (Largest Contentful Paint)	< 2.5s	Quando o maior elemento renderiza
CLS (Cumulative Layout Shift)	< 0.1	Quanto a página "pula"
FCP (First Contentful Paint)	< 1.8s	Primeiro conteúdo visível
Speed Index	< 3.4s	Velocidade de preenchimento visual
TBT (Total Blocking Time)	< 200ms	Tempo que JS bloqueia interação

Anotar: Score atual, maiores oportunidades listadas pelo PageSpeed, tamanho total da página.

Etapa 2: Imagens (Maior Impacto — ~400KB savings)

Imagens são quase sempre o maior gargalo. Uma foto JPG de 500KB pode virar 45KB WebP.

2.1 Converter para WebP

# Requer: pip install Pillow
from PIL import Image
import os

def optimize_image(input_path, max_width, quality=80):
    """Converte JPG/PNG para WebP otimizado."""
    img = Image.open(input_path)

    # Redimensionar mantendo proporção
    if img.width > max_width:
        ratio = max_width / img.width
        new_height = int(img.height * ratio)
        img = img.resize((max_width, new_height), Image.LANCZOS)

    # Salvar como WebP
    output_path = os.path.splitext(input_path)[0] + '.webp'
    img.save(output_path, 'WebP', quality=quality, method=6)
    return output_path

# Uso — gerar versão desktop + mobile de cada imagem
optimize_image('fotos/foto-hero.JPG', max_width=800)          # Desktop
optimize_image('fotos/foto-hero.JPG', max_width=480)          # Mobile

Dimensões recomendadas:

Hero desktop: max 800px width
Hero mobile: max 480px width
Imagens secundárias: max 600px width
quality=80 é o sweet spot (abaixo disso perde qualidade visível)

2.2 Implementar `<picture>` com srcset

<!-- HERO (above-fold) — fetchpriority="high" + preload -->
<picture>
  <source media="(max-width: 768px)" srcset="fotos/foto-hero-mobile.webp" type="image/webp">
  <source srcset="fotos/foto-hero.webp" type="image/webp">
  <img src="fotos/foto-hero.JPG" alt="Descrição" width="800" height="1200" fetchpriority="high">
</picture>

<!-- BELOW-FOLD — loading="lazy" -->
<picture>
  <source media="(max-width: 768px)" srcset="fotos/foto-about-mobile.webp" type="image/webp">
  <source srcset="fotos/foto-about.webp" type="image/webp">
  <img src="fotos/foto-about.JPG" alt="Descrição" width="900" height="1348" loading="lazy">
</picture>

2.3 Preload da imagem hero

<!-- No <head>, ANTES de qualquer CSS -->
<link rel="preload" as="image" type="image/webp" href="fotos/foto-hero-mobile.webp" media="(max-width: 768px)">
<link rel="preload" as="image" type="image/webp" href="fotos/foto-hero.webp" media="(min-width: 769px)">

Regras de imagem:

fetchpriority="high" — APENAS na imagem hero (above-fold)
loading="lazy" — em TODAS as imagens below-fold
width e height explícitos — SEMPRE (previne CLS)
Fallback JPG no <img src> — compatibilidade com browsers antigos

Etapa 3: CSS Split (Segundo Maior Impacto — ~200KB savings em render-blocking)

CSS monolítico bloqueia renderização. Separar em 3 partes:

3.1 Arquitetura de CSS

<head>
  ├── <style> ... </style>           → Critical CSS inline (~6KB max)
  ├── fonts.css (deferred)            → @font-face declarations
  └── styles-deferred.css (deferred)  → Todo o resto
</head>

3.2 Critical CSS (inline no `<style>`)

Incluir APENAS estilos do above-fold:

CSS Reset mínimo
CSS Variables (:root {--cores, --fontes})
Body, html base
Header/navbar
Hero section completa
CTA buttons
Form de captação (se above-fold)

Meta: ~6KB max inline. Acima de 10KB já prejudica Speed Index.

3.3 CSS Deferred (arquivo externo, non-blocking)

<!-- Non-critical CSS -->
<link rel="stylesheet" href="styles-deferred.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles-deferred.css"></noscript>

O que vai no deferred:

Seções below-fold (sobre, benefícios, FAQ, footer)
Animações e transições
Media queries complexas
Estados hover/focus

3.4 Minificação

O CSS inline no <style> DEVE ser minificado (uma linha, sem espaços extras). Remover comentários, quebras de linha e propriedades duplicadas.

Etapa 4: Fontes (~1.750ms savings em render-blocking)

Google Fonts via <link> externo é render-blocking. Self-host elimina isso.

4.1 Baixar fontes

Acessar Google Fonts API com user-agent de browser moderno para obter woff2
Baixar APENAS subsets latin e latin-ext (suficiente para PT-BR)
Salvar em pasta /fonts/

4.2 Criar fonts.css

Regras críticas:

font-display: optional — NUNCA swap. Optional = zero CLS, browser usa fallback se fonte não carregou a tempo. Swap causa flash visível.
unicode-range — subsetting automático, browser só baixa o que precisa
Formato woff2 apenas — suporte universal em browsers modernos

4.3 Carregar fonts.css (deferred)

<link rel="preload" as="style" href="fonts.css">
<link rel="stylesheet" href="fonts.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="fonts.css"></noscript>

Ordem no <head>:

Preload fonts.css
Preload hero image
Critical CSS inline <style>
Deferred fonts.css (media="print")
Deferred styles.css (media="print")

Etapa 5: Cache Headers (Revisitas — +120KB savings)

Para Vercel, configurar vercel.json:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "X-XSS-Protection", "value": "1; mode=block" }
      ]
    },
    {
      "source": "/fotos/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/fonts/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*).html",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=0, must-revalidate" }
      ]
    }
  ]
}

Lógica (3 níveis de cache):

Imutáveis (imagens, fonts, CSS): immutable, 1yr — nunca mudam sem novo filename
Dinâmicos (config, JS): must-revalidate — muda entre deploys
HTML: must-revalidate — sempre busca versão mais recente
Security headers em tudo

Etapa 6: JavaScript

6.1 Defer em scripts externos

<script src="config.js?v=2" defer></script>

Nunca usar async para scripts que dependem de ordem. defer mantém ordem e não bloqueia parsing.
Usar ?v=N como cache-busting quando o config muda.

6.2 NUNCA inline JS grande no `<head>`

Mover config/inicialização para arquivo externo com defer. JS inline no <head> aumenta o tamanho do HTML, que impacta TUDO no PageSpeed throttled.

6.3 Ordem de Inicialização com `defer` + inline script (CRÍTICO)

Quando há um <script src="config.js" defer> seguido de um <script> inline, o inline executa ANTES do defer. Variáveis definidas no config.js NÃO existem quando o inline roda.

Regra: NUNCA chamar funções que dependem de config.js no top-level do inline script. Sempre dentro de DOMContentLoaded.

<script src="config.js?v=2" defer></script>
<script>
  // 1. Definir funções (não dependem de config.js)
  function initPage() { /* usa LP_CONFIG */ }

  // 2. Registrar via DOMContentLoaded (config.js já terá executado)
  document.addEventListener('DOMContentLoaded', initPage);

  // 3. TODO código que usa variáveis do config → dentro de DOMContentLoaded
  document.addEventListener('DOMContentLoaded', () => {
    // Countdown, form submit, smooth scroll, etc.
  });
</script>

6.4 Facebook Pixel deferred

<!-- Injetar via JS após page load para não bloquear renderização -->
<script>
window.addEventListener('load', () => {
  // Inicializar pixel aqui
});
</script>

Armadilhas Comuns (Gotchas)

`font-display: swap` com `size-adjust` = CLS PIOR

Solução: font-display: optional. Browser usa fallback se fonte não carregou — zero CLS garantido.

Inline de TODO o CSS = Speed Index piora

HTML fica 80KB+. No throttled 4G (1.6 Mbps, 150ms RTT), HTML grande = TUDO mais lento.
Solução: Apenas ~6KB de critical CSS inline. Resto em arquivo deferred.

`immutable` em JS que muda = configs não atualizam

Solução: Arquivos que mudam entre deploys = must-revalidate. immutable APENAS para assets que nunca mudam.

`defer` + inline script = variáveis não existem no top-level

O inline executa ANTES do defer. Se acessar variáveis do config.js no top-level → TypeError → crash silencioso.
Solução: TODO código que depende de config.js dentro de DOMContentLoaded.

Regra de Ouro do PageSpeed

No ambiente throttled do PageSpeed (4G: 1.6 Mbps, 150ms RTT), o tamanho do HTML impacta TODAS as métricas. Cada KB a mais no HTML atrasa FCP, LCP, Speed Index e TBT. Menor HTML = melhor score.

Checklist de Verificação

Imagens

Todas convertidas para WebP (quality=80)
Versões mobile (max 480px) e desktop (max 800px)
<picture> com <source> WebP + fallback JPG
fetchpriority="high" APENAS na hero image
loading="lazy" em TODAS as imagens below-fold
width e height explícitos em TODAS as <img>
Preload da hero image no <head>

CSS

CSS separado: critical inline + deferred externo + fonts
Critical CSS < 6KB (apenas above-fold, minificado)
Deferred CSS via media="print" onload="this.media='all'"
Nenhum transition: all (especificar propriedades)

Fontes

Google Fonts self-hosted (woff2)
font-display: optional (NUNCA swap)
fonts.css carregado como deferred

JavaScript

Scripts externos com defer
Nenhum JS grande inline no <head>
Código que depende de config.js dentro de DOMContentLoaded
Facebook Pixel carregado após window.load

Cache & Deploy

vercel.json com 3 níveis de cache
Security headers configurados
?v=N cache-busting em scripts que mudam

Resultado Final

Score PageSpeed mobile 90+
LCP < 2.5s
CLS < 0.1
FCP < 1.8s
Testar em desktop E mobile

Estrutura de Referência (LP Otimizada)

lp-otimizada/
├── index.html              → HTML com critical CSS inline (~30-35KB)
├── obrigado.html           → Página obrigado (mesmas otimizações)
├── styles-deferred.css     → CSS non-critical (~12KB)
├── fonts.css               → @font-face declarations (~7KB)
├── config.js               → Configuração + pixel + init (defer)
├── fonts/                  → woff2 self-hosted
├── fotos/                  → WebP otimizado (desktop + mobile)
├── favicon.svg             → Ícone SVG (< 1KB)
└── vercel.json             → Cache headers + security + rewrites

Ordem dos elementos no `<head>`

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>...</title>
  <meta name="description" content="...">

  <!-- 1. Preloads (fontes e hero image) -->
  <link rel="preload" as="style" href="fonts.css">
  <link rel="preload" as="image" type="image/webp" href="fotos/hero-mobile.webp" media="(max-width: 768px)">
  <link rel="preload" as="image" type="image/webp" href="fotos/hero.webp" media="(min-width: 769px)">

  <!-- 2. Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- 3. Fonts deferred -->
  <link rel="stylesheet" href="fonts.css" media="print" onload="this.media='all'">
  <noscript><link rel="stylesheet" href="fonts.css"></noscript>

  <!-- 4. Critical CSS inline (APENAS above-fold, ~6KB max) -->
  <style>
    /* Reset + variables + hero + header + CTA + form */
  </style>

  <!-- 5. Non-critical CSS deferred -->
  <link rel="stylesheet" href="styles-deferred.css" media="print" onload="this.media='all'">
  <noscript><link rel="stylesheet" href="styles-deferred.css"></noscript>

  <!-- 6. OG/Twitter meta tags -->
  <meta property="og:title" content="...">
</head>

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Local Agent

88.47%

按下载量换算147

安全审计

暂无安全审计结果可展示。

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

来源页面

smithery.ai

/

SKILL.md 来源

skills.sh

/site/smithery.ai/page-performance

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

page-import（页面导入）

page-import 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

page-structure-design（页面结构设计）

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务，不应只堆装饰元素；涉及真实页面改动时，应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

page-performance（页面性能）