Ottimizzazione del codice HTML del sito Web: pulizia, compressione, correzione degli errori

Ascolta questo articolo

Tecnico ottimizzazione del codice HTML del sito web - il processo di regolazione del codice HTML del modello di pagina del sito. Modifica (ed.) del codice sorgente del sito e correzione della sua struttura e dimensione. La cui finalità esplicita è un miglioramento qualitativo della composizione del codice. Una significativa riduzione del suo volume, migliorando la validità del codice. Ciò aiuta ad aumentare la velocità di caricamento della pagina nei browser.

L'HTML è la spina dorsale del web. Questo è il tipo di documento che costruisce la struttura di base di un sito web. Senza HTML, JavaScript non funzionerebbe, i CSS non sarebbero in grado di modellare nulla e le immagini non avrebbero nessun posto da caricare. La forza dell'HTML risiede nella sua versatilità, principalmente perché può caricare altri file, che è ciò che rappresenta l'ipertesto, la prima parte dell'HTML.

Quando ci vuole molto tempo per caricare, analizzare e caricare file HTML esterni, l'interfaccia utente può risentirne. Il tempo di caricamento della pagina aumenta, più gli utenti tendono ad abbandonare la pagina, più tempo devono aspettare.

Il contenuto dell'articolo:

• Ottimizzazione tecnica del codice HTML delle pagine del sito
• Ottimizzazione del codice HTML sorgente del sito riducendo la quantità di codice
• Rimozione di tag HTML e file di stile non necessari
• Correzione di errori nel codice HTML del sito
• Imposta la priorità della versione mobile del sito
• Fai un uso attivo del web caching
• CDN - alte opportunità del nostro tempo
• Abbrevia le richieste HTTP
• Ottimizzazione del codice HTML del tuo sito per la SEO
• Ottimizzazione tecnica del codice HTML del sito Web - popolari plug-in CMS WordPress

Ottimizzazione tecnica del codice HTML delle pagine del sito

Le attività finalizzate all'ottimizzazione del codice HTML sono opportune in termini di aumento della velocità del sito. La pulizia e la compressione del codice HTML del sito ti aiuteranno a velocizzare notevolmente la visualizzazione delle pagine del sito. Eliminando gli errori visibili nel codice, migliorerai la validità del tuo documento HTML.

Il risultato finale dell'ottimizzazione del codice HTML del sito sarà:

• Caricamento istantaneo delle pagine del sito Web nei browser più diffusi.
• Scansione rapida del contenuto del sito da parte dei robot di ricerca.
• Un codice pulito e valido è il sito con la massima priorità agli occhi dei motori di ricerca.
• Il posizionamento e la visibilità del sito nei risultati di ricerca dei motori di ricerca Google e Yandex aumenteranno in modo significativo.

Ottimizzazione del codice HTML sorgente del sito - riduzione della quantità di codice

L'azione più importante è ridurre il codice della pagina. Il codice sorgente HTML sembra una lunga tela. Molti stili CSS diversi si trovano in punti diversi nella struttura del codice. Il codice contiene commenti, caratteri, spazi e tag non necessari.

All'inizio, devi sbarazzarti dei commenti non necessari: questo è un set di caratteri extra e completamente non necessario. Per il browser e i robot di ricerca, i commenti non hanno alcun significato semantico. Rimuovendoli, ridurrai notevolmente il peso della pagina. Che in uno scomparto aumenterà la velocità di caricamento di un documento.

Pulizia di caratteri non necessari, spazi extra (doppi) e interruzioni di riga. Ti permetterà di ridurre drasticamente la struttura finale del codice del sito. Pertanto, il peso principale della pagina può essere ridotto di 2,5 - 3 volte.

Come risultato di: comprimendo gli spazi e combinando le interruzioni di riga, la struttura del codice html sarà notevolmente compattata.

Un esempio di un piccolo segmento di un anno ottimizzato:

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.

Come puoi vedere, tutti i caratteri, gli spazi e i commenti non necessari sono stati rimossi dal codice. Ciò contribuisce all'allungamento del codice, come in una linea continua. Grazie a questa struttura, il peso della pagina diventa molto minore. Allo stesso tempo, le pagine vengono indicizzate e caricate dai bot il più rapidamente possibile. Naturalmente, fatte salve tutte le misure per ottimizzare il sito.

