Veniamo a un argomento molto interessante riguardo la velocità dei siti internet. Guardiamo a quei file caricati nell'intestazione dei siti (sezione <head>), che vengono caricati da server esterni.
Si tratta di librerie e set di informazioni, utili per le applicazioni javascript installate sul sito web; di font esterni richiamati, ad esempio, da Google Font; file javascript necessari al caricamento dei buttons e badges dei social network.
Altri file javascript, richiamati da tali link, servono a mantenere la compatibilità con vecchie versioni di Browser.
Maggiore è il loro numero, maggiori le interrogazioni che il browser deve compiere per "afferrarne" il contenuto.
Di questi files spesso non possiamo fare a meno. Quali azioni possiamo intraprendere, per ridurre il loro impatto sulla velocità del sito?
Scarica da:Amazon (Kindle) | Google Play Libri | Kobo | Apple Books | Ibs | MondadoriStore | laFeltrinelli
Verifica degli aggiornamenti
La prima azione da compiere è verificare che essi siano ancora sviluppati. O se il loro progetto è stato chiuso e sostituito da altri, i quali tengono conto delle più recenti innovazioni. È il caso di quegli applicativi javascript utili a mantenere la compatibilità con le versioni di browser precedenti. Conviene verificare quale progetto ha sostituito il nostro e usarlo.
Caricare i files nel nostro sito
Una seconda possibilità è scaricare i files dal server di riferimento e installarli nello spazio web.
Come si fa. Prendi l'url presente nel codice e copialo nel campo URL del Browser. Qui sotto trovi un chiaro esempio derivato dal button di Tumblr.
script type="text/javascript">!function(d,s,id){var js,ajs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://secure.assets.tumblr.com/share-button.js ";ajs.parentNode.insertBefore(js,ajs);}}(document, "script", "tumblr-js");</script>Il link evidenziato in giallo, rimanda al file javascript che permette al button di funzionare effettivamente. Scaricato il file .js nel nostro computer, lo carichi nella cartella dei file .js del tuo sito.
Nella foto sopra riportata, vediamo l'esempio del file css3-mediaqueries.js presente in un sito gestito con Expression Web 4. Il file javascript mantiene la compatibilità mobile con browser precedenti a Internet Explorer 9. Il progetto non è più aggiornato. Quindi ho deciso di scaricarlo dal server ospitante, googlecode.com, e di caricarlo direttamente nel sito. In questo modo, se in futuro dovesse essere soppresso su Googlecode, non sarà un problema per il sito web. Pratica utilissima, se anche il sito internet non verrà più aggiornato ma resterà disponibile in rete.
Da sola la procedura descritta è capace di far guadagnare velocità al sito web. Va aggiunto che, spesso, questi file non sono compressi. I progettisti o il gruppo di progettisti, caricano il file nel server senza comprimerlo. Ciò aumenta i KB da scaricare e rallenta il nostro sito.
Con strumenti quali compattatori di file javascript e CSS, di cui abbiamo scritto nell'articolo del corso dedicato, compattiamo il codice.
Quest'ultimo passaggio lo puoi ben verificare con Speed Insight di Google. Laddove un sito carica file esterni, lo strumento spesso segnala che essi possono essere compressi, riducendo di svariati Kilobyte il loro peso: "Vallo a dire agli sviluppatori..."
I fonts caricati da server esterni
Si è diffuso l'uso dei set di font presenti su server dedicati e disponibili gratuitamente nel web. Uno di questi servizi gratuiti è Google Font.
Sulla piattaforma Google Font troviamo tantissimi set di caratteri originali pronti all'uso. La tecnica ha il vantaggio di usare set di caratteri molto belli e di arricchire graficamente il nostro progetto. Trovandosi su un server pubblico, qualsiasi browser ha la possibilità di leggerli e riprodurli sul monitor e display di qualsiasi utente, anche se quel font non è installato sul dispositivo dell'utente finale.
Di contro, il set di caratteri incide sulla velocità di caricamento del sito. Google Font segnala per ogni set il suo peso.
Come procedere
Possiamo scaricare da Google Font i file necessari, per caricarli nel sito web.
Scegli il font preferito dalla pagina principale. Segui la procedura descritta. Scelto il font, in basso a destra, clicca su "Use". Sei nell'ultima schermata della procedura. Vai al passaggio 3 "Add this code to your website". All'interno del codice trovi un link come nell'esempio:
link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>Prendi il link come evidenziato sopra e copialo nel campo url del Browser. Compare del codice CSS. Al suo interno c'è un secondo link. Copialo in una seconda scheda del Browser e non chiudere la prima. Al secondo link è legato un file. Di solito il Browser lo scarica da solo o chiede se scaricarlo. Il file scaricato ha una estensione .woff2.
Carica il file nel sito web, nella cartella dei files CSS. Il codice CSS del primo link, copialo nel file CSS del sito: solitamente style.css nei siti più semplici.
/* latin-ext */@font-face {
font-family: 'Slabo 27px';font-style: normal;font-weight: 400;src: local('Slabo 27px'), local('Slabo27px-Regular'), url(https://fonts.gstatic.com/s/slabo27px/v3/LfR9_S_HMdQ73mwIHBRxo
SEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */@font-face {
font-family: 'Slabo 27px';font-style: normal;font-weight: 400;src: local('Slabo 27px'), local('Slabo27px-Regular'), url(https://fonts.gstatic.com/s/slabo27px/v3/PuwvqkdbcqU-fCZ9Ed-b7fk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
Il codice sopra, riporta un caso più complesso. Il font scelto, Slabo, presenta due set di caratteri: latin e latin esteso. Quindi ha bisogno di un doppio file. Se scegli un font con due o più set, due le strade: scaricare tutti i file o scegliere solo quelli utili.
Ho evidenziato i link, perché devi sostituirlo/i con l'attuale posizione del file sul tuo sito. Se hai messo il file .woff2 nella cartella di style.css, ti basta mettere tra parentesi solo il nome del file: non cancellare gli apici.
Hai velocizzato il caricamento del set di font e garantito a tutti di apprezzarne la bellezza. Questo il sito: www.google.com/fonts.
Riflessione sull'esempio dei font
L'esempio sui font ci svela un altro particolare interessante. Spesso un file esterno, contiene uno o più altri link di rimando. Divertiti a controllare quanti rimandi ha il file .js del badge di Stumbleupon, il noto social network. In quei casi possiamo farci poco, a meno di non volerli caricare tutti; ma il codice potrebbe essere aggiornato di frequente.
Comprendi quanto sia impegnativo per il browser dell'utente finale, caricare un sito internet con tanti rimandi a file esterni, i quali a loro volta contengono altri link di rimando... E intanto l'utente è già passato ad altro sito.
I contro della tecnica
Quali i contro della tecnica "manuale" descritta. Essenzialmente due.
Il primo contro si riferisce all'uso della banda e risorse hardware del tuo server. Se da un lato velocizzi il sito, dall'altra, il server ospitante è un po' più impegnato. Consuma un po' più banda e tempi della CPU.
Nella scelta bisogna valutare: 1) Peso del file; 2) Quante volte esso dove essere interrogato; 3) Quanta banda abbiamo a disposizione.
Se il sito è molto visitato, il file è pesantuccio (50KB, 100KB...) ed è presente su tutte le pagine del sito... Ha sicuramente un certo impatto negativo sulle risorse del server che ospita il tuo sito. Molto dipende anche dal tipo di piano hosting da te sottoscritto.
Secondo aspetto contro. Se il file appartiene a un progetto in costante e rapida evoluzione, ti costringe ad aggiornarlo spesso. In questo caso meglio lasciarlo dove si trova. Anche quelli che hanno uno sviluppo lento, di tanto in tanto verificali, per essere sicuro di usare la versione aggiornata.
