Passos fáceis para acelerar seu site com imagens pesadas
Publicados: 2019-09-20O proprietário do site pode eventualmente querer aumentar sua velocidade de download. Isso aumenta a classificação dos resultados da pesquisa; além disso, é mais agradável para os visitantes do site trabalhar com ele, obtendo uma resposta mais rápida às suas ações.
Em busca de uma solução rápida e direta, os proprietários de sites instalam um grande número de plug-ins, que por sua vez consomem recursos e apenas retardam seu trabalho. Não temos nada contra plugins de otimização, mas eles precisam ser usados ao ponto e com conhecimento dos princípios de seu trabalho.
Além disso, os proprietários de sites que nunca experimentaram a administração geralmente não entendem a otimização. No entendimento deles, otimização é a aceleração do script a qualquer custo. A tarefa da otimização é produzir a velocidade ideal do site ao preço ideal dos recursos. Portanto, não pode haver instruções universais para todos os sites.
Tornar seu site rápido é uma tarefa urgente para qualquer proprietário de recursos ou webmaster. Afinal, a velocidade de carregamento da página é um dos fatores mais críticos para o sucesso de um recurso da web, juntamente com conteúdo de alta qualidade e belo design gráfico.
O carregamento lento aumenta a probabilidade de perder usuários às vezes. Especialmente quando os visitantes vêm de dispositivos móveis. Recomendações simples para acelerar o carregamento do site, que até mesmo um usuário inexperiente pode implementar na prática, ajudarão a minimizar a probabilidade de perda de tráfego.
1. Otimize o código HTML e CSS-, JS-Files
A otimização do download é impossível sem a preocupação com a “limpeza” do código transmitido ao navegador do usuário ao entrar no site. Um grande número de caracteres no código-fonte afeta significativamente a velocidade de carregamento, portanto, sua brevidade é um fator crítico de sucesso.
Remova caracteres desnecessários, elementos de marcação e tags de código-fonte. Automatizar o processo ajudará a adicionar uma pequena inserção no início e no final do código HTML do site.
Este método de buffer de conteúdo HTML é bastante útil, mas pode criar uma carga adicional na memória de acesso aleatório.
Agrupe o mesmo tipo de arquivos CSS e arquivos JS. Aplicativos PHP gratuitos como JCH Optimize, Cloudflare ou Minify, que são copiados em um diretório separado e passam por todos os arquivos do site, ajudarão a combinar os elementos.
2. Remova solicitações HTTP extras
O upload de elementos de página (javascript, imagens, CSS e arquivos flash) ocupa a maior parte dos recursos do sistema ao carregar um site. As solicitações HTTP para esses elementos tornam o site visivelmente mais lento.
Para evitar solicitações “extras”, você precisa reduzir o número de componentes da página. Isso acarretará uma diminuição proporcional nas chamadas do servidor e acelerará o carregamento do site.
Isto pode ser feito de várias maneiras:
- Combine várias imagens em um único arquivo gráfico (sprite CSS);
- Use imagens inline (inline-pictures) na folha de estilo da página;
- Vários arquivos CSS ou scripts em uma página são mesclados em um arquivo;
- Minimize o número de cenários e plugins.
3. Organize JavaScript e CSS na ordem correta
Recomenda-se colocar os arquivos CSS na parte superior do código da página e o JavaScript na parte inferior. Após essa otimização, o conteúdo estático será carregado primeiro e, em seguida, apenas os gráficos dinâmicos.
Elementos ou animações em Flash que exigem mais recursos para download não “puxam” para frente e estragam a impressão do site desde os primeiros segundos. Isso garantirá um download suave de conteúdo e aumentará o apelo estético do recurso.
4. Reduza o número de scripts externos
Scripts externos são pedaços de código (textos) que são acessados por meio de um link externo. Os links criam solicitações adicionais para muitos servidores diferentes, o que acaba deixando o site mais lento. Para evitar isso, é recomendável usar principalmente scripts locais embutidos na estrutura do código-fonte da página.
É claro que focar em scripts locais criará certas limitações na aparência e funcionalidade do site. Mas a vantagem resultante da velocidade de download vale esses “sacrifícios”.
5. Ativar Liberação
Este PHP-funcional permite que você não espere até que o servidor do usuário carregue as informações do recurso, mas a produza em partes. Enquanto os dados são transmitidos para o navegador, a janela aberta não permanecerá vazia, mas será preenchida suavemente com elementos carregáveis do site. Essa aceleração é especialmente necessária para recursos da Web com interface complexa e alto tráfego.
É melhor colocar a função flush no início do código fonte da página, imediatamente após o cabeçalho. A partir do cabeçalho, o conteúdo HTML será aberto mais rapidamente e você também poderá ativar o carregamento paralelo de elementos CSS e JavaScript.
6. Cache das Páginas
O cache salva algumas informações das páginas do site (flash, gráficos, JavaScript e CSS) no navegador do usuário. Na próxima execução, esses arquivos são baixados instantaneamente do navegador, dando velocidade extra ao site.
Você pode habilitar o cache adicionando um cabeçalho de expiração ao código HTML. Sites WordPress são facilmente armazenados em cache usando a instalação de plug-ins com funcionalidade gratuita ou parcialmente gratuita, como W3 Total Cache, Cache Enabler ou Zen Cach.
Para novos sites, é melhor usar o cache somente após a prontidão total para o lançamento. Se você habilitar o recurso durante o desenvolvimento, outras alterações podem não ser exibidas corretamente no site.
7. Use um CDN
Content Delivery Network – uma cadeia de servidores espalhados em data centers ao redor do mundo para aumentar a velocidade com que o conteúdo é transferido para os visitantes. Quanto mais próximo geograficamente o visitante estiver dos servidores CDN, mais rápido os pacotes de dados do site serão transmitidos.
O uso de CDN é especialmente importante para portais de conteúdo e de alta carga, cujo público principal está muito distante dos servidores físicos. Esse serviço minimiza o tempo de espera para downloads de sites no exterior, contribuindo para o aumento de sua classificação nos resultados de buscas locais. Afinal, o conteúdo é baixado do armazenamento do servidor mais próximo do usuário em seu país.
8. Otimize gráficos e vídeos
Você deve selecionar o formato gráfico e de vídeo correto, pois o formato do arquivo afeta diretamente a velocidade com que as informações são apresentadas aos visitantes.
Formatos recomendados para diferentes conteúdos da web:
- SVG – para logotipos vetoriais e elementos de interface simples;
- PNG – para esquemas e logotipos não vetoriais;
- JPG – para fotos e imagens;
- MPEG4 – para vídeo e animação.
Também para vídeo e animação, está disponível um formato WEBM relativamente novo. Na maioria dos casos, fornece um tamanho de vídeo menor com a mesma qualidade. No entanto, o formulário tem suporte limitado ao navegador (por exemplo, não há suporte no navegador macOS / iOS Safari). Portanto, é recomendável usar um arquivo WEBM como fonte de vídeo prioritária e instalar MPEG4 como fonte alternativa. Você também pode usar o único MPEG4 se o compartilhamento for inaceitável ou inconveniente.
Separadamente, notamos que o formato vetorial (SVG) permite dimensionar sem perda de qualidade gráfica.
Etapas de otimização de imagem
Muitos CMS populares, como WordPress ou Joomla, possuem plug-ins integrados para otimizar imagens do original. Mas esse método cria uma carga adicional e pode deixar o site mais lento. Cada vez que a página é carregada, o navegador primeiro acessa o código-fonte e só então redimensiona a imagem na hora.
Para evitar a perda de velocidade ao carregar imagens, os editores gráficos integrados ao sistema operacional, como o Preview (Mac) ou o Microsoft Paint (Windows), bem como serviços online com funcionalidade semelhante, ajudarão. Trabalhar com eles exigirá habilidades mínimas no trabalho com gráficos.
Mesmo depois de otimizar o tamanho da imagem, seu “peso” geralmente ainda está longe do ideal. Serviços convenientes e gratuitos como ImageResize ou TinyPNG ajudam a reduzir o tamanho sem perda de qualidade da imagem. A maioria dos processos aqui são automatizados. O usuário só precisa fazer upload de arquivos e download já compactados para o tamanho ideal da imagem.
9. Aplicar compactação de arquivo Gzip
Gzip é um método simples de compactar arquivos do site para economizar recursos do canal e acelerar o carregamento. Usando o Gzip, os arquivos são compactados em um arquivo que o navegador pode baixar mais rapidamente e, em seguida, descompacte e exiba o conteúdo.
Habilitar o uso do Gzip é bem simples – você só precisa adicionar algumas linhas de código ao arquivo .htaccess. Por exemplo, ao usar o servidor web Apache, o módulo mod_gzip está disponível para webmasters, para ativar o Gzip, neste caso você precisa adicionar tal código ao .htaccess
A compactação do arquivo Gzip é feita para reduzir o número de solicitações ao servidor de um navegador. Ou seja, essa tecnologia reduz o peso inicial dos arquivos para 70% para acelerar o download.
Adicione o seguinte trecho de código ao arquivo de configuração do servidor web “.htaccess”.
No servidor Apache
# BEGIN GZIP COMPRESSION <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule> # END GZIP COMPRESSION
No servidor Nginx
gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_disable "MSIE [1-6].(?!.*SV1)"; gzip_vary on;
10. Alterar Hospedagem
O método mais básico para acelerar os downloads é mudar o provedor de hospedagem. A economia na alocação de recursos muitas vezes leva a uma deterioração significativa na qualidade dos serviços, o que prejudica todas as tentativas de acelerar o site na videira.
Se manipulações com conteúdo, código e plugins não trazem resultados, é hora de pensar em escolher uma “casa” mais decente para o site. Em uma hospedagem de qualidade com alta disponibilidade e suporte técnico atencioso, o recurso da Internet receberá um poderoso impulso para aumentar a velocidade do trabalho. E isso será apreciado por um público agradecido.
A coisa mais importante é…
É necessário se esforçar para acessar o site por não mais que 2-3 segundos. Não importa se o site abre por 2 ou até 3 segundos, mas se houver mais, e então isso é motivo para pensar em acelerar o carregamento do site.
Você também precisa entender que existem dois parâmetros para a velocidade de carregamento da página.
A primeira é a velocidade com que o conteúdo é exibido (neste ponto a página já está aberta e mostrada ao usuário, enquanto o indicador de página transparente ainda é exibido até que todos os arquivos estáticos e scripts assíncronos estejam conectados).
Além disso, a segunda é a velocidade da formação real da página, quando tudo o que tinha que ser conectado estava conectado. Você precisa se concentrar no primeiro parâmetro, ou seja, não devem passar mais de três segundos antes que o layout do site seja exibido.
Conclusão
Você não pode ignorar uma figura como a velocidade de carregamento do site. Foi ele quem, desde os primeiros segundos, cria um ambiente confortável para os visitantes. Quanto mais rápido o usuário obtém o conteúdo desejado, maior a probabilidade de que uma imagem positiva do recurso seja formada e a lealdade a ele seja construída.