Die Verwendung von rel=”preconnect” zu etablieren Netzwerkverbindungen früh und die Leistung steigern

0
15

Milica Mihajlija:

Das hinzufügen von rel=preconnect zu einem <link> informiert den browser, dass auf Ihrer Seite beabsichtigt den Aufbau einer Verbindung zu einer anderen Domäne, und, dass Sie möchten, den Prozess so bald wie möglich beginnen. Ressourcen Belastung mehr schnell, weil der setup-Prozess bereits abgeschlossen ist, durch die Zeit, die der browser Sie anfordert.

Die Grafik in den post macht einen guten job zu machen dies eine offensichtlich gute Wahl für performance:

Robin hat einen guten job der Rundung bis Informationen über alle diese Art von Sachen, die ein paar Jahre zurück. Sieht aus wie die beste Vorgehensweise ist im Moment mit diesen beiden:

<link rel=”preconnect” href=”http://example.com”>
<link rel=”dns-prefetch” href=”http://example.com”>

Für alle domains, die nicht die Haupt-domain, die Sie laden das Dokument aus.

Ein kurzer Blick auf CSS-Tricks, die Ressourcen jetzt, bekomme ich:

secure.gravatar.com
statisch.codepen.io
res.cloudinary.com
ad.doubleclick.com
s3.buysellads.com
srv.buysellads.com
www.google-analytics.com

Das wäre 14 extra <link> – tags in den ersten paar Pakete von Daten auf jede Anfrage, die auf dieser Website. Es klingt wie ein perf gewinnen, aber ich würde wollen, um zu testen, dass vor no-brainer Spannmittel es dort.

Andy Davies hat einige neuere Experimente:

Also, welchen Unterschied können preconnect machen?

Ich verwendet das HTTP-Archiv finden Sie ein paar Websites, die Cloudinary für Ihre Bilder, und getestet Sie unverändert, und klicken Sie dann mit der preconnect Skript injiziert werden. Jeder test Bestand aus neun Läufen, mit Chrom-Emulation eines mobilen Geräts und der Kabel-Netzwerk-Profil.

Es ist eine merkliche Verbesserung des visuellen ersten Seite, mit den wichtigsten hintergrund-Bild laden über eine halbe Sekunde früher (oben) als auf die unveränderten Seiten (unten).

Dieses Zeug macht mich denken, dass der sofortige.Seite (das ging nur v2), das ist ein fantastisches kleines Skript, dass vorbelastungen Dinge, die auf Wechselwirkungen. Es gibt jetzt auch eine browser-Erweiterung (FasterChrome), dass ich versucht habe, heraus. Ich kann nicht sagen, ich merke einen riesigen Unterschied, aber ich bin fast immer auf schnelle internet-verbindungen.