Slick-Slider & IntersectionObserver

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:

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: