Lazy load silder images
Our home page has a slider at the top that has many images (looks like 18, at the moment). They're fairly small, but they still cause a slowdown when loading the page, especially on mobile devices.
I had the idea that we might only load the first image or two into the DOM on load, and then fetch the rest via ajax. This might result in a bit more overhead on the server side (WP will have to load twice - once for the initial request, and once for the AJAX request to fetch the rest of the slides), but I bet it'd be more than outweighed by the client-side speed-up.
Ray, we're using a custom plugin to power the slider (it was written by Ron Rennick). Would you mind having a look to see how feasible this plan is? Or tell me if you think I'm nuts :)
#4 Updated by Raymond Hoh almost 6 years ago
- Status changed from Assigned to Resolved
Okay, I've updated the Post Gallery Widget to use lazy loading in commit 2bca403.
About lazy loading avatars, I decided to create a new plugin. The reason why is I had to use a different lazy load library as both have their pros and cons.
You can see both in action here:
[redacted JSBin link]
I haven't added the lazy load avatars plugin to the CAC repo yet. Give it a test drive and let me know what you think.
#5 Updated by Boone Gorges almost 6 years ago
Awesome work, Ray. I can feel the snappiness even on my local.
I've gone ahead and added the new plugin to 1.4.x in https://github.com/castiron/cac/commit/ce3cab8a15aa8407c2ebedf47ddfe7b2c1cea02d
Thanks for doing this - I think it's going to have a big effect. And please feel free to release the lazyload plugin in the wp.org repo.
#9 Updated by Raymond Hoh almost 6 years ago
Just a note that we should take down or password protect this site when we're done with this. I received notification of its existence through a google alert.
It appears that you cannot delete JSBin scratchpads.
The reason you probably got a Google alert is because those links were parsed by Google from Redmine.
The best thing to do is to remove all references of JSBin from this ticket, that way no one will know those URLs exist. I've already removed my links from this thread. Matt, you should do the same for comment 8.