Rarely does anything work out on the first attempt. I thought I had a nice easy app that I could build for BigCommerce as my first one.
I wanted to add page prefetching to #BigCommerce to help minimise page transition time. Unfortunately, it’s not possible, and for a good reason.
On to the next idea!
Transcript
So just a few weeks in, and I’ve already scrapped my first BigCommerce app. So yeah, going well, but in the interest of transparency, I wanted to, I want to, bring you on this journey. I want to tell you about the decisions and the challenges I’m facing. And so here’s what I ended up doing.
The first BigCommerce app, I wanted to be really, really small. Obviously just getting going, I want to understand what it means to build a BigCommerce App. How you manage the installation process. And so I picked something that would essentially just be installing JavaScript onto a store. And one of the first things I thought of was prefetching. So I’m gonna take you a little bit through what prefetching is.
Prefetching is, so a page loads, you can actually, as a developer, indicate to the browser what assets might be needed in the next five minutes by adding a link tag to tell the browser to prefetch a particular image or JavaScript or CSS file, or even an actual further page. And this can be great because without doing anything to improve the performance of your server, if you’ve already downloaded that asset, when they want to use a clicks to load that image it’s instantly available because the browser has already cached it, which is nice feature.
And it’s really, really easy to implement. You don’t have to kind of go into service workers or anything like that. It’s simply a link tag, as you can see here, it’s a link tag to prefetch a particular image, and then it’s available and the browser will cache it for five minutes.
So I thought this is, this is really cool. Why don’t I do that for pages? So that when I’m on a product listing pages, product listing page, I can preload a product page so that when someone clicks on it, it’s a bit more snappy. There are a few libraries out there. Quicklink was on the ones I came across because it’s by the Google Chrome team. So that’s something that I’m kind of giving it some plus points.
And it has some features around only downloading when data-saver mode isn’t enabled, when the browser isn’t doing anything else. But I found that it ended up prefetching quite a lot of assets. You would need quite a lot of configuration to, to try and not be too abusive on data.
So one of the other libraries I looked at was instant page which I really, really liked. So it works just on, it only prefetches the next page when you’re hovering over a link. Now that might seem like it’s not that useful. But actually if you start hovering over a link, you might be up to half a second before you actually click on it. And so if the browser is already started to download that page, that’s, you’ve saved half a second on your page loads.
So that’s really, really nice. So I went through this process and I’ve kind of built all the foundation for the BigCommerce app, I thought I was basically almost there because all I then needed to do is stick the JavaScript on. But it ended up not working. So I want to take you through the, the reason for this. The reason for this is, actually for a good reason. It’s a good reason that BigCommerce have blocked this from working.
They have a response header on just on their pages, not on their assetsfor cache control, which indicates the browsers and CDNs what they should do and how long they should cache assets for.
On documents, on pages, they say no store. And what this means as it says in the name is that it won’t cache. And there’s nothing you can do to really get around that.
So, unfortunately prefetching is all around caching for up to five minutes, like I say. And so while it was making the prefecth request and I thought it was working when you actually navigated to that page that had already been downloaded, it was refetching it again. So you weren’t getting any performance improvements. So that little app isn’t going to work.
You could still use it for images and CSS, if you know exactly, or you’ve got pretty good idea what’s going to be loaded then you could, could still use it for that. But this cache control header was going to stop me doing that. So yeah, scratch one.
I didn’t follow my own advice that I give everyone else, which is reduce risk early. But you know, I’m grateful that I need to learn these things in terms of building a BigCommerce app and things like that anyway.
I’m still feeling positive, really enjoying the new role so far. I’m gonna tell you about the next app I’m working on in another video.
