Kaip pagreitinti svetainę su žyma

"Numatoma„naršyklės yra aukščiausio greičio interneto naršymo ateitis, atneša mums išteklių, kuriuos norime net prieš mes žinome, kad norime jų. Šiandienos naršyklės jau yra padaryti kai kurie prognozes dabar paspartinkite dokumentų priėmimą ir pateikimą. Jei norite pereiti prie kito žingsnio, mes žiūrime ne į kitus nei žiniatinklio kūrėjams.

Programuotojai turi gana gera idėja apie kaip jų svetainės naršomos, ir kuris ištekliai dažniausiai prašomi ir taip jie gali numatyti kai kurias ateities operacijų naršykles, skirtas svetainėms. Viskas, ko reikia dabar, yra skirta kūrėjams rasti būdą perduoti juos prognozes naršyklėms ir juos tinkamai panaudoti. Čia atvyksta kai kurios specialios „HTML nuorodos“.

HTTP užklausų atnaujinimas

Prieš žvelgdami į šias nuorodas, atėjo laikas atnaujinti savo atmintį, kaip vyksta tipinė HTTP prašoma rinkmenų rinkimo operacija. Tarkime, kad kažkas, vardu Joe, nori aplankyti svetainę.

Štai kas nutinka toliau:

1. Joe naršyklės adresų juostoje įveda tinklalapio žmogišką atšaukiamą adresą ir paspaudžia „Enter“.
2. Gavęs šį adresą, naršyklė prašo DNS serverio (ISP komplimentų) dėl Joe nurodyto adreso IP adreso.
3. DNS serveris įpareigoja.
4. Dabar, kai naršyklė žino IP adresą, ji siunčia pranešimą (TCP dialektu) svetainės serveriui, prašydama prisijungti.
5. Jei serveris yra gyvas ir gerai, jis siunčia atsakymą, patvirtinantį naršyklės užklausą, ir naršyklė atsako ir patvirtina serverio pranešimą. (Pastaba: Taip, tai labai drėgna TCP rankinio paspaudimo tarp kliento ir serverio versija.)
6. Kai pasibaigia rankų paspaudimai, tarp jų atsiranda ryšys.
7. Dabar naršyklė keičia savo tarmės stilių į HTTP ir paprašo serverio.
8. Serveris, žinodamas tinklalapio pagrindinį puslapį, grįžta tik į tą, kurį gauna naršyklė ir parodė Joe, kuris labai kantriai laukia kompiuterio..

Per įprastą HTTP užklausą visi kad (ir daugiau) gauti dokumentą internetu. Taigi, jei bet kuris iš šių procesų galima įjungti, kai įmanoma, mes galime sumažinti laiką, kurį turime laukti, kol bus pristatyti norimi ištekliai.

HTML nuorodų ryšiai

W3C nurodo 4 HTML nuorodų santykius (rel už santykius) dns-prefetch, iš anksto prisijungti, prefetch, ir prerender. Kartu jie vadinami (pagal W3C) „Išteklių patarimai". Dabar matysime ką jie gali padaryti ir kur jie gali būti naudojami.

1. DNS išankstinis priėmimas

DNS prefetch, domeno vardo raiška (dar žinomas kaip gauti atitinkamą IP adresą iš DNS serverio) atliekamas anksčiau.

Tarkime, svetainėje yra nuorodinis puslapis, kuriame yra daug nuorodų į jos seserį. Kai naudotojas lanko nuorodos puslapį, yra a didelė tikimybė kad naudotojas naviguosis į seserį. Taigi, ankstyvo DNS paieškos seserio svetainė gali sumažinti laiko atidarymo laiką (taip pagerindama naudotojo patirtį).

Tai latentinis sumažinimas naudojant DNS prefetching galima padaryti pridedant šį kodą į nuorodos puslapį.

Kai naršyklė apdoroja šį kodą nuorodų puslapyje, ji pridės seserinės svetainės DNS užklausą į savo užduočių eiles, o kai ji yra laisva nuo kitų aukšto prioriteto užduočių eilėje, ji pradės DNS rezoliuciją seserys.

Taigi, kai vartotojas pagaliau spusteli vieną iš nuorodų, į kurias jie patenka į seserį, šios svetainės DNS raiška galėjo būti jau baigta, o naršyklė iš karto gali pradėti kurti kliento-serverio TCP ryšį su seserimi serverio, kad šis puslapis būtų greičiau įkeltas.

