Hogyan kell használni az előfeszítés, előzetes letöltési és preconnect felgyorsítása helyszínen

Tekintsük erőforrás tippeket és tanácsokat (Resource Tanácsok). Ezek az eszközök felgyorsítja weboldalak és webes alkalmazások. Nézzük a különbség a tippeket preload, előbeolvasási és preconnect. Ez segít, hogy használja őket sikeresen. Íme néhány az előnyei:

1) optimalizálja a szállítási erőforrások
2) mennyiségének csökkentésére a hálózati késedelmek;
3) tartalmat gyorsabban - egy időben, miközben a felhasználó nézi az oldalt.

1. irányelv preload

Mi a preload eltér az előzetes letöltési? Előretöltés együttműködik az aktuális navigációra és forrásokat kiemelten kezeli. Prefetch - források alacsony prioritást a következő navigációs. Megjegyezzük, hogy az előfeszítés nem blokkolja az ablak esemény onload.

1.1. Az előnye, preload irányelv

Itt van néhány előnye preload értelmében:

• Ez lehetővé teszi a böngésző, hogy létrehoz egy erőforrás prioritás. ez viszont lehetővé teszi, hogy a webfejlesztők optimalizálja a források.
• Ez lehetővé teszi a böngésző, hogy megtudja, milyen típusú erőforrás. ez viszont lehetővé teszi, hogy látni, hogy ugyanazt az erőforrást használja fel újra a jövőben.
• Lehetővé teszi a böngészőt, hogy megtudja, hogy a kérelem összeegyeztethető a tartalom biztonsági politika összhangban attribútum.
• Lehetővé teszi, hogy a böngésző elküldi a megfelelő fogadja fejlécek alapján forrás típusát (például kép / webp).

1.2. példák

Itt van egy nagyon egyszerű példát kép előfeszítő.

Az alábbiakban egy példát előfeszítő betűtípusokat.

Megjegyzés. Amikor előfeszítő engedélyek CORS szükségletre crossorigin tulajdonság.

1.3. Böngésző támogatás preload

2. Prefetch

Prefetch - alacsony prioritású erőforrás tooltip, amelyekkel ki lehet választani a böngésző a háttérben (a szabad idő) a források, hogy hasznos lesz később, és mentse őket a böngésző cache. Miután az oldal betöltése befejeződött, előzetes letöltési betölti néhány további forrásokat. Ha a felhasználó megnyomja az előzetes letöltési-link, előzetes letöltési azonnal betölti a kontextusban. Három különböző típusú előzetes letöltési, alább:

1) referencia;
2) a DNS;
3) előmegjelenítési.

A 3. ábra négy lépést végző Referencia előzetes letöltési.

2. lépés (2. lépés). A böngésző előzetes letöltési-link (Böngésző találja előzetes letöltési linkeket).

3. lépés (3. lépés). Böngésző kiválasztja a kért tartalmat megmutatni a előzetes letöltési oldalt képernyőn. Ugyanakkor a tartalom a cache, amíg a felhasználó rákattint a hivatkozásra. Mutatja a böngésző cache.

Ábra. 3. Négy referencia előzetes letöltési végrehajtási lépésben

2.1. Referencia előzetes letöltési

Mint már említettük, referencia előzetes letöltési lehetővé teszi a böngésző, hogy kiválassza a források és tárolja azokat a gyorsítótárat. utal. akkor mi a felhasználó kéri őket. A böngésző megkeresi előzetes letöltési a HTML tag vagy a címében Link:

• HTML:
• HTTP fejléc: Link: ; rel = előzetes letöltési

Megjegyzés. „Ez a technika felgyorsítja számos interaktív oldalak, de nem fog működni mindig és mindenhol a következő okok miatt:

2.2. DNS előzetes letöltési

A előzetes letöltési DNS lehetővé teszi a böngésző, hogy végre névfeloldással az oldalon a háttérben. míg a felhasználó böngészi a honlapot. Ez csökkenti a várakozási idő, mert a DNS-keresés már megtörtént, amikor a felhasználó rákattint a hivatkozásra.

