Schnellere Suche mit IE11

Internet Explorer 11 verringert ggf. die Auswirkung der Netzwerklatenz. So können Sie stets ungehindert im Web surfen, ohne dabei Akkulaufzeit, CPU, Netzwerkbandbreite oder Speicherplatz zu beeinträchtigen. Netzwerklatenz beeinträchtigt die Webleistung, obwohl uns heute mehr Bandbreite zur Verfügung steht als je zuvor. Dank IE11 wirkt sich die Netzwerklatenz weit geringer aus. Der Browser lädt Seiten und Webressourcen im Hintergrund, lädt dank des SPDY/3-Protokolls mehrere Ressourcen parallel herunter und führt Downloads der wichtigsten Ressourcen einer Seite nach Priorität aus.

Seitenvorhersage, Vorabladen und Vorabrufen

Seitenvorhersage, Vorabladen (auch als „Vorabrendern“ bezeichnet) und Vorabrufen in IE11 beschleunigen der Herunterladen und Rendern der nächsten Seite bzw. das Herunterladen der Ressourcen für die nächste Seite. Bei Benutzern mit gewöhnlichem Surfverhalten werden Seiten im Voraus abgerufen, im Hintergrund auf einer versteckten Registerkarte gerendert und dadurch sofort angezeigt, wenn die Benutzer auf den Link klicken. Dinge, die Sie im Web häufig tun, wie zum Beispiel die Suche nach Inhalten, das Lesen von Artikeln, das Ansehen von Fotos, werden Ihnen vorkommen, als würden Sie lokal gespeicherte Inhalte nutzen.

Seitenvorhersage, Vorabladen und Vorabrufen in IE11 beschleunigen die alltägliche Webnutzung

IE11 nutzt zwei Informationsquellen, um zu ermitteln, was vorab geladen und vorabgerufen wird: Die „Seitenvorhersage“-Technologie von IE und von Seitenentwicklern bereitgestelltes Markup.

Vorabladen von Webseiten mit automatischer Seitenvorhersage

Mit der automatischen Seitenvorhersage kann Internet Explorer vorhersagen, welche Seite Sie als Nächstes aufrufen und diese Seite vorab laden. Damit erfolgt die Navigation praktisch verzögerungsfrei. Die Vorhersagen werden anhand bekannter Surfmuster, Nutzergewohnheiten und mithilfe von häufigen Hinweisen auf Webseiten wie „Weiter“-Links und Seitennummerierungen getroffen. Der Datenbestand von Bing und Data-Mining-Funktionen sorgen hierbei für Präzision.

Wenn Sie beispielsweise einen Artikel in einem modernen Browser lesen, können Sie mit einer Wischbewegung zur bereits gerenderten nächsten Seite vorblättern. Damit können Sie Webseiten so lesen, wie früher Zeitschriften. Beim Seitenvorhersage-Testdrive lernen Sie diese Funktion kennen.

Der Seitenvorhersage-Testdrive zeigt das praktisch unverzögerte Laden von Seiten in IE11 mit Vorblättern, Seitenvorhersage und Vorabladen.

Vorabladen von Webseiten anhand von Entwicklerhinweisen im Markup

Zusätzlich zum Vorabladen von Inhalten mithilfe der automatischen Vorhersage des nächsten Navigationsschritts durch IE können Entwickler diese das Vorabladen steuern, indem Sie einfaches Markup in Ihre Websites integrieren. Wenn Websiteentwickler den Link, auf den Benutzer als Nächstes klicken, mit an Sicherheit grenzender Wahrscheinlichkeit kennen, können die Entwickler einen Hinweis in die Seite integrieren, der es IE ermöglicht, die folgende Seite im Voraus herunterzuladen und vorzubereiten. Dies kann mit dem Tag <link rel=”prerender”> erfolgen, der von der W3C Web Performance Working Group standardisiert wird. Das Ergebnis ist eine bedeutende Leistungssteigerung und höhere Benutzerfreundlichkeit.

 <linkrel="prerender"href="https://example.com/nextpage.html"/>

Wir verwenden Vorabladen, um Ihre Suche mit Bing benutzerfreundlicher zu gestalten und Ihnen zu schnelleren Suchergebnissen zu verhelfen. Überzeugen Sie sich mit dieser Beispielsuche bei Bing. Wenn Bing davon ausgehen kann, dass Sie auf das Topergebnis klicken, erfolgt eine Anweisung zum Laden des Ergebnisses im Hintergrund.

Vorabrufen individueller Ressourcen mit Entwicklerhinweisen im Markup

