Gatsby + Prismic and PageSpeed Insights

Hi everyone,

I'm new to prismic, seems like a great piece of technology however I encountered some issues.
Basically I already developed 2 different pages with Gatsby + Prismic and both of them share a similar problem. The problem is a terrible Google PageSpeed Insights score for mobile.

Because of that I decided to scale down the mentioned projects to the bare minimum and created a test page.
Live page: https://prismic-gatsby-test-site.netlify.app/
Repo: GitHub - luznykarol/test-salt

I post this issue under Slice Machine category because it's my first clue where the issue might be since there isn't much left out here.
I guess my overall question is if there is anything wrong with my code when it comes to gatsby + prismic integration. Maybe the bad score is the price I have to pay for using both of those technologies combined ( hope not :wink: ).
I realize this might be a issue which requires some time so I'll happily answer any questions regarding my code and I'll be grateful for any advice on this issue.
Cheers!

Hi Karol,

I'm the maintainer of Prismic's Gatsby integration (gatsby-source-prismic). Hopefully I can give some useful insight and help you progress on your project.

I ran Chrome's Lighthouse tool to come up with the following recommendations.

CSS
Tailwind isn't setup to purge unused CSS. If you inspect the HTML source on the homepage, you'll see most of the code is Tailwind's CSS. The homepage HTML is 216 kB (compressed), where a site like apple.com is 11 kB.

This a lot of data for a mobile device to download and process, which you can see is reflected in the following waterfall screenshot. The first item is the time to download the HTML. You can also see everything else, including JavaScript, waits to download until the HTML is ready.

Here it is with Tailwind purging enabled (again, the first row is the HTML file):

Both are tested on a Netlify deploy on a live site.

Bundle size
This is what the bundle analyzer outputs for the demo repository:

The bundle includes libraries that could be left out, specifically because this is a Gatsby site. Since Gatsby is designed to process data and files at build time, it means your site doesn't have to include run-time libraries, like react-markdown. Instead, the Markdown can be processed at build time on the server.

By removing react-markdown, which wasn't used in this sample project, we reduce the total JS bundle by 179 kB (compressed). If Markdown processing is still needed, it can be performed at build-time using gatsby-transformer-markdown.

This is the bundle analyzer output without react-markdown:

The next largest library is prismic-reactjs. This library may be necessary depending on how you want to write your app. If you are aiming for an ultra-optimized site, you could remove prismic-reactjs and use the html or text fields from gatsby-source-prismic's GraphQL API. Removing prismic-reactjs saves 53 kB (compressed).

Documentation here: GitHub - angeloashmore/gatsby-source-prismic: Gatsby source plugin for building websites using prismic.io as a data source

This will require altering how you develop your application as you would then be using HTML rather than Prismic's Rich Text objects. Something like React's dangerouslySetInnerHTML or a React component that parses HTML (e.g. react-html-renderer) could be used as a leaner method of displaying Rich Text content.

The bundle now looks like this:

There isn't much left that can be removed at this point.

Source maps
Webpack is being configured to use the eval-source-map mode to generate source maps. This mode is not designed for production and can easily bloat a bundle. Are you able to use the default Gatsby Webpack configuration by removing the onCreateWebpackConfig section of the gatsby-node.js file?

Note: the large library savings mentioned above are influenced by the usage of eval-source-map. Without eval-source-map, the savings would be less.


After making these modifications to the demo project, the site receives a 99 Mobile score on PageSpeed Insights when hosted on Netlify.

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

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

It's worth noting that part of that bundle includes gatsby-source-prismic's support for client-side previews. It is not integrated in this demo site, but it is still included as part of the bundle.

The next version of the plugin moves preview functionality to its own plugin (gatsby-plugin-prismic-previews) which will reduce the bundle size further. The updated plugins are still in development but we're working to release them as soon as possible.

1 Like

Great response Angelo. I had noticed the same thing with my Gatsby/Prismic projects but hadn’t done a deep dive on the cause.

Will check this out today!

[edit]

I just went through my multilingual demo site and removed prismic-reactjs in favour of dangerouslySetInnerHTML, assuming not relying on any package, no matter how lightweight, it would give me the biggest performance improvement. No such luck. Went from 76 to 71, which I attribute to the variation between tests that Lighthouse gives.

The treemap went from this:

To this:

I'm going to keep experimenting.

[More edit]

The June 1st update of Lighthouse actually made some interesting changes affecting this stack, although I think it's more Gatsby than Prismic.

Google says

From an analysis of HTTP Archive's latest crawl of the web, we project that the performance score for the majority of sites will stay the same or improve in Lighthouse 8.0.

  • ~20% of sites may see a drop of up to 5 points, though likely less
  • ~20% of sites will see little detectable change
  • ~30% of sites should see a moderate improvement of a few points
  • ~30% could see a significant improvement of 5 points or more

But my company's website went from over 90 on the page speed test into the low 80s.

Hey @emrysgraefe,

Thanks for the detailed summary. There are some areas I would like to optimize in the Gatsby plugin to improve the speed/size. Once we get V4 published and in use by others, I can focus on improving performance. It's difficult to identify if the reduction in score is a result of the updated Gatsby + Prismic plugin, but making optimizations within the plugin can only help the score increase.

In the mean time, an easy win for better performance is to ensure you're using gatsby-plugin-image rather than gatsby-image. You may already be doing this, I just couldn't tell from the bundle report.

I'll keep everyone posted once we can start looking at optimizations to the plugin. Feel free to open a new topic if there is more you want to discuss and we can go into more detail. :+1: