No post de hoje vamos mostrar práticas e dicas para melhorar a qualidade e desempenho do site, evitando assim trabalho dobrado e penalização no resultado de busca do Google e outros buscadores.
Antes de mergulhar nas etapas, faça um relatório do seu site. Seja com Lighthouse ou qualquer outra coisa. Então pegue um após aplicar tudo o que foi mencionado aqui. Você terá uma boa comparação da diferença que isso realmente faz.
Então, aqui estão as 11 melhores práticas que você deve ter em mente ao escrever HTML na próxima vez.
1 – Escreva DOM válido e legível
A primeira pode parecer um tanto óbvia. Mas há algumas coisas que gostaria de mencionar aqui, pois muitas vezes podemos nos deparar com problemas como este:
- Escreva em letras minúsculas: Muitas vezes, a estrutura base é escrita em letras maiúsculas como
<HTML>ou<BODY>. Ou pior ainda, todo o próprio HTML. Todas as tags devem estar em letras minúsculas, portanto, não use letras maiúsculas nas tags HTML. - O recuo é a chave para a legibilidade: Use-o, caso contrário, seu documento parecerá plano e tudo nele parecerá confuso. Melhorar a legibilidade também significa reduzir o tempo de desenvolvimento.
- As tags de fechamento automático já foram obrigatórias. Mas com HTML5 é opcional e depende exclusivamente do desenvolvedor. Use-o em todas as tags ou não o use. A chave aqui é ser consistente. E, claro, não se esqueça de fechar as tags regulares.
- Evite o uso excessivo de comentários: a menos que você tenha um sistema de compilação instalado ou esteja usando um mecanismo de modelo, eles podem realmente somar e aumentar o peso do seu arquivo HTML. Em troca, isso diminui a velocidade inicial de carregamento da página e pode fazer com que os usuários esperem. Eventualmente, fazendo-os sair. Seu documento deve se auto descrever, então evite o uso excessivo de comentários.
- Organize DOM : Sempre considere se você precisa de um div extra ou elemento extra. Tente criar apenas os absolutamente necessários e divida apenas grandes partes de sua página não com divs, mas com elementos HTML semânticos. O mesmo vale para outros lugares. Se puder, sempre use elementos semânticos HTML5. Ele ajuda os mecanismos de pesquisa a saber qual parte é importante em sua página e qual parte não é. Lembre-se, sempre pergunte a si mesmo se você realmente precisa desse div extra lá. Livre-se do excesso de coisas.
2 – Não use estilos e scripts inline
Seu documento ficará rapidamente confuso e ilegível de outra forma. Sempre use folhas de estilo externas. Além disso, tente evitar o uso import de instruções em seus arquivos CSS. Eles produzem uma solicitação de rede extra.
Você também deve agrupá-los para reduzir o número de solicitações. No caso de tamanhos de pacotes enormes, você pode aproveitar a fragmentação de domínio e dividi-los em 2 a 4 partes menores.
O mesmo vale para JavaScript embutido. Além dos problemas de legibilidade, isso tornará seu documento mais pesado e difícil de manter.
3 – CSS crítico inline
Discutimos por que você não deve inline seu CSS. Agora vamos discutir por que você deveria. Considere colocar CSS crítico no topo. Ao fazer isso, os usuários poderão ver a primeira parte da sua página renderizada mais rapidamente. Apenas CSS crítico em linha e nada mais!
CSS crítico refere-se ao conjunto mínimo de CSS necessário para renderizar a parte superior de sua página, que um usuário vê primeiro ao acessar seu site.
Além disso, lembre-se de que a ordem das tags de link pode reescrever as regras, portanto, coloque-as com cuidado. Se você tiver um arquivo separado para redefinições ou bibliotecas de terceiros, coloque-os primeiro e depois o restante.
4 – Coloque as tags de script na parte inferior
Coloque tags de script na parte inferior do documento. Oficialmente, as tags de script ficam dentro da cabeça. Mas se os colocarmos na parte inferior do documento, pouco antes do fechamento da tag body, podemos atrasar o download. Isso permite que nosso documento carregue primeiro no DOM, mostre-o ao usuário e, em seguida, solicite os scripts.
Funciona assim porque o navegador interpreta seu documento de cima para baixo, linha por linha. Quando chega ao heade se depara com uma tag de script, ele inicia uma solicitação ao servidor para obter o arquivo. Se for enorme, continuará carregando e o usuário verá apenas uma página em branco porque ainda está carregando o cabeçalho. Então, mova-os para o fundo. Dessa forma, todo o conteúdo do body será carregado antes de carregarmos o conteúdo da tag script. Em troca, podemos induzir nossos usuários a pensar que nossa página está carregando muito rápido. Você também pode adicionar uma defertag às suas tags de script para garantir que o HTML seja carregado primeiro.
5 – Cuide da acessibilidade
Você sabia que, segundo a OMS, 15% da população mundial vive com algum tipo de deficiência? Isso é mais de 1 bilhão de pessoas que podem ter problemas ao usar seu site. Hoje em dia temos tanta interatividade acontecendo em nossos sites, que é fácil para a acessibilidade ser prejudicada.
Reserve algum tempo para decorar seus elementos de IU complexos com ariaatributos. Isso traz suporte para tecnologias assistivas para que você possa alcançar um público mais amplo.
6 – Use tags alt para imagens
A tag alt especifica um texto alternativo para a imagem. Portanto, caso não possa ser exibido por qualquer motivo, este texto será exibido. Os mecanismos de pesquisa não adoram quando você está perdendo tags alt para imagens e pode classificar sua página mais abaixo como resultado.
Você também pode usar um elemento figure com a figcaption para criar uma legenda para uma imagem da seguinte maneira:
<figure>
<img src="path/to/img.png" alt="Certifique-se de ainda deixar uma tag alt" />
<figcaption>Uma legenda visível que descreva a imagem</figcaption>
</figure>7 – Use elementos de título em ordem decrescente
Há um equívoco comum de que você só pode usar um h1 por página. Embora possa ter sido assim, isso não é mais verdade. Você pode ter vários h1 em uma página, desde que estejam semanticamente corretos. Por exemplo, se eles pertencem a uma seção.
O que importa, no entanto, é usar os elementos de título em ordem sequencial decrescente. Não os ignore. A h1 deve sempre ser seguido por um h2, e não por um h3. Da mesma forma, você não deve iniciar o documento h3 apenas com um para ser seguido por um h1.
<!-- EVITAR -->
<h1>Título da sua página</h1>
<h3>Cabeçalho</h3>
<!-- EVITAR -->
<h3>Título da sua página</h3>
<h1>Cabeçalho</h1>
<!-- CORRETO -->
<h1>Título da sua página</h1>
<h2>Cabeçalho</h2>
<h3>Sub-Cabeçalho</h3>E o que importa ainda mais, são seus usuários. Coloque o texto mais importante no seu h1, que descreve o conteúdo da sua página. Como sua postagem no blog ou título do artigo.
8 – Use Title e Meta Tags da Maneira Certa
Use um título para sua página e meta tags descritivas apropriadas. Eles são escolhidos pelo cara do mecanismo de pesquisa local e usados para indexar seu site. Então ajude-o fornecendo esta informação útil para ele. Sempre use uma tag meta viewport para que seu site seja exibido de acordo com o tamanho da tela do dispositivo.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />Além disso, considere o uso de tags de gráfico aberto para transformar os links do seu site em conteúdo rico em plataformas de mídia social. Existem diferentes tags que você pode usar para ajudar os mecanismos de pesquisa a entender melhor seu conteúdo.
<meta property="og:title" content="Título da sua página" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://soloweb.com.br" />
<meta property="og:image" content="src/to/featured/img.png" />
<meta property="og:description" content="Esta é uma descrição" />Caso precise de detalhes extras para descrever seu site, você pode usar schema markup , também chamado de dados estruturados, dessa forma você pode representar praticamente qualquer objeto e descrevê-lo para os mecanismos de busca:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"url": "https://soloweb.com.br",
"headline": "HTML Best Practices",
"image": "src/to/featured/img.png",
"description": "Short description of the article",
"publisher": {
"@type": "Organization",
"name": "Webtips",
"url": "https://www.soloweb.com.br"
}
}
</script>9 – Use HTML semântico
Use uma estrutura semântica: utilize elementos semânticos como header, nav, section, article e footer para estruturar o conteúdo do seu site, tornando-o mais acessível e compreensível para os usuários e mecanismos de busca.
10 – Comprimir
Quando terminar tudo e estiver pronto para tornar seu site ativo, compacte-o. Você pode usar bibliotecas de terceiros, programas especiais, ferramentas chamadas de ferramentas de construção ou até mesmo aplicativos online. Isso tornará seu documento menor, o que resulta em um carregamento de página mais rápido. Para dar mais este passo, habilite a compactação brotli ou gzip no lado do servidor. Isso pode causar um grande impacto na velocidade da página.
11 – Valide seu HTML
Por último, mas não menos importante, sempre valide seu HTML. Os validadores podem detectar defeitos ou códigos errados para que você possa eliminá-los. Você pode usar o validador w3c . Aqui você pode validar seu site por URL antes de ir ao ar, fazendo o upload, ou também pode validar por entrada direta. Ele pode detectar vários problemas, como colocar elementos de nível de bloco dentro de elementos embutidos.
Ainda melhor do que isso, é se você puder colocar um linter no lugar que verifique esses problemas automaticamente antes de confirmar seu código.
Seguir estes 11 passos simples irá ajudá-lo a intensificar seu jogo de HTML e obter uma classificação mais alta para seu site. Levando a mais tráfego, além de torná-lo mais rápido nas etapas de otimização.