Sitesnelheid en asynchroon Javascript

asynchrone

Hoewel ik veel aan ontwikkeling doe, classificeer ik mezelf niet als een echte ontwikkelaar. Ik kan dingen op een pagina programmeren en verplaatsen en het laten werken. Een echte ontwikkelaar begrijpt hoe hij de code moet ontwikkelen zodat deze kan worden geschaald, niet veel resources in beslag neemt, snel laadt, later gemakkelijk kan worden gewijzigd en nog steeds werkt.

De lastige plek waar marketeers in terechtkomen, is dat ze allebei een zeer snelle website en neem nog steeds integraties en sociale elementen op die afhankelijk kunnen zijn van hoe snel uw site wordt geladen. Een voorbeeld hiervan is sociale knoppen. Op Martech hebben we sociale knoppen op elke afzonderlijke pagina van de site. Dus... als Facebook-bronnen op een dag langzaam laden, vertraagt ​​het onze site. Voeg daar dan Twitter, Pinterest, Buffer, etc. aan toe en de kans dat je site snel laadt wordt tot vrijwel nul gereduceerd.

Dat staat bekend als synchroon laden. Je moet het laden van één element voltooien voor je laadt het volgende element. Als u items asynchroon kunt laden, kunt u items laden zonder van elkaar afhankelijk te zijn. U kunt de snelheid van uw site drastisch verbeteren door elementen asynchroon te laden. Het probleem is dat de kant-en-klare scripts die deze bedrijven u leveren bijna nooit zijn geoptimaliseerd om asynchroon te draaien.
asynchrone

Je kunt zien wat van invloed is op je paginasnelheid door een test uit te voeren op Pingdom:
pingdom pagina laden

Asynchroon Javascript stelt je in staat om code te schrijven die elementen vertelt om te laden na de pagina is volledig geladen. Geen afhankelijkheden! Dus uw pagina wordt geladen en zodra deze is voltooid, wordt een script gestart dat de andere elementen laadt - in dit geval onze sociale knoppen. Als je een ontwikkelaar bent, kun je een geweldig artikel lezen, Lazy Loading asynchroon Javascript.

Hier is een fragment van Emil Stenström van hoe je het goed doet:

(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);}) ();

Het resultaat is dat als deze integraties van derden niet werken of traag werken, dit nooit van invloed is op het verschijnen van uw kernpagina-inhoud. Als je de bron van onze pagina bekijkt, zul je zien dat ik alle aanvullende sociale scripts laad met behulp van deze techniek. Het proces de snelheidsseconden van onze site verbeterd – en stikt niet tijdens het laden. We hebben niet al onze externe afhankelijkheden geconverteerd naar Asynchroon Javascript, maar we zullen.

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.