Die typische Reise eines Nutzers beim Surfen auf einer Website: Eine Seite ansehen, auf einen Link klicken, der Browser lädt die neue Seite. Das gilt, wenn keine Tricks wie eine Single Page App im Spiel sind, die trotzdem diesem Ablauf folgt, aber der Browser lädt keine neue Seite – die Anwendung täuscht es aus Gründen eines schnelleren Übergangs vor.
Was wäre, wenn Sie die neue Seite laden könnten, *bevor* die Person auf den Link klickt, damit das Laden der nächsten Seite deutlich schneller ist? Es gibt zwei bemerkenswerte Projekte, die dabei helfen:
- quicklink: Erkennt sichtbare Links, wartet, bis der Browser im Leerlauf ist, und wenn die Verbindung nicht langsam ist, werden diese Links vorab geladen.
- instant.page: Wenn Sie mit der Maus über einen Link fahren (hovern) für 65 ms, wird dieser Link vorab geladen. Die neue Version 2 ermöglicht es Ihnen, die Zeitverzögerung zu konfigurieren oder zu entscheiden, ob Sie auf einen Klick oder Tastendruck warten möchten, bevor Sie vorladen.
Kombinieren Sie diese Dinge mit technologischen Verbesserungen wie Paint Holding, und der Aufbau einer SPA-Architektur nur aus Geschwindigkeitsgründen wird möglicherweise unnötig (obwohl sie aus anderen Gründen, wie Code-Splitting, der Übertragung der Routing-Verantwortung auf Frontend-Entwickler usw., immer noch wünschenswert sein kann).
Das ist eine großartige Idee.
Aber was ich zusätzlich tun würde, wäre, das übliche Verhalten der Nutzer zu überwachen und diejenigen vorzuladen, die aufgrund einer Reihe von Bedingungen eine hohe Klickwahrscheinlichkeit haben.
https://guess-js.github.io/docs Könnte das von Interesse sein?
Das ist wirklich nützlich. Ich werde mir insta.page ansehen und sehen, wie gut es sich in einfache statische Websites integriert.
Was ist mit riesigen Websites mit vielen Links im Menü? Werden dadurch nicht die vollständige Website geladen und ist das wirklich das, was wir vom Nutzer wollen? Könnte super für kleine Seiten sein, aber nicht für eine ganze Website.
Für WordPress, schau dir Tada an – es nutzt instant.page — https://wordpress.org/plugins/tada/ Funktioniert out of the box super mit den meisten Themes.
Ich persönlich habe swup.js verwendet, das sehr gut funktioniert. Sie können es hier sehen, wenn Sie interessiert sind: http://samenvattingen.woutermissler.nl
Was für ein schöner Zeitpunkt für diesen Artikel, vor 4 Tagen habe ich nach ähnlichen Lösungen wie instantClick und anderen gesucht, entweder funktionierte die Bibliothek nicht oder nicht perfekt. Ich werde diese ausprobieren… Vielen Dank.
Diese Sätze haben mich etwas überrascht. Normalerweise, jedes Mal, wenn ich eine SPA-Neugestaltung in freier Wildbahn sehe, ist sie merklich träger und ruckeliger. Ich dachte, SPA-Technologie sei eher für die Bequemlichkeit der Entwickler gedacht, während die Geschwindigkeit auf Nutzerseite eher ein Opfer war, das man bereit ist zu bringen. Schließlich werden viele Javascript-Dateien geladen, dann belegen sie den Hauptthread und führen eine Menge CPU-intensiver Dinge aus. Sehr, sehr neugierig, wie dies angeblich schneller sein soll als traditionelle serverseitig gerenderte Technologien.
Es wäre interessant, diese Techniken mit bestehender SPA-Architektur zu kombinieren, um die Daten der nächsten Route vorab zu laden und wirklich sofortige Übergänge zu ermöglichen.
Würde das Vorladen einer Seite Probleme mit Google Analytics verursachen?
Erinnert mich an Amazon, Versand vorbereiten, Artikel, die Sie in Ihrem Warenkorb haben, bevor Sie sie tatsächlich kaufen.
Ich verwende derzeit Flying Pages (https://wordpress.org/plugins/flying-pages/) und es gefällt mir sehr gut.
Ich stimme Ryan zu. Flying Pages (https://github.com/gijo-varghese/flying-pages) hat die Funktionen von Quicklink und Instant.page. Wenn Sie zu viele Links im Ansichtsfenster haben, stoppt Flying Pages das Vorladen, wenn der Server beschäftigt ist, und lädt nur wenige Anfragen pro Sekunde vor. Bisher funktioniert es großartig auf statischen Websites sowie auf WordPress-Sites.
Gatsby macht das schon! Wenn der Nutzer über einen beliebigen (internen) Link fährt, werden die neue Seite vorab geladen, was eine großartige Benutzererfahrung bietet.
Sie können es auf der Gatsby-Website (https://www.gatsbyjs.org/) ausprobieren – öffnen Sie den Netzwerk-Tab in den Entwicklertools und fahren Sie mit der Maus über einen beliebigen Link, um es in Aktion zu sehen.