Hvordan øke hastigheten på nettstedet med stikkord

" Forutsigende " nettlesere er fremtiden for topphastighets Internett-surfing, og gir oss ressurser vi vil ha før vi vet at vi vil ha dem . Dagens nettlesere gjør allerede noen spådommer nå og da for å øke hastigheten på henting og gjengivelse av dokumenter. For å ta dette til neste trinn ser vi ingen andre enn webutviklere.

Utviklere har en ganske god ide om hvordan deres nettsteder navigeres, og hvilke ressurser som blir bedt om oftest, og dermed kan de forutsi noen fremtidige operasjoner som nettlesere skal gjøre for nettsteder. Alt som trengs nå er for utviklere å finne en måte å videresende disse spådommene til nettlesere og sette dem til nytte . Dette er hvor noen spesielle "HTML-linker" kommer inn.

En oppdatering på HTTP-forespørsler

Før du tar en titt på disse koblingene, er det på tide å oppdatere vårt minne om hvordan en typisk HTTP-forespurt filhenting opererer. La oss si at noen som heter Joe, vil besøke et nettsted.

Her er hva som skjer neste:

1. Joe skriver nettstedets menneskelige tilbakekallbare adresse i en nettleser adresselinje og trykker "Enter".
2. Når den mottok den adressen, spør nettleseren en DNS-server (komplimenter til ISP) for IP-adressen til adressen gitt av Joe.
3. DNS-serveren forplikter seg.
4. Nå som nettleseren kjenner IP-adressen, sender den en melding (i TCP dialekt) til nettstedets server, og ber om en tilkobling.
5. Hvis serveren er i live og vel, sender den et svar som bekrefter nettleserens forespørsel, og nettleseren svarer og kvitterer serverens melding. ( Merk : Ja, dette er en ekstremt vannet versjon av et TCP-håndtrykk mellom en klient og en server.)
6. Når håndtrykkene er over, etableres en forbindelse mellom de to.
7. Nå endrer nettleseren sin dialektstil til HTTP og spør serveren for nettstedet.
8. Serveren, som kjenner hjemmesiden til nettstedet, returnerer nettopp det, som mottas av nettleseren og vist til Joe som venter veldig tålmodig foran datamaskinen.

En typisk HTTP-forespørsel går gjennom alt som (og mer) for å hente et dokument via Internett. Så hvis noen av disse prosessene kan hoppes opp når det er mulig, kan vi redusere tiden vi må vente på levering av ressursene vi ønsker .

HTML Link Relasjoner

W3C spesifiserer 4 HTML-linkrelasjoner ( rel for relationship) kalt dns-prefetch, preconnect, prefetch og prerender . Sammen kalles de (ved W3C) " Ressurshintene ". Nå ser vi hva de kan gjøre og hvor de kan brukes .

1. DNS Prefetch

I DNS-prefetch er domenenoppløsningen (aka å få den matchende IP-adressen fra DNS-serveren) gjort på forhånd.

La oss si at det er en referanseside på et nettsted med mange referanselinker til søstersiden. Når en bruker besøker referansesiden, er det stor sannsynlighet for at brukeren vil navigere til søstersiden. Så, en tidlig DNS-oppslag for søstersiden kan redusere tiden det tar å åpne nettstedet (og dermed forbedre brukeropplevelsen).

Denne latensreduksjonen via DNS forhåndsinnhenting kan gjøres ved å legge til denne koden på referansesiden.

Når en nettleser behandler denne koden på referansesiden, vil den legge til DNS-oppslaget til søstersiden til oppgavskøene, og når den er fri for andre høyt prioriterte oppgaver i køen, starter den DNS-oppløsningen av søsterside.

Så når en bruker til slutt klikker på en av koblingene som tar dem til søstersiden, kan DNS-oppløsningen til dette nettstedet allerede være fullført, og nettleseren kan med en gang starte etableringen av klient-server-TCP-tilkoblingen med søstersiden server, slik at siden lastes raskere.

Denne funksjonen er tilgjengelig i nesten alle moderne nettlesere bortsett fra Safari fra mars 2016.

2. Forkoble

Forkoble er et skritt videre fra DNS prefetch, det etablerer en forbindelse til serveren som det kan bli en forespørsel sendt senere i fremtiden.

