Bessere progressive Bilder mit AntiModerate laden

Das AntiModerate-Skript klingt möglicherweise nicht viel. Es ist jedoch eines der besten JS-Skripts, die Sie ausführen können, um die Leistung auf einer größeren Seite zu verbessern und ein starkes Benutzererlebnis zu gewährleisten.

Mit diesem Mit dem kostenlosen Plugin können Sie Bilder laden, wenn sie in der Ansicht erscheinen und reduzieren Sie Ihre Gesamtseitengröße.

Auf diese Weise kann die gesamte Seite geladen werden zuerst mit kleinen Platzhaltern für Bilder. Dann surfen Ihre Besucher auf natürliche Weise, ohne auf das Laden der einzelnen Ressourcen zu warten - aus Sicht des Benutzers immer eine gute Sache!

Das funktioniert so: Sie fügen das AntiModerate-Plugin zusammen mit dem Script StackBlur.js in Ihre Seite ein.

AntiModerate zieht Bildmaße und zwingt alle img-Tags auf der Seite in eine feste Größe. Diese vorab geladenen Bilder werden durch StackBlur.js gepusht, wodurch die Gesamtgröße der Vorschaudatei drastisch reduziert wird, wodurch die Seite viel früher geladen wird.

Sobald diese kleineren Bilder vorhanden sind, lädt AntiModerate die Bilder in voller Größe in den Hintergrund. Jedes verschwommene Foto wird nach dem Download durch das normale Foto ersetzt. Einfach!

Diese erspart viel Zeit beim Warten auf Bilder und es hilft, Ihre Seite schneller zu laden. Dies ist ein enormer Vorteil für Benutzer, da sie damit beginnen können, Inhalte früher zu verbrauchen, und es kommt Ihrem SERP-Ranking zugute, da Google sich sehr um die Seitengeschwindigkeit kümmert.

Sie können die Bibliothek direkt mit npm oder Bower installieren oder das Skript durch GitHub ziehen.

Dies erfordert nur ein paar Zeilen JavaScript und wird sicherlich dazu beitragen, das Laden Ihrer Seite zu verbessern. Werfen Sie einen Blick auf das GitHub-Repo und scrollen Sie zum Setup-Handbuch, um zu beginnen.

Mit nur wenigen Zeilen Code sollte AntiModerate ein Kinderspiel sein, um auf jeder Seite zu laufen.

Ganz zu schweigen davon, dass dies läuft reines JavaScript Daher sind keine Abhängigkeiten wie jQuery erforderlich, um funktionieren zu können.