Sivuston nopeus ja asynkroninen Javascript

asynkroninen

Vaikka kehitän paljon, en luokittele itseäni todelliseksi kehittäjäksi. Voin ohjelmoida ja siirtää asioita sivulla ja saada sen toimimaan. Todellinen kehittäjä ymmärtää, miten koodia voidaan kehittää siten, että sitä voidaan skaalata, se ei vie paljon resursseja, latautuu nopeasti, sitä voidaan myöhemmin helposti muokata ja se toimii edelleen.

Markkinoijien vaikea kohta on, että molemmilla on erittäin nopea verkkosivusto ja sisällyttää silti integraatioita ja sosiaalisia elementtejä, jotka voivat luoda riippuvuuden siitä, kuinka nopeasti sivustosi latautuu. Yksi tällainen esimerkki on sosiaaliset painikkeet. Martechissa meillä on sosiaaliset painikkeet jokaisella sivuston sivulla. Joten… jos Facebook -resurssit latautuvat jonain päivänä hitaasti, se hidastaa sivustoamme. Lisää sitten Twitter, Pinterest, puskuri jne. Ja sivustosi nopean latauksen mahdollisuudet vähenevät käytännössä tyhjäksi.

Sitä kutsutaan synkroniseksi lataukseksi. Sinun on ladattava yksi elementti ennen lataat seuraavan elementin. Jos pystyt lataamaan kohteita asynkronisesti, voit ladata kohteita riippumatta toisistaan. Voit parantaa sivustosi nopeutta huomattavasti lataamalla elementtejä asynkronisesti. Ongelmana on, että näiden yritysten tarjoamat valmiit skriptit eivät ole lähes koskaan optimoitu toimimaan asynkronisesti.
asynkroninen

Voit nähdä, mikä vaikuttaa sivusi nopeuteen suorittamalla Pingdom -testin:
pingdom-sivun lataus

Asynkroninen Javascript voit kirjoittaa koodin, joka kehottaa elementtejä latautumaan jälkeen sivu on ladattu kokonaan. Ei riippuvuuksia! Sivusi latautuu ja sen valmistuttua käynnistyy skripti, joka lataa muut elementit - tässä tapauksessa sosiaaliset painikkeet. Jos olet kehittäjä, voit lukea hienon artikkelin, Laiska ladataan asynkronista Javascriptiä.

Tässä katkelma siitä, miten se tehdään oikein Emil Stenströmiltä:

(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 ('ladata', asynk_lataus, väärä);}) ();

Seurauksena on, että jos nämä kolmansien osapuolten integroinnit ovat kesken tai ne toimivat hitaasti, se ei koskaan vaikuta sivusi ydinsisällön näkymiseen. Jos tarkastelet sivumme lähdettä, huomaat, että lataan kaikki muut sosiaaliset komentosarjat, jotka käyttävät tätä tekniikkaa. Prosessi paransi sivuston nopeussekunteja - eikä tukehtu latauksen aikana. Emme ole muuttaneet kaikkia ulkoisia riippuvuuksiamme Asynkroninen Javascript, mutta tulemme.

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.