Un sito da zero

La pagina web perfetta

Sommario:
Questa pagina è parte della guida Come creare un sito da zero
Per prima cosa, iniziando a scrivere questa guida, vorrei farvi conoscere l'incubo di tutti i webmaster e che risponde al nome di "Validatore". Cos'è il validatore? Il validatore è lui >>>> Markup Validation Service. Un servizio online per la verifica del codice html e che segue le direttive della versione più recente del codice html stesso. 
In pratica, incollando il codice di una pagina nello spazio predisposto e cliccando poi su "Check", il sistema evidenzia gli eventuali errori presenti.

Detto questo, come si può fare per ottenere questa agognata risposta dal validatore?

"Document checking completed. No errors or warnings to show."

Vediamo, insieme di costruire la "pagina perfetta", quella, cioè che rispetta tutte le regole pur contenendo tutte le funzionalità che servono. Naturalmente non ci baseremo solo sul responso del validatore, ma ci preoccuperemo anche di ottimizzare il codice per avere una buona velocità di caricamento e affichè la navigazione sia scorrevole, nonchè perchè tutto il sito sia conforme alle norme di legge.

Faremo una specie di "radiografia" di una pagina web esaminandola punto per punto, dall'alto al basso e aggiungendo spiegazioni e guide dove necessario.

NOTA: per scrivere in linguaggio html utilizzando la corretta sintassi, la cosa più semplice è utilizzare un editor di testo per sviluppatori. Il mio preferito è Froala, che potete usare sia online, sia scaricandolo sul vostro computer.

Apertura della pagina web

Premessa: notate che ogni informazione viene racchiusa tra < e >.

Tutte le pagine web sono introdotte dal:

<!DOCTYPE html>

Che significato ha? 
È la "Document Type Declaration" e serve ad indicare al browser quale versione del linguaggio HTML (HyperText Markup Language) stiamo usando. Dall'avvento di HTML5, è sufficiente scrivere, appunto, DOCTYPE html, senza necessità di aggiungere altro.
Sotto al doctype, troviamo il tag <html> che può avere alcuni attributi di cui il primo è la dichiarazione della lingua del sito:

<html lang="it">

Se utilizzate i dati strutturati, o microdati (poi vedremo cosa sono) è necessario anche aggiungere l'autorizzazione per gli stessi, così:

<html lang="it" itemtype="http://schema.org/WebPage">

La categoria "WebPage" piuttosto che un'altra, dipende dalla tipologia della pagina stessa. Ci sono innumerevoli categorie e sottocategorie che possono essere inserite. Ecco l'elenco completo: http://schema.org/docs/full.html.
Ed ecco che potete leggere la prima guida specifica:
"I dati strutturati".
Proseguiamo:

I metatag

I metatag servono per fornire informazioni ai browser e ai motori di ricerca. Ci sono molti tipi di metatag, alcuni opzionali, altri importanti e fondamentali. Vediamo quali.

NOTA: è molto importante che alle voci equivalenti corrispondano i medesimi contenuti nei diversi metatag, altrimenti potrebbero crearsi dei conflitti. Per esempio, se alla voce "title" del metatag principale del sito scrivete "Guida", dovete scrivere la stessa cosa identica anche nel metatag dei social che si riferisce al title.

I metatag importanti

<meta charset="utf-8">  indica il set di caratteri che viene utilizzato. È sempre consigliato usare il set utf-8, perchè semplifica la gestione dei caratteri stessi.

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> serve a forzare Internet Explorer a mostrare la pagina nel modo, per lui, più recente possibile e a utilizzare la tecnologia di rendering di Google Chrome.

<meta name="viewport" content="width=device-width, initial-scale=1"> serve per l'ottimizzazione sui dispositivi mobili. Il metatag dice al browser di utilizzare, come larghezza della pagina, la larghezza effettiva del dispositivo.

<meta name="description" content="qui mettete la descrizione"> descrizione del contenuto della pagina che appare nei risultati di ricerca. Lunghezza consigliata circa 155 caratteri al massimo e 100 come minimo (spazi compresi).

<meta name="author" content="qui mettete il nome dell'autore"> nome dell'autore della pagina.

Il tag <title>

Con i primi metatag troviamo anche il tag "title", che contiene il titolo della pagina. 

<title>Titolo pagina</title>

