Otimização do código HTML do site - limpeza, compactação, correção de erros

Ouça este artigo

Técnico otimização de código HTML do site - o processo de ajuste do código HTML do modelo de página do site. Alteração (ed.) do código-fonte do site e correção de sua estrutura e tamanho. O objetivo explícito é uma melhoria qualitativa na composição do código. Uma redução significativa no seu volume, melhorando a validade do código. O que ajuda a aumentar a velocidade de carregamento da página nos navegadores.

HTML é a espinha dorsal da web. Este é o tipo de documento que constrói a estrutura básica de um site. Sem HTML, o JavaScript não funcionaria, o CSS não seria capaz de estilizar nada e as imagens não teriam onde carregar. A força do HTML está em sua versatilidade, principalmente porque ele pode carregar outros arquivos, que é o que significa hipertexto, a primeira parte do HTML.

Quando leva muito tempo para carregar, analisar e carregar arquivos HTML externos, a interface do usuário pode sofrer. O tempo de carregamento da página aumenta, quanto mais os usuários tendem a abandonar a página, mais eles precisam esperar.

O conteúdo do artigo:

• Otimização técnica do código HTML das páginas do site
• Otimizando o código HTML fonte do site reduzindo a quantidade de código
• Removendo tags HTML e arquivos de estilo desnecessários
• Correção de erros no código HTML do site
• Defina a prioridade da versão móvel do site
• Faça uso ativo do cache da web
• CDN - grandes oportunidades do nosso tempo
• Reduzir solicitações HTTP
• Otimizando o código HTML do seu site para SEO
• Otimização técnica do código HTML do site - plugins CMS WordPress populares

Otimização técnica do código HTML das páginas do site

As atividades destinadas a otimizar o código HTML são úteis para aumentar a velocidade do site. Limpar e compactar o código HTML do site ajudará você a acelerar significativamente a exibição das páginas do site. Ao eliminar erros visíveis no código, você melhorará a validade do seu documento HTML.

O resultado final da otimização do código HTML do site será:

• Carregamento instantâneo de páginas de sites em navegadores populares.
• Rastreamento rápido do conteúdo do site por bots de pesquisa.
• Um código limpo e válido é o site de maior prioridade aos olhos dos mecanismos de pesquisa.
• A classificação e a visibilidade do site nos resultados de pesquisa dos mecanismos de pesquisa Google e Yandex aumentarão significativamente.

Otimização do código HTML fonte do site - reduzindo a quantidade de código

A ação mais importante é reduzir o código da página. O código-fonte HTML parece uma tela longa. Muitos estilos CSS diferentes estão localizados em lugares diferentes na estrutura do código. O código possui comentários, caracteres, espaços e tags desnecessários.

No início, você precisa se livrar de comentários desnecessários - este é um conjunto extra e completamente desnecessário de caracteres. Para o navegador e os bots de pesquisa, os comentários não carregam nenhum significado semântico. Ao removê-los, você reduzirá significativamente o peso da página. O que em um compartimento aumentará a velocidade de carregamento de um documento.

Limpeza de caracteres desnecessários, espaços extras (duplos) e quebras de linha. Isso permitirá que você reduza drasticamente a estrutura final do código do site. Assim, o peso principal da página pode ser reduzido de 2,5 a 3 vezes.

Como resultado de: compactar espaços e combinar quebras de linha, a estrutura do código html será significativamente compactada.

Um exemplo de um pequeno segmento de um ano otimizado:

a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-bottom-right ul li a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-top-left ul li.wpfm-title-hidden a:hover.

Como você pode ver, todos os caracteres, espaços e comentários desnecessários foram removidos do código. Isso contribui para o alongamento do código, como se fosse uma linha contínua. Graças a esta estrutura, o peso da página torna-se muito menor. Ao mesmo tempo, as páginas são indexadas e carregadas por bots o mais rápido possível. Claro, sujeito a todas as medidas para otimizar o site.

Removendo tags HTML e arquivos de estilo desnecessários

