Bug #2608
closed
Added by Boone Gorges almost 11 years ago.
Updated almost 11 years ago.
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 :)
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.
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.
- 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.
- 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.
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.
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.
Also available in: Atom
PDF