Rimozione di tag HTML e file di stile non necessari

Il problema più comune di un peso del codice di una pagina elevato può essere costituito da file stilistici CSS inutilizzati e tag non necessari. Questi elementi di codice vengono inseriti anche nel modello della pagina principale.

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

Questo vale anche per i tag non chiusi. Non hanno alcun significato semantico e prendono il posto di cui abbiamo bisogno. Anche i file di stile che non hanno alcun ruolo nella presentazione visiva del sito (non necessari o corrotti) vengono rimossi dalla struttura del codice.

Per velocizzare il caricamento delle pagine del sito:

1. Devi spostare gli stili CSS e gli script JS su file esterni;
2. Organizzare gli elementi principali del design del sito in sprite, quindi inserirli in fogli di stile;
3. Il codice della pagina dovrebbe essere semplice e leggibile.

Correzione di errori nel codice HTML del sito

I motori di ricerca (non molto volentieri) reagiscono ai siti nel codice che presentano errori. Tuttavia, molte risorse TRUST popolari, anche con tali errori, sono chiaramente corrette nei risultati TOP. Anche la pagina principale del popolare Yandex viene controllata con l'aiuto di validator.w3.org, anche il mio sito è superiore negli errori.

Presenta il seguente elenco di errori di validità:

Avviso: intestazione HTTP Content-Security-Policy: politica di sicurezza dei contenuti non valida: l&#039;elenco di origine contiene un&#039;espressione di origine duplicata &quot;https://passport.yandex.ru&quot;. Tutti tranne la prima istanza verranno ignorati. https://yandex.ru/ Errore: lo stile dell&#039;elemento non è consentito come figlio dell&#039;elemento div in questo contesto. (Soppressione di ulteriori errori da questo sottoalbero.) Dalla riga 33, colonna 17689; alla riga 33, colonna 17695 dkov</div><style.docum>

Errore: elemento div non consentito come figlio dell&#039;elemento span in questo contesto. (Soppressione di ulteriori errori da questo sottoalbero.) Dalla riga 33, colonna 18219; alla riga 33, colonna 18260 pe_close&quot;&gt;div class=&quot;desk-notif-card__action-icon&quot;&gt;</div>

Questo è il set minimo di errori che ha la pagina principale del motore di ricerca Yandex (ce ne sono circa 47 in totale).

Ed ecco come appare il controllo validator.w3.org del mio sito:

Errore: un elemento script con un attributo src non deve avere un attributo type il cui valore sia diverso da una stringa vuota, un tipo MIME JavaScript o un modulo. Dalla riga 6, colonna 1; alla riga 6, colonna 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

Come puoi vedere, non pochi))) - solo 21 notifiche di errori e avvisi. C'è qualcosa su cui lavorare.

La validità del codice ha la massima priorità nella promozione del sito web. Correggendo la maggior parte degli errori e degli avvisi del validatore W3C, puoi ottenere un buon successo nell'ottimizzazione tecnica del sito.

Imposta la priorità della versione mobile del sito

Tradizionalmente, i siti Web di prima generazione venivano visualizzati su computer desktop di grandi dimensioni. Oggi, la maggior parte delle persone visita i siti Web da dispositivi mobili come smartphone, tablet e laptop. Pertanto, il tuo sito deve essere adattato per i dispositivi mobili. Inoltre, devi assicurarti che ogni aspetto del tuo sito (ricerca, carrello degli acquisti e pagamento) sia facilmente accessibile da un dispositivo mobile così come lo è da un computer desktop o portatile.

Fai un uso attivo del web caching

Le cache sono aree di archiviazione temporanee in cui i browser salvano copie di file statici per caricare più velocemente le pagine visualizzate di recente, anziché richiedere costantemente lo stesso contenuto tramite HTTP.

I browser possono essere istruiti a memorizzare nella cache gli elementi della pagina Web che non verranno modificati frequentemente dagli sviluppatori. Nelle intestazioni di risposta HTTP, il server host include le istruzioni di memorizzazione nella cache. Coloro che utilizzano frequentemente determinate pagine trarranno vantaggio da tempi di caricamento più rapidi poiché il server invia meno dati al browser.

