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.
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.
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.
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.
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
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
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.
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
Note: the large library savings mentioned above are influenced by the usage of
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.
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.