Serve prismic.js gzipped

Developing with Prismic
,
1

I noticed that https://static.cdn.prismic.io/prismic.js is not being served using any compression. Can you please change this to serve it compressed. My request headers are set to accept gzip. Google Lighthouse is complaining about this, not to mention that we are wasting user's bandwidth.

2

Hi Team,

Thanks for the feedback.

I've passed this to devs so they can see this idea. Hopefully they'll find time to do this, I'll also find out why this wasn't done already.

Thanks.

5

Hi again,

It seems that https://static.cdn.prismic.io/prismic.js is already gzipped. You can test this here: https://www.giftofspeed.com/gzip-test/

Thanks.

6

OK thanks for looking into this. For some reason while running multiple lighthouse tests, sometimes it would come back complaining about prismic.js not being compressed. When analyzing the network tab I could confirm that it was not compressed. But then I tried again and it was compressed. So I'm not sure what is going on. Seems to be an intermittent issue.

7

Strange. Next time you see this can you take a screenshot of it in lighthouse or in the network tab so I can investigate further?

Thanks.

8

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

10

Same problem in our SEO tools, sometimes there are no warnings and sometimes the tools recognize that the prismic.js is not compressed. Any new findings here?

11

Hi Alexander,

Welcome to the community!

https://static.cdn.prismic.io/prismic.js is already gzipped. You can test this here: https://www.giftofspeed.com/gzip-test/

Thanks.

12

Hi Phil, thanks for your answer. It's funny that this test always passes. Looks like there is an issue that sometimes the gzip compression is broken. Lighthouse tests and different SEO tools shows that it's not that reliable.

13

Are you sure you're using the .cdn attribute?

14

Yes, we are using it!

15

It's strange, maybe it's not being recognised by the tools correctly. I'll pass this information to the team.

16

Thanks!

1 Like
17

Any update on this?

18

Perhaps also the script fetch can be prevented altogether.

If this is for preview mode only I'm guessing we can just do something like

import { FC } from 'react'
import { API } from '../project/api'
import Script from 'next/script' // we need this to make JSX compile

type ComponentType = {}

const PrismicScript: FC<ComponentType> = ({}) => {
  return API.storage.getItemSync('io.prismic.preview') ? (
      <Script
        src={`https://static.cdn.prismic.io/prismic.js?new=true&repo=x`}
      />
  ) : null
}

export default PrismicScript
19

Hi Kyle,

No update on why this isn't appearing as gzipped.

For your suggestion, I'm going to check with the team if this works. But off the top of my head, this would stop the edit button from appearing (Although it's not working right now in statically deployed next.js websites anyway).

Thanks.

20

Since it's a backend cookie on prismic, it didn't work. However this did

// PrismicWrapper.tsx

import { FC, useEffect, useState } from 'react'
import { PrismicPreview } from '@prismicio/next'
import { repositoryName } from 'prismicio'

type ComponentType = {}

const PrismicScript: FC<ComponentType> = ({ children }) => {
  const [isActive, setIsActive] = useState<boolean>(false)
  useEffect(() => {
    fetch('/api/prismic')
      .then((r) => r.text())
      .then((res) => {
        if (res) {
          setIsActive(true)
        }
      })
  }, [])
  if (isActive) {
    return (
      <PrismicPreview repositoryName={repositoryName}>
        {children}
      </PrismicPreview>
    )
  }

  return <>{children}</>
}

//api/prismic

import { linkResolver, createClient } from 'prismicio'
import { setPreviewData, redirectToPreviewURL } from '@prismicio/next'
import { NextApiRequest, NextApiResponse } from 'next'
import nookies from 'nookies'
export default async (req: NextApiRequest, res: NextApiResponse) => {
  const data = nookies.get({ req })
  if (data.__next_preview_data) {
    res.send('1')
  } else {
    res.send('')
  }
}
21

Thanks for sharing your workaround @kyle2 :slight_smile:

Note for future users though, this will disable the edit button.

22

Hey, I was just wondering - what is the "Edit button"? I'm not sure I've ever seen one, do you mean this? If so I still see it.

image
image669×1043 92.9 KB