Dato che ci troviamo nella zona head, che è la zona del codice non visibile nel browser, si può immaginare che questo non sia il titolo della pagina che appare insieme al contenuto, ma bensì il titolo che appare, in alto, nella scheda aperta dal browser ed è anche il titolo che viene letto e indicizzato dai motori di ricerca.
Il tag title è molto importante per l'indicizzazione, perchè è la prima chiave di ricerca e l'informazione tramite la quale i motori di ricerca interpretano i contenuti del sito web.
Il titolo non deve essere troppo lungo. È consigliato restare sui 60 caratteri al massimo per evitare che venga troncato.

Il link rel canonical

Il link rel canonical serve a specificare la versione preferita di una pagina web e a prevenire problemi di contenuto duplicato all'interno del medesimo dominio.

<link rel="canonical" href="https://www.nomedominio.it"/>

Per approfondire: https://support.google.com/webmasters/answer/139066

La favicon

Sempre nella zona head, troviamo anche il collegamento per la favicon.

<link rel="icon" href="img/favicon.ico"/>

La favicon è la piccolissima icona che si vede di fianco al titolo della pagina nella scheda del browser. Per come creare la favicon, vi rimando alla guida "Come creare una favicon per il sito".

Il metatag noindex:

<meta name="robots" content="noindex">
Il metatag noindex serve per comunicare ai motori di ricerca che non volete che una determinata pagina venga scansionata e, quindi, indicizzata.
Su pagine singole e per questo scopo, fa le veci del file robots.txt.

Il controllo della cache:

Il controllo della cache è importante e richiesto per la valutazione della performance del sito. La cache è la memoria del browser. Nella cache vengono memorizzate le risorse caricate al fine di velocizzare la navigazione senza doverle ricaricare ad ogni nuovo accesso ad un determinato sito web. Precedentemente si utilizzavano i metatag (Cache-Control o expires) per impostare la cache, ma sono stati deprecati con l'avvento di HTML5.

Il modo migliore e universalmente riconosciuto è quello di utilizzare gli "http headers", cioè messaggi scambiati tra browser e server. Gli "http headers" sono regole particolari scritte nel file ".htaccess".
In particolare, per il controllo della cache, vengono implementate come in  questo esempio:
<IfModule mod_headers.c>

<FilesMatch "\.(html)$">
Header set Cache-Control "max-age=0, no-cache, no-store, public"
Header set Pragma "no-cache"
Header set Expires 0
</FilesMatch>

<FilesMatch "\.(jpg|jpeg|png|gif|js|css)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

</IfModule>

Come vedete, la prima regola imposta a zero la durata della cache per i file html. Sono considerati diversi tipi di scrittura per rendere la regola valida per tutti i browser.
La seconda regola imposta ad un mese la durata della cache per altre estensioni di file.
Potete aggiungere, togliere, o modificare le regole secondo le vostre esigenze, come pure le estensioni dei file.
Il tempo di permanenza deve essere espresso in secondi.
Esempio:

86400 = 1 giorno
604800 = 1 settimana
2592000 = 1 mese
7257600 = 3 mesi
14515200 = 6 mesi
31536000 = 1 anno

max-age=0 equivale alla non archiviazione in cache.

La compilazione di un file .htaccess richiede competenza. Raccomando, quindi, di consultare l'assistenza tecnica del servizio di hosting per avere supporto.

NOTA: configurando la gestione della cache per il file.css, dovete considerare che le eventuali modifiche apportate alle regole non verranno visualizzate fino alla scadenza del tempo impostato. Trovate una soluzione all'inconveniente nella guida: Forzare la visualizzazione degli aggiornamenti

I metatag per i social network

L'importanza dei social network non è da sottovalutare se volete far conoscere il vostro sito web e aumentare le visite.
È possibile fornire indicazioni ai social affinchè la condivisione degli articoli avvenga con il trasferimento dei dati corretti.
Ci sono diversi tipi di metatag che possono essere implementati a questo scopo, con sintassi differente. Io vi indicherò i principali:
<meta property="og:type" content="article" />
<meta property="og:title" content="titolo della pagina" />
<meta property="og:description" content="breve descrizione del contenuto" />
<meta property="og:url" content="indirizzo della pagina" />
<meta property="og:image" content="indirizzo dell'immagine da visualizzare nei post" />
<meta property="article:author" content="nome dell'autore" />

Questi metatag vengono letti e interpretati dai principali social.
Il primo metatag "og:type" indica il tipo di contenuto della pagina. Nell'esempio ho messo "article", che è quello maggiormente utilizzato, ma, se volete essere più specifici, esiste un elenco di voci supportate.
Alcuni esempi tra quelli più popolari: NOTA: Per la home page, dovete mettere "website".

