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