CDN - alte opportunità del nostro tempo

Le reti di distribuzione dei contenuti (CDN) migliorano la velocità di caricamento dei siti Web memorizzando i contenuti nella cache in molte località diverse in tutto il mondo. I server di cache CDN si trovano solitamente più vicini agli utenti finali rispetto al server di origine o host.

Invece di connettersi direttamente a un server di hosting che può trovarsi a centinaia di chilometri di distanza e connesso a numerose reti autonome, le richieste di contenuto vengono inviate tramite un server CDN. I server CDN possono migliorare notevolmente le prestazioni dei siti web.

Abbrevia le richieste HTTP

In genere, i browser effettuano più richieste HTTP per accedere a varie risorse della pagina come immagini, script e file CSS. Un singolo sito può richiedere centinaia di richieste. Esiste uno scambio bidirezionale tra il browser Web e il server che ospita la risorsa per ogni richiesta, che aumenta il tempo di caricamento della pagina.

Inoltre, la pagina Web potrebbe non caricarsi rapidamente se uno degli host si interrompe. A causa di questi potenziali problemi, ogni pagina dovrebbe avere una quantità minima di risorse caricate. I test di velocità mostreranno anche quali richieste HTTP impiegano più tempo. Gli sviluppatori possono cercare una soluzione di hosting di immagini più veloce se le immagini causano il caricamento lento della pagina.

Ottimizzazione del codice HTML del tuo sito per la SEO

Ottimizzazione del codice HTML ha un effetto benefico sulla maggior parte degli indicatori del sito nel suo complesso. Grazie a una struttura pulita e ottimizzata, la velocità di indicizzazione e caricamento del sito è notevolmente migliorata. Agli occhi dei motori di ricerca il sito diventa migliore, e quindi più visibile nei risultati di ricerca.
I motori di ricerca utilizzano il codice sorgente per capire di cosa tratta il tuo sito. Qualsiasi contenuto di una pagina Web deve essere codificato in HTML in modo che i motori di ricerca possano comprenderlo. I componenti SEO nel codice sorgente includono tag del titolo, meta descrizione, tag del titolo H1, collegamenti interni, testi di ancoraggio, collegamenti nofollow, tag immagine alt e tag canonici. Per visualizzare il codice sorgente, apri la pagina Web e premi "Ctrl + U". Ecco alcuni passaggi che puoi seguire per ottimizzare il codice sorgente del tuo sito web.

Ottimizzazione tag title

Il tag del titolo ha un impatto significativo sul posizionamento del tuo sito nei motori di ricerca. Questo aiuta Google a determinare in che misura la tua pagina web o blog corrisponde a una determinata query. Un title tag ben scritto può far risaltare il tuo sito dagli altri e attrarre facilmente il motore di ricerca.

• Assicurati che tutte le tue pagine web abbiano tag title univoci che descrivano perfettamente le pagine.
• Segui la lunghezza ottimale dei tag title in modo che non vengano tagliati nei risultati di ricerca. 50-60 caratteri funzionano abbastanza bene.
• Assicurati di non utilizzare parole chiave nei titoli. Invece, aggiungi una o due parole chiave significative.

Meta descrizioni uniche

Una meta descrizione è un elemento HTML che riassume il contenuto di una pagina web a beneficio degli utenti e dei motori di ricerca. Appare come uno snippet nei risultati di ricerca sotto il titolo. L'idea alla base delle meta descrizioni è quella di dare ai tuoi lettori un'idea precisa di ciò che offre la tua pagina.

• Evita descrizioni lunghe. La lunghezza ideale è una descrizione contenente tra 130 e 156 caratteri.
• Usa parole chiave pertinenti nella descrizione.
• Se possibile, includi un invito all'azione.

Lavorare con i dati strutturati

Lo scopo dei dati strutturati è quello di aggiungere più dettagli al tuo snippet per renderlo uno snippet in primo piano nei risultati di ricerca. Il codice deve essere contrassegnato correttamente per aumentare le tue possibilità di classificarti più in alto. Schema.org è il più popolare quando si tratta di moduli di dati strutturati per i motori di ricerca.

