Manofmany.com é uma revista de estilo australiana dedicada aos homens.
Todos os dias a equipe posta coisas legais em estilo, gadgets, tecnologia, etc.
Depois de conversar com eles no Google+, entregamos a eles este relatório simples de otimização.
Tempo de carregamento
Ferramentas diferentes mostram dados diferentes:
- Barra de ferramentas Chrome SEO – 7,43 seg.
- Ferramentas Pingdom – 12.62 dezembro
- GTMetrix – 9,86 seg.
- Webpagetest.org – 24,14 segundos
Tamanho da página
Ferramentas diferentes mostram dados diferentes:
- YLento: 3.096,5 bytes
- Ferramentas Pingdom: 4,0 MB
- GTMetrix: 3,88 MB
- Webpagetesst.org: 3,816 KB
Vou usar apenas mais uma ferramenta, YSlow.
Componentes
Muitas solicitações http: 51. 51 não é muito grande, mas pode ser melhorado.
JavaScript
Existem 15 arquivos js, tamanho total 627,1K:
- https://apis.google.com/js/plusone.js – 22,9 mil
- http://platform.twitter.com/widgets.js – 80,7 mil
- http://www.google-analytics.com/ga.js – 37,3 mil
- http://edge.quantserve.com/quant.js – 5,8 mil
- http://manofmany.com/wp-content/themes/clearly/library/js/modernizr.full.min.js – 13,6 mil
- http://manofmany.com/wp-content/themes/clearly/library/js/jquery.fitvids.js?… – 2,7 mil
- http://manofmany.com/wp-content/themes/clearly/library/js/scripts.js?… – 7,1k
- http://s3.buysellads.com/ac/bsa.js – 16,1 mil
- http://s3.buysellads.com/r/s_74ca33a0013c12e56d70fc5c06b96646.js?… – 2,1k
- http://pagead2.googlesyndication.com/pagead/show_ads.js – 13,9 mil
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?… – 15,1 mil
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?… – 6,9 mil
- https://apis.google.com/…/cb=gapi.loaded_0 – 129,7 mil
- http://manofmany.com/wp-includes/js/jquery/jquery.js?… – 93,6 mil
- http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=363084773773073 – 178,9 mil
JQuery.js pode ser carregado da Biblioteca do Google para melhor velocidade.
O maior problema está nos arquivos JS das redes sociais; eles definitivamente não estão usando o melhor plugin para compartilhamento em mídias sociais. Isso poderia ser feito com um único JS de 38,5 k ou até mesmo sem script.
Isso reduzirá 249,6K e deixará o número JS em 11. É uma melhoria considerável no tamanho da página.
CSS
Existem 12 arquivos CSS com tamanho total de 63,7K.
O tamanho não é muito, mas o número é meio alto.
3 arquivos podem ser combinados em um: o tema estilos.css e os plugins Easy Columns e Contact Form.
O restante são fontes carregadas da Biblioteca do Google, então a questão aqui é: você realmente precisa de 9 fontes?
Normalmente, você deve usar 2 fontes: uma para títulos e outra para corpo de texto.
PT Sans e Open Sans não são tão diferentes, então você pode usar apenas um dos 2.
Lora e PT Serif – igual ao acima, use apenas uma ou apenas Georgia (é uma bela fonte segura para web).
Nixie One – Não o vejo em uso no site.
Para fontes raramente usadas, não faz sentido carregá-las sempre, basta usar fontes do sistema: Georgia, Arial, Courier.
Isso vai melhorar as solicitações de 12 para apenas 3-4. As melhorias de tamanho não são tão grandes, mas fazem sentido.
Imagens
Esse é o maior problema do site com maior impacto na velocidade: 18 imagens, tamanho total de 2597,5 K.
Isso é enorme; eles precisam otimizar as fotos antes de enviá-las.
A maior imagem do site tem 420K e um simples smush.it mostra que pode ser melhorada em 27,6%, são 104K ali mesmo.
Se conseguirmos melhorar tudo em 25%, isso significa mais de 600 mil de perda de peso.
Soluções:
1. Otimizando imagens
Use o Photoshop e salve para a web em 60% e com verificação progressiva. Se seus visitantes usam Chrome, Firefox ou IE9, os jpgs progressivos carregam super rápido. De resto, será um pouco mais lento que os jpgs normais.
Caso contrário, basta salvar para a web em 60% -80% e verificar otimizada. Isso salva jpgs normais.
Depois disso, prossiga com o upload das imagens para o WordPress.
Sem Photoshop?
Use jpegmini.com para otimizar as imagens antes do upload ou apenas use um plugin WP para fazer isso automaticamente no upload.
2. Servindo imagens
Sirva conteúdo estático de um domínio sem cookies e paralelize downloads entre nomes de host.
Essas duas coisas podem ser alcançadas carregando imagens de um subdomínio sem cookies, algo como images.manofmany.com.
Agora, o navegador pode baixar vários itens de uma vez, melhorando a velocidade do site.
Carregamento lento
Isso significa que as imagens serão carregadas uma por uma e ficarão visíveis para os usuários somente quando necessário.
Eles são carregados quando estão visíveis apenas na janela de visualização do navegador.
Ao carregar apenas imagens acima da dobra, o ganho de velocidade é significativo.
Outras coisas que você pode fazer
– cache do navegador
– combinar js (se possível)
– adicionar cabeçalho de expiração
– compactar com gzip
– usar etags
– Criação de perfil de plug-ins para ver o que afeta o tempo de carregamento e substituir por plug-ins melhores
– Use código em funções.php em vez de plug-ins para coisas simples como carregando Google Fonts
– resolva erros 404
– minimize redirecionamentos
– carregue javascript na parte inferior da página
– você pode usar apenas 5 postagens por página em vez de 10
– você pode usar imagens menores como miniaturas, mas isso significa interferindo no design
Conclusão
A maior parte são apenas coisas simples que podem causar um grande impacto.
Para uma otimização mais avançada, devemos olhar o tema e os plugins e verificar se há problemas de desempenho.
Deixe uma resposta