Velocidad del sitio y Javascript asincrónico


While I do a lot of development, I don't classify myself as a true developer. I can program and move stuff around on a page and make it work. A true developer understands how to develop the code so that it can be scaled, not take up a lot of resources, load quickly, be easily modified later and still work.

La situación difícil en la que se encuentran los especialistas en marketing es tener una sitio web muy rápido y aún incorporar integraciones y elementos sociales que pueden crear dependencias sobre la rapidez con la que se cargará su sitio. Un ejemplo es botones sociales. On Martech, we have social buttons on every single page on the site. So… if Facebook resources load slow one day, it slows down our site. Then add Twitter, Pinterest, Buffer, etc. to that and your site's chances of loading fast are reduced to virtually nothing.

That's known as synchronous loading. You have to finish loading one element antes you load the next element. If your able to load items asynchronously, you're able to load items without a dependency on one another. You can drastically improve your site's speed by loading elements asynchronously. The problem is that the out-of-the-box scripts that these companies provide you is almost never optimized to run asynchronous.

You can see what's impacting your page speed by running a test on Pingdom:
carga de la página pingdom

Javascript asincrónico te permite escribir código que le dice a los elementos que se carguen Si lo envía después the page is completely loaded. No dependencies! So, your page loads and once it's complete, a script initiates that loads the other elements – in this case our social buttons. If you're a developer, you can read a great article, Javascript asincrónico de carga diferida.

Here's a snippet of how to do it properly from Emil Stenström:

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

The result is if these third party integrations are down or running slow, it never impacts your core page content from appearing. If you view the source of our page, you'll see that I'm loading all of the additional social scripts utilizing this technique. The process improved our site's speed seconds – and doesn't choke during the loading. We haven't converted all of our external dependencies to Javascript asincrónico, pero lo haremos.

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.