Slick-Slider & IntersectionObserver

Veröffentlicht von mafudelaptu am

Motivation

Wenn es um Performance Optimierung geht, ist jedes Einsparen von JavaScript Gold wert.

Eine möglich Optimierungsstrategie ist dabei: führe nur das JavaScript aus, was auch zurzeit im Viewport des Browsers zusehen ist und nicht mehr.

Der Slick-Slider wird in der Regel beim document.ready geladen.

Beispiel:

JS

Das hat den Nachteil das unnötig JavaScript ausgeführt, wenn der Slider nicht zusehen ist. Auch Bilder werden dadurch geladen, auch wenn das Lazyloading von Slick-Slider korrekt implementiert wurde. Der Pagespeed wird negativ beeinflusst.

Lösung

Mit Hilfe der IntersectionObserver  API ist es möglich den Slick-Slider erst zu initialisieren, wenn dieser auch wirklich zu sehen ist. Das spart Netzwerk-Ressourcen und führt zum besseren Pagespeed.

Im folgendem Codepen wird gezeigt, wie es beispielsweise umgesetzt werden kann:


0 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.