Vaikka kaikkien tavoitteena on pienentää web-suorituskykybudjettia, on silti tarpeen hyödyntää kolmannen osapuolen palveluita. Kun käytät näitä palveluita, "DNS-haku" kertaa voi kuluttaa huomattavan osan budjetista palveluiden määrästä riippuen. Nämä lataukset vaikuttavat sivun nopeuden useisiin näkökohtiin, mukaan lukien First Contentful Paint (FCP).

Näiden kahden konseptin tarkoitus on optimoida kolmannen osapuolen yhteysajat. Ennen kuin ymmärrät näiden kahden käsitteen väliset erot, sinun on ymmärrettävä, mitä tarkalleen tapahtuu, kun kolmannen osapuolen pyyntö tehdään:

  1. Verkkotunnus on ratkaistu IP-osoitteen saamiseksi.
  2. Yhteys palvelimeen muodostetaan.
  3. Yhteys on salattu turvallisuuden takaamiseksi.

Tämä hierarkia toistetaan jokaiselle kolmannen osapuolen yhteydelle. Tässä tulee esiin ero preconnectin ja dns-prefetchin välillä.

  • Esiyhteys: Varmistaa, että kaikki kolme edellä mainittua vaihetta on esikonfiguroitu.
  • DNS-esihaku: Toimii vain verkkotunnuksen muuntamiseen IP-osoitteeksi ensimmäisessä vaiheessa.

Kuten näet, preconnect on kattavampi ja hyödyllisempi. Kaikella on kuitenkin hintansa. Preconnect-toiminnon käyttäminen kaikissa yhteyksissä voi vaikuttaa negatiivisesti sivusi optimointiin. Siksi yKäytä preconnect-toimintoa vain kriittisille yhteyksille ja dns-prefetchiä kaikille muille kolmannen osapuolen yhteyksille.

image-14.png
Lähde: https://web.dev/preconnect-and-dns-prefetch/

Yhteenveto käytöstä

Ottaen huomioon yllä olevat tiedot, tässä on lyhyt yhteenveto niiden käytöstä:

<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">

Selaimen yhteensopivuus

Niiden käytöstä puhuttaessa on myös tärkeää mainita selaimen yhteensopivuus. Nykyaikaiset selaimet tukevat laajasti näitä kahta läheisesti toisiinsa liittyvää käsitettä, mutta niiden käyttö ei ole täysin päällekkäistä. Noin 97 % selaimista tukee preconnectia, Kun taas 83 % selaimista tukee dns-prefetchiä (kesäkuussa 2024).

Osallistuminen Web Performance -budjettiin

  • Preconnect voi tarjota kokonaisnopeuden parannuksen 100-500ms.
  • DNS-Prefetch voi nopeuttaa jokaista yhteyttä 20-120ms.

Aiomme tehdä omia testejämme tarjotaksemme tyydyttävämpiä paikallisia esimerkkejä.

Lopuksi haluan suositella ja kiittää Ceyhun Enki Aksanin blogia, joka auttoi suuresti ymmärtämääni tätä artikkelia valmistellessa: Ceyhun Enki Aksanin blogi.