Acum cinci zile am scris despre încărcarea asincronă a CSS-urilor într-o pagină web. Nu doar că am scris, dar am și implementat metoda pe acest blog.
Toate bune, doar că pagina rămânea în pielea goală, fără CSS, pe anumite browsere. Pentru că, după cum era de așteptat, nu toate navigatoarele știu de <link rel=”preload”>.
Mozilla Firefox de pe Ubuntu și derivatele (ex: Linux Mint) nu știe ce-i aia. Chrome, în schimb, cunoaște. E a lu’ Google, iar Google vrea viteză. Interesant – sau nu – este că Google PageSpeed Insights nu a auzit de <link rel=”preload”>, dar cui îi mai pasă de PageSpeed Insights?
Fiindcă nu mi-am dat seama ce am omis, am citit documentația. Cele mai relevante informații le-am găsit aici. Așa am dat de un javascript care se pune fix după </noscript>. Despre acesta vorbesc:
<script>!function(e){"use strict";var t=function(t,n,r){function o(e){return i.body?e():void setTimeout(function(){o(e)})}function a(){d.addEventListener&&d.removeEventListener("load",a),d.media=r||"all"}var l,i=e.document,d=i.createElement("link");if(n)l=n;else{var s=(i.body||i.getElementsByTagName("head")[0]).childNodes;l=s[s.length-1]}var u=i.styleSheets;d.rel="stylesheet",d.href=t,d.media="only x",o(function(){l.parentNode.insertBefore(d,n?l:l.nextSibling)});var f=function(e){for(var t=d.href,n=u.length;n--;)if(u[n].href===t)return e();setTimeout(function(){f(e)})};return d.addEventListener&&d.addEventListener("load",a),d.onloadcssdefined=f,f(a),d};"undefined"!=typeof exports?exports.loadCSS=t:e.loadCSS=t}("undefined"!=typeof global?global:this),function(e){if(e.loadCSS){var t=loadCSS.relpreload={};if(t.support=function(){try{return e.document.createElement("link").relList.supports("preload")}catch(e){return!1}},t.poly=function(){for(var t=e.document.getElementsByTagName("link"),n=0;n<t.length;n++){var r=t[n];"preload"===r.rel&&"style"===r.getAttribute("as")&&(e.loadCSS(r.href,r,r.getAttribute("media")),r.rel=null)}},!t.support()){t.poly();var n=e.setInterval(t.poly,300);e.addEventListener&&e.addEventListener("load",function(){t.poly(),e.clearInterval(n)}),e.attachEvent&&e.attachEvent("onload",function(){e.clearInterval(n)})}}}(this);</script>
Scriptul de mai sus trebuie plasat după codul din acest articol. Dacă nu vreți să scrieți scriptul de mai sus direct în pagină, descărcați această arhivă. Dezarhivați fișierul și încărcați-l în public_html. După aceea, în loc de „cârnatu“ de mai sus, nu trebuie să scrieți decât atât:
<script src="css_async.js" defer></script>
Lasă un răspuns