Recently, I came across this thing called Service Workers. It allows users to cache website static and dynamic resources based on configuration. It intercepts all network requests from users and decides whether to retrieve the corresponding resources from cache or the network, thereby greatly improving the loading speed of web pages. Its advantages include high customizability, no need for server-side support, and significant effects.
The end result is that when you visit my website for the second time, only about 80k of resources will be loaded (excluding AdSense), including all images and audio/video files. This 80k mainly consists of HTML and the API of DPlayer that I use.
It can even be accessed when the network is disconnected (try disconnecting the network cable):
It only supports HTTPS because it intercepts users' network requests and requires a secure environment.
Compatibility is not very good. Click here to view the compatibility report. Currently, only Chrome, Firefox, Opera, and some Android browsers support it.
There are many tutorials available online on how to use it, so I won't go into detail here. I recommend these articles:
Using service worker and sw-precache to accelerate websites
Using Service worker to accelerate/offline access to static blog websites