Quando o Elementor sozinho não resolve: arquitetando catálogos complexos com Crocoblock sem perder a nota A no PageSpeed.

Toda semana recebo em João Pessoa ou de agências parceiras o mesmo cenário: o designer desenhou um catálogo lindo no Figma, com cinco filtros combinados na lateral, busca por código técnico e ordenação dinâmica. Quem tentou implementar jogou tudo dentro de campos personalizados comuns, empilhou doze plugins e entregou uma página que leva sete segundos de tela branca antes de responder ao primeiro clique.

Nos meus estudos de Ciência da Computação na UFPB, uma das primeiras lições de banco de dados relacional foi simples: procurar texto não indexado linha por linha destrói qualquer servidor. No WordPress, a tabela wp_postmeta funciona exatamente assim quando você abusa de META_QUERY para filtrar catálogos.

Como decidir entre Taxonomia e Meta Field no JetEngine?

Sempre que entro no discovery técnico de um e-commerce B2B ou de um catálogo industrial, faço uma pergunta simples para cada campo do produto: o visitante vai usar essa informação para filtrar ou agrupar a lista?

• Se a resposta for sim (ex.: categoria, segmento, voltagem, marca, cidade): esse dado precisa ser uma Taxonomia customizada no JetEngine. As tabelas de taxonomia do WordPress possuem chaves indexadas nativas para cruzamento rápido.
• Se a resposta for um intervalo numérico (ex.: preço, peso, metragem): armazene como campo numérico tipado ou utilize tabelas customizadas (Custom Content Types do JetEngine), onde cada coluna é indexada diretamente no MySQL.
• Se a resposta for não (ex.: manual em PDF, código SKU interno, observação técnica): aí sim o Meta Field tradicional cumpre seu papel sem pesar na consulta principal.

// Regra prática de arquitetura no JetEngine Query Builder:
1. Filtros de seleção múltipla  -> Tax_Query (Tabelas indexadas)
2. Listagem de cards (Grid)     -> Carregar apenas ID, Título, Thumbnail AVIF e Taxonomias visíveis
3. Evitar carregar repetidores (Repeaters) inteiros dentro do loop da vitrine

O que aprendi entregando 50 sites com nota A no Brasil e em Londres

De acordo com as diretrizes oficiais do Google Web.dev para os Core Web Vitals, uma página saudável precisa atingir três métricas no percentil 75 dos usuários reais: LCP (Largest Contentful Paint) abaixo de 2,5 segundos, INP (Interaction to Next Paint) abaixo de 200 milissegundos e CLS (Cumulative Layout Shift) menor que 0,1.

Ao longo de cerca de 50 projetos entregues para empresas brasileiras e para operações na Grande Londres, padronizei quatro decisões que garantem a nota A no PageSpeed e no GTMetrix antes mesmo de ligar qualquer plugin de cache:

1. Fonte variável única e auto-hospedada: em vez de buscar quatro pesos separados no Google Fonts (que exige conexão DNS externa), gero um subset latino em woff2 da fonte variável local (~22 KB) com font-display: swap e fallback calibrado para evitar salto de layout (CLS zero).
2. Herói com prioridade explícita e AVIF: a imagem principal da primeira dobra nunca nasce escondida por animação em JavaScript. Ela recebe fetchpriority="high", dimensões explícitas no HTML e variações em AVIF e WebP servidas por srcset.
3. Decodificação assíncrona (decoding="async"): em testes reais de produção, trocar a decodificação de imagem de síncrona para assíncrona reduziu o Total Blocking Time (TBT) de 390ms para 20ms no mobile.
4. Vetores enxutos no lugar de bibliotecas de ícones: carregar uma fonte inteira de 2.000 ícones para exibir cinco setas atrasa a renderização. Um sprite SVG inline no HTML resolve com zero requisições extras.

SEO Local em João Pessoa/PB e GEO: preparando o site para o Google e para as IAs

Hoje o trabalho técnico de visibilidade tem duas frentes simultâneas. A primeira é o SEO Local tradicional (Google Meu Negócio / Map Pack e resultados orgânicos geolocalizados, como quando um empresário pesquisa por criação de sites ou e-commerce em João Pessoa, Cabedelo ou Paraíba). A segunda é o GEO (Generative Engine Optimization): fazer a sua empresa ser recuperada e citada como fonte confiável nas respostas do ChatGPT, Perplexity e Google AI Overviews.

Para que tanto o buscador quanto os modelos de linguagem entendam quem é a sua empresa, o que ela vende e onde ela atua, três pilares técnicos são indispensáveis no código:

• Grafo de Entidades em JSON-LD (@graph): amarre na mesma estrutura os nós WebSite, Person (ou Organization), ProfessionalService (com a propriedade areaServed listando explicitamente as cidades atendidas e hasOfferCatalog detalhando cada serviço) e FAQPage.
• Consistência de NAP no HTML visível: Nome, Área/Endereço e Telefone clicável (tel:) precisam estar visíveis em texto real na página, batendo exatamente com os dados do Schema e do Perfil da Empresa no Google.
• Portas abertas no robots.txt para crawlers de busca em IA: bloquear bots como OAI-SearchBot, Claude-SearchBot e PerplexityBot impede que sua empresa seja citada quando um comprador pede uma recomendação local para a IA.

Perguntas frequentes sobre Crocoblock, Performance e SEO