Como redesenhei e reprogramei o site de Brandon Sanderson com foco em performance e experiência
Introdução
No final de 2023, decidi embarcar em um projeto pessoal: redesenhar o site do autor Brandon Sanderson, um dos nomes mais conhecidos da literatura de fantasia moderna. A ideia surgiu da minha insatisfação com o site original, que apresentava lentidão, imagens muito pesadas e uma experiência de navegação abaixo do ideal.
Era um site feito em WordPress, com pouco foco em performance. A nota no Google Pagespeed era de apenas 34 em 100, mesmo para desktop. Sabendo o quanto os fãs de Sanderson são engajados, vi uma oportunidade real de criar uma experiência melhor.
Problemas do site original
- Imagens com mais de 1 MB em formatos antigos
- Layout desatualizado e desorganizado
- Ausência de adaptação para dark mode
- Pontuação ruim em performance e acessibilidade
- Estrutura confusa de navegação, dificultando encontrar livros e informações
Esses problemas afetavam diretamente a experiência dos usuários e aumentavam o tempo de carregamento.
Escolhas técnicas
Optei por reconstruir o site do zero usando o 11ty (Eleventy), um gerador de sites estáticos que oferece controle total sobre performance e estrutura de conteúdo.
Por que 11ty?
- Flexibilidade total sem precisar de um front-end JS pesado
- Renderização estática com foco em velocidade
- Integração fácil com pipelines de build e otimização
- Permite escalar conteúdo com estrutura limpa e lógica
Vale comentar que, na época, fiquei entre ir em frente com 11ty e Astro. Acabei selecionando o 11ty pois já mexia com Astro e queria experimentar com outro Static Site Generator. Mas ao longo do desenvolvimento acabei sentindo muita falta de alguns detalhes que o Astro faz muito bem em DX (Developer Experience).
O que foi implementado
Otimização de imagens
Todas as imagens do site foram processadas para gerar versões em múltiplos formatos modernos: AVIF, WEBP e fallback em PNG. Isso permite que o navegador escolha automaticamente o melhor formato e tamanho com base no dispositivo e conexão do usuário.
Resultado: imagens com até 90% menos peso, sem perda perceptível de qualidade.
Cache e CDN
Implementei cache otimizado e distribuição de imagens por CDN, o que reduziu drasticamente o tempo de carregamento. A estrutura do site foi desenhada para ter zero chamadas desnecessárias e assets mínimos.
Modo escuro (Dark Mode)
Adicionei suporte ao modo escuro com persistência da preferência do usuário. Isso melhora a leitura em ambientes com pouca luz e torna a navegação mais confortável.
Arquitetura de navegação
Reestruturei toda a arquitetura do site. Os livros estão organizados por séries e ordem cronológica. Incluí filtros por formato e links cruzados entre personagens e universos. A navegação ficou mais fluida e fácil de entender.
Resultados obtidos
Performance
- Nota de 100/100 no Google Pagespeed em todas as categorias (Performance, Acessibilidade, Boas Práticas e SEO)
- Redução significativa no tempo de carregamento: de cerca de 5s para menos de 1s
Experiência do usuário
- Navegação clara e adaptada para mobile
- Dark mode integrado de forma nativa
- Conteúdo mais fácil de explorar e descobrir
Conclusão
Esse projeto foi uma oportunidade prática de aplicar conceitos de performance, acessibilidade e arquitetura de informação. O 11ty me deu controle total e me forçou a pensar em cada detalhe, desde o tipo de imagem até a estrutura de pastas.
Foi um trabalho intenso que exigiu atenção a muitos pontos diferentes. Projetos como esse mostram que performance não é apenas sobre velocidade. É também sobre respeito ao tempo do usuário e cuidado com cada clique.