Lightbox with PhotoSwipe with Cloudflare Rocket Loader

  • Resolved Asif

    (@asif_rn)


    1 year, 1 month ago

    Great plugin, thank you for making life easier for many.

    The plugin has been working without any problem. I recently enabled CloudFlare’s Rocker Loader feature. It didn’t cause any issue but throwing two warnings where the second one is repeated several times:

    1 – A preload for ‘…wp-content/plugins/lightbox-photoswipe/assets/ps5/frontend.min.js’ is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

    2 – The resource …/wp-content/plugins/lightbox-photoswipe/assets/ps5/frontend.min.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate ‘as’ value and it is preloaded intentionally.

    The second warning appears as many times as the plugin is used on a page. When I disable the Rocket Loader the warnings go away.

    Any idea what is causing the issue?

    • This topic was modified 1 year, 1 month ago by Asif.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    This script resource is not intended to be preloaded. In fact it is queued at the end of the document for performance reasons. So just disable preloading for that script and you should be fine.

    And by the way: the file in question is only about 11 KB and when using gzip compression via HTTP – which is the standard nowadays -, even less data is transmitted (about 3 KB – just see the networks requests at https://wordpress-demo.arnowelzel.de for reference). Also keep in mind that Lightbox 5 itself is modular JavaScript and will only load things when needed. By forcing a different loading order using a CDN you may break that as well.

    Thread Starter Asif

    (@asif_rn)

    I’m not preloading the script, somehow when CloudFlare rocker loader is enabled it preloads it. No idea how ” NOT” to preload it. I found after google that that adding data-cfasync=”false” to the script would work but there’ seem to be no way to adding this except editing the original plugin file that I don’t want to do for obvious reasons.

    Plugin Author Arno Welzel

    (@awelzel)

    Adding data-cfasync=”false” to the script is impossible.

    The plugin does not output the script tag – it will only queue a script. It is WordPress which will then create the script tag because the script queued.

    Also see here: https://github.com/arnowelzel/lightbox-photoswipe/blob/5.0.44/src/LightboxPhotoSwipe/LightboxPhotoSwipe.php#L166-L178

    So if CloudFlare requires specific attributes at the beginning of the script tag to make scripts work properly you can not use it with WordPress, sorry.

    • This reply was modified 1 year, 1 month ago by Arno Welzel.
    Plugin Author Arno Welzel

    (@awelzel)

    In addition: depending on what CloudFlare “rocket loader” does exactly, you may also have a cross origin policy problem, if CloudFlare serves the scripts using their own cache. Nowadays browsers are much more picky about what they allow and what not. Also see the discussion about a similar problem here: https://github.com/vercel/next.js/discussions/16850

    If you really need to speed up loading times I would rather try to implement server side caching instead of using CloudFlare. Using a custom caching mechanism I managed to reduce the loading time for a film festival website from 2-3 seconds down to about 0,2-0,5 seconds. The important part here was to reduce as much load on the server as possible – and the easiest way is to cache all output of WordPress so most of the time only static HTML is served without involving WordPress at all in rendering the output.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Lightbox with PhotoSwipe with Cloudflare Rocket Loader’ is closed to new replies.