Load time issue with Prismic and Gatsby plugin

Developing with Prismic
1

Hello @angeloashmore ,

I was thinking that perhaps you could help Tim & @wk1 from CleanCommit with their performance issues caused by the use of the Gatsby plugin please?
Thank you very much in advance for your help with this.

Hi Antoine,

We’ve implemented Prismic on a couple of projects recently (http://freshonline.netlify.app/ and https://salt-cc.netlify.app/). We’re using the Gatsby Prismic plugin and are finding that introducing Prismic to the project has a huge impact on the site’s initial load time. As soon as we remove Prismic, the problem is resolved.

We’ve looked into other projects built on Gatsby x Prismic and they all seem to have the same issue.

I know you guys don’t own the community built plugin, but it seems like this would be an important issue for you guys to tackle. We were planning to build a few more Prismic x Gatsby x Shopify projects, but this performance issue is a deal breaker and we’ll need to start looking for another solution pretty soon – especially with the big Google page experience update coming in June.

Could you please help us escalate the issue to your team?

2

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.

FreshOnline

Images
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 1820px.

I see 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 fluid/fixed to process them locally, just like gatsby-source-shopify.

The next version of the Gatsby plugin will have a direct integration with gatsby-plugin-image which will improve your Lighthouse scores.

Bundle size
The bundle size of this site is quite large. Chrome reports 1.2 MB of compressed JavaScript is downloaded (5.2 MB uncompressed). This typically is what causes slow-feeling sites as all of the JavaScript must be downloaded and parsed/processed before it can begin working. This affects libraries like gatsby-image (used in the Hero slice at the top of the homepage); the images won't appear until JavaScript is executed.

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.

Salt

Images
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.

Bundle size
Again, same comments as above. This site sends 1.5 MB of compressed JavaScript (5.9 MB uncompressed). Reducing this will improve page speed.

CSS
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 (gatsby-plugin-prismic-previews).

I hope this is helpful!

Thanks,
Angelo

3

Hi @angeloashmore

All of the above are not root causes for the freeze. I spend a significant amount of time debugging theses issues, applying fixes and trying to optimize the performance.

The main issue is the bundle size and time of JS execution which is caused by prismic plugin (with freshonline I've debugged every single option, removed images, products, logic etc.) when using Slices.

Here's a small demo with virtually no code -> https://prismic-gatsby-test-site.netlify.app

Repo: GitHub - luznykarol/test-salt

The TTI on mobile is 7.7s.... What seems to be the issue is the usage of Slices. We've set it up the way it is proposed in Gatsby docs.

We never had such issue with any other CMS that we worked with. Some of our clients have the exact same issues, and there's no way to go above 70 on Google PageSpeed when using Slices.

4

Hey @wk1, I'm in the process of replying to this thread, which appears to be for the same demo repository: Gatsby + Prismic and PageSpeed Insights

I'll go into more detail there as we can actually look at the code involved.

5

I've made another repo to highlight the issue present

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Flaughing-babbage-9f428f.netlify.app&tab=mobile

Live demo: https://laughing-babbage-9f428f.netlify.app/home

Repo: GitHub - mrkaluzny/prismic-gatsby-issues

It's basically just Slices no css, no images almost 0 packages. The execution time is still long, and there are still issues with page speed score.

Let me know if you have some time we can maybe discuss this issue on a call :slight_smile:

6

Thanks @wk1! I posted a lengthy reply to the other thread here: Gatsby + Prismic and PageSpeed Insights - #2 by angeloashmore

I did the same optimizations to the new demo repo you made and came to similar conclusions.

The site scores 100 Mobile on PageSpeed Insight after the optimizations.

https://test-salt-angeloashmore-2.netlify.app/

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ftest-salt-angeloashmore-2.netlify.app%2F

If you have further questions, I'm happy to follow up. :slight_smile:

7

Also, if you want something you can test quickly, try removing the eval-source-map Webpack config and add Tailwind purging.

I think you'll see the biggest benefits there without spending too much time on it.

8

I'll try it :wink: The biggest issue for us is the freeze of JS on FreshOnline if you have any other suggestions please let me know

10

Hey @wk1, I'm going to close this topic as it's been a while since we last discussed it. Hopefully those optimizations worked out. Feel free to open a new topic if anything else comes up.

Thanks!