The Speculation Rules Web API explained.

💬 Topics:
- New Speculation Rules API
- Prefetch vs. prerender difference
- Eagerness setting behavior
- Declarative, browser-optimized approach
- HTTP header rule delivery

📚 Learn to Code with Scrimba (20% off Pro):
https://scrimba.com/?via=AwesomeCoding

Awesome Coding's resource offer curated lists of resources, tools, and libraries for software developers. Readers can learn about programming languages, frameworks, and development tools across various domains. With carefully selected recommendations and community contributions, Awesome Coding helps developers discover new tools and resources to enhance their productivity and skills.

Awesome

Make any app load faster with just 6 lines of HTML

Hard Pass. It’s something new that only works in chromium browsers and you need a fallback for Safari and Firefox…
So… instead:
A relatively small JS script that does all of it at once for any browser.
&lt;script&gt;
(function(){
var cssFiles = [“styles.css”,“theme.css”];
var jsFiles = [“script.js”,“extra.js”];
var head = document.head || document.getElementsByTagName(‘head’)[0];
var saveData = navigator.connection &amp;&amp; navigator.connection.saveData;
function supportsPreload(){
try{ var l = document.createElement(‘link’); return l.relList &amp;&amp; typeof l.relList.supports === ‘function’ &amp;&amp; l.relList.supports(‘preload’); }catch(e){ return false }
}
function fetchFallback(url){
return fetch(url, {mode:‘no-cors’, credentials:‘same-origin’}).catch(function(){});
}
function loadCSS(h){ var l=document.createElement(‘link’); l.rel=‘stylesheet’; l.href=h; head.appendChild(l); }
function loadJSInOrder(list){
var i=0;
function next(){
if(i&gt;=list.length) return;
var s=document.createElement(‘script’);
s.src=list[i++];
s.async=false;
s.onload=next; s.onerror=next;
head.appendChild(s);
}
next();
}
var canPreload = supportsPreload();
if(saveData){
cssFiles.forEach(loadCSS);
loadJSInOrder(jsFiles);
return;
}
var promises = [];
cssFiles.forEach(function(h){
if(canPreload){
var l=document.createElement(‘link’);
l.rel=‘preload’; l.as=‘style’; l.href=h;
l.onload = function(){ this.rel=‘stylesheet’; };
l.onerror = function(){ loadCSS(h); };
head.appendChild(l);
promises.push(new Promise(function(res){ l.addEventListener(‘load’, res); l.addEventListener(‘error’, res); }));
} else {
promises.push(fetchFallback(h));
}
});
jsFiles.forEach(function(s){
if(canPreload){
var l=document.createElement(‘link’);
l.rel=‘preload’; l.as=‘script’; l.href=s;
head.appendChild(l);
promises.push(new Promise(function(res){ l.addEventListener(‘load’, res); l.addEventListener(‘error’, res); }));
} else {
promises.push(fetchFallback(s));
}
});
Promise.all(promises).then(function(){
if(!canPreload) cssFiles.forEach(loadCSS);
loadJSInOrder(jsFiles);
}).catch(function(){
cssFiles.forEach(loadCSS);
loadJSInOrder(jsFiles);
});
})();
&lt;/script&gt;

This is good technology development. Thx for letting us know.