Bug #2608
closedLazy load silder images
0%
Description
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 :)
Updated by Raymond Hoh over 11 years ago
We might be able to accomplish lazyloading with jQuery.
I'll need to take a look at how the existing slider works though. Will reply with further feedback.
Updated by Raymond Hoh over 11 years ago
I've figured out how to use our current slider code with jQuery's Lazy Load library.
Check it out:
[redacted JSBin link]
With lazy-loading, the page is 1.4MB. Before lazy-loading, the page is 3.9MB in size.
We could probably lazy-load the avatars as well.
Updated by Boone Gorges over 11 years ago
- Target version changed from 1.5 to 1.4.30
Wow, now that's results!
If it can be easily applied to the avatars in the widgets, please do so.
I'm going to put this in an earlier release, since it sounds like it's fairly straightforward.
Updated by Raymond Hoh over 11 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.
Updated by Boone Gorges over 11 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.
Updated by Matt Gold over 11 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.
Updated by Raymond Hoh over 11 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.