Languages
[Edit]
DE

Verbesserung der Ladegeschwindigkeit der React-App mithilfe von asynchronen Bildladen

3 points
Created by:
Nikki
10460

Hallo! 👋 😊

Hast du gewusst, dass, wenn du Bilder auf einer Seite lädst, wenn der Rest des Inhalts schon geladen ist, sieht der Benutzer den Inhalt früher? Und SEO-Tolls erkennen, dass die Seite schneller lädt? 🚀📈

In diesem Beitrag zeige ich, wie ein einfaches Komponent in React erstellt werden kann, wenn alle anderen Ressourcen schon geladen sind. 

Dieser Ansatz beschleunigt das Seiteladen, indem der Ladevorgang in 2 Stufen unterteilt wird:

  • das Seiteladen (ohne asynchrone Bilder) - damit man alles, was man braucht, früher in der richtigen Reihenfolge sieht,
  • das Laden von asynchronen Bildern - Bilder werden erst geladen, wenn die Seite fertig ist.

Das Endergebnis:

dowód wczytywania asynchronicznego obrazów w Google Chrome DevTools
Der Beweis des asynchronen Bildladens in Google Chrome DevTools

Die Pfeile zeigenn die Zeilen an, in denen das Laden der Bilder erfolgte, nach dem Rendern der gesamten Seite. 

Unten sieht man die Lösung in React, wo ich im Speicher image erstelle, das beim Laden signalisiert, das entsprechende Bild auf der Seite anzuzeigen.

Lauffähiges Beispiel:

// ONLINE-RUNNER:browser;

//import React from 'react';
//import ReactDOM from 'react-dom';

const AsyncImage = (props) => {
  	const [loadedSrc, setLoadedSrc] = React.useState(null);
  	React.useEffect(() => {
      	setLoadedSrc(null);
      	if (props.src) {
          	const handleLoad = () => {
            	setLoadedSrc(props.src);
            };
            const image = new Image();
            image.addEventListener('load', handleLoad);
          	image.src = props.src;
            return () => {
              	image.removeEventListener('load', handleLoad);
            };
        }
    }, [props.src]);
  	if (loadedSrc === props.src) {
        return (
            <img {...props} />
        );
    }
  	return null;
};

const App = () => {
    return (
      <div>
        <AsyncImage src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
        <p>Etwas Text hier ...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005168287-pPLQqVWYa9--image.png" />
        <p>Etwas Text hier ...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005138496-MWXQzxrDw4--image.png" />
        <p>Etwas Text hier ...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005318053-3nbAR5nDEZ--image.png" />
      </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Ich empfehle, die Lösung in dein eigenes lokales React-Projekt zu kopieren, die DevTools im Browser zu öffnen und dann die App zu starten, um das Ergebnis zu sehen.

Wenn du diesen Artikel nützlich findest und weitere ähnliche Inhalte wünschst, kannst du gerne auf diesen Beitrag antwortest. 😊

Bis in die kommenden Beiträge! 🖐

Siehe auch

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join