Velocidade do sitio e Javascript asíncrono

asíncrono

Aínda que fago moito desenvolvemento, non me clasifico como un verdadeiro desenvolvedor. Podo programar e mover cousas nunha páxina e facela funcionar. Un verdadeiro desenvolvedor entende como desenvolver o código para que poida escalarse, non ocupar moitos recursos, cargarse rapidamente, modificarse facilmente máis tarde e seguir funcionando.

O punto difícil no que se poñen os comerciantes é que ambos teñen un sitio web moi rápido e aínda incorporan integracións e elementos sociais que poden crear dependencias da rapidez coa que se cargará o teu sitio. Un destes exemplos é botóns sociais. En Martech, temos botóns sociais en cada páxina do sitio. Entón ... se os recursos de Facebook se cargan lentamente un día, ralentiza o noso sitio. A continuación, engada Twitter, Pinterest, Buffer, etc. a iso e as posibilidades do seu sitio de cargarse rápido quedan practicamente en nada.

Iso coñécese como carga síncrona. Ten que rematar de cargar un elemento antes cargas o seguinte elemento. Se podes cargar elementos de xeito asíncrono, podes cargar elementos sen unha dependencia uns dos outros. Podes mellorar drasticamente a velocidade do teu sitio cargando elementos de forma asíncrona. O problema é que case que nunca se optimizan os scripts prontos que ofrecen estas compañías para executalos de xeito asíncrono.
asíncrono

Podes ver o que afecta á velocidade da túa páxina executando unha proba en Pingdom:
carga da páxina de pingdom

Javascript asíncrono permite escribir código que indique aos elementos que se cargan despois a páxina está completamente cargada. Non hai dependencias. Entón, a túa páxina cárgase e unha vez completa, inicia un script que carga os outros elementos, neste caso os nosos botóns sociais. Se es desenvolvedor, podes ler un bo artigo, Lazy Loading Javascript asíncrono.

Aquí tes un fragmento de como facelo correctamente de 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);}) ();

O resultado é que se estas integracións de terceiros non funcionan ou funcionan lentamente, nunca afectará a aparición do contido da páxina principal. Se ves a fonte da nosa páxina, verás que estou cargando todos os scripts sociais adicionais empregando esta técnica. O proceso melloramos a velocidade do noso sitio en segundos - e non se asfixia durante a carga. Non convertemos todas as nosas dependencias externas a Javascript asíncrono, pero farémolo.

¿Que pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.