Home
  1. Informatica
  2. Creare siti web
  3. Dove posizionare gli script Java nei siti web

Dove posizionare gli script Java nei siti web

Piccolo consiglio per rendere veloci le pagine del nostro sito

I siti internet funzionano grazie anche alle applicazioni javascript. Dove metterle per un migliore caricamento delle pagine?

    Aggiornato:     Livello: Iniziale
 


Veniamo alla terza lezione del corso sulla realizzazione di siti web, dedicata alla velocizzazione delle pagine html.

Fino ad ora abbiamo appreso qualche tecnica basilare per ridurre e compattare il codice dei files CSS, javascript e html. Quindi abbiamo visto come è possibile velocizzare il caricamento di files CSS e js e set di font, richiamati da server esterni al nostro sito.

Passiamo al posizionamento migliore di alcuni tra i maggiori script usati in un sito internet e più in generale a tutti quei tag script che implementano funzionalità nei nostri siti web.

Partiamo dall'head

La sezione head di un sito internet è quella che accoglie molte delle informazioni principali riguardo il sito web. Esso fornisce al browser i primi comandi per "costruire sullo schermo" il contenuto del sito. Solitamente l'intestazione o head, accoglie anche molti dei comandi di richiamo alle applicazioni e funzioni usate dal sito. Si tratta principalmente di programmini javascript.

Queste funzionalità possono rallentare il caricamento della pagina, se sono molto pesanti. Di alcune non si può fare a meno di inserirle nella sezione head e lì dobbiamo lasciarle. Altre possono essere spostate in basso, in modo tale che il browser le carichi per ultime.

Quali solitamente lasciamo nella sezione head. Qui lasciamo quelle applicazioni js che rendono compatibile il sito, con le versioni di browser precedenti. Così facendo, non alteriamo la formattazione della pagina o di alcune parti di essa, in fase di caricamento sui browser più vecchiotti.

Va inserito nell'head anche il codice di Google Analytics. Come consiglia la guida Google, è il luogo della pagina migliore per ottenere statistiche web più accurate. Andrebbe messo addirittura quanto più sopra possibile.

Le applicazioni da mettere sul fondo

Quali applicazioni possiamo spostare dall'head e posizionare in basso? Piccola premessa. Cosa intendo per 'basso'. Intendo la parte della pagina web prima della chiusura del tag </body>

In quell'area della pagina web, possiamo spostare alcune delle applicazioni che effettuano il conteggio statistico di visite al nostro sito internet. Chi opta per Shinystat di solito segue il consiglio del servizio di statistiche web, e posiziona in basso il contatore.

Altre applicazioni da mettere sul fondo sono i traduttori di pagine web, come Bing traduttore e Google traduttore. Per Bing traduttore l'opzione traduce in automatico il testo della pagina quando l'utente appartiene a un'altra lingua. Google Traduttore fa apparire la barra in alto per consigliare la traduzione. Prima di copiare il codice è necessario abilitare l'opzione per evitare che l'applicazione compaia sulle pagine del sito.

Il Java della Cookie Law. L'Unione Europea obbliga i siti internet di proprietari residenti nella UE, a esporre una tendina che avverte l'utente della presenza di servizi di tracciatura di dati personali sulla navigazione. Anche questa applicazione possiamo spostarla in basso. Il posizionamento 'fisico' in basso, non inciderà sul reale posizionamento grafico. In questo sito, ad esempio, il java si trova prima della chiusura del body, ma al caricamento è visualizzato in alto. La reale posizione dipende dalle impostazioni grafiche date all'applicazione.

Quando vogliamo implementare i plugin di Facebook quali share, button o comment, è necessario caricare nelle pagine il Javascript SDK. Si tratta di alcune linee di codice di programmazione, che permetteranno il funzionamento delle funzionalità implementate. Il Javascript SDK è da inserire nel body. Per velocizzare il caricamento delle parti principali del sito, consigliabile mettere il codice prima della chiusura del body. Ecco un esempio:

<!--JavaScript SDK Facebook code-->

<script async type="text/javascript">window.fbAsyncInit = function() {FB.init({appId: '', xfbml: true, version: 'v2.5'});};(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

<!--END Java Facebook code-->

<!--ConsensoCookieNormativaEuropea-->

<script type="text/javascript" async src="cookie.js"></script><script type="text/javascript">document.addEventListener('DOMContentLoaded', function(event) { cookieChoices.showCookieConsentBar('Usando questo sito accetti i cookie per contenuti personalizzati e pubblicità',
'OK', 'Approfondisci', 'http://nomesito.com/');});</script>

<!--End script-->

</body>

Nell'esempio si riconoscono rispettivamente gli script di: JavaScript SDK Facebook, consenso Cookie UE. In basso, il tag body di chiusura. In questa parte del sito puoi inserire anche lo script social di Sumome.com.

In conclusione

Grazie a questo piccolo espediente, renderai il caricamento delle pagine più veloce, migliorando l'esperienza utente. Questi ultimi apprezzeranno la velocità di caricamento degli elementi essenziali della pagina e torneranno in seguito... Si spera.

 

Leggi Pure

⟩⟩ TransferWise Opinioni: La mia Esperienza | Recensione Reale    ⟩⟩ Ledger Nano S Promo Code e Promozioni    ⟩⟩ Promozioni e Nuovi Listing su CEX.io Exchange    ⟩⟩ Come conseguire la Certificazione G Suite    ⟩⟩ OneDrive for Business: Come Funziona, Caratteristiche, Costi