Hi Tim and @wk1,
Thanks for reaching out about the performance of the Gatsby plugin for Prismic. I'm Angelo, the maintainer of the plugin. I've recently joined the Prismic team so I can now focus on tackling problems like you're describing.
First off, I have to point out that these are great looking sites. I really love the designs and they feel very responsive.
From what I can see based on Google Lighthouse reports for the two sites, I don't see anything Prismic-specific that would cause the site to be slow. Of course, there's only so much I can tell from these reports, but here are some areas you could check or address.
Note: For both sites, I ran Lighhouse tests on their homepage.
Images appear to be sized larger than necessary. It's recommended to upload the highest resolution image you have to Prismic (keeping in mind the 10 MB file size limit). This strategy means images will need to be resized and optimized in your project, however.
I see this site is using
gatsby-plugin-image, which is great. The images being rendered by
GatsbyImage could be resized smaller based on where it's used. For example, under the Today's special offer section, each product image could be given a max width of
600px rather than
gatsby-image (i.e. the older Gatsby image library) being used where Prismic images are used. This is totally okay as
gatsby-plugin-image currently isn't supported by the Prismic plugin. If you decide you want to use
gatsby-plugin-image for Prismic-source content, you can use the
localFile field on images rather than
fixed to process them locally, just like
The next version of the Gatsby plugin will have a direct integration with
gatsby-plugin-image which will improve your Lighthouse scores.
It's difficult to asses what is included in the bundle via Chrome, but you can use tools like
gatsby-plugin-webpack-bundle-analyser-v2 to generate a report on your bundle. With it, you can identify which libraries are including large and potentially unnecessary code into your site.
As a goal, try to aim for < 1 MB compressed, < 2 MB uncompressed. These numbers aren't backed by any science, but it should give a good basis to aim for to decrease loading time.
Same comments as above. The images are quite large on this site which takes longer to download and, on less powerful computers, actually causes Chrome to lag.
I see this site is using Tailwind. It appears as though unused Tailwind CSS is not being removed from the site. If you inspect the HTML source on the homepage, you'll see most of the code is Tailwind's CSS. The homepage HTML is 223 kB (compressed), compared to FreshOnline's 39.9 kB (compressed).
Can you check that Tailwind is setup to purge unused CSS?
Tailwind Docs: Optimizing for Production - Tailwind CSS
Alternatively, you could try using Tailwind's new "just in time" feature: Just-in-Time Mode - Tailwind CSS
Please let me know if you'd like me to go into more details on any of these comments. I think you'll see the most improvement by studying the output of
gatsby-plugin-webpack-bundle-analyser-v2. Reducing bundle sizes is tough, however, so tradeoffs between site speed and developer speed will need to be made.
As mentioned previously, a new version of
gatsby-source-prismic is in development now that will help with initial page load times where possible. This includes integrating with
gatsby-plugin-image and splitting the client-side preview functionality into its own plugin (
I hope this is helpful!