In aggiunta, si possono inserire dei metatag specifici per Twitter:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="titolo della pagina">
<meta name="twitter:description" content="breve descrizione del contenuto">
<meta name="twitter:image:src" content="indirizzo dell'immagine da visualizzare nel tweet">

NOTA: I dati relativi a title e description, inseriti per i social, devono corrispondere a quelli inseriti per i motori di ricerca.
Per il tag title è consigliato non superare i 60 caratteri, per il tag description è consigliato non superare i 200 caratteri.
Le immagini indicate nei metatag per i social, devono avere dimensioni minime di 600 x 315 px (consigliato 1200 x 627 px).
Facebook predilige le immagini con estensione jpg. Se, nei metatag, indicate un'immagine con estensione png e nei contenuti della pagina è presente anche un'immagine, con stesse caratteristiche di dimensione, ma con estensione jpg, facilmente Facebook mostrerà quest'ultima nei post, anche se avete impostato la prima.
Non è necessario che l'immagine impostata sia visivamente presente nei contenuti della pagina, potete indicarne il percorso da una cartella del sito.
Queste sono le caratteristiche richieste da Facebook, che è il più esigente, ma dovrebbero accontentare tutti, anche se ogni social ha le sue regole personali e specifiche.

Solo per informazione, Instagram vuole immagini quadrate (600 x 600), ma non fornisce metatag specifici e nemmeno la possibilità di implementare un pulsante di condivisione. Il problema, quindi, non si pone a livello di sito web.

È possibile effettuare la verifica dei metadati, dopo la pubblicazione, tramite questi strumenti:


https://developers.facebook.com/tools/debug
https://cards-dev.twitter.com/validator
https://developers.pinterest.com/tools/url-debugger/
https://www.linkedin.com/post-inspector/inspect

NOTA: Dopo la prima validazione in FB, per aggiornare i dati bisogna cliccare su "Esegui lo scraping di nuovo" (anche più volte), oppure, è possibile utilizzare lo "strumento di invalidamento batch" per aggiornare le informazioni di più URL contemporaneamente. Pinterest e Twitter richiedono espressamente la validazione per abilitare la funzionalità dei metatag. Il validatore di Pinterest non valida la home page del sito. Linkedin richiede una descrizione di almeno 100 caratteri.

Pagine in più lingue

Se create versioni in due o più lingue di una stessa pagina, è bene segnalare a Google che tali versioni si riferiscono alla stessa pagina tradotta. Questo offrirà una migliore esperienza di navigazione agli utenti e favorirà il posizionamento della pagina nella ricerca.
Ora, mettiamo che abbiate una pagina del vostro sito, in italiano, che chiameremo genericamente "pagina" e poi abbiate la stessa pagina tradotta in inglese che chiameremo genericamente "page". La segnalazione si effettua inserendo i collegamenti reciproci in entrambe le pagine.

Nella pagina in italiano metterete:

<link rel="alternate" hreflang="it" href="https://www.nomesito.com/pagina" />
<link rel="alternate" hreflang="en" href="https://www.nomesito.com/page" />

Nella pagina in inglese metterete:

<link rel="alternate" hreflang="en" href="https://www.nomesito.com/page" />
<link rel="alternate" hreflang="it" href="https://www.nomesito.com/pagina" />

NOTA: È sconsigliato utilizzare il link rel canonical nelle pagine che contengono hreflang.

Per approfondimento: https://support.google.com/webmasters/answer/189077?hl=it

I link hreflang nella sitemap xml

I link hreflang possono essere posti anche all'interno della sitemap xml, in questo modo:
<url>
<loc>http://esempiodominio.it/</loc>
<xhtml:link rel="alternate" hreflang="it" href="http://esempiodominio.it/" />
<xhtml:link rel="alternate" hreflang="de" href="http://esempiodominio.it/de/" />
<xhtml:link rel="alternate" hreflang="es" href="http://esempiodominio.it/es/" />
<xhtml:link rel="alternate" hreflang="en" href="http://esempiodominio.it/en/" />
</url>

Approfondimento sitemap xml: https://support.google.com/webmasters/answer/183668?hl=it

Il tag "noscript"