O problema mais comum de um grande peso de código de página pode ser arquivos estilísticos CSS não utilizados e tags desnecessárias. Esses elementos de código também são colocados no modelo de página principal.

Por exemplo: <b> ,<div>, <p>, <span> <style=”левые стилистические файлы CSS”</span>.

Isso também se aplica a tags não fechadas. Eles não carregam nenhum significado semântico e ocupam o lugar de que precisamos. Arquivos de estilo que não têm função na apresentação visual do site (desnecessários ou corrompidos) também são removidos da estrutura do código.

Para acelerar o carregamento das páginas do site:

1. Você precisa mover estilos CSS e scripts JS para arquivos externos;
2. Organize os principais elementos do design do site em sprites e, em seguida, coloque-os em folhas de estilo;
3. O código da página deve ser simples e legível.

Correção de erros no código HTML do site

Os mecanismos de pesquisa (não muito voluntariamente) reagem a sites no código que contêm erros. No entanto, muitos recursos populares do TRUST, mesmo com esses erros, são claramente corrigidos nos resultados TOP. Até a página principal do popular Yandex é verificada com a ajuda do validator.w3.org, até meu site é superior em erros.

Tem a seguinte lista de erros de validade:

Aviso: cabeçalho HTTP Content-Security-Policy: política de segurança de conteúdo inválida: a lista de fontes contém a expressão de fonte duplicada &quot;https://passport.yandex.ru&quot;. Todos, exceto a primeira instância, serão ignorados. https://yandex.ru/ Erro: estilo de elemento não permitido como filho do elemento div neste contexto. (Suprimindo mais erros desta subárvore.) Da linha 33, coluna 17689; para a linha 33, coluna 17695 dkov</div><style.docum>

Erro: elemento div não permitido como filho do elemento span neste contexto. (Suprimindo mais erros desta subárvore.) Da linha 33, coluna 18219; para a linha 33, coluna 18260 pe_close&quot;&gt;div class=&quot;desk-notif-card__action-icon&quot;&gt;</div>

Este é o conjunto mínimo de erros que a página principal do mecanismo de busca Yandex possui (existem cerca de 47 no total).

E é assim que a verificação validator.w3.org do meu site se parece:

Erro: um elemento de script com um atributo src não deve ter um atributo de tipo cujo valor seja diferente de string vazia, um tipo MIME de JavaScript ou módulo. Da linha 6, coluna 1; para a linha 6, coluna 192 /script>↩ ↩ ↩ style type="text/css"     

Error: Bad value pmdelayedscript for attribute type on element script: Subtype missing.


From line 123, column 1; to line 123, column 140

25.jpg' >↩<script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" data-rocketlazyloadscript="1"docume

Como você pode ver, não poucos))) - apenas 21 notificações de erros e avisos. Há algo para trabalhar.

A validade do código é da mais alta prioridade na promoção do site. Ao corrigir a maioria dos erros e avisos do validador W3C, você pode obter um bom sucesso na otimização técnica do site.

Defina a prioridade da versão móvel do site

Tradicionalmente, os sites de primeira geração eram visualizados em computadores desktop de tela grande. Hoje, a maioria das pessoas visita sites a partir de dispositivos móveis, como smartphones, tablets e laptops. Portanto, seu site deve ser adaptado para dispositivos móveis. Além disso, você precisa garantir que todos os aspectos do seu site – pesquisa, carrinho de compras e checkout – sejam tão fáceis de acessar de um dispositivo móvel quanto de um computador desktop ou laptop.

Faça uso ativo do cache da web

Os caches são áreas de armazenamento temporário onde os navegadores salvam cópias de arquivos estáticos para carregar as páginas visualizadas recentemente mais rapidamente, em vez de solicitar constantemente o mesmo conteúdo por HTTP.

Os navegadores podem ser instruídos a armazenar em cache os elementos da página da Web que não serão alterados com frequência pelos desenvolvedores. Nos cabeçalhos de resposta HTTP, o servidor host inclui instruções de cache. Aqueles que usam determinadas páginas com frequência se beneficiarão de tempos de carregamento mais rápidos, pois o servidor envia menos dados para o navegador.

