This is a short story about WordPress website performance optimization. A recent project of mine involved optimizing a website, currently scoring 20 in Google PageSpeed Insights for Performance.
The WordPress website in question was built using WPBakery and Slider Revolution. Luckily for me, the slider was only used on the homepage. I tried all Slider Revolution optimization tips out there, and I still could not get past 40. As I could not get rid of WPBakery, I focused all my efforts on the slider. I decided to rewrite the slider using custom code. The client was not likely to change the slider soon, and pagespeed is more important than having an easily configurable slider. Worst case scenario, a developer would need to change a slide or add some new content.
Now, sliders are tricky. I needed one that could do the following:
- Dragging on desktop devices
- Swiping on mobile devices
- Infinite loops
- Parallax scrolling
- No dependencies (such as jQuery)
My slider of choice has been, for years, Flickity. My plan was to build a custom plugin, something small, enqueue Flickity and hardcode the slides. The slides needed CSS transitions and parallax scrolling. And that was pretty easy, and I was able to replicate Slider Revolution’s design up to 90%. But then again, the client was not interested in having that exact design and animations.
I was able to replicate text transitions, I was able to have multiple elements (such as logos) on each slide, and I was able to overlay special visual effects (such as smoke clouds, which are an animated GIF set as a cover background in a ::before pseudo-element).
So, here it is (I have changed the images for demo purposes):
See the Pen Flickity – Hero Slider with CSS Transitions by Ciprian (@ciprian) on CodePen.
Here is a direct link to the CodePen demo.
After implementing this slider and deactivating Slider Revolution, my performance score went up to 70.
Sometimes, if not always, it’s more important to have a good performance score than to have an easily customizable element or feature on your website.
