Exactly what I thought! Even back then, I implemented this method for all my WordPress clients. I prefetch whenever I can, except on free sites, news sites, or blogs, where it’s a bit less aggressive than for e-commerce.
If you're new here be sure to check out the other videos in the playlist: ruclips.net/p/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO And star Inbox Zero on GitHub: github.com/elie222/inbox-zero
The benefit is clear in that it avoids the image flash. Whether that’s important is up to you. The serverless endpoints aren’t going to be cooked. They’ll handle this just fine. There’s some cost to it but that could be minimal dependent on the business value driven. If it leads to an extra 5% in sales or a few dollars in revenue then it’s worth paying the extra cents to make the extra server calls. There are studies by Amazon that show that extra speed leads to increased sales.
This is incredibly bad for multiple reasons. The original site is making a total of 154 requests for all of the homepage content and most of them on demand. But this bullshit implementation makes thousands of prefetch requests that it's ridiculous and it feels like a mockery. I'm sure they think we are complete fools who'll believe anything they say!
If you use next/link it defaults to prefetch. This is going a step further and loads images. If you don’t care about the extra performance then don’t do it. It’s a demo. No one telling you that you have to implement your site in the same way. But if you want extra speed this is a way to do it.
It’s not just bad for bandwidth, but for an e-commerce site, where conversion rates are usually higher than on a regular blog or freebie site, it’s acceptable. We’ve seen a big drop when our and client's sites slows down, our CTR once fell to 30%, when it’s usually around 80-90%, never dropping below 70%. So, load speed is crucial. Even after implementing these methods, not just for Next.js sites but for most of our clients, there’s been no noticeable increase in bandwidth costs. Try working as a digital marketer, and you’ll see how cheap bandwidth is compared to the impact on CTR and average session duration.
@@elie2222 no you are not getting my point. There is no argument against prefetching assets to speed up your site. But what they have done is overload everything to the max and claim speed. The original site is in production and it's that fast to interact. Nextjs can do well similarly although slightly heavier on Js. But this "demo" is a mockery of the attention to detail they've done in the original site. You might as well load the entire database in the browser and claim 0ms network latency.
Good point. You could use onTouchStart, or when the a link moves into the viewport, you could preload the images. Or you could just not optimize on mobile. Pages would still load fine.
I totally missed this repo getting published- I am SO happy that you did a deep dive 😃
Glad you liked it!
Exactly what I thought! Even back then, I implemented this method for all my WordPress clients. I prefetch whenever I can, except on free sites, news sites, or blogs, where it’s a bit less aggressive than for e-commerce.
Nice!
thanks I was reading the code this video indeed very helpful.
Glad to hear that!
Looks awesome 👍
Thanks for sharing ❤
Thanks!
Great video! But I was wondering, what video recording software do you use to show your camera and the screen at the same?
Screen studio. There’s an affiliate link at the bottom of the description!
thanks for the breakdown
Glad you enjoyed!
Wow.😮 Thats awesome
Glad you liked it!
Insightful, love it
Glad you enjoyed!
If you're new here be sure to check out the other videos in the playlist: ruclips.net/p/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO
And star Inbox Zero on GitHub: github.com/elie222/inbox-zero
wow amazing engineering
Ya. Very cool how they built it
This is amazing
Glad you like it!
I think the way they prefetch on mouse enter events is a highly unnecessary optimization that will cook your server for no reason
The benefit is clear in that it avoids the image flash. Whether that’s important is up to you.
The serverless endpoints aren’t going to be cooked. They’ll handle this just fine. There’s some cost to it but that could be minimal dependent on the business value driven. If it leads to an extra 5% in sales or a few dollars in revenue then it’s worth paying the extra cents to make the extra server calls.
There are studies by Amazon that show that extra speed leads to increased sales.
These days, most e-commerce sites handle their assets with a CDN, so it won’t put any strain on your server.
This is incredibly bad for multiple reasons. The original site is making a total of 154 requests for all of the homepage content and most of them on demand. But this bullshit implementation makes thousands of prefetch requests that it's ridiculous and it feels like a mockery. I'm sure they think we are complete fools who'll believe anything they say!
If you use next/link it defaults to prefetch. This is going a step further and loads images. If you don’t care about the extra performance then don’t do it. It’s a demo. No one telling you that you have to implement your site in the same way. But if you want extra speed this is a way to do it.
It’s not just bad for bandwidth, but for an e-commerce site, where conversion rates are usually higher than on a regular blog or freebie site, it’s acceptable. We’ve seen a big drop when our and client's sites slows down, our CTR once fell to 30%, when it’s usually around 80-90%, never dropping below 70%. So, load speed is crucial. Even after implementing these methods, not just for Next.js sites but for most of our clients, there’s been no noticeable increase in bandwidth costs. Try working as a digital marketer, and you’ll see how cheap bandwidth is compared to the impact on CTR and average session duration.
@@elie2222 no you are not getting my point. There is no argument against prefetching assets to speed up your site. But what they have done is overload everything to the max and claim speed. The original site is in production and it's that fast to interact. Nextjs can do well similarly although slightly heavier on Js. But this "demo" is a mockery of the attention to detail they've done in the original site. You might as well load the entire database in the browser and claim 0ms network latency.
my internet is so slow it loads on both of these site
🤯 nice
all this image preloading doesn't work on mobile where you have no hover event
Good point. You could use onTouchStart, or when the a link moves into the viewport, you could preload the images.
Or you could just not optimize on mobile. Pages would still load fine.
it still has prefetch when a next link comes on view