Home -» Webdesign -» La pagina perfetta

La pagina web perfetta

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti web

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, inserendo l'url di una pagina, oppure incollandone direttamente il codice 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."
Nota: se i filtri di sicurezza impediscono la scansione, si può provare con questa versione del validatore: https://validator.w3.org/nu/

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.

È sottinteso che il risultato suddetto può essere compromesso da determinate funzionalità necessarie per ottenere altri vantaggi importanti. Per esempio il caricamento di elementi in "Lazy loading" (vedi più avanti). In questo caso, il validatore segnalerà un'anomalia che modificherà il risultato pur non essendo un errore reale.
Chiarito questo, 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.
Se volete, potete scaricare la mia versione per desktop semplificata e ottimizzata per l'uso.

Dichiarazione di apertura della pagina web

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

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, affinchè la codifica avvenga correttamente.. Dall'avvento di HTML5, è sufficiente scrivere, appunto, <!DOCTYPE html>, senza necessità di aggiungere altro.
Sotto alla dichiarazione di apertura, 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="https://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:
schema.org

Ed ecco che potete leggere la prima guida specifica:
"I dati strutturati".

Proseguiamo:

I meta tag

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

I meta tag 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.

<meta name="viewport" content="width=device-width, initial-scale=1"> serve per l'ottimizzazione sui dispositivi mobili. Il meta tag 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 da 120 caratteri a 158 caratteri (spazi compresi).

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

Il tag title

Con i primi meta tag 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: Consolidate duplicate URLs

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 e per le regole avanzate, vi rimando alla guida "Come creare una favicon per il sito".

I meta tag robots

Il meta tag noindex:

<meta name="robots" content="noindex">

Il meta tag noindex serve per comunicare ai motori di ricerca che non volete che una determinata pagina venga indicizzata.

Differenza tra disallow in robots.txt e meta tag noindex

La regola "disallow" posta nel file robots.txt., applicata ad una specifica pagina, indica ai motori di ricerca che quella pagina non deve essere scansionata. Se la pagina, però, è già indicizzata, continuerà ad esserlo, come pure se è linkata da altri siti web.

Il meta tag noindex, invece, aggiunto direttamente nella zona <head> della pagina, indica ai motori di ricerca che quella pagina non deve essere indicizzata e che, se presente, deve essere rimossa dagli indici.

Il meta tag per gli snippet:

Citazione:
"Da ottobre 2019, Google offre più opzioni per il controllo sugli snippet nei risultati di ricerca. Ciò è in parte dovuto alla direttiva europea sul copyright, che è stata implementata per la prima volta dalla Francia con la sua nuova legge sul copyright. Fondamentalmente, questa legislazione riguarda già tutti i proprietari di siti web, perchè Google non mostra più snippet (testo, immagine o video) dal tuo sito agli utenti in Francia a meno che tu non scelga di utilizzare i loro nuovi meta tag robots. Se questo ti riguarda, la soluzione rapida è quella di aggiungere il seguente meta tag a ogni pagina del tuo sito per dire a Google che non vuoi restrizioni sui tuoi snippet."

<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">

Per altri meta tag robots e per maggiori informazioni, visita la pagina:
https://ahrefs.com/blog/meta-robots/#how-to-set-up-x-robots-tag

Il meta tag "noimageindex"

Questo meta tag indica che le immagini contenute nella pagina non devono essere indicizzate.

<meta name="robots" content="noimageindex">

Il meta tag "notranslate"

Questo meta tag dice al browser che la pagina non deve essere tradotta tramite il traduttore automatico.

<meta name="google" content="notranslate">

Il meta tag "refresh"

Questo metatag serve per il redirect, cioè reindirizza il visitatore ad un'altra pagina indicata.

<meta http-equiv="refresh" content="0;url=http://www.example.com">