CDN - grandes oportunidades do nosso tempo

As redes de entrega de conteúdo (CDNs) melhoram a velocidade de carregamento do site armazenando em cache o conteúdo em vários locais diferentes ao redor do mundo. Os servidores de cache CDN geralmente estão localizados mais perto dos usuários finais do que o servidor de origem ou host.

Em vez de se conectar diretamente a um servidor de hospedagem que pode estar a centenas de quilômetros de distância e conectado a várias redes autônomas, as solicitações de conteúdo são enviadas por meio de um servidor CDN. Os servidores CDN podem melhorar muito o desempenho dos sites.

Reduzir solicitações HTTP

Normalmente, os navegadores fazem várias solicitações HTTP para acessar vários recursos de página, como imagens, scripts e arquivos CSS. Um único site pode exigir centenas de solicitações. Há uma troca bidirecional entre o navegador da Web e o servidor que hospeda o recurso para cada solicitação, o que aumenta o tempo de carregamento da página.

Além disso, a página da Web pode não carregar rapidamente se um dos hosts ficar inativo. Devido a esses possíveis problemas, cada página deve ter uma quantidade mínima de recursos carregados. Os testes de velocidade também mostrarão quais solicitações HTTP estão demorando mais. Os desenvolvedores podem procurar uma solução de hospedagem de imagem mais rápida se as imagens estiverem fazendo com que a página carregue lentamente.

Otimizando o código HTML do seu site para SEO

Otimização de código HTML tem um efeito benéfico na maioria dos indicadores do site como um todo. Graças a uma estrutura limpa e otimizada, a velocidade de indexação e carregamento do site é significativamente melhorada. Aos olhos dos motores de busca, o site torna-se melhor e, consequentemente, mais visível nos resultados de pesquisa.
Os mecanismos de pesquisa usam o código-fonte para descobrir sobre o que é o seu site. Qualquer conteúdo em uma página da Web deve ser codificado em HTML para que os mecanismos de pesquisa possam entendê-lo. Os componentes de SEO no código-fonte incluem tag de título, meta descrição, tag de título H1, links internos, textos âncora, links nofollow, tags de imagem alt e tags canônicas. Para visualizar o código-fonte, abra a página da Web e pressione "Ctrl + U". Aqui estão algumas etapas que você pode seguir para otimizar o código-fonte do seu site.

Otimização da tag de título

A tag de título tem um impacto significativo na classificação do seu site nos mecanismos de pesquisa. Isso ajuda o Google a determinar o quão bem sua página da web ou blog corresponde a uma determinada consulta. Uma tag de título bem escrita pode destacar seu site dos demais e atrair facilmente o mecanismo de pesquisa.

• Certifique-se de que todas as suas páginas da web tenham tags de título exclusivas que descrevam perfeitamente as páginas.
• Siga o comprimento ideal das tags de título para que não sejam cortadas nos resultados da pesquisa. 50-60 caracteres funcionam bem o suficiente.
• Certifique-se de não usar palavras-chave nos títulos. Em vez disso, adicione uma ou duas palavras-chave significativas.

Metadescrições exclusivas

Uma meta descrição é um elemento HTML que resume o conteúdo de uma página da Web para benefício dos usuários e dos mecanismos de pesquisa. Ele aparece como um snippet nos resultados da pesquisa abaixo do título. A ideia por trás das meta descrições é dar aos seus leitores uma ideia precisa do que sua página oferece.

• Evite descrições longas. O comprimento ideal é uma descrição contendo entre 130 e 156 caracteres.
• Use palavras-chave relevantes na descrição.
• Se possível, inclua uma chamada para ação.

Trabalhando com dados estruturados

O objetivo dos dados estruturados é adicionar mais detalhes ao seu snippet para torná-lo um snippet em destaque nos resultados da pesquisa. O código deve ser devidamente marcado para aumentar suas chances de classificação mais alta. Schema.org é o mais popular quando se trata de formulários de dados estruturados para mecanismos de pesquisa.

