Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

Why is Stackbit's index.html faster than mine?

11 Jun 2020 🔖 architecture tips git web hosting
💬 EN

Table of Contents

Nevermind, maybe I was imagining things. Okay, well then, onto worrying just about content when pulling apart the from-Unibit theme.

I’m stumped: why does this Gatsby site, generated by Stackbit from this Unibit template, get a Google PageSpeed Insight score of 100 but this Gatsby site that I lovingly hand-coded

Both are supposed to render some variation on this HTML:

<html>
	<head></head>
	<body>
		<div>Hello World</div>
	</body>
</html>

index.html as rendered by Stackbit’s conversion to Gatsby from a lovingly hand-coded Unibit theme (score 100)

<!DOCTYPE html>
<html>
    <head>
        <meta name="generator" content="Gatsby 2.3.30"/>
        <title data-react-helmet="true"></title>
        <link as="script" rel="preload" href="/4-b0271aea71707962bf5c.js"/>
        <link as="script" rel="preload" href="/component---src-templates-xyzzy-js-a0b0512c619dbbd34cb7.js"/>
        <link as="script" rel="preload" href="/app-4493849078f1032c3af1.js"/>
        <link as="script" rel="preload" href="/webpack-runtime-7dc06d0ada9d729efa47.js"/>
        <link as="fetch" rel="preload" href="/static/d/75/path---index-6a9-RSKRcxXUjjyQYFFEkzLsTbPdSA.json" crossorigin="use-credentials"/>
    </head>
    <body>
        <noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript>
        <div id="___gatsby">
			<div style="outline:none" tabindex="-1" role="group">
				<div>Hello World</div>
			</div>
		</div>
		<script id="gatsby-script-loader">/*<![CDATA[*/window.page={"componentChunkName":"component---src-templates-xyzzy-js","jsonName":"index","path":"/"};window.dataPath="75/path---index-6a9-RSKRcxXUjjyQYFFEkzLsTbPdSA";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-4493849078f1032c3af1.js"],"component---src-templates-xyzzy-js":["/component---src-templates-xyzzy-js-a0b0512c619dbbd34cb7.js"],"pages-manifest":["/pages-manifest-417078a8ce45425d7b3e.js"]};/*]]>*/</script><script src="/webpack-runtime-7dc06d0ada9d729efa47.js" async=""></script><script src="/app-4493849078f1032c3af1.js" async=""></script><script src="/component---src-templates-xyzzy-js-a0b0512c619dbbd34cb7.js" async=""></script><script src="/4-b0271aea71707962bf5c.js" async=""></script><script src="https://widget.stackbit.com/init.js" id="stackbit-widget-init" data-stackbit-project-id="5ee3b1ee0d08e6001bd3b721"></script>
    </body>
</html>

index.html as rendered by my lovingly hand-coded “Gatsby minimum viable build” (score … wait … it’s up to 100 now? – okay, 99/100 after toggling to and from TinaCMS – weird)

<!DOCTYPE html>
<html>
    <head>
        <meta charSet="utf-8"/>
        <meta http-equiv="x-ua-compatible" content="ie=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
        <meta name="generator" content="Gatsby 2.23.3"/>
        <link as="script" rel="preload" href="/component---src-pages-index-js-49ce2d52b8dd33e3ba2d.js"/>
        <link as="script" rel="preload" href="/framework-4d07bacc3808af3f4337.js"/>
        <link as="script" rel="preload" href="/app-3d03475923c5387171d8.js"/>
        <link as="script" rel="preload" href="/webpack-runtime-1df494fe2ce95c3ff4b3.js"/>
        <link as="fetch" rel="preload" href="/page-data/index/page-data.json" crossorigin="anonymous"/>
        <link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/>
    </head>
    <body>
        <div id="___gatsby">
            <div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper">
                <div>Hello world!</div>
            </div>
            <div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div>
        </div>
        <script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-3d03475923c5387171d8.js"],"component---src-pages-index-js":["/component---src-pages-index-js-49ce2d52b8dd33e3ba2d.js"]};/*]]>*/</script><script src="/webpack-runtime-1df494fe2ce95c3ff4b3.js" async=""></script><script src="/app-3d03475923c5387171d8.js" async=""></script><script src="/framework-4d07bacc3808af3f4337.js" async=""></script><script src="/component---src-pages-index-js-49ce2d52b8dd33e3ba2d.js" async=""></script>
    </body>
</html>
--- ---