Die optimale Größe einer Webseite sollte laut Experten bestenfalls 1 MB nicht überschreiten, da sonst die Ladezeit und somit die User Experience empfindlich leiden. Das führt wiederum dazu, dass User abspringen. Der Gedanke, dass schnellere und bessere Internetverbindungen einem solchen Problem vorbeugen, ist ein Trugschluss: Wie eine Studie zeigt, dauerte das Laden einer Webseite in Chrome 2012 rund 7,1 Sekunden, 2015 waren es bereits 10,4 Sekunden.
Am besten sollte die Ladezeit allerdings nur zwischen zwei und vier Sekunden liegen, da danach – gerade in Zeiten des mobilen Internets – die Absprungrate extrem ansteigt. Einen Beitrag zur Optimierung von Ladezeiten steuert AntiModerate bei.
Features von AntiModerate
Bei AntiModerate handelt es sich um eine leichtgewichtige, unabhängige JavaScript-Bibliothek zum stufenweisen Laden von Bildern. Dabei nutzt die Library den Blur-Effekt von StackBlur.js, um das Bild zu verkleinern und so die Ladezeit einer Webseite zu verringern. Im Hintergrund werden währenddessen die Bilder in der Originalgröße geladen, die die verschwommenen Bilder ersetzen, sobald sie vollständig geladen sind.
AntiModerate ist relativ einfach zu verwenden: Man fügt ein Bild zum Dokument hinzu und nutzt das data-antimoderate-idata
-Attribut, um das verschwommene Bild in Base64 zu spezifizieren:
<img class="antimoderate" id="demo" data-antimoderate-scale="1" data-antimoderate-idata="data:image/jpg;base64, ..." >
Anschließend bindet man die AntiModerate-Library in die Webseite ein und aktiviert sie:
<script src="antimoderate.js"></script> <script> var img = document.getElementById('demo'); AntiModerate.process(img, img.getAttribute("data-antimoderate-idata")); </script>
Die Library ist speicheroptimiert, mit gzip braucht sie weniger als 2 KB Platz. Das Tool steht Open Source und lizenzfrei („Do whatever with it.”) auf GitHub zur Verfügung.
Name | AntiModerate |
---|---|
Voraussetzungen | JavaScript Library |
GitHub | https://github.com/whackashoe/antimoderate |
Efficient Transformers
Christoph Henkelmann, DIVISIO
Enhancing Page Visits by Topic Prediction
Dieter Jordens, Continuum Consulting NV
Machine Learning on Edge using TensorFlow
Håkan Silfvernagel, Miles AS
Aufmacherbild: Old pictures on a blurry background von Shutterstock / Urheberrecht: Roobcio