Best approach? Divi HTML Lazy Load Selectors

  • Resolved seaforth

    (@seaforth)


    1 month, 2 weeks ago

    I am using LiteSpeed to optimize a Divi site and am trying to configure LiteSpeed so that all sections below the fold will be lazy loaded. For the first page, I pulled the selectors for all sections below the folder using Chrome developer tools, and then just pasted them into the list of selectors. It made an immediate and dramatic jump in speed.

    However, configuring LiteSpeed like this for every page seems unnecessarily laborious as I continue to optimize the other pages on the site. For example I currently have the following two selectors on my list:

    post-1466 > div > div > div > div.et_pb_section.et_pb_section_8.et_pb_with_background.et_section_regular

    post-1567 > div > div > div > div.et_pb_section.et_pb_section_8.et_pb_with_background.et_section_regular

    Is there a way to specify objects across pages, e.g. sections 8 through 17 on each page? Or would it be better to add a class to all sections below the fold and use that to select them? If the latter, what would the syntax be?

    This is my first time using LiteSpeed, so if I am approaching this in the wrong way, feel free to suggest a different approach altogether.

    Thank you in advance

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support litetim

    (@litetim)

    Lazy load a section? What feature you used and into what fields you added the info?

    Send me a ID report: from LSC => Toolbox => Report => click on “Send to Litespeed” then share the ID generated.

    We have LazyLoad that would work for all <img> tags. See: https://docs.litespeedtech.com/lscache/lscwp/pageopt/#lazy-load-images AND https://docs.litespeedtech.com/lscache/lscwp/pageopt/#viewport-images

    Thread Starter seaforth

    (@seaforth)

    ID for my report is ZXAFBBES

    I am not trying to lazy load images in this case, but rather whole sections.

    I added a class to each Divi section I wanted to Lazy Load: arc-lazy-load

    I then added .arc-lazy-load to the list of HTML Lazy Load Selectors but it doesn’t seem to be working to the same degree it did when I added each section by precise selector, e.g.

    post-1567 > div > div > div > div.et_pb_section.et_pb_section_9.arc_lazy_load_html.et_pb_with_background.et_section_regular

    https://ibb.co/pjd0YFGH

    I believe it is not working because when I added all sections below the fold with their precise selectors I was getting an A on Speed Vitals. When I removed those and added them by class, I got a C which is what I was getting before I started configuring HTML Lazy Load.

    Is there a way to see exactly what (if any) Divi sections are being lazy loaded other than doing the speed test?

    Thank you so much

    • This reply was modified 1 month, 2 weeks ago by seaforth.
    Plugin Support litetim

    (@litetim)

    Ok
    LazyLoad will load only images from <img tag, NOT background images
    I am so sorry about the confusion.

    The CSS path you wrote above is pointing to a section that uses a background-image property

    Thread Starter seaforth

    (@seaforth)

    I think you are still not understanding my question. I am talking about the HTML lazy load, not the image lazy load.

    When I target sections with the syntax I showed you, it lazy loads the whole section, not just the images it contains. I can tell this because if I list all the sections below the fold the page loads lightning fast.

    But when I target with the class (with the syntax I have used) it doesn’t speed up at all.

    I think you are confusing this with the image lazy load settings.

    Thread Starter seaforth

    (@seaforth)

    I found this article on using lazy render for Divi modules (I have linked right to the part about lazy render and Divi sections and have included an excerpt from the beginning of that section of the article, which is long.

    6. Lazy Render Divi Sections. Lazy render?is supported by FlyingPress and LiteSpeed Cache. It’s like lazy loading images only for any element on the page. It’s usually done for Divi sections when they load?below the fold.

    This functionality is right in the LiteSpeed documentation, it’s just that the syntax for targeting by class is extremely unclear. If you can’t help me figure this out, can you tell me who can?

    Plugin Support litetim

    (@litetim)

    I see.

    Use this selectors:
    body.page-id-6 .et_pb_section_1
    body.page-id-6 .et_pb_section_2
    …
    body.page-id-6 .et_pb_section_18

    OR simply:

    .et_pb_section_1
    .et_pb_section_2
    …
    .et_pb_section_18

    • This reply was modified 1 month, 2 weeks ago by litetim.
    Thread Starter seaforth

    (@seaforth)

    Okay, that’s similar to what I had done before but just without targeting a specific page. That is definitely better.

    But is it possible to target any section with a particular class, e.g, .lazy-render ?

    Plugin Support litetim

    (@litetim)

    yes, should work

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.

Tags