Kako pospešiti spletno stran z oznako

"Predvideno"brskalniki so prihodnost hitrega brskanja po internetu, nam prinaša sredstva, ki jih želimo še preden vemo, da jih želimo. Današnji brskalniki že make nekaj napovedi zdaj in nato pospešiti pridobivanje in prikazovanje dokumentov. Če želimo to narediti v naslednjem koraku, se bomo obrnili le na spletne razvijalce.

Razvijalci imajo Zelo dobra ideja od kako se upravljajo njihove spletne strani, in ki najpogosteje zahtevajo sredstva in tako lahko napovedujejo nekatere prihodnje operacije brskalnikov za spletna mesta. Vse, kar je zdaj potrebno, je, da razvijalci najdejo pot jih posredujte napovedi za brskalnike in dobro jih uporabite. Tukaj pridejo nekatere posebne "povezave HTML".

Osvežitev zahtev HTTP

Preden si ogledate te povezave, je čas, da osvežite naš spomin o tem, kako se zgodi tipična operacija pridobivanja datotek, ki jo zahteva HTTP. Recimo, da nekdo z imenom Joe želi obiskati spletno mesto.

Naslednje je naslednje:

1. Joe v naslovni vrstici brskalnika vnese naslov človeka, ki ga je mogoče priklicati, in pritisne »Enter«.
2. Ko je ta naslov prejel, brskalnik vpraša DNS strežnik (pohvale ISP) za naslov IP naslova, ki ga je podal Joe.
3. DNS strežnik se obvezuje.
4. Zdaj, ko brskalnik pozna naslov IP, pošlje strežniku spletnega mesta sporočilo (v narečju TCP) in zaprosi za povezavo.
5. Če je strežnik živ in zdrav, pošlje odgovor, ki potrjuje zahtevo brskalnika in se brskalnik odzove in potrdi sporočilo strežnika. (Opomba: Da, to je izjemno razvodenela različica rokovanja TCP med odjemalcem in strežnikom.)
6. Ko se rokovanje konča, se vzpostavi povezava med njima.
7. Zdaj brskalnik spremeni svoj narečni slog na HTTP in zahteva strežnik za spletno mesto.
8. Strežnik, ki pozna domačo stran spletnega mesta, vrne samo tisto, ki ga prejme brskalnik in se prikaže Joeu, ki zelo potrpežljivo čaka pred računalnikom..

Sledi tipična zahteva HTTP vse da (in še več) prenese dokument prek interneta. Torej, če kateri koli od teh procesov lahko skočite, kadar je to mogoče, mi lahko skrajšati čas, ki ga moramo počakati na dostavo sredstev, ki jih želimo.

Odnosi med HTML povezavami

W3C določa 4 razmerja HTML povezave (rel za razmerje) imenovan dns-prefetch, preconnect, prefetch, in predodgovoru. Skupaj jih imenujejo W3C.Namigi za vire". Zdaj bomo videli kaj lahko storijo in kjer jih je mogoče uporabiti.

1. Vnašanje DNS

V vnaprejšnji pridobitvi DNS je ločljivost imena domene (ali dobite ustrezen naslov IP iz strežnika DNS).

Recimo, da je na spletnem mestu referenčna stran z veliko referenčnimi povezavami do njegove sestrske strani. Ko uporabnik obišče referenčno stran, obstaja velika verjetnost da se bo uporabnik pomaknil na sestrsko mesto. Torej zgodnje iskanje DNS za sestrsko spletno mesto lahko skrajša čas, potreben za odprtje spletnega mesta (s čimer se izboljša uporabniška izkušnja).

To zmanjšanje zakasnitve prek vnaprejšnjega pridobivanja DNS To lahko storite tako, da dodate to kodo na referenčno stran.

Ko brskalnik obdeluje to kodo na referenčni strani, bo dodal iskanje DNS sestrskega spletnega mesta v čakalne vrste opravil in ko bo brez drugih nalog visoke prioritete v čakalni vrsti, bo zagnal ločljivost DNS sestrsko mesto.

