Progressives Rendering: Verbesserung der Leistung der Inhaltsanzeige

Progressive Rendering ist eine Reihe von Techniken zur Verbesserung der Leistung einer Webseite, insbesondere im Hinblick darauf, wie schnell Inhalte den Benutzern angezeigt werden. Teile der Seite werden nach und nach angezeigt und geladen, anstatt dass die gesamte Seite auf einmal geladen wird. Ziel ist es, den Inhalt so schnell wie möglich anzuzeigen und dadurch die wahrnehmungsbezogene Ladezeit zu verbessern – die Zeit, in der der Nutzer wahrnimmt, dass die Seite geladen wird.

---

Vorteile des progressiven Renderings

1. Schnellere Anzeigezeit – Benutzer sehen den ersten Inhalt schneller, was das Benutzererlebnis verbessert, insbesondere in langsameren Netzwerken.

2. Optimierung für schwächere Geräte – Weniger leistungsstarke Geräte können erste Inhalte einfacher und ohne Verzögerung anzeigen.

3. SEO nutzt – Suchmaschinen indizieren anfänglich geladene Elemente, was zu einem besseren Seitenranking beiträgt.

---

Techniken für progressives Rendering

Zu den für das progressive Rendering verwendeten Techniken gehören Lazy Loading für Bilder und andere Ressourcen, serverseitiges Rendering (SSR) und clientseitige Hydration Code SPA Anwendung.

Während progressives Rendering in den Tagen, als das Internet langsamer war, besonders wichtig war, ist es auch in der heutigen Entwicklung aufgrund der weit verbreiteten Nutzung mobiler Netzwerke, die unzuverlässig sein können, immer noch nützlich. Hier sind einige Techniken, die für progressives Rendering verwendet werden.

1. Verzögertes Laden von Bildern (Lazy Loading)

Bei dieser Technik werden die Bilder auf der Seite nicht alle auf einmal geladen. Stattdessen werden Bilder nur geladen, wenn der Benutzer zu dem Teil der Seite scrollt, in dem sich das Bild befindet. Dadurch werden Ressourcen sparsamer genutzt und die Seite lädt schneller, da nur die wichtigsten Inhalte zuerst angezeigt werden.

• Modernes verzögertes Laden: HTML unterstützt jetzt das Attribut „loading="lazy" für Elemente, die den Browser anweisen, das Laden von Bildern außerhalb des sichtbaren Teils der Seite zu verzögern, bis der Benutzer in deren Nähe scrollt. Zum Beispiel:

   <img src="image.jpg" loading="lazy" alt="Opis slike">

• JavaScript-Scroll-Tracking: Sie können JavaScript verwenden, um die Scroll-Position zu verfolgen, und wenn das Bild in die Nähe des sichtbaren Teils des Bildschirms kommt, kann das Laden des Bildes in diesem Moment ausgelöst werden (durch Vergleich der Koordinaten des Bild mit der aktuellen Scrollposition).

2. Priorität für sichtbare Inhalte (Inhalt über dem Overlay rendern)

Mit „Content Above the Fold“ meinen wir Inhalte, die ohne Scrollen sofort im Browser sichtbar sind. Damit die Seite diesen wichtigen Inhalt so schnell wie möglich anzeigt, müssen nur die notwendigen Ressourcen wie grundlegendes CSS und anfängliche Skripte zur Seitendarstellung geladen werden.

Ressourcen minimieren: Beim Laden einer Seite sollten Sie nur die minimale Menge an CSS, Inhalten und Skripten einschließen, die zum Rendern des ersten Teils der Seite erforderlich ist. Andere Ressourcen können mithilfe von Verzögerungsskripten oder durch Überwachung von Ereignissen wie DOMContentLoaded oder Load zurückgestellt werden, sodass nach der ersten Anzeige zusätzliche Ressourcen geladen werden.

3. Asynchrone HTML-Fragmente

Diese Technik ermöglicht es dem Server, einen Teil des HTML-Codes an den Browser zu senden, sodass die Seite sofort gerendert werden kann, während die restlichen Teile nacheinander geladen werden. Dieser Ansatz ist besonders nützlich für dynamische Seiten, bei denen der Inhalt vom Server kommt – ein Teil der Seite wird zuerst angezeigt, während andere Teile später hinzugefügt werden.

4. Vorladen und Vorabrufen von Ressourcen

Mit oder um kritische Ressourcen wie Stile, Skripte oder Schriftarten zu laden, bevor sie benötigt werden. Dadurch können Inhalte schneller geladen werden, insbesondere für Ressourcen, die nicht sofort benötigt werden, aber später auf der Seite verwendet werden.

5. Codeaufteilung und dynamisches Laden von JavaScript

Aufteilen des JavaScript-Codes in kleinere Teile (Chunks), die nur bei Bedarf geladen werden, wodurch das anfängliche Datenvolumen, das heruntergeladen wird, reduziert wird.

6. CSS-Kritischer Pfad (Critical CSS)

Isolieren und laden Sie nur das wichtigste CSS für die erste Seitenanzeige, während der Rest asynchron geladen werden kann. Dadurch können visuelle Inhalte schneller gerendert werden, während der Rest der Seite im Hintergrund geladen wird.

7. Serverseitiges Rendering (SSR) und Static Site Generation (SSG)

Rendern von Teilen der Seite auf dem Server, bevor sie an den Benutzer gesendet werden. Dadurch können Benutzer Inhalte sofort sehen, ohne auf das Laden von JavaScript warten zu müssen, was zu einer besseren Leistung und SEO führt.

8. Progressive Web Apps (PWA)

Die Verwendung der PWA-Technologie ermöglicht das Laden und Zugreifen auf die Anwendung, auch wenn der Benutzer nicht online ist, was die Netzwerklast reduziert und ein schnelles Laden von Inhalten auch bei schlechter Internetverbindung ermöglicht.

---

Abschluss

Progressives Rendering trägt zu einer schnelleren Inhaltswiedergabe bei und verkürzt so die wahrgenommene Ladezeit. Unabhängig von schnelleren Internetverbindungen sind diese Techniken aufgrund der zunehmenden Nutzung mobiler Geräte und der sich ändernden Qualität der Mobilfunknetze immer noch nützlich. Auf diese Weise bieten Sie den Benutzern ein besseres Erlebnis und einen schnelleren Zugriff auf die wichtigsten Informationen auf Ihrer Seite.

Das obige ist der detaillierte Inhalt vonProgressives Rendering: Verbesserung der Leistung der Inhaltsanzeige. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!