• L'uso di "ambito elemento" nel tag div consente ai motori di ricerca di sapere che tutte le informazioni presentate in una sezione si riferiscono allo stesso argomento.
• Il termine tipo di elemento definisce l'argomento di ciascuna sezione.
• "item prop" riporta informazioni aggiuntive sulla sezione

etichetta H1

Il tag H1 viene utilizzato per designare una parte di testo come intestazione principale della pagina. Il contenuto qui elencato dovrebbe descrivere brevemente di cosa trattano le pagine. I tag H1 dovrebbero essere informativi e coinvolgenti, incoraggiando l'utente a continuare a leggere i tuoi contenuti.

• Idealmente, dovrebbe contenere tra 20 e 70 caratteri.
• Considera l'intento dell'utente
• Includi la tua parola chiave principale, preferibilmente parole chiave a coda lunga, per migliorare le prestazioni di ricerca e il traffico web.

Puoi anche aggiungere sottotitoli a partire da H2 fino a H6. Per migliorare la leggibilità, assicurati che il testo che segue il sottotitolo non sia troppo lungo, preferibilmente tra le 250 e le 300 parole.

Testo alternativo per le immagini

Per l'e-commerce e altri siti Web, il tag alt è un importante tag HTML. Indica al motore di ricerca di cosa tratta l'immagine. Se il file immagine non può essere caricato, al posto dell'immagine verrà visualizzato il testo alternativo. Buone immagini con testo alternativo appropriato rendono le pagine attraenti per i crawler e per gli utenti e migliorano l'esperienza utente (UX).

• Assicurati che la descrizione sia breve e specifica.
• Usa le parole chiave, ma non riempirle
• Tagga le immagini relative al tuo marchio, non le immagini utilizzate a scopo decorativo.

Tag URL canonico

Questo è un potente strumento per identificare i contenuti duplicati. I tag URL canonici vengono utilizzati principalmente per i siti di e-commerce, poiché potrebbe essere necessario creare pagine diverse per i tuoi prodotti.

L'aggiunta di questi tag a ciascuna variante di pagina aiuterà i motori di ricerca a riconoscere la pagina principale/di origine da un gruppo di pagine con URL simili.

Principali conclusioni

• Sforzati di mantenere le cose semplici ed efficienti. Un sito Web non dovrebbe essere riempito con troppi elementi fantasiosi. Deve solo essere pertinente ed efficace per la visione del tuo marchio e dei tuoi clienti. Puoi raggiungere questo obiettivo semplicemente concentrandoti sulle funzionalità web richieste.
• Esplora le strategie di ottimizzazione per vari elementi web. Diversi elementi web richiederanno diverse strategie di ottimizzazione. Assicurati di includere queste modifiche in tutti gli elementi in modo che le funzionalità del tuo sito web funzionino in modo efficace.

Ottimizzazione tecnica del codice HTML del sito Web - popolari plug-in CMS WordPress

Diamo una rapida occhiata a un paio di plugin di WordPress. Che ti aiuterà a ripulire e comprimere il codice HTML sul CMS di WordPress. Grazie a questi plugin, puoi aumentare drasticamente la velocità del sito, oltre a ripulire tutto ciò che non è necessario dal codice del sito.

Ottimizzazione automatica del plug-in:

• Ottimizzazione e compressione del codice HTML del sito (eliminando spazi e commenti).
• Ottimizzazione CSS e JS: consente di combinare gli stili in un unico file e inserirli piè di pagina site, così come gli script js.
• Ha opzioni di ottimizzazione aggiuntive.

Cancella plug-in:

• Combina le funzionalità di molti plugin ed è costituito da moduli che possono essere disabilitati.
• Ottimo per aumentare la velocità del sito web.
• Disabilita alcuni script e funzionalità non necessarie in WordPress.
• Ha una vasta gamma di strumenti per lavorare con codice HTML, file CSS e JS del tuo CMS.

Combinando questi plugin, otterrai un'eccellente ottimizzazione del sito WordPress. Assicurati di usarli, sono sicuro che ti saranno molto utili.

Leggendo questo articolo:

• File htaccess - come creare un file .htaccess istruzioni per principianti
• Gzip compression js / css / accelerazione del sito html - come abilitare in .htaccess

Grazie per aver letto: AIUTO SEO | NICOLA.TOP