Velocità del sito e Javascript asincrono

asincrono

Anche se faccio molto sviluppo, non mi considero un vero sviluppatore. Posso programmare e spostare cose su una pagina e farlo funzionare. Un vero sviluppatore sa come sviluppare il codice in modo che possa essere ridimensionato, non occupare molte risorse, caricare rapidamente, essere facilmente modificato in seguito e continuare a funzionare.

Il punto difficile in cui si trovano gli esperti di marketing è avere entrambi un sito web molto veloce e ancora incorporare integrazioni ed elementi sociali che possono creare dipendenze dalla velocità di caricamento del tuo sito. Uno di questi esempi è pulsanti social. Su Martech, abbiamo pulsanti social su ogni singola pagina del sito. Quindi ... se le risorse di Facebook si caricano lentamente un giorno, rallenta il nostro sito. Quindi aggiungi Twitter, Pinterest, Buffer, ecc. E le possibilità di caricamento rapido del tuo sito sono ridotte praticamente a zero.

Questo è noto come caricamento sincrono. Devi finire di caricare un elemento prima si carica l'elemento successivo. Se sei in grado di caricare gli elementi in modo asincrono, sei in grado di caricare gli elementi senza una dipendenza l'uno dall'altro. Puoi migliorare drasticamente la velocità del tuo sito caricando gli elementi in modo asincrono. Il problema è che gli script preconfigurati forniti da queste aziende non sono quasi mai ottimizzati per l'esecuzione asincrona.
asincrono

Puoi vedere cosa influisce sulla velocità della tua pagina eseguendo un test su Pingdom:
caricamento della pagina pingdom

Javascript asincrono ti permette di scrivere codice che dice agli elementi di caricare dopo la pagina è completamente caricata. Nessuna dipendenza! Quindi, la tua pagina viene caricata e una volta completata, viene avviato uno script che carica gli altri elementi, in questo caso i nostri pulsanti social. Se sei uno sviluppatore, puoi leggere un ottimo articolo, Javascript asincrono a caricamento lento.

Ecco uno snippet di come farlo correttamente da Emil Stenström:

(function () {function async_load () {var s = document.createElement ('script'); s.type = 'text / javascript'; s.async = true; s.src = 'http://buttondomain.com /script.js '; var x = document.getElementsByTagName (' script ') [0]; x.parentNode.insertBefore (s, x);} if (window.attachEvent) window.attachEvent (' onload ', async_load); else window.addEventListener ('load', async_load, false);}) ();

Il risultato è che se queste integrazioni di terze parti sono inattive o funzionano lentamente, non influisce mai sulla visualizzazione del contenuto della pagina principale. Se visualizzi il codice sorgente della nostra pagina, vedrai che sto caricando tutti gli script sociali aggiuntivi utilizzando questa tecnica. Il processo ha migliorato la velocità dei secondi del nostro sito - e non si strozza durante il caricamento. Non abbiamo convertito tutte le nostre dipendenze esterne in Javascript asincrono, ma lo faremo.

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.