Como criar landing page para desentupimento de vaso 24h em São Paulo: guia técnico

Você precisa de uma landing page que converta ligações às 3h da manhã, mas o site atual carrega em 6 segundos no celular e o botão de WhatsApp pula o layout inteiro. O cliente não espera — ele liga para o concorrente.

Desenvolver para emergência 24h em São Paulo exige prioridade absoluta em Core Web Vitals, schema local correto e integração nativa com telefone/WhatsApp sem depender de plugins pesados. Cada milissegundo de LCP e cada salto de CLS representam leads perdidos para a concorrência.

Arquitetura de performance para mobile-first

A base técnica determina se a página carrega antes do usuário desistir. Use template hierarchy do WordPress com front-page.php ou page-template-emergencia.php para evitar carregar header.php completo com menus, sidebars e widgets desnecessários. Registre um wp_enqueue_scripts condicional que só carrega CSS/JS do formulário e do click-to-call nesta página.

Critical CSS inline no <head> para hero, formulário e botões de emergência. O restante do CSS vai em arquivo separado com media="print" onload="this.media='all'" pattern. JavaScript: apenas defer para scripts de tracking e WhatsApp Business SDK; nada de jQuery. O formulário usa fetch() nativo para endpoint REST personalizado (/wp-json/emergencia/v1/lead) que grava no CRM e retorna JSON — sem recarregar a página.

Schema.org LocalBusiness + Service para SEO local

O schema é o que coloca seu cliente no mapa do Google para “desentupimento vaso 24h São Paulo” às 2h da madrugada. Implemente via JSON-LD no <head> gerado por função no functions.php:

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Desentupimento Vaso 24h SP",
  "telephone": "+5511999999999",
  "url": "https://exemplo.com/desentupimento-vaso-24h-sp/",
  "areaServed": {
    "@type": "GeoCircle",
    "geoMidpoint": {
      "@type": "GeoCoordinates",
      "latitude": -23.5505,
      "longitude": -46.6333
    },
    "geoRadius": "50000"
  },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
    "opens": "00:00",
    "closes": "23:59"
  }],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Serviços de Desentupimento",
    "itemListElement": [
      {"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Desentupimento de vaso sanitário"}},
      {"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Desentupimento de pia e ralo"}},
      {"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Hidrojateamento 24h"}}
    ]
  }
}

Valide no Rich Results Test e monitore erros no Search Console. Para aprofundar em acessibilidade de formulários de orçamento, veja este guia sobre WCAG em formulários.

Formulário leve, validação nativa e anti-spam sem reCAPTCHA

Plugins de formulário adicionam 150-300KB de CSS/JS. Construa o formulário direto no template com HTML semântico:

<form id="emergencia-form" action="/wp-json/emergencia/v1/lead" method="POST" novalidate>
  <input type="hidden" name="_wpnonce" value="<?php echo wp_create_nonce('emergencia_lead'); ?>">
  <input type="hidden" name="_honeypot" value="" tabindex="-1" autocomplete="off" style="display:none">
  
  <div>
    <label for="nome">Nome *</label>
    <input type="text" id="nome" name="nome" required autocomplete="name" maxlength="80">
  </div>
  
  <div>
    <label for="telefone">WhatsApp/Telefone *</label>
    <input type="tel" id="telefone" name="telefone" required autocomplete="tel" pattern="\(?\d{2}\)?[\s-]?\d{4,5}[\s-]?\d{4}" placeholder="(11) 99999-9999">
  </div>
  
  <div>
    <label for="endereco">Bairro/Região em SP *</label>
    <input type="text" id="endereco" name="endereco" required autocomplete="address-level2" list="bairros-sp" maxlength="100">
    <datalist id="bairros-sp">
      <option value="Centro">
      <option value="Zona Norte">
      <option value="Zona Sul">
      <option value="Zona Leste">
      <option value="Zona Oeste">
    </datalist>
  </div>
  
  <button type="submit" class="btn-emergencia">Chamar técnico agora</button>
  <p class="form-status" aria-live="polite"></p>
</form>

Validação: pattern no telefone, required nativo, maxlength contra injeção. Honeypot invisível (_honeypot) bloqueia bots sem reCAPTCHA. No functions.php, registre o endpoint REST com permission_callback => __return_true (público), valide wp_verify_nonce, sanitize com sanitize_text_field, grave no CRM via wp_remote_post e retorne JSON. O front-end usa fetch() com FormData, mostra loading no botão e feedback na .form-status.

Click-to-call e WhatsApp com tracking GA4 nativo

Dois botões fixos no rodapé mobile (position: fixed; bottom: 0; left: 0; right: 0; z-index: 999) com espaço reservado no main (padding-bottom: 90px) para evitar CLS:

<div class="cta-bar" role="group" aria-label="Contato de emergência">
  <a href="tel:+5511999999999" class="btn-tel" data-gtm-event="click_tel">
    <svg aria-hidden="true"><use xlink:href="#icon-phone"></use></svg> Ligar agora
  </a>
  <a href="https://wa.me/5511999999999?text=Preciso%20de%20desentupimento%20de%20vaso%20urgente%20em%20S%C3%A3o%20Paulo" class="btn-wa" data-gtm-event="click_whatsapp" target="_blank" rel="noopener">
    <svg aria-hidden="true"><use xlink:href="#icon-whatsapp"></use></svg> WhatsApp
  </a>