Ko uporabnik končno klikne eno od povezav, ki jih prenese na sestrsko spletno mesto, je morda rešitev DNS tega spletnega mesta že končana in brskalnik lahko takoj začne vzpostavljati TCP-povezavo odjemalec-strežnik s sestrskim spletnim mestom. strežnika, zaradi česar se stran hitreje nalaga.

Ta funkcija je na voljo v skoraj vseh sodobnih brskalnikih, razen Safari od marca 2016.

2. Preknite povezavo

Preconnect je korak naprej od vnaprejšnje pridobitve DNS, vzpostavi povezavo s strežnikom, na katero se lahko v prihodnje pošlje zahteva, ki bo poslana pozneje..

W3C navaja idealno uporabo za preconnect: preusmeritve. Razvijalci uporabljajo preusmeritve iz več razlogov.

V tem primeru je naslednja zahteva brskalnika (preusmerjeno spletno mesto): 100% predvidljivo, in lahko biti predhodno povezani, do zmanjšanje zakasnitve navigacije.

Predstavljajte si, da je posredna stran spletnega mesta, ki preusmerja na "xyzsite", bo naslednja povezava HTML omogočila, da se brskalnik poveže s strežnikom xyzsite, ko bo prišel do te vmesne strani.

Od marca 2016 je na voljo v Chromu, Operaju in Firefoxu.

3. Predhodno nalaganje

S prefetch, za vir, brskalnik začne izvajati ločljivost DNS imena domene vira, potem izvede povezavo TCP s strežnikom vira, naredi zahtevo HTTP in končno pridobiva in shrani vnaprej pridobljeni vir v predpomnilniku brskalnika.

Če ste prepričani, kateri viri bodo potrebni pozneje, je to vir za vnaprejšnjo pridobitev; v njem je ulov. Predizbiranje zahteva ugibanje, in če narobe ugibate, boste morda dejansko upočasnili, namesto da bi pospešili svoje spletno mesto.

Za spletne knjige, galerije ali portfelje, če je uporabnik najverjetneje prebral naslednjo stran, vnaprej naloži vire, kot je slik, lahko bistveno pospešijo stvari. Tukaj je koda za to.

V Chromu, Firefoxu in Operi je podpora za vnaprejšnje branje.

4. Prerender

Vnaprejšnje predvajanje se lahko izvede samo za strani HTML. Prednastavljena stran HTML je prikazano brez povezave, in je naslikan na zaslon, ko ga uporabnik dejansko potrebuje. Prikazovanje stane višje računsko delo in spomin; plus, če želite prikazati stran, brskalnik morda potrebuje dodatne vire (kot so slike dodane na stran), kar bo vodilo do zahtevkov po brskalniku.

Torej, predodgovoru mora biti uporablja previdno, in ne prekomerno. Če vnesete naslednjo kodo, boste pred tem prednastavili stran »About«.

Prerender je že na voljo v Chromu, IE in Opera od marca 2016.

Nekaj ​​stvari, ki jih je treba upoštevati

(1) Nobeden od zgoraj omenjenih namigov za vire ne zagotavlja izvajanja in dokončanja različnih stopenj zahtevkov, ker je brskalnik že zaseden z obdelavo zahtev, potrebnih za delovanje trenutne strani, v kateri je uporabnik. lahko ovira trenutne naloge uporabnika.

Torej, vse je čakalni vrsti in izvedeni, ko se brskalnik počuti dovolj svobodnega, da to stori.

Ti namigi za vire niso nujno prisotni na strani še pred nalaganjem strani. Lahko so kasneje dodal JavaScript, in namigi za vire bodo opravili svoje delo kot običajno.

(2) W3C določa a Atribut povezave HTML imenuje verjetnost namigov, pr (z vrednostjo 0 do 1) za te namige o virih, ki se lahko uporabijo za zagotavljanje verjetnosti zahtev, ki bodo v prihodnosti. Tega atributa še nisem videl v nobenem brskalniku. Naslednja koda na primer navaja, da bo v prihodnje zahtevana 80% možnost xyzsite in 30% za stran about.

Dodamo lahko tudi atribut neobvezno navzkrižno navzkrižje, da obveščamo brskalnik o poverilnici CORS za povezano zahtevo..