anêmona
PTEN
Lola

Um tema WordPress e um painel de publicação para a Lola\TBWA Brasil.

Fizemos o tema do zero, no desenho do site internacional da Lola, e um painel próprio no lugar do wp-admin.

Cliente
Lola\TBWA Brasil
Escopo
tema WordPress e painel

lolatbwa.com.br

0
bibliotecas de código de terceiro na página inicial, contra 5 presentes no site anterior
85
nota de desempenho no celular, contra 65 alcançado na versão anterior
32 ms
tempo de resposta médio do servidor, contra 226 ms medidos antes da migração
O alto da página inicial de lolatbwa.com.br
voltar ao topo01O problema

Marca, estrutura e segurança

O site carregava o nome e o tema da antiga marca.

Eram duas páginas, a inicial e a de clientes, e nenhum trabalho publicado.

A página inicial carregava cinco bibliotecas de código de terceiros: Bootstrap, Splide, Swiper, Font Awesome e o banner de cookies. Do próprio domínio vinham ainda jQuery e jQuery Migrate.

Ausência dos cabeçalhos de segurança CSP, HSTS e da proteção contra enquadramento.

voltar ao topo02O que fizemos

Um tema do zero e um painel à parte

Reproduzimos, com autorização, o desenho do site internacional da Lola num tema WordPress clássico em PHP, feito do zero.

Um plugin próprio guarda os cadastros e atende o painel.

Painel protegido por login e em endereço isolado do site. Somente a equipe autorizada possui acesso.

Exemplo de página de um trabalho no novo site.
voltar ao topo03Os mecanismos

1 O painel da equipe

Cada página do site é montada por blocos, como abertura, manifesto, clientes, depoimentos, carrossel de notícias e vídeo. A equipe escolhe os blocos, ordena e preenche.

Trabalhos, notícias, prêmios, transparência salarial e clientes têm cadastro próprio, onde se cria, edita, reordena e remove. Logs para rastreabilidade: quem alterou, quando alterou e o que alterou.

A página inicial no painel, com os blocos na ordem do site, com dado fictício.
Acima, lista de trabalhos. Abaixo, cadastro de um novo trabalho.

2 Uma regra única compartilhada entre o painel e o servidor

Blocos são conferidos um a um ao se criar uma página, evitando configurações indevidas que possam quebrar o site.

3 Mídia preparada no navegador

Logo e foto são recortados no próprio painel, com corte vertical 9:16 opcional para celular. O vídeo em laço é preparado antes de subir, e o filme completo entra pelo endereço no Vimeo.

A biblioteca de mídia, com imagens do site no ar.

4 Salvar é publicar

Não há botão de publicar. Ao salvar um trabalho, o site renova automaticamente todas as páginas e os componentes necessários.

voltar ao topo04Desempenho

Métricas: o antes e o agora

página inicial (medianas)antesagora
nota de desempenho6585
Largest Contentful Paint (LCP)9,16 s3,60 s
índice de velocidade6,57 s4,48 s
resposta do servidor226 ms32 ms
peso de terceiros536 KiB0 KiB
voltar ao topo05Tecnologia

Por trás dos panos

site
  • WordPress
  • PHP
painel
  • React
  • TypeScript
vídeo
  • Vimeo
voltar ao topo06O resultado