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