W3C viser en ideell brukstilfelle for forkoble: omdirigeringer . Utviklere bruker omdirigeringer av flere grunner.

I dette tilfellet er en nettlesers neste forespørsel (omdirigert nettsted) 100% forutsigbar, og kan forkobles til, for å redusere navigasjonsforsinkelsen .

Tenk deg at det er en mellomledd side som omdirigerer til " xyzsite ", vil følgende HTML-kobling gjøre nettleseren forkoble til xyzsite-serveren når den kommer til den mellomliggende siden.

Fra mars 2016 er dette tilgjengelig i Chrome, Opera og Firefox.

3. Prefetch

Med prefetch, for en ressurs, begynner nettleseren å implementere DNS-oppløsningen av ressursens domenenavn, og utfører en TCP-tilkobling med ressursens server, gjør HTTP-forespørselen, og til slutt henter og lagrer den forhåndsdefinerte ressursen i nettleserens cache.

Hvis du er sikker på hvilke ressurser som trengs senere, er det ressursen som skal forhåndsinnhentes på forhånd. der ligger fangsten. Prefetching tar gjetning, og hvis du antar feil, kan du faktisk sakte i stedet for å øke hastigheten på nettstedet ditt.

For online bøker, gallerier eller porteføljer, hvis brukeren mest sannsynlig vil bla til neste side, kan forhåndsinnhenting av ressurser som bilder, øke hastigheten på ting betydelig. Her er koden for å gjøre det.

Prefetch støttes i Chrome, Firefox og Opera.

4. Prerender

Bare for HTML-sider kan prerendering gjøres. En prerendered HTML-side blir gjort offline, og er malt på skjermen når den faktisk er nødvendig av brukeren. Rendering koster et høyere beregningsarbeid og minne ressurs ; pluss, for å gjøre en side, kan nettleseren trenge ekstra ressurser (som bilder lagt til på siden) som vil føre til mer konsekvente forespørsler fra nettleseren.

Så, prerender må brukes med forsiktighet, og ikke overutnyttet. Hvis du legger til følgende kode, skal du forhåndsvise siden "Om".

Prerender er allerede tilgjengelig i Chrome, IE og Opera fra mars 2016.

Noen ting å merke seg

(1) Ingen av de ovennevnte ressurshintene garanterer utførelsen og gjennomføringen av de forskjellige stadiene av forespørselen det er laget for, fordi når nettleseren allerede er opptatt av å behandle forespørslene som trengs for driften av den nåværende siden brukeren er i, kan utførelsen av disse optimaliseringene hindre brukerens nåværende oppgaver .

Så er alt i kø og utført når nettleseren føles fri nok til å gjøre det.

Disse ressurshintene må ikke nødvendigvis være til stede på siden, selv før siden lastes inn. De kan legges til senere av JavaScript, og ressurshintene vil gjøre jobben sin som vanlig.

(2) W3C angir et HTML-linkattributt kalt hint-sannsynlighet, pr (med verdi 0 til 1) for disse ressurshintene, som kan brukes til å gi sannsynligheten for forespørsler som vil bli gjort i fremtiden. Jeg har ikke sett dette attributtet blir implementert av en hvilken som helst nettleser ennå. Som et eksempel sier følgende kode at det er en 80% sjanse for at xyzsite vil bli forespurt i fremtiden og 30% for omsiden.

Vi kan også legge til det valgfrie crossorigin-attributtet til ressurshintene for å informere nettleseren til den koblede forespørselen CORS-legitimasjon.

22 beste webinarverktøy for å arrangere nettbaserte møter

Webbasert seminar aka webinar er en av de mest populære online markedsføringsteknikkene i disse dager. Det krever imidlertid mye planlegging for å være vert for et vellykket webinar, inkludert effektive webkonferanseverktøy til din disposisjon.Når det gjelder å arrangere et webinar, har hver bedrift forskjellige krav . Og de

(Tekniske og design tips)

Transformerer bildene dine til videohistorier med perle

Vi deler (noen ganger overshare) våre liv på sosiale medier så mye at det har blitt en livsstil for mange online-brukere . Klart, noen ganger går folk over bord med bryllupsfotoene, babybilder, kjæledyrbilder, matfotografier, reisefotografier osv., Og mens noen av oss kan gripe om det, er det nesten alt som noen gjør, en annen brukers kjærlighet .Et alt

(Tekniske og design tips)