Skip to content

Instantly share code, notes, and snippets.

@wizardlyhel
Created November 20, 2019 15:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wizardlyhel/747ef9576da8fafd668222be7f325493 to your computer and use it in GitHub Desktop.
Save wizardlyhel/747ef9576da8fafd668222be7f325493 to your computer and use it in GitHub Desktop.
Make Storefront Fast - Scripts - 2
<body>
<script>window.performance.mark(window.markNames.body.start);</script>
<script>window.performance.mark(window.markNames.bodyLayout.start);</script>
<!-- BODY LAYOUT CODE -->
<script>window.performance.mark(window.markNames.bodyLayout.end);</script>
<script>window.performance.mark(window.markNames.bodyEndScripts.start);</script>
<!-- END OF BODY SCRIPT CODE -->
<script>
window.addEventListener("load", function(){
Object.keys(window.markNames).forEach((name) => {
mark = window.markNames[name]
performance.measure(mark.name, mark.start, mark.end);
});
window.requestIdleCallback(() => {
var getShopifyResourceByType = (type) => {
return performance.getEntriesByType('resource').filter((resource) => {
return resource.name.indexOf('cdn.shopify.com') != -1
&& resource.initiatorType === type;
})
};
// You can send this information to whatever analytics vendor
// For now, we are just outputting in console
console.log('############ PERFORMANCE METRICS ############');
console.log(performance.getEntriesByType('measure'));
console.log(performance.getEntriesByType('paint'));
console.log(performance.getEntriesByType('navigation'));
console.log(getShopifyResourceByType('script'));
console.log(getShopifyResourceByType('link'));
console.log(getShopifyResourceByType('css'));
console.log(getShopifyResourceByType('img'));
});
});
window.performance.mark(window.markNames.bodyEndScripts.end);
window.performance.mark(window.markNames.body.end);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment