No post de hoje vamos mostrar pr\u00e1ticas e dicas para melhorar a qualidade e desempenho do site, evitando assim trabalho dobrado e penaliza\u00e7\u00e3o no resultado de busca do Google e outros buscadores.<\/p>\n\n\n\n
Antes de mergulhar nas etapas, fa\u00e7a um relat\u00f3rio do seu site.\u00a0Seja com\u00a0Lighthouse<\/a>\u00a0ou qualquer outra coisa.\u00a0Ent\u00e3o pegue um ap\u00f3s aplicar tudo o que foi mencionado aqui.\u00a0Voc\u00ea ter\u00e1 uma boa compara\u00e7\u00e3o da diferen\u00e7a que isso realmente faz.<\/p>\n\n\n\n Ent\u00e3o, aqui est\u00e3o as 11 melhores pr\u00e1ticas que voc\u00ea deve ter em mente ao escrever HTML<\/strong> na pr\u00f3xima vez.<\/p>\n\n\n\n A primeira pode parecer um tanto \u00f3bvia. Mas h\u00e1 algumas coisas que gostaria de mencionar aqui, pois muitas vezes podemos nos deparar com problemas como este:<\/p>\n\n\n\n Seu documento ficar\u00e1 rapidamente confuso e ileg\u00edvel de outra forma. Sempre use folhas de estilo externas. Al\u00e9m disso, tente evitar o uso Voc\u00ea tamb\u00e9m deve agrup\u00e1-los para reduzir o n\u00famero de solicita\u00e7\u00f5es. No caso de tamanhos de pacotes enormes, voc\u00ea pode aproveitar a fragmenta\u00e7\u00e3o de dom\u00ednio e dividi-los em 2 a 4 partes menores.<\/p>\n\n\n\n O mesmo vale para JavaScript embutido. Al\u00e9m dos problemas de legibilidade, isso tornar\u00e1 seu documento mais pesado e dif\u00edcil de manter.<\/p>\n\n\n\n Discutimos por que voc\u00ea n\u00e3o deve inline seu CSS. Agora vamos discutir por que voc\u00ea deveria. Considere colocar CSS<\/strong> cr\u00edtico no topo. Ao fazer isso, os usu\u00e1rios poder\u00e3o ver a primeira parte da sua p\u00e1gina renderizada mais rapidamente. Apenas CSS<\/strong> cr\u00edtico em linha e nada mais!<\/p>\n\n\n\n CSS<\/strong> cr\u00edtico refere-se ao conjunto m\u00ednimo de CSS<\/strong> necess\u00e1rio para renderizar a parte superior de sua p\u00e1gina, que um usu\u00e1rio v\u00ea primeiro ao acessar seu site.<\/p>\n\n\n\n Al\u00e9m disso, lembre-se de que a ordem das tags de link pode reescrever as regras, portanto, coloque-as com cuidado. Se voc\u00ea tiver um arquivo separado para redefini\u00e7\u00f5es ou bibliotecas de terceiros, coloque-os primeiro e depois o restante.<\/p>\n\n\n\n Coloque tags de script<\/strong> na parte inferior do documento. Oficialmente, as tags de script<\/strong> ficam dentro da cabe\u00e7a. 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<\/strong>, mostre-o ao usu\u00e1rio e, em seguida, solicite os scripts<\/strong>.<\/p>\n\n\n\n Funciona assim porque o navegador interpreta seu documento de cima para baixo, linha por linha. Quando chega ao <\/p>\n\n\n\n Voc\u00ea sabia que, segundo a OMS, 15% da popula\u00e7\u00e3o mundial vive com algum tipo de defici\u00eancia? Isso \u00e9 mais de 1 bilh\u00e3o de pessoas que podem ter problemas ao usar seu site. Hoje em dia temos tanta interatividade acontecendo em nossos sites, que \u00e9 f\u00e1cil para a acessibilidade ser prejudicada.<\/p>\n\n\n\n Reserve algum tempo para decorar seus elementos de IU<\/strong> complexos com A tag alt<\/strong> especifica um texto alternativo para a imagem. Portanto, caso n\u00e3o possa ser exibido por qualquer motivo, este texto ser\u00e1 exibido. Os mecanismos de pesquisa n\u00e3o adoram quando voc\u00ea est\u00e1 perdendo tags alt<\/strong> para imagens e pode classificar sua p\u00e1gina mais abaixo como resultado.<\/p>\n\n\n\n Voc\u00ea tamb\u00e9m pode usar um elemento figure<\/strong> com a H\u00e1 um equ\u00edvoco comum de que voc\u00ea s\u00f3 pode usar um O que importa, no entanto, \u00e9 usar os elementos de t\u00edtulo em ordem sequencial decrescente. N\u00e3o os ignore. A E o que importa ainda mais, s\u00e3o seus usu\u00e1rios. Coloque o texto mais importante no seu Use um t\u00edtulo para sua p\u00e1gina e meta tags descritivas apropriadas. Eles s\u00e3o escolhidos pelo cara do mecanismo de pesquisa local e usados \u200b\u200bpara indexar seu site. Ent\u00e3o ajude-o fornecendo esta informa\u00e7\u00e3o \u00fatil para ele. Sempre use uma tag meta viewport<\/strong> para que seu site seja exibido de acordo com o tamanho da tela do dispositivo.<\/p>\n\n\n\n1 – Escreva DOM v\u00e1lido e leg\u00edvel<\/h2>\n\n\n\n
\n
<HTML><\/code>ou <BODY><\/code>. Ou pior ainda, todo o pr\u00f3prio HTML. Todas as tags devem estar em letras min\u00fasculas, portanto, n\u00e3o use letras mai\u00fasculas nas tags HTML.<\/li>\n\n\n\n2 – N\u00e3o use estilos e scripts inline<\/h2>\n\n\n\n
import<\/strong><\/code> de instru\u00e7\u00f5es em seus arquivos CSS<\/strong>. Eles produzem uma solicita\u00e7\u00e3o de rede extra.<\/p>\n\n\n\n3 – CSS cr\u00edtico inline<\/h2>\n\n\n\n
4 – Coloque as tags de script na parte inferior<\/h2>\n\n\n\n
head<\/code>e se depara com uma tag de script<\/strong>, ele inicia uma solicita\u00e7\u00e3o ao servidor para obter o arquivo. Se for enorme, continuar\u00e1 carregando e o usu\u00e1rio ver\u00e1 apenas uma p\u00e1gina em branco porque ainda est\u00e1 carregando o cabe\u00e7alho. Ent\u00e3o, mova-os para o fundo. Dessa forma, todo o conte\u00fado do body<\/strong> ser\u00e1 carregado antes de carregarmos o conte\u00fado da tag script<\/strong>. Em troca, podemos induzir nossos usu\u00e1rios a pensar que nossa p\u00e1gina est\u00e1 carregando muito r\u00e1pido. Voc\u00ea tamb\u00e9m pode adicionar uma defer<\/code>tag \u00e0s suas tags de script<\/strong> para garantir que o HTML<\/strong> seja carregado primeiro.<\/p>\n\n\n\n5 – Cuide da acessibilidade<\/h2>\n\n\n\n
aria<\/code>atributos. Isso traz suporte para tecnologias assistivas para que voc\u00ea possa alcan\u00e7ar um p\u00fablico mais amplo. <\/p>\n\n\n\n6 – Use tags alt para imagens<\/h2>\n\n\n\n
figcaption<\/strong><\/code> para criar uma legenda para uma imagem da seguinte maneira:<\/p>\n\n\n\n<figure>\n <img src=\"path\/to\/img.png\" alt=\"Certifique-se de ainda deixar uma tag alt\" \/>\n <figcaption>Uma legenda vis\u00edvel que descreva a imagem<\/figcaption>\n<\/figure><\/code><\/pre>\n\n\n\n7 – Use elementos de t\u00edtulo em ordem decrescente<\/h2>\n\n\n\n
h1<\/strong><\/code> por p\u00e1gina. Embora possa ter sido assim, isso n\u00e3o \u00e9 mais verdade. Voc\u00ea pode ter v\u00e1rios h1<\/strong><\/code> em uma p\u00e1gina, desde que estejam semanticamente corretos. Por exemplo, se eles pertencem a uma se\u00e7\u00e3o.<\/p>\n\n\n\nh1<\/strong><\/code> deve sempre ser seguido por um h2<\/strong><\/code>, e n\u00e3o por um h3<\/strong><\/code>. Da mesma forma, voc\u00ea n\u00e3o deve iniciar o documento h3<\/strong><\/code> apenas com um para ser seguido por um h1<\/strong>.<\/p>\n\n\n\n<!-- EVITAR -->\n<h1>T\u00edtulo da sua p\u00e1gina<\/h1>\n<h3>Cabe\u00e7alho<\/h3>\n\n<!-- EVITAR -->\n<h3>T\u00edtulo da sua p\u00e1gina<\/h3>\n<h1>Cabe\u00e7alho<\/h1>\n\n<!-- CORRETO -->\n<h1>T\u00edtulo da sua p\u00e1gina<\/h1>\n<h2>Cabe\u00e7alho<\/h2>\n<h3>Sub-Cabe\u00e7alho<\/h3><\/code><\/pre>\n\n\n\nh1<\/strong><\/code>, que descreve o conte\u00fado da sua p\u00e1gina. Como sua postagem no blog ou t\u00edtulo do artigo. <\/p>\n\n\n\n8 – Use Title e Meta Tags da Maneira Certa<\/h2>\n\n\n\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" \/><\/code><\/pre>\n\n\n\n