DNS előzetes letöltési szereplő URL-egy attribútum a link tag: rel = »előzetes letöltési». Google használt betűtípusok, a Google Analytics és CDN.

«DNS-lekérdezések gyorsabban szempontjából sávszélesség, de látencia magas lehet, különösen a mobil hálózatok. Elméletileg DNS előzetes letöltési jelentősen csökkentheti a várakozási idő bizonyos időpontokban, például ha a felhasználó rákattint a hivatkozásra. Előfordul, hogy a várakozási idő csökkenthető a teljes második. "

Mozilla Developer Network.

Azt is használják a források elosztását. Itt egy példa:

Ábra. 5. DNS előzetes letöltési 10 hosts jövőbeni letöltéseket. Az első oszlop a gazdagép nevét. Második - Meddig (hh: mm: ss). harmadik - Forrás

Ön is használja Pagespeed-szűrő insert_dns_prefetch, amely hozza címkék A cím az oldal automatikusan minden domain, illetve speciális szolgáltatásokat, mint például a Ayri.rf.

Mintegy Pagespeed-szűrő, lásd. Egy rövid cikket „csomag Page Speed ​​a Google-tól» a Habrahabr

2.3. Előmegjelenítés

«Előmegjelenítés Tipp az alkalmazás által használt, hogy jelezze a következő valószínűleg célok HTML-navigáció. Ebben az esetben a kliens választja ki és dolgozza fel a megadott erőforrást egy HTML-válasz. De ahhoz, hogy válasszon egy másik típusú tartalom, illetve ha előzetes feldolgozási HTML nem kívánatos, az alkalmazás egy másik prompt - előzetes letöltési ».

Ábra. 7 vázlatosan mutatja, hogy a tag indul Előmegjelenítés

Óvatosságra van szükség a Előmegjelenítés, akkor - a nagy erőforrás, és annak használata okozhat egy csepp sávszélesség, különösen a mobil eszközök.

A 8. ábra egy példa a csekk Előmegjelenítés Chrome-on keresztül: // net-internals / # Előmegjelenítés

Ábra. 8. példa megtekintéséhez Előmegjelenítés keresztül chrome: // net-belső / # Előmegjelenítés

Prefetch van néhány hátránya, mint a problémák a magánélet.

3. preconnect

Végül, úgy preconnect. Preconnect lehetővé teszi a böngésző, hogy létrehoz egy kapcsolatot, mielőtt a HTTP-kérést kell küldeni a szerver. Ez az eljárás magában DNS kereséseket, „tárgyalások» TLS és a „kézfogás» TCP. Ami viszont megszünteti a köralakú késleltetés és elmenti a felhasználó időt.

«Preconnect - fontos eszköz, hogy optimalizálja ... mert kiküszöböli a költséges késések körpályán a kérelmet. Előfordul, hogy a várakozási idő a kérelem csökken több száz, sőt több ezer milliszekundum. "

Ilya Grigorik (Eng. Ilya Grigorik).

A 10. ábra összehasonlítja idő DNS / TCP / TLS indíts preconnect nélkül. A felső részén a ábra mutatja a letöltési idő használata nélkül preconnect, egyenlő 2.6. Az alábbiakban - a preconnect betöltési idő 2,1 másodperc.

Ábra. 10. Összehasonlító idő DNS / TCP / TLS indító vagy anélkül preconnect

Ebben a konkrét esetben preconnect eltávolítja három kör késedelem kritikus út és csökkenti a várakozási idő több mint fél másodperccel.

Ábra. 11. Példa preconnect Google betűtípusok

Talán most a felismerés, hogy vannak preload, előzetes letöltési és preconnect volt kicsit jobban. És azt is használja a stratégia, hogy gyorsítsa fel a tartalomszolgáltatás. Jó lenne, ha a használat a preload irányelv növekedni fog az elkövetkező hónapokban, és a webes fejlesztők elfogadja azt.