Browser Caching Best Practices, When to use no-cache vs max-age without breaking your site
Vložit
- čas přidán 25. 06. 2024
- Caching is the hardest problem in building software, and having the browser cache is not any different. In this video, I'll discuss Jake Archibald's article
jakearchibald.com/2016/cachin...
0:00 Intro
2:00 Pattern 1: Immutable content + long max-age
5:40 Pattern 2: Mutable content, always server-revalidated
8:00 max-age on mutable content is often the wrong choice
12:20 CDN and Caching
Article
jakearchibald.com/2016/cachin...
/ jaffathecake
🎙️Listen to the Backend Engineering Podcast
husseinnasser.com/podcast
🏭 Backend Engineering Videos
backend.husseinnasser.com
💾 Database Engineering Videos
• Database Engineering
🏰 Load Balancing and Proxies Videos
• Proxies
🏛️ Software Archtiecture Videos
• Software Architecture
📩 Messaging Systems
• Message Queues & PubSu...
Become a Member
/ @hnasr
Support me on PayPal
bit.ly/33ENps4
Stay Awesome,
Hussein - Věda a technologie
Nice video! Jake Archibald is always an excellent resource
Hey jeff good to see here :)
Yall two have the most useful channels out here. Thank you both
I watch every second of your work with unlimited amount of passion and joy! keep it up
i just love my life when i see a video of yours in my feed
I was looking up cache-control stuff this morning and BOOOOOM up comes your new video! Thanks so much for the excellent content!
Wow, this is really great.
First of all great content from Jake Archibald, and then the further explanations by Hussein, that is an excellent combo, and I can say I feel rather educated on caching now, and before the video I didn't know a damned thing!
Hey Hussein, we are connected somehow. I have been checking on Cache-content this morning and your video came up, so I liked it before watching.
Thank you and Jake for great content.
out-of-this-world demonstration skill, thank you a lot Mr.Hussein ^^
6:16 I'm pretty sure "./sw.js" means "service worker"
for sure it is
You can tell I never used service workers 😅
Good research , Dr. Hussain Nasser 🌹
This is relly valuable. Thanks!
Thank you so much. Nice Video!!
These videos are so helpful love from. 🇮🇳
Dude, You just saved my work! LOL
You picked a great article to explain this topic. A great introduction into Sevice Workers if you want to cover it (which I fully understand if you don't want to :-) ).
6:16 my guess is /sw.js is service worker, because these fake chat conversations are how service workers work.
Tip: force refresh in a browser is actually the key combo: ctrl + F5
13:49 yep, it's because you'd probably use versioning (pattern 1 in the article) in the filenames/path for the static files (CSS/JS/images).
Yeah, Jake has been doing this for many years and it shows.
I want to cover SW and PWA but something deep inside tells we are thats over engineering the web. hey I know how to setup a proxy if I want to. I might be wrong
@@hnasr Actually SW and PWA are a big deal they finally make offline web apps possible. Much better than HTML5 offline support (which was a failed solution). You were the one who always said it's about the why things are done. Well, it might seem over engineering, but it's because it's meant for offline support.
Just searching for this today and you came up with. May ALLAH PAK bless you sir ❤️
You are the best ❤❤❤
Thank you.
I am watching so much of your videos that I saw you in my dream tonight 😂.
It was pretty detailed but the only thing i remember now is that it was about some classified project, dang it was pretty interesting.
😂 take a break
😂
A django version of this would be gold
btw Hussein sw.js refers to ServiceWorker.js it's a good idea to talk about PWA as big companies like Microsoft started to use it on something like Office etc
Hey Hissein, with both no-cache and must-revalidate a 304 status code would be returned to the user if 80-90% of the content is like evergreen content..and this load of 304s would appear in Google search console, which is kinda issue for an SEO person...is there a smart way to avoid having 304 in GSC??
I met Jake Archibald directly and took pic with him also in one meetup in India.
Hi,
I have a problem with browser caching.
Once logged in moving to pages visited previously as anonymous user, causes their cached version to be displayed. It means that “Log in” link will appear, despite the fact that user is already logged. Refreshing page will correct menu link, displaying “Log out”, but it can’t be a solution from user point of view.
I have the caching plugin disabled now. I went through this issue with the hosting provider and asked them to exclude caching of pages like: /my_account/, /cart/, /checkout/ and others, but still the same situation.
Please advise what can be the solution. How to make login / logout links cache independent?
ربنا يبارك لحضرتك وكل عام وحضرتك بخير
Great topic! Far too often I see poor back ends disable cache and set modification date as now. They want to maximize hits, even if users suffer. Many back ends are designed assuming there is no caching.
On the other hand, I've had lots of problems because browsers ignore the no cache, etc. so I have to add hidden fields to forms with random numbers to disable caching. Maybe it's better now, but I'm skeptical. AOL was the worst. Hussein, hopefully you are too young to know about AOL.
Thanks Carl, correct some backends used to disable caching on purpose for tracking reasons. (Hulu comes to mind)
Why use E-Tag over saving and comparing last modified date?
Also, in no-cache - isn't it a bit of an overhead of the cache always goes to the server anyways?
Tell my your thoughts!
Modified date is great but not applicable . Resources might get updated but content didn’t really change. Or if there isn’t a static asset and the resource is dynamic (db query)
Yes no-cache always go to the server but Remember we save on bandwidth, so its costly yes but less costly than no caching at all (no-store) where we always hit the server and always bring back full content
Bro I hate to tell but you are so much better than TechLead.
haha
At one company I worked at, we had a caching issue in our SaaS solution that pissed customers off so much, so many times, the whole engineering team got laid off. We tried so hard to fix it but after every deployment, it would appear again and again. There were other problems too but telling customers to clear their cache every month to use our app was the last straw. CloudFront, CORS and .NET Core tokens. Bleh.
Building performant scalable apps are hard! Sorry to hear that Ryan.
Ryan I'm working solo in my first dev job building a PWA with AWS Amplify which uses Cloudfront, this issue is giving me nightmares and I'm beginning to hate web development because of it, throw service workers into the mix and I'm just ready to tear my hair out. Why does this have to be so complicated and difficult.
I need to implement HLS and DASH protocol for video streaming, can you please help me ,Sir.
what should I do?
I know only VS code.
The guy who dislike button should be removed from his videos o_O
first :)
This whole caching thing gives me nightmares, I just hate it.