Se o seu site se move como uma daquelas preguiças do DMV em Zootopia, existem maneiras de consertar o que está atrasando. Descobrir o que está causando o problema é metade da batalha, então, depois de isolar as causas, você terá pelo menos as respostas para resolver o problema.
Hospedagem de baixa qualidade é o culpado mais provável
Quando se trata de hospedagem na web, o conceito de baixa qualidade nem sempre significa a mesma coisa em outros contextos. Por exemplo, o preço que você paga pela hospedagem nem sempre é um reflexo preciso da qualidade que você pode esperar. Nem é a popularidade do serviço ou quão conhecido é o nome da marca.
Na verdade, algumas das marcas de hospedagem mais populares são as piores escolhas, simplesmente porque muitas pessoas as estão usando. Depende um pouco da qualidade de sua infraestrutura. Se eles estão investindo adequadamente em sua tecnologia, talvez você não tenha problemas significativos de desempenho. Por outro lado, você pode estar compartilhando um único servidor com centenas de outros sites, e esse problema aumentará à medida que a capacidade de armazenamento em disco continuar a crescer.
Então, nessa situação, é possível que a mudança para um serviço de hospedagem na web menor e menos conhecido, com boa tecnologia, possa ser uma escolha melhor. Fazer isso também pode significar que você obtenha atendimento ao cliente mais pessoal, com um nível de qualidade mais alto do que o obtido com um gigante. Vale a pena pensar, e é fácil testar apenas comprando uma assinatura de um mês no novo host e comparando o desempenho com o site existente.
Use sua chave F12
A maioria dos navegadores da Web é ajustada para ter seu console de depuração acessado através da chave F12, e a sua provavelmente não é uma exceção. E falando em exceções, é exatamente isso que você está procurando, ou para ser mais preciso, erros no seu código JavaScript que estão gerando exceções e afetando o desempenho.
Você encontrará esses erros no seu próprio código e em bibliotecas de código importadas, como o jQuery. Só porque o jQuery é grande e popular não significa que ele seja perfeito. Aqui está um exemplo do tipo de coisa que você está procurando:
Os erros marcados em azul são apenas erros de CSS e geralmente você pode esperar ver esses devido à quantidade de shimming que os desenvolvedores precisam fazer ao criar folhas de estilo, simplesmente porque ainda não há um único padrão que tenha sido adotado em todos os navegadores. Eles normalmente não devem afetar o desempenho, a menos que você esteja usando muitas animações ou efeitos de transição.
Mas esse erro sinalizado em laranja é um erro de JavaScript, e não apenas isso, neste caso, é o jackpot porque está nos dizendo especificamente que esse erro em particular fará com que o código seja executado muito lentamente.
Receba alguns conselhos gratuitos do Google
Você sabia que o Google pode analisar sua página da Web gratuitamente e dar dicas sobre como corrigir problemas? Tudo o que você precisa fazer é acessar a página do Google Page Speed Insights e inserir o URL da página que deseja analisar.
Realmente não poderia ser mais fácil, embora você não queira necessariamente seguir religiosamente todos os seus conselhos. O sistema do Google é bom em descobrir o que pode estar atrasando sua página, mas algumas correções podem não resolver tantos problemas quanto elas criam.
O ideal é que você queira ver pontuações acima de 85. Embora ninguém saiba ao certo, os tempos de carregamento da página são amplamente considerados como tendo uma influência significativa no seu page rank no Google. Não se desespere se o seu site não estiver lá em cima no topo da zona verde, porque muitos sites importantes não obtêm pontuações fantásticas.
Alguns exemplos notáveis incluem:
- http://bbc.com (70m/77d)
- http://cnn.com (47m/65d)
- http://whitehouse.gov (58m/56d)
- http://microsoft.com (49m/71d)
- http://apple.com (61m/72d)
- http://linux.com (33m/44d)
- http://ubuntu.com (69m/81d)
- http://linuxmint.com (59m/67d)
- http://youtube.com (53m/69d)
- http://facebook.com (49m/81d)
Nenhum desses exemplos é realmente uma desculpa para deixar o seu próprio site funcionar mal, mas eles provam que um site lento não é necessariamente sinônimo de falha.
Use imagens corretamente
Se alguém souber a imagem correta formats para usar e quando, deve ser designers, certo? Mas, surpreendentemente, parece que muitos de vocês não sabem, ou quando sabem, acham que não importa. Bem, aqui está a notícia: isso importa, o tempo todo.
Esse problema vem ganhando força, já que um certo estilo de modelo foi adotado como padrão para sites de negócios, e é uma tendência que não mostra sinais de desaceleração. Como designer profissional, você deve a si mesmo e a seus clientes não cair na armadilha de atalhos de design preguiçoso.
Um desses atalhos infelizes tem sido o uso de grandes imagens PNG para unidades heróicas no topo de uma página (ou em qualquer outro lugar, mas é onde você normalmente as encontrará). Agora, não é preciso dizer que você nunca deve fazer isso, nunca, mesmo se você precisar de seções transparentes na imagem.
Aqui estão os fundamentos que você deve ter em mente ao criar essa obra-prima:
- Use imagens grandes com moderação se em tudo
Imagens grandes são uma ideia terrível, porque quanto maior a imagem, mais tempo demora para carregar. Agora, existem algumas técnicas diferentes que você pode usar para fazer com que as imagens grandes funcionem com muito mais eficiência, mas antes de entrar nisso, digamos que você deve usar imagens menores na maior parte do tempo e salvar as grandes para quando elas forem realmente necessário.
- Definir o valor de PPI / DPI adequadamente
Dependendo do editor de gráficos que você usa, ele pode mostrar valores para DPI ou PPI. O último é melhor, porque indica que seu editor de gráficos foi projetado para uso na Web em vez de impressão. O problema com a mudança de DPI em algumas versões do PhotoShop é que eles ajustam não apenas o DPI, mas também as dimensões físicas de sua imagem. Este não é um problema na última versão do PhotoShop (que usa PPI), então se você estiver usando uma versão mais antiga, é hora de atualizar. Ou use o GIMP.
- Fatia de imagens grandes
É aqui que a magia começa. Você encontrará muitas pessoas dizendo que cortar suas imagens não melhora o tempo de carregamento porque você ainda está baixando o mesmo número de bytes e qualquer melhoria percebida é meramente psicológica. Essas pessoas estão usando a versão mais preguiçosa do corte de imagens, de modo que não conhecem as possibilidades reais.
Depois de cortar sua imagem, você tem a chance de otimizá-la. Supondo que a imagem original estava em PNG format, agora você pode converter qualquer parte não transparente em JPG format, e economize muitos bytes, deixando as partes que exigem transparência como imagens PNG.
Em seguida, você pode brincar com o nível de compressão de cada um emdivifatia dupla até que a fatia esteja perfeitamente otimizada. O efeito geral dessa otimização pode resultar em economias superiores a 50% em comparação com a imagem original não otimizada.
O vídeo também pode ser otimizado
A arte da compressão de vídeo depende de duas coisas: o alvo format e o codec que você usa para codificação. Que format você seleciona depende inteiramente de suas necessidades. Em geral, se você precisar de alta qualidade, MP4 com codificação H.264 fornecerá a melhor qualidade em alta compactação, mas quando você não precisar dessa alta qualidade, WebM e FLV fornecem tamanhos de arquivo menores. Seu software de edição de vídeo ainda pode oferecer FLV como opção, mas não é recomendado usar isso format.
Se você precisa de qualidade de DVD, o MP4 com a codificação H.264 dará excelentes resultados, mas terá o custo de ser um download robusto. Para streaming de vídeo, o WebM oferece uma compactação muito melhor. O problema é que nem todos os sistemas operacionais móveis suportam o WebM ainda (eles deveriam, mas eles parecem ter algum motivo maluco para não seguir a regra de ouro do desenvolvedor móvel: você deve incomodar e confundir o seu cliente tanto quanto você puder).
Você deve usar o codec MPEG-4 em vez de H.264 com vídeos MP4? Geralmente não, porque resulta em tamanhos de arquivo maiores no mesmo nível de qualidade. Mas se o seu vídeo tiver dimensões físicas pequenas e você quiser uma transmissão perfeita do vídeo para streaming, o MPEG-4 é um bom codec porque ele possui correção de erros integrada para garantir a integridade dos dados.
E quanto ao WMV? Bem, este é um caso especial. Ele oferece virtualmente a mesma qualidade de vídeo do MP4, mas com uma compactação ainda melhor. A desvantagem aqui é que os usuários de Mac e iOS só podem ver seu vídeo se usarem um conversor de vídeo payware, o que introduz um atraso na reprodução, que é exatamente o que estávamos tentando evitar ao otimizar nossa página.
Os arquivos WMV não apresentam problemas para usuários do Android, Windows ou Linux. Mas com 12.5% da comunidade da Internet usando dispositivos Apple, você terá que decidir se vale a pena incomodá-los. Pessoalmente, eu não recomendo que você faça isso apenas para obter um tempo de carregamento mais rápido.
E, finalmente, como é um vídeo na Internet, se você não estiver permitindo a reprodução em tela cheia ou em modo de teatro, reduza o tamanho físico do vídeo para o tamanho que será exibido na sua página e veja quantos bytes você pode salvar .
Comentários Respostas 0