Preview disable script

[renardsas]

Types of changes

• Chore (a non-breaking change which is related to package maintenance)
• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

Activate the preview with the possibility of not loading the script
Add defer and async attributes for script

Checklist:

• My change requires an update to the official documentation.
• All TSDoc comments are up-to-date and new ones have been added where necessary.
• All new and existing tests are passing.

[netlify]

‼️ Deploy request for prismic-module rejected.

Name	Link
🔨 Latest commit	167622d

[renardsas]

@lihbr ,
I make a new PR soon.

So the new pr will contain :

• Eliminate-render-blocking ressources
  Add async and defer attributes

nuxt.options.app.head.script.push({
 src: `https://static.cdn.prismic.io/prismic.min.js?repo=${repositoryName}&new=true`,
 async: true,
 defer: true
})

• Load prismic script only if necessary
  For that, I think the best way is add cookie when user go to the preview page :
  Page preview :

<script setup>
  const enablePreview = useCookie(
    'enable-preview',
    // options : https://v3.nuxtjs.org/api/composables/use-cookie/
  )
  enablePreview.value = true
  usePrismicPreview()
</script>

And then add script if cookie exist add script (module.js) :

 const repo = options.endpoint.replace(/^https?:\/\//, '').replace(/(\.cdn)?\.prismic.+/, '')
nuxtApp.hook('page:finish', () => {
      const enablePreview = useCookie(
        'enable-preview'
      )

      if (enablePreview && options.preview) {
        useHead({
          script: [
            {
              hid: 'prismic-preview'
              src: `https://static.cdn.prismic.io/prismic.js?new=true&repo=${endpoint}`,
              async: true,
              defer: true
            }
          ]
        })
      }
})

So preview option doesn't change.

With thant we have good Google Lighthouse score for performance :

@lihbr , if you have any suggestions ?

[lihbr]

• Eliminate-render-blocking ressources
  Add async and defer attributes

Sounds good to me 👍

• Load prismic script only if necessary

Just to be clear here, by definition the toolbar script is always necessary: even outside of preview session it provides the edit button.

Not loading the script is a choice, loading it only for previews is another one :)

For that, I think the best way is add cookie when user go to the preview page :