Mit IE11 können Sie auch Ressourcen individuell vorabrufen, statt die gesamte Seite vorab zu laden. Im Gegensatz zum Vorabladen benötigt das Vorabrufen fast keinen Speicherplatz bzw. fast keine CPU-Ressourcen. Vorabrufen ist zum Beispiel sehr nützlich, um Formatvorlagen und Skriptdateien abzufragen, die für mehrere Seiten einer Website verwendet werden. Auf diese Weise profitieren Sie von einem durch Blockingressourcen optimal auf das Laden einer Seite vorbereiteten Browsercache, wenn es wahrscheinlich ist, dass Sie verschiedene Links der Seite nutzen werden – egal, für welchen Link Sie sich schließlich entscheiden. Webentwickler können für diesen Zweck den Tag <link rel="prefetch"> verwenden:

 <linkrel="prefetch"href="https://example.com/style.css"/>

Hier sehen Sie die eine vereinfachte Darstellung der Netzwerkvorgänge bei einem Basis-Szenario mit und ohne Vorabrufen. Beachten Sie, dass sich sogar die Ladezeit einer einfachen Seite um etwa 66 % reduziert, wenn einige der Ressourcen vorabgerufen werden. Die grünen Balken zeigen die zum Herunterladen der Ressourcen benötigte Zeit. Mit Vorabrufen-Funktion werden die Ressourcen schneller aus dem lokalen Cache abgerufen.

Ein Beispiel, wie das Vorabrufen großer Ressourcen das Laden einer Seite um 66% beschleunigt

Seitenvorhersage, Vorabladen und Vorabrufen erweitern ein in IE10 eingeführtes Konzept, bei dem durch vorzeitige Aktivierung einer DNS-Auflösung für einen bestimmten Hostnamen bis zu 500 ms Seitenladezeit gespart werden. Hier ein Beispiel:

 <linkrel="dns-prefetch"href="https://example.com/"/>

MSDN bietet eine detaillierte Dokumentation zu Vorabrendern und Vorabrufen.

Schnell und ohne Einbußen bei Akkulaufzeit, CPU und Bandbreite

Die verbesserte Leistung in IE11 beeinträchtigt weder die Akkulaufzeit, noch müssen Sie mit Zusatzkosten durch Ihren Internetdienstanbieter oder reduzierter Leistung der Seiten im Vordergrund rechnen. IE schränkt das Herunterladen von Ressourcen im Hintergrund ein und verwaltet ebenso Timing und Priorität.

IE11 lädt nur Ressourcen herunter, wenn die Navigation dadurch mit hoher Wahrscheinlichkeit beschleunigt wird. IE11 lädt zum Beispiel Seiten und Inhalte nur dann im Woraus, wenn Sie diese mit hoher Wahrscheinlichkeit aufrufen. Außerdem begrenzt IE die Anzahl der Vorablade- und Vorabrufoperationen pro Seite. Dies schont die Ressourcen Ihrer Geräte.

IE verwaltet zudem Timing und Priorität vorzeitiger Downloads. Im Gegensatz zu anderen Browsern lädt IE Seiten nicht vor oder ruft vorab Inhalte ab, wenn Sie sich innerhalb eines getakteten Netzwerks befinden, in dem nach Überschreitung eines Datenlimits Kosten pro Byte berechnet werden. IE11 ist der einzige Browser der die Vorabruf- und Vorabladevorgänge erst dann startet, nachdem die aktive Seite geladen wurde, damit diese Hintergrundaktivitäten die aktive Registerkarte nicht beeinträchtigen. Nur in IE werden Vorabruf- und Vorabladeanfragen von Hintergrundseiten zurückgestellt, bis Sie diese Seite in den Vordergrund holen. Damit wird der benötigte Speicherplatz minimiert und sichergestellt, dass die Systemressourcen für Ihre aktuelle Aufgabe und den nächsten Navigationsschritt verwendet werden. Abschließend werden diese Anfragen zusätzlich mit geringerer Priorität behandelt, um nicht mit aktiven Aufgaben um Bandbreite zu konkurrieren.

Die Vorteile dieses Ansatzes zeigten sich unmittelbar auf der Suchergebnisseite von Bing. Wie bereits erwähnt, fügt Bing dem ersten Suchergebnis einen Vorabladehinweis hinzu. In einem anderen Browser verlängerte sich die Seitenladezeit um 4,36 %, weil das Laden der Hintergrundseite und die Seite im Vordergrund dieselben Netzwerk- und Verarbeitungsressourcen beanspruchen. IE wartet dagegen, bis die Seite im Vordergrund geladen ist, bevor Vorabladeanfragen gestartet werden. So wird gewährleistet, dass keine Hintergrundaktivitäten die Ladezeit der aktiven Seite beeinträchtigen.

