Bei der Wall of Speaker Seite der .NET User Group Bern sind die Bilder eingebettet, wie im Artikel «Beitragsseiten für Social Media aufbereiten» beschrieben. Da bereits sehr viele Speaker bei der .NET User Group Bern zu Gast waren, sind dementsprechend sehr viele Porträts eingebettet. Total 985 Kilobyte, das hat Auswirkungen auf die Ladezeit.

Problem

Wie können wir die Ladezeit bei der Seite «Wall of Speaker» beschleunigen?

Aktion

In einem ersten Schritt passten wir die Einbettung der Porträtbilder an. Dies reduzierte die Seitengrösse von knapp 985 auf 65 Kilobyte. Bei 68 Sprechern wurden weitere 68 Request für das Laden der Bilder ausgeführt.

Mit JavaScript gibt es Möglichkeiten, diese erst nachzuladen, wenn sie im sichtbaren Bereich des Browserfensters kommen. Dies wäre eine Variante. In den neueren Browsern gibt es ein Attribut «loading» für Bilder und Frames, das diese Aufgabe ebenfalls erledigen kann und viel unkomplizierter zu implementieren ist.

Mit der Ergänzung loading=lazy ist das native nachladen von Bildern bereits realisiert.

<a href="Danke/@talk.Code" title="Zum Profil von @talk.VollstaendigerName">
                        <img loading="lazy" src="@Url.Action("Sprecher", "Bild", new { code = talk.Code })" class="speakerwall-profile" alt="Profilbild @talk.VollstaendigerName" />
</a>

Resultat

Nach der Aktualisierung der Seite werden die Porträtbilder der Sprecher erst geladen, wenn diese im sichtbaren Bereich des Browserfensters erscheinen.

Browser wie Firefox, Chrome (beide ab Version 75) und auf Chromium basierende Browser, wie zum Beispiel Edge unterstützen diese Funktionalität. Aus diesem Grund entschieden wir uns dazu, keine abwärtskompatiblen JavaScript-Libs zu implementieren.

Im Video ist innerhalb der Netzwerkanalyse ersichtlich, wie die Bilder beim scrollen nachgeladen werden: