Webstedshastighed og asynkron JavaScript
Selvom jeg gør en masse udvikling, klassificerer jeg mig ikke som en sand udvikler. Jeg kan programmere og flytte ting rundt på en side og få det til at fungere. En sand udvikler forstår, hvordan man udvikler koden, så den kan skaleres, ikke tager mange ressourcer, indlæses hurtigt, let æ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 eneste side på webstedet. Så ... hvis Facebook -ressourcer indlæses langsomt en dag, bremser det vores websted. Tilføj derefter Twitter, Pinterest, Buffer osv. Til det, og dit websteds chancer for at indlæse hurtigt reduceres til stort set ingenting.
Det er kendt som synkron indlæsning. Du skal afslutte indlæsning af et element før du indlæser det næste element. Hvis du er i stand til at indlæse varer asynkront, kan du indlæse varer uden at være afhængig 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 asynkrone.
Du kan se, hvad der påvirker din sidehastighed ved at køre en test på Pingdom:
Asynkron JavaScript giver dig mulighed for at skrive kode, der fortæller elementer at indlæse efter siden er fuldstændigt 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 Asynkron JavaScript.
Her er et udsnit af, hvordan du 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 indhold på kernesiden fra at blive vist. Hvis du ser kilden til vores side, vil du se, at jeg indlæser alle de yderligere sociale scripts ved hjælp af denne teknik. Processen forbedret vores websteds hastighed sekunder - og kvæler ikke under læsning. Vi har ikke konverteret alle vores eksterne afhængigheder til Asynkron JavaScript, men det gør vi.