Site: Instituto Ingo Hoffman

Site responsive Instituto Ingo Hoffman

Em 2005, Ingo Hoffman, um dos grandes ídolos do automobilismo nacional fundou um instituto com intuito com a missão de oferecer mais conforto e qualidade de vida às crianças em tratamento do câncer e suas respectivas famílias.

No inicio de 2015, o site do Instituto Ingo Hoffman sofreu um ataque de um hacker que tirou o site do ar e a pagou todas as notícias do banco de dados de forma que não foi possível recuperar o conteúdo, por esse motivo a Kogut eBusiness iniciou o projeto de um novo site de forma filantrópica.

O site foi desenvolvido em C#.Net utilizando bootstrap e como CMS próprio, o meu objetivo foi reduzir o tempo de carregamento, realizar melhorias para que o site seja melhor indexado em sites de busca, criar novas animações com CSS3, corrigir erros apontados pelo W3C e melhorar a navegação em dispositivos móveis.

Melhorias no carregamento

Uma página pesada trás uma série de problemas como perda de posicionamento nos sites de busca, aumento da taxa de rejeição, travamentos no navegador e aumento do tempo de carregamento.

O grande desafio desse projeto foi melhorar o carregamento do site sem remover recursos e animações criados pela equipe designer. No final do trabalho o peso do site e tempo de carregamento foram reduzidos drasticamente, como mostra a tabela a seguir:

Peso da páginaRequisiçõesPage Speed
Versão inicial3.7 MB8082
Versão final1.7 MB3993

Fonte: Pingdom

Confira a seguir os comparativos feitos pelo site WebPagetest:

Tempos de carregamento
Tempos de carregamento
Total de requisições
Total de requisições
Total de bytes baixados
Total de bytes baixados

Apesar dessa redução, os resultados nos testes só não foram melhores por limitação do servidor que não permite compactação Gzip e outros recursos.

A seguir irei explicar algumas técnicas utilizadas para essa redução.

Imagens

Normalmente as imagens são responsáveis por aumentar significativamente o peso de um site, em muitos casos isso ocorre pela maneira que foram salvas, porém isso é simples de resolver, o recurso “salvar para web” do Photoshop pode reduzir muito o tamanho, outra questão que pode influenciar é o formato que o arquivo foi salvo, quando uma imagem possuí poucas variações de cores, o PNG pode ser o formato mais leve, porém de uma foto for salva em PNG, seu peso aumentará muito, nesse caso as fotos só devem utilizar o formato PNG se for necessário a utilização de transparência.

Poucos usuários costumam rolar a página até o seu fim, mas ao acessar uma página o navegador baixa todas as imagens disponíveis para aquele conteúdo e isso pode ser muito ruim principalmente em dispositivos móveis, para contornar esse problema utilizei o plug-in Lazy Load que carrega a imagem apenas quando ela está visível.

Quando criamos um banner do tipo full width, precisamos utilizar imagens de alta resolução para que sejam compatíveis com vários dispositivos, quanto maior a imagem, maior o seu peso e me dispositivos móveis isso um aumento do trafego de dados desnecessário, pois esses não conseguiram exibir essas imagens em altas resoluções.

Para contornar esse problema, criei uma técnica para que sejam baixadas apenas imagens do tamanho da resolução do dispositivo, para isso ao carregar a página, uma função em jQuery verifica a largura da resolução do dispositivo e a altura do box que será exibido e passa essas informações por parâmetros para uma função do C# que recorta a imagem para essas dimensões.

Um exemplo da melhoria que isso pode causar, é essa imagem, o tamanho original é de 226kb, a versão adaptada para a tela de um iPhone 5 foi reduzida para 42kb.

Compactação, Minificação e Cache

Quando escrevemos um código em CSS, JavaScript ou HTML cada caractere inserido aumenta em um byte o tamanho do arquivo e muitos desses não são necessários para que o navegador monte a página da maneira correta. Por meio do uso do recurso Bundles do ASP.NET MVC 4, foi realizada a minificação que remove espaços em branco, comentários e renomeia variáveis para nomes mais curtos, isso gera um código mais leve, porém mais difícil para ser lido por humanos, mas isso só ocorre em tempo de execução, ou seja, os arquivos originais continuam existindo para que o desenvolvedor possa editar com facilidade, além disso, esse recurso também permite a junção do CSS e JavaScripts, que reduz muito as requisições

