Wide Magazine é uma revista de estilo de vida que apresenta experiências interessantes no centro de Bucareste.
Embora a revista estivesse hospedada em um VPS, a velocidade era lenta. O custo do VPS gerenciado parecia excessivamente alto.
A velocidade de carregamento do site foi de 6,99 segundos, os componentes da página totalizaram 2,5 MB e realizaram 113 solicitações ao servidor.
A página inicial estava carregando:
- 30 arquivos JS – 883,2 K
- 11 arquivos CSS – 138,3 K
- 22 imagens CSS – 255,2 K
- 13 imagens – 1320,7 K
- 1 favicon – 16,9 K
A pontuação do Google PageSpeed Insights foi 57/100, as recomendações foram:
- ativar compactação
- aproveitar o cache do navegador
- otimizar imagens
- reduz o tempo de resposta do servidor
Relatório de otimização
Até o favicon tem muitos KB. Fizemos um teste, baixamos e importamos para favicon.cc onde geramos um novo. Conseguimos um arquivo de 1,6 K (embora de qualidade inferior).
Imagens
As imagens não são otimizadas e também podem ser exibidas gradualmente à medida que os visitantes rolam para acelerar o carregamento do conteúdo acima da dobra (carregamento lento).
Outro problema com a exibição de imagens é que elas são carregadas em seu tamanho original (1024*682px) e o navegador as redimensiona para 676*450px.
Recomenda-se que as imagens sejam carregadas diretamente na resolução 676*450px ou configurando uma miniatura nesse tamanho específico.
Dessa forma o navegador trabalha menos com redimensionamento de imagens + o tamanho da página (KB) diminui. Esses dois fatores levam à melhoria da velocidade de carregamento.
Por exemplo, tiramos uma foto aleatória que tinha 163 KB, redimensionamos para 676*450px e depois
Mesmo deixando em 1024*682px e apenas otimizando-o com JPEGMini obtivemos um arquivo de 90,3K, uma melhoria notável em relação aos 163K iniciais.
Arquivos JS
A próxima coisa que procuramos é o número e o tamanho geral dos arquivos JS – 30 arquivos totalizando 883,2K.
E aqui também encontramos alguns problemas.
O JQuery estava sendo carregado duas vezes – a versão 1.9.1 (92,6K) de code.jquery.com e a versão 1.8.3 (93,6K) carregada da pasta local do WordPress.
O mesmo problema com o código do Google Analytics – uma vez a versão antiga, ga.js (39,8K) e uma vez a nova versão, analytics.js (20,3K).
Isso é um extra de 133,4K.
Existem vários arquivos JS sendo carregados por 2 plugins que essencialmente fazem a mesma coisa, exibindo galerias de fotos: NextGen Gallery e PrettyPhoto Media.
PrettyPhoto Media não parece ser usado, então pode ser removido para salvar cerca de 50K e 2 solicitações.
Plug-ins
2 plug-ins adicionais, jQuery Mega Menu e Useful Banner Manager, podem ser eliminados. O jQuery Mega Menu não parece ser usado em lugar nenhum. O útil Banner Manager é usado para um único banner, que pode ser mostrado por um simples código HTML inserido em um widget de texto.
O plugin ShareThis que adiciona botões de compartilhamento às postagens usa um JS de 125,1K. Ele poderia ser substituído pelo Jetpack que usa um JS de apenas 38,5K.
O Facebook Like Box não é implementado da maneira mais eficiente, usando um JS de 171,9K.
O método mais simples e eficaz é copiar o código iframe da página Facebook Developers Like Box e colá-lo em um widget de texto, eliminando assim a necessidade de JS.
O plugin do Google Maps usa quatro arquivos JS totalizando 60,7K.
Assim como acontece com o Like Box, o Google Maps também pode ser integrado a um iframe.
Verifiquei os últimos 10 posts e nenhum integrou um mapa, então se não for uma funcionalidade padrão e for usado raramente, é mais eficiente inserir manualmente os mapas com iframes nos posts.
O que fizemos
- otimizamos imagens
- definimos carregamento progressivo de imagens no site
- implementamos cache de página + cache de banco de dados
- resolvemos o jQuery duplicado
- resolvemos o JS duplicado do Google Analytics
- resolvemos a caixa de curtidas do Facebook.
O resultado
A página inicial agora tem 62 componentes totalizando 672,6K – em comparação com 113 itens totalizando 2,5 MB = uma melhoria de 73% .
A velocidade média de carregamento é agora de 1,5 segundos – em comparação com 6,99 segundos = melhoria de 78% .
Se você precisa de um site WordPress mais rápido, não hesite em entrar em contato conosco e ver o que podemos fazer para ajudar.
Deixe uma resposta