This means the cookie would be set even when going to this page by mistake (basically it forces us to manage another "preview state" which I'm not sure is what we want).

What we can do instead is check for Prismic preview cookie, like here: https://github.com/nuxt-community/prismic-module/blob/v3/src/runtime/plugin.ts#L50-L58

---

Note that by injecting the toolbar script only when on a preview session you also kill the "shareable preview" feature (because this type of preview relies on the script to init itself where regular previews are inited without the need of the script)

I think I'd just start with loading the toolbar script with async & defer and adding a toolbar option to the module options to disable it, should you want to load it another way.

From here we can brainstorm on how to provide the toolbar script only under certain scenarios (preview), should users only want to use them in those scenarios.

Let me know!

[renardsas]

Hi @lihbr ,
Thanks for the detailed feedback.
My fault, I didn't look all the code for the toolbar and the preview.

The module already offers to activate or deactivate the preview. So I don't think the loading strategy should come from this module.

Two things :

1. Toolbar script load external assets for all user (prismic script, iframe and font source pro) :
   
   Toolbar script loads external assets for all users prismicio/prismic-toolbar#43

But at the moment I don't see a solution for that.
And since the opening of this issue, the impact is no longer the same:

• Script: 10kb
• iframe: 8kb
• css Source Pro: 581 B

2. Add a guide on the different scenarios when user want to download the toolbar himself :
   Explain the different ways to add script and effects on the toolbar features.

I also try this way (using Netlify):
I have the site in production: example.fr
-> Branchmaster
And an editor branch
-> editor.example.fr
The preview is enabled only in the branch editor.

I will look all the code for toolbar / prismic-module and keep testing different ways.

[lihbr]

No worries! I'm super happy you're willing to help!

1. Toolbar script load external assets for all user (prismic script, iframe and font source pro)

Indeed, that could use some optimization. As you noticed, the toolbar is coming from far (2 years ago it's impact was >100KB / users).

I don't think the current toolbar will be able to implement those optimizations though as its codebase/mechanisms are quite legacy/prone to breaking. However, we have in our backlog to overhaul it from scratch at some point and we're confident we can bring it down to a more reasonable 2/3KB for non-prismic users.

2. Add a guide on the different scenarios when user want to download the toolbar himself

The "official" way of doing the toolbar with Prismic is quite binary as I explained above (either you add the script on every page and have the toolbar, or you don't and you don't have the toolbar) and from an official point of view we won't differ from that statement.

With that in mind, this module being also a "community" module, I'm perfectly fine with us exploring alternative scenarios for loading the toolbar in some "optimized" ways while still documenting the downsides of such approaches.

I have the site in production: example.fr
-> Branchmaster
And an editor branch
-> editor.example.fr

That's a possibility but it's really the kind of scenario we like to avoid at Prismic because it's the kind of issue our preview system solves: you don't need a staging/preview environment, you can just preview on the live website.

For code related to the toolbar:

• Loads the preview page: https://github.com/nuxt-community/prismic-module/blob/v3/src/module.ts#L127-L156 (toolbar script should be moved outside of the preview option, and enabled/disabled based on another toolbar option that defaults to true as I explained above)
• Allows SSR and refresh Nuxt data when inside a preview session: https://github.com/nuxt-community/prismic-module/blob/v3/src/runtime/plugin.ts#L40-L65
• Performs preview updates with hot instead of hard reloads: https://github.com/nuxt-community/prismic-module/blob/v3/src/runtime/plugin.client.ts#L16-L21 (FYI the toolbar also emits a prismicPreviewEnd when the user closes the preview session on the toolbar)

[renardsas]

Hi @lihbr ,

Indeed, that could use some optimization. As you noticed, the toolbar is coming from far (2 years ago it's impact was >100KB / users).

Yes, since its first version the toolbar has been very well optimized
Now the impact is really low. I saw that you added async and defer.
With an alpha-10 version without async and defer, we just lose 1 to 3 performance points (lighthouse).
So I think we'll be good with async and defer.
And it's not just the toolbar, the improvements made by prismic in recent years are really good. In particular the slicemachine with the possibility of creating and editing the back fields for the local is really great.

However, we have in our backlog to overhaul it from scratch at some point and we're confident we can bring it down to a more reasonable 2/3KB for non-prismic users.

🤯 really nice

The "official" way of doing the toolbar with Prismic is quite binary as I explained above (either you add the script on every page and have the toolbar, or you don't and you don't have the toolbar) and from an official point of view we won't differ from that statement. [...] That's a possibility but it's really the kind of scenario we like to avoid at Prismic because it's the kind of issue our preview system solves: you don't need a staging/preview environment, you can just preview on the live website.

You gave me a lot to think about. I think you are absolutely right.
It was a test for netlify but what you said is very true 👍
I think we could take an example from nuxt.
With the addition of community part for nuxt plugins: https://modules.nuxtjs.org/
To supercharge our prismic project.
Example :

• A library with slices, Banner, Caroussel, CardArticle, etc with unstyle and style version
• Extension of helpers
• A nuxt 3 starter theme + prismic + pina + i18n + pwa + vueuse, with custom post type and slice to create a blog and e-commerce part.
  What do you think about it ? And if it's a good idea, I don't know where is the best place to discuss it (prismic forum, github, others) ?

code related to the toolbar

Thanks, i'm working on a first base to get prismic, nuxt 3 and other plugins working. If I find any bugs or have any suggestions, I'll let you know.

I saw that in your last commits you added async and defer for the script. And an option to disable the toolbar 🙏
It'll be available in released 3.0.0-alpha.11 ?

[lihbr]

With the addition of community part for nuxt plugins: modules.nuxtjs.org To supercharge our prismic project. Example :

• A library with slices, Banner, Caroussel, CardArticle, etc with unstyle and style version
• Extension of helpers
• A nuxt 3 starter theme + prismic + pina + i18n + pwa + vueuse, with custom post type and slice to create a blog and e-commerce part.
  What do you think about it ? And if it's a good idea, I don't know where is the best place to discuss it (prismic forum, github, others) ?

I'm not 100% sure I got what you mean here, if you'd like to make a supercharged starter/theme for Nuxt 3 featuring Prismic I'm more than happy to help you and support you on that endeavor! It's a great initiative and if you'd like to start planning for it I guess opening a dedicated issue on this very repository could be a great place to keep track of it. On our end we don't have an official deadline yet, but Nuxt 3 support inside Slice Machine should land around the end of summer.

I saw that in your last commits you added async and defer for the script. And an option to disable the toolbar 🙏
It'll be available in released 3.0.0-alpha.11 ?

Yes, I also started testing the module. I'll try to finish that ASAP before publishing the module as ✨ RC ✨

[renardsas]

Hi @lihbr ,
I just installed the rc version, thank you for your work 🙏 :

And nice improvement for the website 🤩 :
https://v3.prismic.nuxtjs.org/

I'm not 100% sure I got what you mean here, if you'd like to make a supercharged starter/theme for Nuxt 3 featuring Prismic I'm more than happy to help you and support you on that endeavor!

I'm sorry for the response delay. I'll do a full answer this weekend.