Uma função para compactação desenvolvida pelo meu colega Inacio Azevedo, o mesmo processo ocorre também no HTML da página, removendo comentários e espaços em branco.

Por utilizar um CMS, cada vez que vez que um usuário acessa o site, o servidor realiza conexões para montar os menus, conteúdo da página, entre outros recursos, para evitar isso foi configurado um cache de 60 minutos, durante esse tempo a página em HTML fica armazenada no servidor eliminando assim a necessidade de novas conexões durante esse período o que gera um carregamento mais rápido.

Carregamento assíncrono

Uma das boas praticas para um carregamento mais rápido de um site analisadas pelo YSlow é inserir as chamadas de JavaScripts um pouco antes da tag , em muitos casos esses arquivos contém funções para validação de formulários ou alguns efeitos que não essenciais para a visualização do site, por esse é recomendado que eles fiquem no final do código para que o navegador baixe primeiro as imagens, CSS e outros arquivos mais importantes, há alguns casos, com o jQuery Mobile que utilizar essa técnica pode comprometer o carregamento do conteúdo.

Utilizar chamadas de JavaScripts de sites de terceiros pode aumentar significativamente o tempo de carregamento do conteúdo, nesse site são utilizados dois desses recursos, o Google Tradutor para traduzir o conteúdo e  AddThis, botões de compartilhamento em redes sociais, ambos não são vitais para exibição do site, porém atrasam o carregamento da página, pois necessitam baixar outros scripts e CSS.

O async é um recurso que surgiu no HTML5, ao inserir em uma chamada de JavaScript, ele informa para o navegador que o download deve ser feito de forma assíncrona, enquanto acontece o processo de renderização da página. O script será executado só depois que o download dele tiver terminado.

SEO

Com objetivo de melhorar a indexação do site nos buscadores, foi realizado um trabalho de SEO básico visando os seguintes objetivos:

  • Títulos e descrições: cada página do site conta com títulos e descrições únicas;
  • Melhorias nas páginas para compartilhamento em redes sociais: foram inseridas metatags do Open Graph protocol para que quando algum link for compartilhado no Facebook seja exibida uma imagem padrão e com título e descrições mais limpas, sem as palavras-chaves de SEO atraindo assim atenção do usuário;
  • Criação de sitemap dinâmico com todas as URLs do site: com o objetivo de ser encontrado facilmente por qualquer buscador, o sitemap foi inserido na raiz do site (http://www.ingohoffmann.org.br/sitemap.xml) e também no robots.txt;
  • Correção e monitoramento de problemas internos: por meio da ferramenta Screaming Frog SEO Spider Tool, todas as páginas do site forma verificadas para correção de links internos e externos quebrados, redirects desnecessários, entre outros problemas;
  • Uso de Rich Snippets: alguns esquemas para dados estruturados do Schema.org foram utilizados para melhor compreensão do site para os buscadores;
  • Cadastro nos principais sites de busca: além do cadastro nos buscadores, o site foi inserido no Google Search Console e no Bing Webmasters;
  • Planejamento de migração: foram adicionados redirects 301 das URLs antigas para as novas para manter a relevância, como nesse exemplo: http://www.ingohoffmann.org.br/quem_somos_familias.php

Recuperação do conteúdo

Como mencionado no início do texto, as notícias publicadas no site foram deletadas por causa da invasão e o cliente não haviam cópias de segurança, porém graças ao site “Internet Archive” que foi fundado para construir uma biblioteca Internet que reúne vários snapshot que permitem navegar em vários sites e navegar pelo site em algumas datas especificas, graças as essa função, acessei a última versão do site antes das invasões e naveguei por cada notícia que estava acessível e cadastrei no novo site, com isso conseguimos recuperar a maioria do conteúdo perdido.

Web Analytics

Um grande avanço nesse novo site foi a instalação do Google Analytics e a criação de metas de conversão que além de mensurar as conversões por meio dos formulários, também foram adicionados acompanhamento de eventos em links do PayPal para verificar quantos cliques nos links foram realizados.

Conclusão

Por se tratar de uma ONG e o trabalho realizado ter o objetivo filantrópico, não foram aplicadas muitas estratégias disponíveis para melhorar as doações ao instituto, mas o novo site representa um grande avanço para instituição, pois agora conta com um site responsivo e leve permitindo assim uma melhor experiência para o usuário e aumentar o número visitantes.

Caso tenha gostado do trabalho do Instituto Ingo Hoffman, faça uma doação ou ajude a divulgar o projeto. 🙂