Tomando como ponto de partida a máxima “se é digital é otimizável”, vamos olhar para alguns aspetos que nos podem ajudar na altura de otimizar as páginas do nosso website, de forma a reduzir o seu tempo de carregamento e a melhorar
a sua posição nos motores de pesquisa em termos de SEO. Para isso temos de perceber o que pode ser otimizado e onde vamos incidir os nossos esforços.
Quando falamos de uma página de um site, o fator que mais contribui para um carregamento rápido ou lento é o seu tamanho/peso. Ou seja, os browsers necessitam de tempo para realizar o download do código que compõe cada uma das nossas páginas. Detalhando: o browser precisa de descarregar o HTML, as folhas de estilo, os scripts e as imagens.
Leitura recomendada: O que é SEO e como ajuda a sua empresa a crescer?
Enquanto os programadores tentam tornar as páginas dos site cada vez mais ricas, os utilizadores que as visitam esperam designs cada vez mais atraentes e com uma experiência de utilização simples, intuitiva e rápida. Estes dois cenários levam a que o tamanho dos recursos de um website esteja em contínuo crescimento. Cada novo recurso aplicado requer um novo script ou uma nova folha de estilo que pesa mais um pouco nas páginas e, por consequência, no seu site.
Com tantas alterações e melhorias diárias, nem sempre é fácil garantir que o nosso website ou as nossas webpages estão com uma velocidade de carregamento aceitável. Sendo assim, comece por fazer uma auditoria ao seu site.
Como fazer uma auditoria ao seu site?
Existem algumas ferramentas online gratuitas que lhe permitem fazer uma auditoria ao seu site, mostrando o que pode, ou não, ser melhorado:
Estes são apenas alguns dos mais populares, ou pelo menos aqueles que mais utilizamos. Todos eles têm algo em comum para nós: analisam o website e dizem-nos o que pode ser melhorado. Atenção: por vezes os resultados podem parecer desanimadores, mas a maioria das otimizações necessárias são relativamente rápidas e fáceis.
Formas de otimizar e reduzir o tempo de carregamento do seu site para SEO
Mas então o que devemos considerar como essencial para otimizar o tempo de carregamento (page load time) das páginas do seu site:
- Redimensionar imagens;
- Definir browser cache para armazenamento de dados;
- Reduzir o tempo de carregamento do CSS (Cascade Style Sheets);
- Manter os scripts above the fold;
- Configurar o website para carregar arquivos JavaScript de forma assíncrona (asynchronous pages);
- Reduzir os redireccionamentos.
1. Redimensionar ou comprimir imagens
A melhor forma para otimizar as imagens presentes numa página é dimensioná-las antes de fazermos upload das mesmas para o backoffice do site, de forma a não afetarem o tempo de carregamento da página.
Muitos programadores usam imagens de qualidade e peso enormes e depois reduzem-nas com o auxílio dos famosos CSS (linhas de código que definem o estilo de um site), o que está errado. Ainda que reduza uma parte do tamanho, o browser carrega as imagens no tamanho real na mesma e só depois as reduz...
Leitura recomendada: Como melhorar o SEO de artigos de blog
Vamos a um simples exemplo: carregando uma imagem de 1000 x 1000 px, que é reduzida à posteriori para 100 x 100 px, significa que o browser vai carregar dez vezes mais do que o necessário.
E se o redimensionamento tornar as nossas imagens pixelizadas, com falta de nitidez? Nesse caso, podemos comprimir as imagens.
A compressão de imagens reduz eficazmente o seu tamanho sem perder a qualidade. Realizando uma pesquisa vai encontrar algumas ferramentas online gratuitas para compressão de imagem, como por exemplo:
2. Definir browser cache para armazenamento de dados
Ativar a cache do browser permite armazenar, temporariamente, alguns dados no computador dos utilizadores para que eles não precisem de aguardar o carregamento de páginas sempre que visitarem o nosso website.
O tempo de armazenamento depende da configuração do browser e das configurações de cache do servidor. Para esta configuração seria uma ótima ideia entrar em contato com o hosting do seu website.
3. Reduzir o tempo de carregamento do CSS
É importante saber que o CSS é carregado antes dos utilizadores verem a webpage. Quanto maior o CSS, mais tempo demora o seu carregamento e muito mais tempo o utilizador espera. Um CSS otimizado significa que os respetivos ficheiros serão descarregados rapidamente, oferecendo a quem visita o website um acesso mais rápido.
Leitura recomendada: Transforme o seu site numa máquina de gerar leads
Como resolver esta questão? Vamos por partes: o seu website utiliza todos o CSS implementados? Se não, então livre-se do código desnecessário nos seus ficheiros CSS.
De seguida minimize os ficheiros CSS: espaços extras nas folhas de estilo aumentam o tamanho do arquivo. A minimização de CSS remove esses espaços extras no código para garantir o menor tamanho possível.
Pode dar-se o caso de que o CMS que utiliza já minimize o CSS ou, poderá, inclusive, existir uma opção para tal. Para websites construídos em WordPress pode sempre utilizar um plug-in para o ajudar. O WP Hummingbird é ótimo, mas deve sempre procurar o apoio de um expert antes de alterar as configurações principais. Para além deste, tem também algumas ferramentas online gratuitas tais como o CSS Minifier.
4. Mantenha os scripts above the fold
Os arquivos Javascript podem e devem ser carregados após toda a webpage, contudo, o que acontece na maior parte das vezes é que são colocados antes do conteúdo e assim vão ser, naturalmente, carregados antes. Isso vai fazer com que uma página demore mais tempo a carregar e, consequentemente, que os utilizadores fiquem insatisfeitos.
A solução mais simples passa por colocar os arquivos JavaScript externos na parte inferior da webpage, imediatamente antes de fechar a tag body.
Outro método que permite ainda mais controlo é usar os atributos adiar (defer) ou assíncrono (async):
- Atributo adiar (defer): faz com que os scripts aplicados sejam carregados apenas após o carregamento do conteúdo;
- Tags assíncronas (async): carregam os scripts enquanto o restante conteúdo da página é carregado, contudo os scripts podem ser carregados fora de ordem. Basicamente, ficheiros mais leves são carregados primeiro, o que não significa necessariamente que seja bom.
Neste caso a otimização significa garantir que os scripts são executados sem interromper o normal carregamento do conteúdo criado para o utilizador. Tudo que precisa de fazer é adicionar a palavra <script> às suas tags.
Dica: Utilizando este método, os scripts essenciais devem ter o atributo async, para que possam carregar rapidamente. Os não essenciais podem esperar até ao final do carregamento para garantir que os utilizadores visualizam a página rapidamente. Importa testar sempre os scripts para garantir que nada afeta o website.
5. Configure o site para carregar arquivos JavaScript de forma assíncrona
Este ponto é talvez o mais complicado, contudo um expert fará isto sem grande dificuldade. A maioria das webpages descarrega o seu conteúdo pouco a pouco de diferentes fontes. E enquanto esse processo decorre, o utilizador ou visitante aguarda que a página apareça. Com um carregamento assíncrono vamos definir os scripts que podem ser carregados em simultâneo, substituindo os recursos síncronos.
Em algumas análises a websites, percebemos que muitos deles carregam conteúdo escrito em JavaScript de cima para baixo. Portanto, mesmo que o browser do utilizador execute mais do que uma solicitação HTTP à vez, o conteúdo que ele recebe é carregado, módulo por módulo.
Este procedimento também é conhecido como render blocking e pode fazer com que a nossa webpage seja carregada mais lentamente, já que cada ficheiro aguarda a sua vez de carregar no browser do utilizador.
Leitura recomendada: Como o Marketing B2B deve adaptar-se à transformação digital
Em suma, o carregamento assíncrono permite que o conteúdo do site apresente vários elementos da página ao mesmo tempo, independentemente de onde estejam. Configurar o website desta forma significa melhorar a experiência do utilizador.
6. Reduzir os redirecionamentos
Quantos redirecionamentos existem no seu website? Redirecionamentos, como erro 404, aparecem quando os utilizadores digitam um endereço incorreto ou são direcionados para uma página inexistente num website. Quando uma página é redirecionada, outra página é apresentada em sua substituição. Evite redirecionamentos! Em vez de configurar vários redirecionamentos, remova-os.
Qualquer que seja a razão, os redirecionamentos acionam um novo HTTP-Request-Response e isso cria demora. A melhor maneira de fazer isso é restringir o uso de redirecionamentos apenas aos casos em que é absolutamente necessário encontrar outras soluções quando não são necessários.
Os utilizadores exigem uma experiência cada vez mais rica e nós temos de evoluir com eles. Não se canse de otimizar e de procurar melhores soluções para o site da sua empresa. Todos temos a ganhar, seja enquanto utilizadores, seja enquanto empresa que procura gerar mais leads. Se quiser fazer uma auditoria ao seu site ou se precisar de ajuda na otimização do mesmo, fale connosco.
Faça download do nosso ebook descubra tudo o que precisa de saber sobre SEO.
Anterior