Può capitare che nel browser di un visitatore sia stato disabilitato javascript. In questo caso, molte funzionalità del sito potrebbero non risultare disponibili, l'aspetto grafico potrebbe essere alterato, o, addirittura, la navigazione stessa diventare impossibile. Se il vostro sito dipende in maniera stretta da javascript, potete utilizzare il tag <noscript> per informare i visitatori, o per inserire regole di stile particolari, o, ancora, per sostituire dei contenuti. Per esempio, nel caso di uno slideshow basato su javascript, potreste sostituirlo con un'immagine statica. Ciò che viene inserito tra questi tag, sarà attivato solo ed esclusivamente nel caso in cui il browser dell'utente abbia javascript disabilitato.

L'esempio che segue mostra un messaggio di avviso:
<noscript><div style="text-align:center">Attenzione! JavaScript &egrave; disabilitato nel tuo browser.<br>Per poter navigare su questo sito lo devi attivare. Grazie</div></noscript>

In HTML5, se il tag contiene codice html, deve essere posizionato nella zona <body> del codice della pagina dove volete che il suo contenuto appaia. Se, invece, contiene solo regole di stile può essere posto sia nella zona <head> che nella zona <body>.
È supportato da tutti i browser.

@media print e le impostazioni per la stampa

Argomento spesso sottovalutato.
Se volete dare agli utenti la possibilità di stampare (o salvare come pdf) una pagina del vostro sito web in maniera corretta, dovete provvedere ad inserire, nel foglio di stile, le impostazioni necessarie.
Tramite "@media print" è possibile decidere quali parti della pagina escludere dalla stampa e anche eliminare e/o modificare le impostazioni di stile che possono impedire, o alterare, l'anteprima di stampa (es: float, flex, pseudo-elements ecc). In alcuni casi, ad esempio, parti della pagina potrebbero non essere visualizzate.
Ogni browser ha le proprie opzioni per stampare qualunque pagina web e offre la possibilità di visualizzarne l'anteprima per verificare che il risultato sia corretto. In questo modo, potete vedere e decidere cosa deve essere modificato. Il consiglio è di verificare il risultato su diversi browser, perchè potrebbe essere molto differente e bisogna ottenere che sia ugualmente corretto su ognuno.
Di seguito, un esempio di implementazione di alcune regole tramite @media print:
@media print {
    body {
     height: auto;
     display: block;
     overflow-y: visible;
    }
    .element {
     break-inside: avoid;  (regola per impedire che un contenuto venga stampato diviso su due pagine)
   }
    .element:after{
      display:none;    (escludiamo uno pseudo elemento)
    }
    .content-container {
      display: block;  
    }
    nav, footer, .doc, form {
      display: none;    (escludiamo gli elementi da non stampare)
    }
  }

Potete inserire questo tipo di regole nel foglio di stile in coda alle media queries.

Il collegamento al foglio di stile

È ora di inserire il collegamento al foglio di stile del sito (css) che, come avete già appreso, contiene tutte le impostazioni che determinano l'aspetto grafico.
Dato che contiene tutte le informazioni necessarie per definire l'aspetto del sito, il suo ruolo è fondamentale e indispensabile.
Vediamo la seconda guida specifica:
"Il foglio di stile"
I fogli di stile possono essere anche più di uno. Se servono per il layout del sito, devono essere messi in alto, per primi, dopo i metatag, affinchè vengano letti e caricati immediatamente dal browser.
Altri fogli di stile, invece, che non devono necessariamente essere caricati subito, possono essere posti in basso, prima della chiusura di body, in modo da non rallentare il caricamento della pagina.
Se il vostro foglio di stile principale è molto lungo, potete spezzarlo e crearne due. In questo modo, caricherete in alto quello che contiene le regole che servono alla visualizzazione della prima schermata del sito e in basso quello che contiene le regole utili solo dopo lo scorrimento della pagina. Anche questo è un modo per ottenere risultati migliori con il test di velocità, ma è un'operazione da eseguire con molta logica.

Il foglio di stile si carica con la stringa:

<link rel="stylesheet" type="text/css" href="file.css" />

dove al posto di "file" metterete il nome del file e il percorso nel caso si trovasse in una sottocartella.
Tra i fogli di stile è importante mettere anche quello riguardante il banner per il consenso dei cookie per essere in regola con la Cookie Law europea. Anche questo deve essere posto in alto.
E siamo alla terza guida specifica:
"Come adeguare il sito alla Cookie law"

Il collegamento ai file javascript

Ora che avete implementato i fogli di stile, dovete implementare i file js (javascript). I file js possono essere richiamati nella zona head, oppure nella zona body. A questo scopo bisogna distinguere due categorie:
  1. Script che servono alla corretta visualizzazione del sito e alle funzionalità immediate.
  2. Script secondari che servono per differenti funzionalità.
La prima categoria di script deve necessariamente essere richiamata nella zona head per poter essere caricata e letta subito dal browser.
Il richiamo della seconda categoria, invece, verrà messo subito prima della chiusura del tag body, in modo da non rallentare inutilmente il caricamento della pagina.
Ecco, quindi, che nella zona alta metteremo, per esempio, il richiamo dello script per il consenso dei cookie.
Tutti i file esterni js vengono richiamati con una stringa come questa:

<script src="file.js"></script>

Dove al posto di "file" metterete il nome del file e il percorso nel caso si trovasse in una sottocartella.
Oltre agli script specifici per il funzionamento del sito web ci sono alcuni script utili per risolvere determinati problemi di visualizzazione che potrebbero verificarsi con browser minori, o con browser datati, o non aggiornati. Nella maggior parte dei casi ci si riferisce a Internet Explorer 9 e precedenti.
Vediamo per esempio:

html5shiv.js che serve a permettere il riconoscimento degli elementi di html5 nelle vecchie versioni di IE.
respond.js  per le vecchie versioni di IE che non supportano le "media queries" (di cui parlo nella guida specifica per il foglio di stile).

Questi, per svolgere la loro funzione, devono essere richiamati nella pagina come gli altri script, ma per fare in modo che il browser li carichi solo se necessario, vengono implementati in questo modo:

<!--[if lt IE 9] >
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Gli indicatori <!--   --> racchiudono normalmente i commenti, vale a dire parti di testo che non devono essere lette dal browser, ma che servono unicamente per dare indicazioni allo sviluppatore, o a separare parti di codice. In questo caso, invece e con questa particolare sintassi, servono, appunto per comunicare al browser di leggere il contenuto solo in presenza delle condizioni indicate [if It IE 9], cioè versioni di IE precedenti alla 9.

NOTA: I file js e css esterni costituiti da librerie (lunghe stringhe di codici preconfezionati) possono essere materialmente scaricati come file e messi nel sito, oppure, cosa più semplice, possono essere richiamati da servizi esterni CDN (Content Delivery Network - Rete per la consegna di contenuti). L'uso dei CDN è consigliato per una maggiore velocità di caricamento e anche per una questione di sicurezza. Le librerie, infatti, oltre d essere pesanti, a causa della loro complessità, sono spesso bersaglio di attacchi da parte di hacker che trovano un campo ideale in cui nascondere e confondere spyware, malware e virus.
Potete cercare i file in CDN che vi servono tramite questo motore di ricerca: https://cdnjs.com/
In alternativa, anche Google offre alcune librerie in CDN: https://developers.google.com/speed/libraries/
Oppure, semplicemente, digitate il nome della libreria nella barra di ricerca del browser, seguito da CDN e guardate i risultati.
Da segnalare che il collegamento in CDN con file "Prefix Free" può causare problemi a chi utilizza gli strumenti per sviluppatori del browser.

La zona dei contenuti visibili, il "body"

E siamo così arrivati alla sezione "body" del sito web. Quella, cioè che ospita tutti i contenuti visibili.

Una delle prime cose da inserire, se le volete implementare, sono le "breadcrumbs", di cui parlo nella guida relativa ai "Dati strutturati".
Seguiranno tutti i contenuti che desiderate. La cosa a cui dovete fare attenzione è la chiusura di tutti i contenitori che aprite, che siano div, oppure span, oppure paragrafi, titoli ed altro. Se non chiudete i contenitori, le impostazioni specifiche date si rifletteranno su tutto il contenuto a seguire creando errori visibili.

Fa parte del contenuto visibile anche il "footer" (piè di pagina). Il footer è spesso riservato ai contenuti che si ripetono in tutte le pagine, come i link ai documenti, i bottoni di condivisione (se non diversamente implementati), il copyright ecc..
Il footer è racchiuso tra i suoi tag <footer></footer>.

Eccoci, infine, in fondo alla nostra pagina web. Prima di chiudere il body, come già detto, potete inserire il richiamo per tutti quei file js e css che non sono indispensabili per l'aspetto del sito e che, quindi, possono essere caricati per ultimi. Tra questi ci può essere la libreria JQuery
Prima di tutto, nella terminologia informatica, per libreria si intende un file che contiene una grande quantità di regole "preconfezionate" e utili al funzionamento di diverse applicazioni.
La libreria JQuery è senz'altro la più conosciuta e utilizzata. Dato che contiene moltissime informazioni, è, però, puttosto pesante e per questo motivo è saggio richiamarla in fondo al codice della pagina.
Anche la libreria JQuery può essere scaricata materialmente, o richiamata con CDN. Potete trovare tutte le versioni andando sul sito ufficiale "https://code.jquery.com/jquery/".
Dopo aver scelto la versione che volete implementare, vi verrà fornito il codice di implementazione, simile a questo:

