• Resolved fob

    (@fob)


    For a client project, I was comparing simple image sliders over the past weeks and tested “depicter” as well. After fixing some firewall 403 issues with slider control buttons in the dashboard, it ran smooth and offered its untypical customization options. It is fast, jQuery independent, makes use of adaptive images, … amazing., On the other hand it is a little bit complex to get ready with slider control options and single views for every single mobile, tablet and desktop image view, After getting ready with all the customizations it is great to see the things in action.

    I have the problem, that my client wants to use image sliders “above the fold” to showcase interior designs (without any descriptions). My feature wishes for depicter would be the following:

    • Use customizable “Alt Tags” for all slider images (or picking up existing descriptions from uploaded images)
    • and “lazyload” all images that follow the first slider image (not seen on load, so can be loaded later, to improve site speed on load).

    Perhaps I missed an existing option to make it work?

    • This topic was modified 1 year, 7 months ago by fob.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author averta

    (@averta)

    @fob

    Hi.

    Thank you for providing the details.

    For the first feature, unfortunately, Depicter does not have this option for the images yet. But I will mark this and pass it to our dev team as a feature suggestion.

    And for the lazyloading images, if you navigate to the Options > Loading options you can see that there are three different methods for loading slides. The default method is “Load slides one after another” which works just like the way you mentioned. 

    ?If this is not working as you expect or you have something else in mind, I really appreciate it if you could provide more details and maybe a sample page to show your purpose.

    Thread Starter fob

    (@fob)

    Hi. Thank you for your response.

    I just double-checked if we are talking about the same thing. While you seem to be talking about rearranging images (while loading one by one) I thought about a performance feature in the website loading process. “Lazyloading” is for browsers (and Google Lighthouse checks), to inform them that you load only the things needed while loading the website. So – if it would be possible to use a tag like *** loading=”lazy” *** for images that do not have to be loaded before reading, that might be excellent to improve the good performance a little bit more. (First image should be loaded without the tag, if loaded early (at the top of the website).

    Here you find some more information regarding the critical parts of loading: https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

    Plugin Author averta

    (@averta)

    Hi Fob, Thanks for your valuable feedback.

    I needed to add more details to the last response that we provided about your concerns. Regarding the alt attribute, we already considered it; Depicter adds an alt attribute on image tags if they have value on WordPress. As you can see on the WP media section, you can add alt text for each photo you have uploaded. But I think we can improve it in future by adding custom alt input on the editor too.

    About the lazyloading feature, as navigation through a slider is a bit different than scrolling a page, we assumed that we need to provide a lazyloading functionality to provide a seamless navigation experience while the user slides and image elements usually have “animation in”. Currently, Depicter preloads the first slide images on top of the page before loading any other assets (in a parallel way). We added this to reduce the largest contentful paint (LCP) factor. Besides this functionality, we have added an option that controls lazyloading of other slides, which can be set as loading slide images sequentially or only when they get visible “Load nearby slides”.

    If you have any additional thoughts or ideas that could aid in enhancing our plugin, I would be grateful to hear them.

    Thread Starter fob

    (@fob)

    Thank you very much for your helpful answer.

    I can confirm now, that images have an alt tag, if designers had not changed the images without descriptions behind my back, ignoring all my warnings that they must never upload images without useful descriptions. This is good news. When I was checking the code (just for the first slider picture, sorry for that), I just saw something like * alt=”OX!B%h7KnpfSVhPt” * – but elder uploads still have my examples (for designers). I will talk to them tomorrow! ??

    Regarding the preloads the situation is as follows:

    I do not want sliders to start above the fold because of the heavy weight (scripts, styles and pictures). I place them somewhere else to load later. CSS will be loaded asynchronously in this configuration and slider scripts are loaded after user interaction, not earlier. This is why I would like to have no preloads for slider images, too. I need to load the logo, some text and one image (only) as fast as possible.

    What I can see is, that depicter preloads three versions of the first slider picture and two stylesheets. It would be great to have an easy option to avoid all preloads.

    Thank you for explaining loading features a bit more understandable. I will definitely have a look at the “Load nearby slides feature”. Perhaps it helps, to improve performance a little bit more. Great, if that option enables what I was looking for. I think the loading features could be better described somewhere, if so. ??

    Thread Starter fob

    (@fob)

    Regarding the loading features, I can not see any difference. ??

    Plugin Author averta

    (@averta)

    I’m glad that the problem with the alt attributes got fixed.

    About the preloading images on top of the page currently, we don’t have any option for turning it off. But, we will consider it in upcoming updates.
    The “load nearby slides” option starts loading the next and previous (if the slider is looped) slides right after the first slide loads. We plan to add a new feature that sets the slider to don’t initialize immediately on the page, and it waits to get visible while the user is scrolling.

    Please keep the plugin updated and see the change logs for upcoming updates.

    Thank you for your feedback. Your input is invaluable in helping us enhance our plugin.

    Thread Starter fob

    (@fob)

    I am already using a caching/dependency manager to delay the slider (script) until the user scrolls. I also tried to remove your preload filter (“depicter_add_preload_to_styles” function) in theme functions.

    For me it would be nice enough to get a simple hook that gives me possibilities to filter preloading settings in wp_head, where it is not necessary to load two additional stylesheets for one player on every page (for example).

    Currently I can only catch “depicter-front-pre-css” to be loaded as preferred (asynchronously) but the two additional player scripts (per page) can not be moved to (normal) loads as well.

    Images are preloaded only for the first slide now, with media width controls (better than before).

    So – the latest bug and security fix (1.9.2) make things a little bit better for me, but isn’t perfect right now.

    Thanks for the good work.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Feature Question’ is closed to new replies.