Betrachten wir die Vorteile des Ressourcenmanagement-Ansatzes von IE11 an einem Beispiel, in dem IE mit einem führenden Browser verglichen wird, der Inhalte ebenfalls vorab lädt. Bei diesem Beispiel handelt es sich um die Suche nach einem Halloween-Kostüm auf Bing. Das Topergebnis wird vorab geladen. Ich öffne die ersten zwei Suchergebnisse in Hintergrundregisterkarten, um zwei Ergebnisse zu vergleichen. Die zweite Ergebnisseite enthält einen Vorabladehinweis. Ich wechsle zur ersten Ergebnisregisterkarte. Auf dieser finde ich das gesuchte Kostüm. Die zweite Registerkarte beachte ich gar nicht mehr. Im Folgenden sehen Sie, dass IE11 das Netzwerk und den Speicherplatz des Systems effizienter nutzt:

Im Folgenden finden Sie die Diagramme für die CPU-Auslastung, die CPU-Auslastung ist mit IE11 deutlich geringer

CPU-Auslastungsdiagramme für das Vorabladen in IE11 (oben) und einen anderen Browser (unten) zeigen, dass IE11 die CPU weniger beansprucht.

Diese Unterschiede werden deutlicher, je länger Sie im Web surfen. Auf tragbaren Geräten mit begrenzten Ressourcen sorgt IE11 für eine deutlich längere Akkulaufzeit sowie eine wesentlich höhere Systemleistung. In getakteten Netzwerken sparen Sie dadurch bares Geld.

Seitenvorhersage, Vorabladen und Vorabrufen in Aktion

Wenn Sie die Vorablade- und Seitenvorhersagefunktionen genauer in Aktion sehen möchten, sehen Sie sich folgende QuickInfos an:

1. 1. Wenn Sie auf einen Link berühren und halten (oder die Maus darüber bewegen), sehen Sie eine QuickInfo, die anzeigt, dass die Seite im Hintergrund geladen wird:

      

      IE11-QuickInfo, die einen Vorabladevorgang angibt

   2. Wenn Sie auf der vorgeladenen Seite auf die Schaltfläche „Aktualisieren“ berühren und halten (oder mit der Maus darauf zeigen), sehen Sie eine QuickInfo, die angibt, dass die Seite vorgeladen wurde:

IE11-QuickInfo für die Schaltfläche „Aktualisieren“, die angibt, dass die Seite vorgeladen wurde

Sie können den vorzeitigen Netzwerkverkehr auch mit einem HTTP-Debugger wie Fiddler anzeigen.

Steuern von Seitenvorhersage, Vorabladen und Vorabrufen

Sie können die Seitenvorhersage unter „Einstellungen“ über die neue Registerkarte „Datenschutz“ aktivieren bzw. deaktivieren.

Seitenvorhersageeinstellung in IE11 auf der Registerkarte „Datenschutz“

Sie können alle Vorablade- und Vorabruffunktionen ausschalten, indem Sie eine erweiterte Einstellung deaktivieren:

Erweiterte IE11-Einstellung zur Steuerung von Vorabladen und Vorabrufen

Schnelleres Laden von Seiten mit SPDY/3, Vorbereitung für HTTP/2.0

IE11 bietet Unterstützung für SPDY/3 – ein experimentelles Protokoll, mit dem die Seitenladezeit verkürzt wird, indem mehrere Anfragen parallel über eine einzelne Netzwerkverbindung übertragen werden. Neben den schnelleren Seitenladezeiten bietet die Unterstützung von IE11 für SPDY Webentwicklern die Möglichkeit, ihre Websites in Vorbereitung auf den bevorstehenden HTTP/2.0-Standard zu optimieren, der sich derzeit in Entwicklung befindet.

Moderne Websites bestehen in der Regel aus zahlreichen einzelnen Ressourcen. Im Browser werden zur Beschleunigung der Seitenladezeit normalerweise mehrere Verbindungen gleichzeitig geöffnet. Die Anzahl gleichzeitiger Downloads wird jedoch vom Browser eingeschränkt, um eine Überlastung des Netzwerks zu vermeiden. Beim Öffnen der Verbindungen muss ein Browser zudem zunächst auf deren Vollständigkeit warten und wird während des „Aufwärmens“ der Verbindung blockiert. Aus diesem Grund geht im Browser durch das Warten auf Anfragen und Reaktionen viel Zeit verloren, insbesondere in Mobilnetzwerken mit hoher Latenz. Daher kann das Herunterladen und Anzeigen einer Seite mit vielen Ressourcen länger dauern als nötig.