</div>

Tracking no footer.php ou script inline defer:

// GA4 event tracking para tel: e wa.me
document.querySelectorAll('[data-gtm-event]').forEach(el => {
  el.addEventListener('click', (e) => {
    const eventName = e.currentTarget.dataset.gtmEvent;
    const label = e.currentTarget.href;
    if (typeof gtag === 'function') {
      gtag('event', eventName, {
        event_category: 'emergencia_cta',
        event_label: label,
        value: 1
      });
    }
  });
});

Configure no GA4: Admin > Events > Create event > click_tel e click_whatsapp como conversões. Adicione UTM no link do WhatsApp: utm_source=landing&utm_medium=cta_bar&utm_campaign=vaso_24h_sp. Para estratégias de conversão de leads de desentupimento, consulte este case de analytics no Mandaqui.

Imagens WebP/AVIF, lazy-load nativo e CLS zero

Fotos de “antes/depois” e equipe uniformizada geram confiança, mas não podem pesar. No functions.php, adicione suporte a WebP/AVIF via wp_image_editors filter (EWWW Image Optimizer ou ShortPixel fazem isso automaticamente). No template, use <picture> com srcset:

<picture>
  <source type="image/avif" srcset="hero-hero.avif 1x, hero-hero@2x.avif 2x">
  <source type="image/webp" srcset="hero-hero.webp 1x, hero-hero@2x.webp 2x">
  <img src="hero-hero.jpg" alt="Técnico uniformizado desentupindo vaso sanitário com equipamento profissional" width="1200" height="600" loading="eager" fetchpriority="high" class="hero-img">
</picture>

width/height explícitos + aspect-ratio: 2/1 no CSS reservam espaço — CLS zero. loading="eager" fetchpriority="high" só no hero (LCP candidate). Demais imagens: loading="lazy". Comprima lossless para AVIF/WebP; JPEG só como fallback. Teste no DevTools > Performance > LCP element.

Cache, Service Worker e hospedagem otimizada

Hospedagem compartilhada não entrega TTFB < 200ms. Use VPS/Cloud (Vultr, DigitalOcean, Hetzner) com Nginx + PHP-FPM 8.3 + Redis Object Cache. No Nginx:

location ~* \.(?:css|js|jpg|jpeg|png|gif|webp|avif|woff2|ico)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
  access_log off;
}

location / {
  try_files $uri $uri/ /index.php?$args;
  add_header Cache-Control "no-cache, must-revalidate";
}

Service Worker (sw.js) para cache offline dos assets críticos:

const CACHE = 'emergencia-v1';
const ASSETS = [
  '/',
  '/wp-content/themes/tema/assets/css/critical.css',
  '/wp-content/themes/tema/assets/js/tracking.js',
  '/wp-content/uploads/hero-hero.webp',
  '/wp-content/uploads/hero-hero.avif'
];

self.addEventListener('install', e => {
  e.waitUntil(caches.open(CACHE).then(c => c.addAll(ASSETS)));
});

self.addEventListener('fetch', e => {
  e.respondWith(caches.match(e.request).then(r => r || fetch(e.request)));
});

Registre no functions.php via wp_enqueue_script com in_footer true. Teste no Lighthouse: Performance > 95, Accessibility > 95, Best Practices > 95, SEO > 95.

Integração com CRM e automação de plantão

O lead não pode esperar e-mail. O endpoint REST (/wp-json/emergencia/v1/lead) deve:

1. Validar nonce e honeypot
2. Sanitizar dados
3. wp_remote_post para webhook do CRM (Kommo, Pipedrive, HubSpot) com timeout 3s
4. Se falhar, gravar em tabela custom wp_emergencia_leads como fallback
5. Retornar {success: true, lead_id: 123} ou {success: false, error: "..."}

No CRM, configure automação: novo lead > criar tarefa “Ligar em 2 min” para técnico de plantão > enviar WhatsApp template aprovado pela Meta. Para gestão de histórico de manutenções, veja este exemplo de área do cliente em Moema.

Checklist final antes de publicar

Publique em pasta dedicada (/desentupimento-vaso-24h-sp/) com sitemap.xml atualizado via wp_sitemaps_add_provider. Submeta no Search Console. Monitore impressões/cliques para “desentupimento vaso 24h São Paulo” nas primeiras 72h.

Uma landing page de emergência bem construída não é “bonita” — ela carrega instantâneo, valida sozinha, rastreia cada clique e entrega o lead no CRM antes do cliente fechar a aba. O código acima é base testada em produção para desentupidoras na capital. Ajuste cores, copy e áreas atendidas, mas não comprometa os Core Web Vitals nem o schema local. Seu cliente planta o site; você garante que o telefone toque.

Checklist prático

Perguntas frequentes

Quem cuida de prédios na região metropolitana de São Paulo costuma guardar desentupimento de vaso Grande São Paulo na agenda de emergências hidráulicas.