Lazy loading sliders and Google PageSpeed render blocking issue
Love them or hate them, sliders appear on many websites. Many clients ask for them so we use them a lot on the WordPress sites we build. Using the Advanced Custom Fields Repeater field, we can make the banners editable for clients too. All good, aside from the file size of using multiple large images. To counter this we started using lazy loading code that loads the slider using a dummy image and then loads the actual slider images from a data attribute.
Loading smaller images for mobile users
Using multiple massive images on mobile didn’t make sense, so we also tweaked the code to load smaller images for mobile sizes. jRespond was used for this and allows jQuery code to be run at various breakpoints. This meant uploading more images but the speed gains were impressive. There was one problem though – the jQuery slider was causing a ‘render blocking’ error on Google Pagespeed and limiting the scores we could achieve. Getting green ticks for desktop and mobile is ideal, so I needed a better option for this.