<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>

....contenente anche gli attributi di integrità.

Se decidete di utilizzare la libreria JQuery, il consiglio è quello di continuare a scegliere, in futuro, applicazioni basate su questa libreria, che si tratti di slideshow, o di altro. Questo per evitare di caricare ulteriori script sul sito se questo può essere evitato.

La velocità di caricamento

Argomento molto dibattuto e di non facile interpretazione. Prima di tutto bisogna sottolineare che il risultato dei test di velocità è suscettibile di sensibili differenze a seconda del tool utilizzato per effettuarlo. Detto questo, la velocità di caricamento delle pagine è sicuramente importante, ma il mio consiglio è di non perderci il sonno per recuperare pochi centesimi di secondo, perchè i fattori che possono influenzare la velocità sono davvero infiniti e spesso impossibili da gestire, dato che alcune cose sono necessarie e imprescindibili per il funzionamento della pagina stessa.
I contenuti delle pagine e anche la gerarchia possono influire sul risultato. A parità di caratteristiche, una sottopagina può avere una valutazione inferiore rispetto ad una pagina principale.
Se avete fatto tutte le cose per bene e, dai risultati dei test, la velocità di caricamento risulta buona, state sereni.

Importante è, sempre e per tutti gli aspetti, l'ottimizzazione delle pagine. Google ci fornisce uno strumento molto sofisticato che, oltre a fornire una valutazione, indica tutti gli errori evitabili e i relativi rimedi applicabili:

https://developers.google.com/speed/pagespeed/insights/?hl=it
e quando è contento Google .... siamo a posto.
Detto questo, le cose che ancora potete e dovete fare, per ottimizzare la performance delle pagine sono queste....

Comprimere le immagini

È già stato detto nel corso della guida, ma lo ripeto: comprimere le immagini è non solo consigliato, ma indispensabile. Tenete, quindi, a portata di mano un buon programma per la compressione (es: https://tinypng.com) e abituatevi a comprimere ogni immagine, anche la più piccola, prima di caricarla.

Minimizzare i codici:

Se provate ad eseguire un test per misurare la velocità di caricamento di una pagina, vedrete che, tra i vari consigli per migliorare le prestazioni, vi verrà dato anche quello di minimizzare i codici (CSS, JS, HTML). Cosa significa? Significa che i codici possono essere compressi, vale a dire scritti su una stessa riga eliminando spazi inutili. Naturalmente esistono dei tools online per ottenere questo risultato.
Stesso discorso vale per il codice HTML delle pagine.

Infine ..

Il caricamento di risorse esterne via iFrame, come i video di YouTube, può influire non poco sulla velocità della pagina. Utilizzando un buon script per il blocco dei cookie (come quello che offro ai membri della "Membership"), si ottiene il duplice risultato di mettersi in regola con la normativa e anche di caricare le risorse esterne, come gli iFrame, dopo il consenso. In questo modo non viene influenzato negativamente il test della performance.

Conclusione

Per avere una pagina perfetta e che restituisca l'agognato responso da parte del validatore, dovete ricordare queste cose:
  1. Ogni elemento contenitore deve avere il suo tag di chiusura.
  2. Ogni immagine deve avere il tag ALT (leggi anche I contenuti del sito).
  3. Il linguaggio di markup utilizzato deve rispettare le direttive stabilte dal W3C (World Wide Web Consortium).
  4. Il caricamento delle risorse esterne deve essere ottimizzato ove possibile.
Le cose che il validatore non dice e che sono comunque fondamentali per un buon risultato e una buona indicizzazione sono:
  1. Il codice deve essere pulito, semplice e ordinato.
  2. Gli script devono essere limitati a quelli essenziali per non appesantire la pagina.
  3. Ogni elemento della pagina deve essere posizionato nel modo migliore.
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Elenco argomenti di questa guida:
Altro di interesse

Leggi anche: Un sito già pronto per te

Torna alla pagina principale:Creare un sito da zero ->>
Continua con: Pubblicizzare e ottimizzare il sito con buonsenso