• O uso de "escopo de elemento" na tag div permite que os mecanismos de pesquisa saibam que todas as informações apresentadas em uma seção referem-se ao mesmo tópico.
• O termo tipo de elemento define o tópico de cada seção.
• "item prop" relata informações adicionais sobre a seção

etiqueta H1

A tag H1 é usada para designar um pedaço de texto como o título principal da sua página. O conteúdo listado aqui deve descrever brevemente sobre o que são as páginas. As tags H1 devem ser informativas e envolventes, incentivando o usuário a continuar lendo seu conteúdo.

• Idealmente, deve conter entre 20 e 70 caracteres.
• Considere a intenção do usuário
• Inclua sua palavra-chave principal, de preferência palavras-chave de cauda longa, para melhorar o desempenho da pesquisa e o tráfego da web.

Você também pode adicionar subtítulos começando de H2 a H6. Para melhorar a legibilidade, certifique-se de que o texto após o subtítulo não seja muito longo, de preferência entre 250 e 300 palavras.

Texto alternativo para imagens

Para e-commerce, bem como outros sites, a tag alt é uma tag HTML importante. Ele informa ao mecanismo de pesquisa sobre o que é a imagem. Se o arquivo de imagem não puder ser carregado, o texto alternativo será exibido no lugar da imagem. Boas imagens com texto alternativo adequado tornam as páginas atraentes para os rastreadores e também para os usuários e melhoram a experiência do usuário (UX).

• Certifique-se de que a descrição seja curta e específica.
• Use palavras-chave, mas não as encha
• Marque imagens relacionadas à sua marca, não imagens usadas para fins decorativos.

Marca de URL canônica

Esta é uma ferramenta poderosa para identificar conteúdo duplicado. As tags de URL canônicas são usadas principalmente para sites de comércio eletrônico, pois pode ser necessário criar páginas diferentes para seus produtos.

Adicionar essas tags a cada variação de página ajudará os mecanismos de pesquisa a reconhecer a página principal/de origem de um grupo de páginas com URLs semelhantes.

Principais conclusões

• Esforce-se para manter as coisas simples e eficientes. Um site não deve ser preenchido com muitos elementos sofisticados. Ele só precisa ser relevante e eficaz para a visão da sua marca e dos seus clientes. Você pode conseguir isso simplesmente focando nos recursos da web necessários.
• Explore estratégias de otimização para vários elementos da web. Diferentes elementos da web exigirão diferentes estratégias de otimização. Certifique-se de incluir essas alterações em todos os elementos para que os recursos do seu site funcionem de maneira eficaz.

Otimização técnica do código HTML do site - plugins CMS WordPress populares

Vamos dar uma olhada rápida em alguns plugins do WordPress. O que ajudará você a limpar e compactar o código HTML no WordPress CMS. Graças a esses plug-ins, você pode aumentar drasticamente a velocidade do site, além de limpar todos os desnecessários do código do site.

Otimização automática do plug-in:

• Otimização e compressão do código HTML do site (retirando espaços e comentários).
• Otimização de CSS e JS - permite combinar estilos em um arquivo e colocá-los em rodapé site, bem como scripts js.
• Tem opções adicionais de otimização.

Limpar plug-in:

• Combina a funcionalidade de muitos plugins e consiste em módulos que podem ser desabilitados.
• Ótimo para aumentar a velocidade do site.
• Desativa alguns scripts e recursos desnecessários no WordPress.
• Possui uma ampla gama de ferramentas para trabalhar com código HTML, CSS e arquivos JS do seu CMS.

Ao combinar esses plug-ins, você obterá uma excelente otimização do site WordPress. Certifique-se de usá-los, tenho certeza que eles serão muito úteis para você.

Lendo este artigo:

• Arquivo Htaccess - como criar uma instrução de arquivo .htaccess para iniciantes
• Compressão Gzip aceleração de site js/css/html - como habilitar em .htaccess

Obrigado por ler: AJUDANTE DE SEO | NICOLA.TOP