Velocitat del lloc i JavaScript asíncron

asincrònic

Tot i que desenvolupo molt, no em classifico com a veritable desenvolupador. Puc programar i moure coses en una pàgina i fer que funcioni. Un autèntic desenvolupador entén com desenvolupar el codi perquè es pugui escalar, no ocupi molts recursos, es carregui ràpidament, es pugui modificar fàcilment més endavant i continuï funcionant.

El punt difícil en què es posen els professionals del màrqueting és que tots dos tinguin un lloc web molt ràpid i encara incorporen integracions i elements socials que poden crear dependències de la rapidesa amb què es carregarà el vostre lloc. Un d’aquests exemples és botons socials. A Martech, tenim botons socials a cada pàgina del lloc. Per tant, si els recursos de Facebook es carreguen lentament un dia, alenteix el nostre lloc. A continuació, afegiu Twitter, Pinterest, Buffer, etc. a això i les possibilitats del vostre lloc de carregar ràpidament es redueixen a pràcticament res.

Això es coneix com a càrrega síncrona. Heu d'acabar de carregar un element abans carregueu l’element següent. Si podeu carregar elements de manera asíncrona, podeu carregar-los sense una dependència els uns dels altres. Podeu millorar dràsticament la velocitat del vostre lloc carregant elements de manera asíncrona. El problema és que les seqüències d’ordres que aquestes empreses us proporcionen gairebé mai no s’optimitzen perquè s’executin de manera asíncrona.
asincrònic

Podeu veure què afecta la velocitat de la vostra pàgina fent una prova a Pingdom:
càrrega de la pàgina de pingdom

Javascript asíncron us permet escriure codi que indiqui que es carreguen els elements després la pàgina està completament carregada. Sense dependències. Per tant, la pàgina es carrega i, un cop finalitzada, s’inicia un script que carrega la resta d’elements, en aquest cas els nostres botons socials. Si sou desenvolupador, podeu llegir un article fantàstic, Lazy Loading Javascript asíncron.

Aquí teniu un fragment de com fer-ho correctament des d’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);}) ();

El resultat és que si aquestes integracions de tercers no funcionen o funcionen lentament, no afectarà mai el contingut de la pàgina principal. Si veieu la font de la nostra pàgina, veureu que estic carregant tots els scripts socials addicionals que utilitzen aquesta tècnica. El procés de ha millorat la velocitat del nostre lloc segons - i no s'ofega durant la càrrega. No hem convertit totes les nostres dependències externes a Javascript asíncron, però ho farem.

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.