Aghiuta.com é um blog de monitoramento de mídia e política escrito por Florin Popescu. Aqui está a otimização do WordPress que fizemos para este blog.
Antes da otimização
A velocidade de carregamento da primeira página foi de 4,3 segundos.
A página inicial possui 86 solicitações e 1,3 MB.
- 14 javascripts – 505,6 mil
- Folha de estilo de 20 sites – 41,1 mil
- 23 arquivos – 601 mil
JS
O Facebook Connect JS tem 174,4K e carrega em 0,69 segundos. O Facebook Like Box pode ser inserido como um widget de texto copiando o código iframe da Facebook Developers Like Box e isso elimina o arquivo JS.
O tema Gonzo inclui um arquivo script.js que possui 101,3K. Inclui vários scripts, como:
- fitvids
- flexslider
- flexibilização de jquery
- guias de tabulação
- alongamento para trás
- caixa de luz bonita
- elastislide
Backstretch é usado para a imagem de fundo grande, mas pelo menos quatro dos outros não são usados: flexslider, prettyphoto, elastislide, tabber tabs.
Fitvids torna a incorporação de vídeo responsiva, então provavelmente é necessária.
jQuery Easing faz algum efeito ao clicar (o slide do formulário de pesquisa).
Além disso, o jQuery Easing (8,1 K) é carregado mais uma vez pelo plugin LayerSlider (26K) que não é usado em nenhum lugar.
Removi os scripts não utilizados e o tamanho do arquivo diminuiu de 101,3K para apenas 29K.
Compartilhando botões de arquivos JS
O plugin que coloca os botões de compartilhamento no site tem um impacto muito grande no tempo de carregamento:
- Mais 1 – 25,8K
- API do Google – 84,2K
- Twitter – 84,5 mil
- Barra Social – 1,8K
Tudo isso pode ser resolvido usando outro plugin ( Jetpack ) que carrega um único arquivo JS de 35K para todos os botões.
jQuery pode ser carregado da Biblioteca do Google em vez de carregá-lo do servidor.
O Addfreestats JS apresenta um erro 404. Recomendamos o uso do Google Analytics.
CSS
Existem muitos arquivos CSS (20), alguns carregados com @import que não é a melhor opção para desempenho.
Combinamos o que era possível (às vezes combinar arquivos js ou css gera erros) e agora temos apenas 7 arquivos CSS.
Imagens
As imagens podem ser melhor otimizadas para a web (mesma qualidade, mas menos KB) e acho que podemos economizar pelo menos 5% de cada imagem.
Na primeira página, as miniaturas têm tamanho de 166x166px, mas as imagens carregadas são maiores, 300x300px.
As imagens devem ser carregadas em 166x166px.
WordPress cria muitas miniaturas:
- 960×677
- 150×105
- 300×211
- 550×387
- 700×426
- 300×300
- 50×50
- 290×166
- 620×310
- 620×350
- 186×186
- 620×220
O site só precisa de:
- 166×166 – miniaturas da primeira página
- 50×50 – miniaturas para barra lateral
- 134×77 – miniaturas de postagens relacionadas
- 290×166 – miniatura para arquivo de categoria
As demais dimensões são inúteis e ocupam espaço no servidor. Podemos excluí-los e eliminar o código desnecessário do tema que diz ao WordPress para fazer esses polegares.
Implementamos o Lazy Load para que apenas as imagens no topo da página (acima da dobra) sejam carregadas, o que proporciona uma grande melhoria na velocidade percebida.
Após a otimização
Depois de remover código desnecessário de arquivos JS, arquivos CSS combinados, configuração correta e implementação de cache de página e cache de banco de dados o site agora faz 48 solicitações e possui 634,5K.
Velocidade de carregamento da primeira página: 1,47 segundos.
Conseguimos uma melhoria de desempenho de cerca de 60%.
Podemos otimizar ainda mais, mas isso significaria remover alguns elementos que fornecem funcionalidades específicas desejadas pelo proprietário, por isso paramos por aqui.
Deixe uma resposta