Como medir o desempenho do site de front-end
Falando de processo de otimização é quase inexistente entre os web designers da nova era. Até mesmo muitos web designers que estão no mercado há uma década ou mais não entendem completamente a importância da otimização de sites.
Após um período prolongado de tempo, um site começará a atolar. Os arquivos front-end podem conter blocos de código exagerados ou bits ocultos bloqueados. Isso é mais comumente visto em arquivos ou imagens JavaScript. Pode ser importante criar um site agradável para a experiência do usuário, mas sem um site otimizado, o design pode não ter a chance de carregar totalmente em usuários impacientes.
As dicas abaixo são para desenvolvedores web iniciantes intermediários interessados em otimizar suas páginas ao máximo. Existem muitas técnicas disponíveis e cada uma se comportará de maneira diferente dependendo de quais problemas seu site está sofrendo. Tente percorrer algumas áreas e veja se você pode aplicar essas técnicas em suas próprias marcas.
Solicitações HTTP
Cada vez que seu site é carregado, ele envia uma solicitação HTTP para um servidor remoto. Esse tipo de transferência de dados é chamado de protocolo de rede usado especificamente para distribuir e armazenar arquivos de texto simples. Geralmente, eles incluem seu código de frontend básico, como HTML, CSS e JavaScript.
Depois que a solicitação for enviada, seu navegador analisará cada elemento da página. Dependendo do mecanismo de análise, cada site carregará de forma diferente e os elementos serão exibidos em ordem variada com base nas velocidades de transferência. Por exemplo, o Internet Explorer processará páginas da web diferentes do Chrome ou do Safari, e todas elas executarão mecanismos de análise um pouco diferentes do Firefox ou do Opera.
O que deve ser considerado é quanto tempo demora o tempo de solicitação para cada arquivo e se essa tendência se mantém consistente. Considere receber mais de 100 mil ou 1 milhão de visitantes em um mês. É tarefa do navegador compilar cada elemento da página e carregar arquivos externos na memória.
Muitas vezes, os fatores que impedem a referência de velocidade otimizada de um site incluem clunky JavaScript ou grandes arquivos de imagem. Com a popularização do Verizon FiOS, é comum que as velocidades da Internet atinjam 600kbps e continuem subindo! Infelizmente isso não é a norma e mesmo com conexões de alta velocidade é possível experimentar falhas de otimização.
Remédios para o desempenho do site
Nós não estamos sozinhos no campo de desenvolvimento web e otimização frontend. Para que o trabalho adequado seja concluído, há certas ferramentas necessárias para lidar com o trabalho.
O Google lançou um projeto chamado Page Speed, que foi criado para ajudar os desenvolvedores a otimizar seus sites e verificar os melhores níveis de desempenho. Originalmente, o projeto começou como um complemento do Firebug de código aberto e agora é aceito como uma referência de terceiros para testes em sites.
Outra opção para usuários do Firebug é o complemento YSlow do Yahoo !. O script analisa cada solicitação de página da Web e sugere as maneiras mais comuns de melhorar o desempenho. Essas sugestões são baseadas no Recurso de desenvolvedores para melhores práticas de otimização em web design.
O programa pode ser um pouco abrasivo no início, pois contém muita informação. Basta seguir as noções básicas e, seguindo uma documentação simples, o processo deve ser fácil..
Os desenvolvedores estão sempre interessados em saltar para um projeto para quebrar o código, de modo que isso não seja um problema. Para uma pequena ajuda, você pode conferir o guia de ajuda do YSlow.
Técnicas de velocidade
Existem alguns truques simples que você pode aplicar ao seu site imediatamente para acelerar o desempenho. A primeira e mais fácil maneira é separar seus arquivos CSS e JavaScript.
O código CSS pertence ao cabeçalho do seu documento. Isso é útil porque as propriedades CSS precisam ser analisadas enquanto o DOM está sendo carregado. Uma vez que um navegador da Web reconheça seus estilos CSS no título, ele aguardará a exibição completa da página da Web até que todos os estilos tenham sido carregados. Além disso, qualquer imagem usada para ícones ou desenhos de plano de fundo levará tempo para ser carregada e deverá ser feita primeiro.
Por outro lado, mover todos os arquivos JavaScript para o rodapé do seu site pode resolver drasticamente os tempos de desligamento. Muitos navegadores bloqueiam downloads paralelos, o que significa que, antes de renderizar a página, o navegador da Web de um usuário pode parar por 4 segundos para carregar totalmente as inclusões JS externas.
Isso nem sempre é possível nem sempre é necessário para todos os sites. Se as suas páginas carregarem o mesmo com tempos de resposta iguais, independentemente de posicionamentos de arquivos de inclusão, não se incomode em manobrar quaisquer reproduções.
O conteúdo dinâmico não pode ser carregado até que o DOM inteiro seja concluído, mas às vezes isso retornará erros. Teste CSS / JS inclui para ver se você pode retornar algum benefício de otimização.
Compactação de tamanho de arquivo
A compactação de arquivos grandes tornou-se muito popular. Agora ele pode ser utilizado em páginas da Web para reduzir os tempos de carregamento e manter os tamanhos dos arquivos muito baixos. Grande parte do trabalho já foi feito e com ferramentas como os arquivos mini-tamanho YUI Compressor são um processo sem energia.
Existem muitos outros serviços gratuitos na Web para ajudar nessa tarefa também. Minimizar CSS tem uma interface inteira de compactação CSS para simplificar o processo. O mesmo site também tem um compressor JavaScript personalizado que realiza muitas das mesmas tarefas, mas mantém o script organizado.
Você também pode considerar compactar as maiores imagens em suas páginas da web. Isso pode ser feito com qualquer software de edição de fotos, como o Adobe Photoshop ou o GIMP, simplesmente redimensionando a imagem em uma resolução mais baixa. Imagens PNG exportarão muito menores em média do que os formatos jpg ou TIFF. Há também muitas ferramentas on-line, como o Otimizador de imagens, para ajudar no processo de compactação.
Verificação de origem e métricas
Esta é uma rotina que muitas vezes não é praticada por desenvolvedores da web, que pode oferecer resultados surpreendentes. Analisando todos os elementos da página em seu site, você pode ver qual demorou mais para carregar e a ordem em que cada peça foi carregada.
A ferramenta mais popular do Mozilla Firebug é um plug-in para o navegador Firefox. Este aplicativo instala uma pequena barra de ferramentas na parte inferior do navegador para verificar os tempos de resposta, as informações de cabeçalho, os elementos da página e os scripts de cada site. O script também foi portado para o Firebug Lite como uma extensão para o Google Chrome.
Apache com mod_pagespeed
Nem todas as configurações estarão executando um servidor da web Apache, portanto, essa opção nem sempre está disponível. Este módulo está diretamente relacionado Monitor de velocidade de página do Google mencionado anteriormente. Na verdade, o código para mod_pagespeed foi originalmente baseado em muitas bibliotecas dos bancos de dados do Google Code.
O Apache permite que os administradores do servidor instalem pequenos pacotes chamados módulos para melhorar o desempenho de seus servidores. mod_pagespeed é um desses módulos que executa técnicas de otimização automaticamente em tempo de execução. Existem muitos processos para listar, embora alguns dos principais aplicativos incluam compactação HTML / CSS / JS on-the-fly e cache de imagem.
O projeto está atualmente no Google e está aberto a desenvolvedores. O Google tem trabalhado com o GoDaddy para implementar o mod_pagespeed em todas as contas de hospedagem que executam o servidor HTTP Apache..
Embora muitas outras opções estejam disponíveis, o trabalho de desenvolvimento de frontend é um dos mais intensos, especialmente considerando a pré-otimização para páginas da web cruciais. A otimização para cabeçalhos de sites e imagens grandes pode ser uma tarefa extremamente tediosa, mas gratificante.
Considere algumas das técnicas apresentadas neste artigo e veja como elas podem ser aplicadas em seus projetos da web. Geralmente, os desenvolvedores não levam tempo suficiente para apreciar seu trabalho e limpar antigos trechos de código. Se você ainda está ansioso por algumas dicas, leia nosso guia final de otimização da Web para obter dicas sobre manutenção de interface e aprimoramentos convenientes de desempenho..