Il numero 0 indica che il redirect deve essere immediato, cambiando il numero, si imposta un ritardo in secondi.

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 meta tag (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.
ATTENZIONE! Se le risorse statiche sono servite da Nginx, non è possibile modificare il "max-age" attraverso il file ".htaccess" in quanto questo fa riferimento ad Apache. In questo caso, bisogna operare sulle impostazione "Expire" del server per i file statici.

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

I meta tag 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 meta tag che possono essere implementati a questo scopo, con sintassi differente. Io vi indicherò i principali:

Questi meta tag vengono letti e interpretati dai principali social.
Il primo meta tag "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:

website
article
blog
book
game
movie
food
city
country
actor
author
politician
company
hotel
restaurant

NOTA: Per la home page, dovete mettere "website".

In aggiunta, si possono inserire dei meta tag specifici per Twitter:

NOTA: Per il tag title è consigliato non superare i 60 caratteri, per il tag description è consigliato non superare i 200 caratteri.
Le immagini indicate nei meta tag 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 meta tag, 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 meta tag 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:

Debugger di condivisione
Twitter Card Validator
Post Inspector

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.
Per aggiornare un'immagine già validata, mantenendone lo stesso nome, bisogna aggiungere nell'url l'indicazione che si tratta di una nuova versione della stessa immagine, in questo modo: ... .jpg?2
Aggiornamento: Pinterest non richiede più la validazione e il validatore è stato messo fuori uso.
Anche dopo la validazione, può essere necessario ripetere l'atto di condivisione su Twitter per veder apparire l'immagine.
Linkedin richiede una descrizione di almeno 100 caratteri.
Pinterest mette a disposizione un meta tag per la verifica del dominio e la conferma di proprietà del sito. Aggiungendo questo meta tag, Pinterest mostrerà l'URL completo del sito sul profilo e permetterà agli utenti di Pinterest di avere maggiori informazioni:
https://help.pinterest.com/en/business/article/claim-your-website#section-12101

Meta tag fb per più lingue

Tramite meta tag specifici, è possibile specificare più lingue alternative in cui rendere disponibile i dati a seconda della lingua usata dall'utente su facebook.
I meta tag sono questi:

In questo caso, abbiamo indicato l'italiano come lingua principale e abbiamo autorizzato la traduzione in inglese, francese e spagnolo.

Il meta tag per il "refresh"

Questo metatag provoca il reindirizzamento ad un'altra pagina indicata.
Il reindirizzamento può essere immediato, oppure avvenire dopo il numero di secondi impostato nel valore del parametro "content".

<meta http-equiv="refresh" content="0;https://www.nomesito.com/page">

Il meta tag per la thumbnail

Parliamo dell'immagine in miniatura che appare nei risultati di ricerca.
Per indicare a Google l'immagine preferita, possiamo usare questo metatag.

<meta name="thumbnail" content="https://www.nomesito/img.jpg" >

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" >

Per approfondimento: Guida di Search Console NOTA: Se si usano questi tag, non bisogna inserire il link rel canonical.
Non dimenticate di indicare nel tag html di apertura la lingua corretta della pagina. Es: <html lang="en">

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>

È necessario aggiungere questa indicazione nell'header della sitemap:

xmlns:xhtml="http://www.w3.org/1999/xhtml"

Approfondimento: Guida Search Console

Pagine con alcune frasi in lingua differente

Se in una pagina volete mettere una o più frasi in un'altra lingua, dovete indicare a Google di quale lingua si tratta racchiudendo la frase in un contenitore (div, p, span).
Per esempio:
<span lang="en">Text in english</span>

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:

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>.
ATTENZIONE: il contenuto del tag noscript deve essere scritto su una sola linea. Esempio:

È 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, tuttavia è consigliato, ove possibile, raccogliere le regole in un solo foglio al fine di avere un unico caricamento.
Il collegamento al foglio di stile principale, di regola, viene messo in alto, nella zona head, affinchè venga letto e caricato immediatamente dal browser, ma è possibile mettere in basso, prima della chiusura di body, il collegamento ad altri fogli di stile le cui regole non siano indispensabili al primo caricamento della specifica pagina, in modo da non rallentare il caricamento della pagina stessa.
Sempre per velocizzare il caricamento della pagina e per le regole che riguardano solo quella pagina, è anche possibile inserire direttamente tali regole nella zona head tra i tag <style>....</style>, per non appesantire il foglio di stile principale. 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 le regole di stile è importante inserire anche quelle riguardante il banner per il consenso dei cookie per essere in regola con la Cookie Law europea.

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:

Script che servono alla corretta visualizzazione del sito e alle funzionalità immediate.
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. Se queste regole non sono eccessivamente lunghe e riguardano solo la pagina specifica, si possono inserire direttamente tra i tag <script>....</script>.
Il richiamo al file js principale, invece, verrà messo subito prima della chiusura del tag body, in modo da non rallentare inutilmente il caricamento della pagina.
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.
È consigliato caricare in modo differito, o asincrono tutti gli script esterni che non sono necessari alla prima visualizzazione della pagina.

Esempio:
<script defer src=""></script>
<script async src=""></script>

NOTA: alcuni script esterni, come la libreria jQuery, non possono essere caricati in modo asincrono.

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:

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.

Defer e Async

Entrambi gli attributi dicono al browser di continuare ad analizzare l'HTML e a costruire il DOM (Document Object Model), cioè la struttura della pagina, senza aspettare che gli script vengano scaricati.

Defer:
Defer termina l'analisi HTML e poi esegue gli script.
Lo script viene scaricato in background e il rendering (restituzione grafica), cioè l'esecuzione del codice per generare l'anteprima della pagina, non viene interrotto.
Se lo scaricamento dello script termina prima, lo script non viene comunque eseguito fino al termine dell'analisi HTML.
Se più script hanno l'attributo defer, il browser li scarica secondo l'ordine in cui si trovano nella pagina, ma poi li esegue nell'ordine necessario alla loro esecuzione. In pratica se l'esecuzione del primo script dipende dal secondo script, il secondo script viene eseguito per primo.

Async:
Async mette in pausa l'analisi HTML per eseguire gli script.
A differenza di defer, gli script e l'analisi HTML non dipendono uno dall'altro. L'esecuzione degli script inizia subito senza attendere il completamento dell'analisi HTML, come, invece, accade con defer. Questo consente al browser di accelerare il processo di costruzione del DOM.
Gli script con l'attributo async sono indipendenti anche tra di loro, vengono scaricati secondo l'ordine in cui si trovano nella pagina ed eseguiti al termine del download, quindi, quello che finisce prima il download, viene eseguito prima. Quando lo scaricamento di uno script termina, l'analisi HTML viene messa in pausa durante l'esecuzione. Lattributo async si applica agli script che non dipendono da altri script e non sono necessari alla costruzione del codice della pagina.

Le librerie

Sia per le regole CSS che per le regole JS esistono delle librerie. Le librerie sono dei file che contengono lunghe stringe di codici precompilati.
Se, da un lato, l'uso delle librerie può agevolare il lavoro, da un altro lato ha i suoi inconvenienti.
Le librerie CSS (es. Bootstrap) spesso creano difficoltà qualora si vogliano aggiungere regole personali, creando conflitti difficili da risolvere. Per non parlare della difficoltà di individuare errori causati da tali conflitti.
Mi sento, quindi, di sconsigliare l'utilizzo di librerie di stile se non indispensabile.
Le librerie in generale, poi, che siano CSS o JS, sono molto pesanti e rallentano la velocità della pagina.
Le librerie possono essere materialmente scaricate come file e messe nel sito. In questo caso e nel caso di librerie CSS, è buona cosa purificarle dalle regole non utilizzate.
Allo scopo, consiglio questo tool online:
https://purifycss.online/
In alternativa allo scaricamento e cosa più semplice, molte note librerie possono essere richiamate da servizi esterni CDN (Content Delivery Network - Rete per la consegna di contenuti). L'uso dei CDN è sempre consigliato per una maggiore velocità di caricamento e anche per una questione di sicurezza. Le librerie, infatti, oltre ad 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/
Anche Google offre alcune librerie in CDN:
Google Hosted 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.

Limiti nell'utilizzo dei CDN

Le librerie devono essere aggiornate per la sicurezza.
Se il vostro sito non ha troppe pagine, potete permettervi di modificare il link di collegamento in ogni pagina per aggiornare le librerie alle nuove versioni, ma, se le pagine sono numerose, diventa davvero complicato.
In questo secondo caso, conviene caricare la libreria in locale, applicando un nome fisso al file js e cambiando il vecchio codice, in esso contenuto, con il nuovo codice aggiornato.

Attributo crossorigin

L'attributo crossorigin viene utilizzato quando si carica uno script da un server di terze parti, o da un altro dominio e serve per proteggere le informazioni sensibili durante il recupero dei risultati.
Per maggiori informazioni:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin

SRI Hash

Le librerie via CDN vengono fornite con una protezione SRI (Soubresource Integrity) data da un codice hash. Un codice hash è un codice univoco crittografato che permette al browser di controllare la risorsa al fine di garantire che l'origine che serve la risorsa ne consenta la condivisione con l'origine richiedente e non venga manomessa.
Per maggiori informazioni:
Subresource Integrity
Esiste anche un tool online per implementare la protezione per i file ospitati su un dominio esterno:
https://www.srihash.org/
ATTENZIONE! Dato che il codice hash è univoco e identifica un file con un determinato contenuto, variando la versione, o il contenuto del file, sarà necessario ottenere un nuovo hash.
IMPORTANTE notare che il file htaccess del sito deve contenere l'autorizzazione per effettuare il controllo da parte dei browser.
La regola che imposta l'autorizzazione è per i file js è questa:

<FilesMatch "\.(js)$">
    
Header set Access-Control-Allow-Origin "*"
    
</FilesMatch>

Possibile aggiungere altri tipi di file separandoli con linea verticale es: (js|css).
NOTA: Il file htacess viene impiegato in tutti i server web che utilizzano Apache. Se la regola non funziona e il tool segnala un errore, controllate le impostazioni di default del vostro server per i file statici ed escludete le estensioni di file in questione da eventuali impostazioni di default.

Preload delle librerie

Le librerie indispensabili per le funzionalità primarie del sito, che non possono essere caricate in modo asincrono, possono essere caricate in preload per non rallentare il caricamento della pagina.
In pratica, usando il preload, la risorsa viene caricata prima del rendering della pagina. Ciò garantisce che sia disponibile in anticipo senza bloccare il caricamento della pagina e migliorando le prestazioni.
Il preload si mette nella zona head della pagina.
Esempio di preload:
<link rel="preload" as="script" href="/js/jquery.js">
ATTENZIONE ad aggiungere anche il codice di protezione, se presente nel link al file, altrimenti il browser rifiuterà il preload per la mancanza di corrispondenza.
Esempio:
<link rel="preload" as="script" href="/js/jquery.js"
integrity="xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
crossorigin="anonymous">

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:

....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:

PageSpeed Insights
e quando è contento Google .... siamo a posto.
NOTA: Per ottenere il giusto risultato del test effettuato con il validatore, è necessario ripetere l'operazione diverse volte, perchè influisce anche la velocià di rete del momento. Il risultato migliore ottenuto sarà quello corretto.

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. Esempio: Tinypng
e abituatevi a comprimere ogni immagine, anche la più piccola, prima di caricarla.

Indicare le dimensioni originali di ogni immagine

È consigliato indicare le dimensioni originali dell'immagine (width e height) per migliorare la velocità di caricamento. Tali dimensioni verranno poi regolate, secondo le esigenze, tramite le regole di stile.
Esempio: <img src="" width="600" height="400">

NOTA: Google richiede l'utilizzo di nuovi formati di immagine per ottimizzare le prestazioni, per informazioni dettagliate, leggi: Velocità e performance di un sito web

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.

Il caricamento differito dei contenuti (Lazy loading)

A chi ha provato a testare la performance del sito su mobile con Google PageSpeed Insights, forse sarà capitato di vedere, nei risultati, l'avviso:
rimanda immagini fuori schermo
Cosa significa?
Significa che nella visualizzazione su cellulare, dove il contenuto delle pagine viene incolonnato, è consigliato, per la velocità, rimandare il caricamento degli elementi che vengono visualizzati dopo lo scroll.
Questo vale per immagini, video, iframe ecc.
Per le immagini e gli iframe, con le nuove funzionalità dei browser, è possibile risolvere aggiungendo questo comando:

loading="lazy"

Esempio:
<img src="image.jpg" alt="" loading="lazy">
<iframe src="" title="" loading="lazy"></iframe>
Per i vecchi browser è possibile utilizzare un polyfill.

Per i file audio e video in HTML5 basta aggiungere preload="none" agli altri tag.

Evitare pagine troppo lunghe

Le pagine troppo lunghe e pesanti, soprattutto se contengono immagini, non sono apprezzate da Google che avvisa: "Evita payload di rete enormi". Sicuramente, meglio spezzare i contenuti dividendoli in più pagine, richiamate da collegamenti opportuni a fondo pagina, piuttosto che condensare tutto in un'unica pagina che, soprattutto su mobile, risulterebbe interminabile, stancando la lettura dell'utente a scapito delll'attenzione e favorendo l'abbandono della pagina stessa.
Leggi anche: Velocità e performance di un sito web

Conclusione

Per avere una pagina perfetta e che restituisca l'agognato responso da parte del validatore, dovete ricordare queste cose:

Ogni elemento contenitore deve avere il suo tag di chiusura.
Ogni immagine deve avere il tag ALT (leggi anche I contenuti del sito) e l'indicazione delle dimensioni.
Il linguaggio di markup utilizzato deve rispettare le direttive stabilte dal W3C (World Wide Web Consortium).
Il caricamento delle risorse 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:

Il codice deve essere pulito, semplice e ordinato.
Gli script devono essere limitati a quelli essenziali per non appesantire la pagina.
Ogni elemento della pagina deve essere posizionato nel modo migliore.

ATTENZIONE:Il fatto che il browser mostri l'anteprima di una pagina correttamente non vuole dire che il codice della pagina sia corretto. Ogni browser, grazie alle impostazioni date dai suoi sviluppatori, è in grado di individuare e interpretare piccoli errori di sintassi contenuti nei codici. Ogni browser, però, interpreta tali errori secondo le sue personali impostazioni e una pagina non corretta potrebbe essere visualizzata diversamente a seconda del browser in cui viene aperta. È chiaramente nell'interesse di ogni webmaster e sviluppatore che l'anteprima di una pagina web sia identica su ogni browser e che, quindi, il codice della pagina sia scritto correttamente.
"Scarica un modello di pagina"

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Elenco argomenti di questa guida:

Altro di interesse

Torna alla pagina principale:Creare un sito da zero ->>

Continua con: Pubblicizzare e ottimizzare il sito con buonsenso