Case: Cássio Vasconcellos – Fotografia

Resultados da otimização do site de Cássio Vasconcellos
Resultados da otimização do site de Cássio Vasconcellos

Quando o fotógrafo brasileiro Cássio Vasconcellos, um dos mais importantes do Brasil, decidiu renovar seu site, optou por um modelo que valorizasse as imagens de suas séries fotográficas. Ciente da importância de um site rápido para SEO (Search Engine Optimization, otimização para buscadores como o Google), procurou a 2Aces para ajudá-lo.

Site otimizado do fotógrafo Cássio Vasconcellos
Site otimizado do fotógrafo Cássio Vasconcellos

O paciente e os sintomas

Cássio Vasconcellos é um dos fotógrafos mais importantes do Brasil, contando com mais de 190 exposições pelo mundo; 4 livros publicados (e mais 2 em vias de serem lançados), sendo um deles, Noturnos São Paulo, considerado um dos fotolivros latinoamericanos mais importantes.

Um dos raros fotógrafos brasileiros que concilia as inquietações artísticas com uma veia empreendedora, Cássio é também um dos fundadores da galeria Fotospot e criador do banco de imagens Fotografias Aéreas. Esta experiência com negócios digitais lhe permite ter a exata dimensão da importância que um site rápido tem para esforços de SEO (Search Engine Optimization, otimização para buscadores como o Google) e para a experiência dos usuários.

Em seu novo site, foi preciso conciliar dois pontos importantes:

  • por um lado, pela natureza de sua arte, é necessários que seu site apresente um número alto de imagens em dimensões relativamente grandes.
  • do outro lado, suas fotografias fazem sucesso no mundo todo, o que significa uma grande variedade de culturas, dispositivos e velocidades de conexões, incluindo pessoas usando celulares em conexões lentas ou instáveis.

O desafio se apresentava: criar um site que amigável para dispositivos e contextos variados, que valorizasse as fotografias e ao mesmo tempo fosse rápido e leve.

Pessoas de mais de 100 países de diversos idiomas e culturas visitam o site de Cássio Vasconcellos
Pessoas de mais de 100 países de diversos idiomas e culturas visitam o site de Cássio Vasconcellos

O diagnóstico e tratamento

O diagnóstico se apresentou de forma clara:

  • Uso um tema de WordPress claro e responsivo, cujo uso não fosse dependente do visitante saber ler português (especialmente importante para o caso de não acessarem o site em inglês) e as imagens tivesse dimensões razoáveis.
  • O conteúdo deveria carregar de forma seletiva, sempre que possível, para não penalizar um usuário de smartphone em uma conexão lenta e não descaracterizar o site. E mostrar imagens maiores para quem tivesse dispositivos e conexões melhores
  • Visto que o cliente não tem equipe técnica, o site não deveria contar com soluções tecnológicas que exigissem manutenção constante ou fossem complicados.

Optamos por usar como base um tema baseado no framework Genesis, que é arquitetado e programado de forma a não carregar demais o servidor e permitir fácil customização, e que também é otimizado para SEO e para acessibilidade.

Com a parte estética resolvida, nos debruçamos sobre os problemas técnicos: como apresentar tantas imagens de forma rápida e leve em dispositivos e conexões tão diferentes?

A parte de infra-estrutura já estava parcialmente solucionada, pois há mais de um ano migramos o site de Cássio Vasconcellos para a WPEngine, uma hospedagem especializada em WordPress.

Resultados da otimização do site de Cássio Vasconcellos
Resultados da otimização do site de Cássio Vasconcellos

O restante foi solucionado aplicando criatividade e gastando horas, de forma obssessiva, para aperfeiçoar técnicas já conhecidas de otimizações:

  • caching intensivo, mas seletivo, de páginas e recursos estáticos (imagens, scripts, folhas de estilo CSS, etc). Nossa equipe pesquisou e testou diversas configurações para equilibrar tamanhos, números e formatos de arquivos para que tivéssemos o melhor resultado.
  • carregamento assíncrono das fontes, imagens e de estilos.
  • otimização profunda e cuidadosa de imagens, permitindo arquivos leves sem perder qualidade.
  • Aperfeiçoamos uma técnica para carregamento de imagens na home via CSS ao invés de inserí-las no corpo do documento.

Estes três últimos ítens exigiram muitas pesquisas e testes até chegarmos nas melhores ferramentas, algoritmos e configurações, mas foram fundamentais conquistas importantes:

  1. Páginas geradas e apresentadas rapidamente — diminuindo o tempo de resposta inicial (time to first byte) e de renderização inicial (initial render), permitindo ao usuário começar a visualizar o site em um espaço tempo bem curto.
  2. Imagens carregadas em paralelo rapidamente, a fim de manter a experiência fluída.
  3. Imagens carregadas seletivamente conforme o dispositivo do usuário. Desta forma, um usuário de smartphone recebe imagens bem menores e mais leves que usuários em dispositivos maiores, permitindo um site com velocidade razoável mesmo em conexões ruins.

Além disto, aplicamos e criamos diversas outras técnicas que nos permitiram atingir resultados melhores que o esperado tanto no site em português, quanto no site em inglês.


 

 

O resultado do tratamento de otimização

Resultados da otimização do site de Cássio Vasconcellos

Considerando apenas o novo site antes da otimização, a Clínic2a mais que duplicou a velocidade média do novo site, que agora é mobile friendly está super rápido também em tablets e smartphones 3G, mesmo com bastante imagens. Em relação ao lay-out anterior, os ganhos são ainda maiores.

A nova página inicial carrega em metade do tempo original e o Webpagetest.org deu nota A em todos os quesitos. O Speed Index, que mede a percepção geral de velocidade, passou de 3807 para 1278, um ganho de mais de 3X que coloca o site entre os 7% mais rápidos testados pela ferramenta.

Nada mal para um fotógrafo fotógrafo acostumado a voar alto, não?

Solicite a otimização de seu site.

Saiba mais sobre Cássio Vasconcellos

Otimize seu site.