Lazy Loading Fix for WP Rocket

  • Resolved kevinshahan

    (@kevinshahan)


    3 years, 6 months ago

    This is not a problem post but rather a solution. I just downloaded this amazing plugin and came across an issue where the force inline SVG option wasn’t working because I was lazy loading my images. I also use Divi, so forcing inline svg images for me is a must. I also use Lazy Load by WP Rocket (not WP Rocket itself) and I found this webpage by them: https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

    I ended up adding this to me child theme’s functions.php file:

    function rocket_lazyload_exclude_src( $src ) {
    $src[] = ‘svg’;

    return $src;
    }
    add_filter( ‘rocket_lazyload_excluded_src’, ‘rocket_lazyload_exclude_src’ );

    What this code is going to do is take any image you have that has “svg” inside it’s filename, whether that be logo-svg.jpg or in this case logo.svg and the Lazy Loading for that image will be skipped, allowing SVG-Support to do its work and force the SVG to be inline.

    Usually SVG files are really small if it’s a simple logo, so you don’t have to really worry about Lazy Loading SVG files anyways.

    I hope this fix finds someone and helps save some time! 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    3 years, 6 months ago

    Hi there,

    Thanks for your detailed solution to this.

    However, I have to say, using divi and wp rocket doesn’t require force inline at all. This will inline your svg code on every single svg file. You can however use svg files just like any other image with divi if you don’t need to inline them all.

    The lazy loading is a thing these days with browsers as well actually, so you can use loading eager attribute in most cases to avoid the lazy load on the svg files you need inline.

    Just thought I’d clarify that most will rarely need to inline all of their svg files. That force svg inline feature is kind of an aggressive way to achieve inline svg.

    Thank you though! This information is surely going to be massively helpful to users.

    And thanks for your support 😃

    Thread Starter kevinshahan

    (@kevinshahan)

    3 years, 6 months ago

    I wasn’t able to figure how to add the loading eager attribute to the proper SVG files I wanted to be inline using Divi, but that is not your fault. All I could do was find this workound and just force all SVGs to be inline. I will continue to try and figure it out, but it’s looking unhopeful lol. But this is a super sweet plugin. Super simple and straightforward 🙂

    Plugin Author Benbodhi

    (@benbodhi)

    3 years, 6 months ago

    You would just have to use the code/text block and place the img code manually.

    Hopefully this helps:
    https://addyosmani.com/blog/lazy-loading/

    Something like this should work:
    <img src="your-file.svg" loading="eager" class="style-svg" />

    Thanks for your kind feedback! Please consider leaving it as a review here: https://wordpress.org/support/plugin/svg-support/reviews/

    Thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Lazy Loading Fix for WP Rocket’ is closed to new replies.