Webstedshastighed og asynkron Javascript

asynkron

Mens jeg udvikler meget, klassificerer jeg mig ikke som en ægte udvikler. Jeg kan programmere og flytte ting rundt på en side og få det til at fungere. En ægte udvikler forstår, hvordan man udvikler koden, så den kan skaleres, ikke optager mange ressourcer, indlæses hurtigt, let kan ændres senere og stadig fungerer.

Det hårde sted, som marketingfolk er sat i, er at begge har en meget hurtig webside og stadig integrere integrationer og sociale elementer, der kan skabe afhængigheder for, hvor hurtigt dit websted indlæses. Et sådant eksempel er sociale knapper. På Martech har vi sociale knapper på hver enkelt side på siden. Så ... hvis Facebook-ressourcer indlæses langsomt en dag, sænker det vores side. Tilføj derefter Twitter, Pinterest, Buffer osv. Til det, og dit websteds chancer for at indlæse hurtigt reduceres til næsten ingenting.

Det er kendt som synkron belastning. Du er færdig med at indlæse et element før du indlæser det næste element. Hvis du er i stand til at indlæse emner asynkront, er du i stand til at indlæse emner uden afhængighed af hinanden. Du kan drastisk forbedre dit websteds hastighed ved at indlæse elementer asynkront. Problemet er, at de out-of-the-box-scripts, som disse virksomheder giver dig, næsten aldrig er optimeret til at køre asynkront.
asynkron

Du kan se, hvad der påvirker din sidehastighed ved at køre en test på Pingdom:
sideindlæsning af pingdom

Asynkron Javascript giver dig mulighed for at skrive kode, der fortæller elementer at indlæse efter siden er fuldt indlæst. Ingen afhængigheder! Så din side indlæses, og når den er færdig, starter et script, der indlæser de andre elementer - i dette tilfælde vores sociale knapper. Hvis du er udvikler, kan du læse en god artikel, Lazy Loading Asynchronous Javascript.

Her er et uddrag af, hvordan man gør det ordentligt fra Emil Stenström:

(funktion () {funktion 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); ellers window.addEventListener ('load', async_load, false);}) ();

Resultatet er, at hvis disse tredjepartsintegrationer er nede eller kører langsomt, påvirker det aldrig dit kernesides indhold fra at blive vist. Hvis du ser kilden til vores side, vil du se, at jeg indlæser alle de yderligere sociale scripts, der bruger denne teknik. Processen forbedret vores sides hastighedssekunder - og kvæles ikke under læsningen. Vi har ikke konverteret alle vores eksterne afhængigheder til Asynkron Javascript, men det gør vi.

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.