Voltar paraBack to ExperimentosTinkering
O site do meu autor favorito merecia mais que 34.My favorite author's site deserved better than a 34.
Um redesign não oficial do site do Brandon Sanderson, refeito do zero com foco em performance, acessibilidade e navegação.An unofficial redesign of Brandon Sanderson's website, rebuilt from scratch for performance, accessibility and navigation.
ver no arsee it live códigosource code
O incômodo
Sou fã do Brandon Sanderson, e o site dele não fazia jus aos livros. Era um WordPress lento, com imagens de mais de 1 MB em formatos antigos, navegação confusa para achar séries e livros, e sem modo escuro. No Google PageSpeed, a nota era 34 de 100, mesmo no desktop.
Os fãs dele são muito engajados. Um site melhor faria diferença de verdade.
O estalo
Eu tinha lido como a Smashing Magazine migrou do WordPress para o JAMstack, e aquilo ficou na cabeça. Minha aposta era que dava para resolver boa parte disso pela base. Sair do WordPress para uma ferramenta com etapa de build, como o Astro ou o 11ty, e adotar formatos de imagem mais leves e modernos, com srcset servindo uma imagem diferente para cada tamanho de tela. Só isso já faria uma diferença enorme no carregamento e na experiência.
O que fiz
No fim de 2023, refiz o site do zero com o 11ty (Eleventy), um gerador de sites estáticos. Fiquei entre ele e o Astro e escolhi o 11ty para experimentar uma ferramenta nova.
- Imagens em AVIF e WebP, com PNG de reserva e srcset por tamanho de tela: até 90% mais leves, sem perda visível.
- Cache e CDN, sem nenhuma chamada desnecessária.
- Modo escuro que lembra a preferência de quem lê.
- Livros organizados por série e ordem cronológica, com filtros por formato e links entre personagens e universos.
O resultado
- PageSpeed
- 34 → 100
- Carregamento
- ~5 s → <1 s
- Peso das imagens
- −90%
Nota 100 no PageSpeed em todas as categorias: performance, acessibilidade, boas práticas e SEO.
O que aprendi
Performance não é só velocidade. É respeito pelo tempo de quem usa.
O 11ty me deu controle total, mas senti falta do que o Astro faz bem na experiência de desenvolvimento. Não por acaso, este site é em Astro.
The itch
I’m a Brandon Sanderson fan, and his site didn’t do the books justice. It was a slow WordPress site with images over 1 MB in old formats, confusing navigation for finding series and books, and no dark mode. On Google PageSpeed it scored 34 out of 100, even on desktop.
His readers are deeply engaged. A better site would make a real difference.
The insight
I’d read how Smashing Magazine moved from WordPress to the JAMstack, and it stuck with me. My bet was that most of this could be fixed at the foundation. Move off WordPress to a tool with a build step, like Astro or 11ty, and adopt lighter, modern image formats, with srcset serving a different image for each screen size. That alone would make a big difference in load time and experience.
What I did
In late 2023, I rebuilt the site from scratch with 11ty (Eleventy), a static site generator. I was torn between it and Astro, and picked 11ty to try a new tool.
- Images in AVIF and WebP, with a PNG fallback and srcset per screen size: up to 90% lighter, with no visible loss.
- Caching and a CDN, with no unnecessary requests.
- A dark mode that remembers the reader’s preference.
- Books organized by series and chronological order, with format filters and links between characters and worlds.
The result
- PageSpeed
- 34 → 100
- Load time
- ~5 s → <1 s
- Image weight
- −90%
A PageSpeed score of 100 in every category: performance, accessibility, best practices and SEO.
What I learned
Performance isn’t just speed. It’s respect for people’s time.
11ty gave me full control, but I missed what Astro does well for developer experience. Not by chance, this site is built with Astro.