Toolbar script loads external assets for all users
Opened this issue · 6 comments
Loving Prismic, but when including the Toolbar script on a website, it would be great if the iframe and its external dependencies (bootstrap, jQuery) were only loaded when required for the current user.
I have a React/NextJS build and it looks like the iframe is injected and jQuery is loaded for every user even when not visible. It would be great if the Toolbar script could detect the cases where the user is logged in to Prismic or in a preview mode, A/B test, and inject only when needed/visible.
Would save about 30kb from what I can see.
Thanks
I'm also slightly concerned because the bootstrap file that is loaded isn't part of this repository (is it open source - I couldn't find it on github?) and it then goes on to load jQuery from a CDN.
From the minified source, I couldn't see much justification for jQuery's presence - a call to .ajax and .deferred. Maybe those could be replaced with modern equivalents of fetch and promise then the dependency could be removed entirely?
I'm having the same issue. This affects the Lighthouse performance score for the page because the request to prismic.min.js is render-blocking.
The toolbar and its related files should only be loaded for users who are logged in and/or using the Preview or Edit features, not all users. I also agree that the jQuery dependency should be removed and replaced with more modern JS.
For the time being, I've worked around the performance issue by making the call to prismic.min.js async, and using preconnect for the other sources, but this feels a bit hacky:
<script src="//static.cdn.prismic.io/prismic.min.js" async>
<link rel="preconnect" href="https://code.jquery.com">
<link rel="preconnect" href="https://my-repo-name.prismic.io">
Hi!
Any update on this?
I love the prismic toolbar but forcing it to load on all clients seems quite unoptimized.
As stated earlier, it affects Lighthouse audits quite a bit 😕
Maybe we could load a really small script first to check if user is logged on a prismic session (basically just a cookie check), and from there decide whether to load all the logic to handle previews / edit buttons?
Loading jQuery alone takes 1.22s seconds in our case. Our suggestion being loading the script with the defer attribute. ++
Using the defer attribute helps mitigate the problem, but it's not a solution in itself. We definitely should avoid loading external ressources on clients that don't need them at all, even if it doesn't block the loading of critical ressources.
For now we can probably do the cookie detection ourselves and append the script dynamically in the body (haven't tested this yet though), but it'd be nice if this was implemented directly in the toolbar script :)
Push! Since it really is blocking us from using Prismic in our next projects.