IE11 unterstützt das SPDY/3-Protokoll. Dieses hebt diese Einschränkung auf und verkürzt die Seitenladezeit und verbessert die Reaktionsfähigkeit von modernen Websites. SPDY/3 implementiert das Multiplexing von Anfragen bzw. Reaktionen auf eine einzelne Verbindung. Mit SPDY/3 wird die Seitenladezeit verbessert, da keine Begrenzung auf eine bestimmte Anzahl ausstehender Anfragen erforderlich ist und für gleichzeitige Downloads eine „warme“ Verbindung verwendet wird. Im folgenden Diagramm ist die Verbesserung der Ladezeit einer Webseite dargestellt, deren vollständige Anzeige durch viele Ressourcen blockiert wird:

Mit SPDY/3 wird die Ladezeit für diese Beispielseite verbessert, indem mehrere Ressourcen schneller abgerufen werden und die CPU effizienter genutzt wird als mit HTTP/1.1

SPDY/3 wird von IE11 automatisch mit Websites ausgehandelt, die das Protokoll unterstützen. Benutzer müssen keine Maßnahmen ergreifen. Mehrere beliebte Websites (darunter Facebook und Twitter) unterstützen SPDY/3 bereits. Wenn Sie erfahren möchten, ob IE beim Herstellen einer Verbindung mit einer Website oder beim Herunterladen von Ressourcen SPDY/3 verwendet, finden Sie in den neuen F12-Entwicklungstools auf der Netzwerk-Registerkarte weitere Informationen.

Die F12-Entwicklungstools in IE11 zeigen an, welche Ressourcen mit SPDY/3 heruntergeladen werden.

Obwohl es sich bei SPDY/3 um ein experimentelles Protokoll handelt, dient es als Entwicklungsgrundlage für den kommenden HTTP/2.0-Standard. Microsoft beteiligt sich aktiv an der HTTP/2.0-Standardisierung. Im Rahmen der Zusammenarbeit mit der IETF hat Microsoft mit dem HTTP Speed+Mobility-Vorschlag eine Reihe von Benutzeranforderungen veröffentlicht, in denen die Bedeutung einer reibungslosen Migration vom vorhandenen Webstandard zu HTTP/2.0 unter Beachtung der verwendeten Bandbreite und der Beeinträchtigung der Akkuleistung hervorgehoben wird. Die SPDY/3-Implementierung in IE11 entspricht diesem Ansatz.

Priorisieren von Ressourcen zum effizienten Laden von Seiten

Downloadanforderungen für Ressourcen, die für das Laden einer Seite am wichtigsten sind, werden von IE11 priorisiert. Dies ermöglicht schnelleres und flüssigeres Browsen. Als erstes werden die Ressourcen mit der höchsten Priorität heruntergeladen, und zwar mit den schnellsten TCP-Verbindungen, die zur Verfügung stehen. Beispielsweise behandelt IE11 jene Anfragen mit einer höheren Priorität, die das Laden einer Seite blockieren.

Im Folgenden finden Sie einige Beispiele für Anfragen, deren Priorität herauf- bzw. herabgestuft wird:

• Blockierungsressourcen wie CSS, Javascript und Stamm-HTML werden priorisiert.
• Aufrufe UI-Threads und synchrone XHR-Anforderungen werden priorisiert.
• Inhalte von Hintergrundregisterkarten haben eine niedrige Priorität (dazu gehören vorab geladene Seiten).
• iFrame-Inhalte haben eine niedrige Priorität.

Entwickler können die Priorisierung von Ressourcendownloads in IE11 beliebig bearbeiten. Das integrierte Prioritätsschema ist unter Umständen für einige Webseiten nicht ausreichend. Entwickler können zum Beispiel festlegen, dass die Priorität von Bildern „unter dem Browserrand“ niedriger eingestuft wird als die Priorität von Ressourcen, die sich „über dem unteren Browserrand“ befinden.

Die Priorität einer Ressource kann wie folgt durch das Hinzufügen eines Lazyload-Tags herabgestuft werden:

 <imgsrc="image.jpg" lazyload />

IE ist der erste Browser, der Entwicklern diese Funktion bietet. In der W3C Web Performance Working Group wird kontinuierlich an der Standardisierung dieses Verhaltens gearbeitet.

Fazit

IE11 verringert die Auswirkungen von Netzwerklatenz durch vorzeitiges Abrufen von Seiten und Inhalten. Das Netzwerk wird mit dem SPDY/3-Protokoll effizienter genutzt, und die Priorisierung von Ressourcen beschleunigt das Browsen. Die Entwicklung basiert auf der Optimierung der Netzwerkleistung und den Cache-Verbesserungen, die mit IE9 und IE10 eingeführt wurden.

Testen Sie IE11. Selbstverständlich freuen wir uns wie immer auf Ihr Feedback über Connect.

Viel Spaß im Web!

Ritika Kapadia und Bogdan Brinza
Program Manager
Internet Explorer