2016 m. Kovo mėn. Ši funkcija prieinama beveik visose šiuolaikinėse naršyklėse, išskyrus „Safari“.

2. Prijunkite

Išankstinis ryšys yra tolesnis žingsnis nuo DNS prefetch, jis nustato ryšį su serveriu, kuriam vėliau gali būti išsiųstas prašymas.

„W3C“ pateikia idealų naudojimą, kad būtų galima iš anksto prisijungti: peradresavimas. Kūrėjai naudoja peradresavimus dėl kelių priežasčių.

Tokiu atveju naršyklės kita užklausa (nukreipta svetainė) yra 100% prognozuojama, ir gali būti prijungtas prie, į sumažinti navigacijos vėlavimą.

Įsivaizduokite, kad yra tarpinis svetainės puslapis, nukreipiantis į „xyzsite„, ši HTML nuoroda padarys naršyklę prijungtą prie„ xyzsite “serverio, kai jis pateks į tą tarpinį puslapį.

2016 m. Kovo mėn. Tai yra „Chrome“, „Opera“ ir „Firefox“.

3. Paruošimas

Su prefetch, išteklių, naršyklės pradeda naudoti išteklių domeno vardo DNS sprendimą, tada atlieka TCP ryšį su išteklių serveriu, priima HTTP užklausą ir pagaliau atsiunčia ir saugo iš anksto pateiktą šaltinį naršyklės talpykloje.

Jei esate tikri, kokie ištekliai bus reikalingi vėliau, tai iš anksto iš anksto gaunamas šaltinis; jame yra sugavimas. Išankstinis atsiėmimas trunka atspėti, ir, jei atspėti neteisingai, galite greičiau sulėtinti, o ne pagreitinti savo svetainę.

Jei naudojate internetines knygas, galerijas ar portfelius, jei vartotojas greičiausiai naršys kitą puslapį, iš anksto pateikiami tokie šaltiniai kaip vaizdai, gali spartinti dalykus. Štai kodą, kad tai atliktumėte.

„Prefetch“ yra palaikoma „Chrome“, „Firefox“ ir „Opera“.

4. Prerender

Tik HTML puslapiuose galima atlikti išankstinį leidimą. Iš anksto pateiktas HTML puslapis yra atjungtas, ir yra dažomas ekrane, kai jis iš tikrųjų reikalingas vartotojui. Atvaizdavimas kainuoja didesnį skaičiavimo darbą ir atminties šaltinį; Be to, norint pateikti puslapį, naršyklei gali prireikti papildomų išteklių (pvz., prie puslapio pridedamų vaizdų), kurie leis daugiau tolesnių prašymų naršyklėje.

Taigi, prerender turi būti atsargiai, ir ne per daug. Įrašius šį kodą, iš anksto bus paskelbtas puslapis „Apie“.

2016 m. Kovo mėn. „Prerender“ jau yra „Chrome“, „IE“ ir „Opera“.

Keli dalykai, kuriuos reikia pastebėti

(1) Nė vienas iš minėtų išteklių patarimų neužtikrina skirtingų užklausos etapų vykdymo ir užbaigimo, nes, kai naršyklė jau užimta tvarkydama užklausas, reikalingas dabartinio puslapio operacijoms, kurią naudotojas atlieka, atlikdamas šiuos optimizavimus gali trukdyti naudotojo dabartines užduotis.

Taigi, viskas yra eilėje ir vykdoma, kai naršyklė jaučiasi pakankamai laisva.

Šie resursų patarimai nebūtinai turi būti puslapyje net prieš įkeldami puslapį. Jie gali būti vėliau pridėjo „JavaScript“, ir išteklių patarimai atliks savo darbą kaip įprasta.

(2) W3C nurodo a HTML nuorodos atributas vadinamas užuominos tikimybė, pr (kurių vertė nuo 0 iki 1) šiems išteklių patarimams, kuriuos galima naudoti norint pateikti ateityje pateikiamų užklausų tikimybę. Aš dar nemačiau, kad šis atributas būtų įdiegtas bet kurioje naršyklėje. Pavyzdžiui, šis kodas nurodo, kad ateityje bus prašoma 80% tikimybės xyzsite ir 30% - apie puslapį.

Mes taip pat galime pridėti neprivalomą crossorigin atributą į išteklių patarimus, kad informuotume naršyklę apie susieto užklausos CORS kredencialą.