Question

we're tryng to merge CDN hosted CSS files in order to increase Google PageSpeed results. IS it possible? What is the fastest solution?

Having multiple minified files hosted on CDN
Having one minified self-hosted files locally?

What's your best approach to this problem? Thanks in advance

Answer 1

如果只是为了改进Google Pagespeed结果，您应该识别渲染上方折叠内容所需的CSS代码，然后在head部分内联它。就像本文中解释的那样：https://www.storyblok.com/tp/how-to-get-pagespeed-100

CDN总是适用于静态文件，但Google Pagespeed并不能衡量您的CSS是否由CDN提供服务。相反，它会测量CSS是否阻止了页面的呈现。

如果您有多个CSS文件，请尝试合并它们。为上面的折叠内容内联CSS并在页面呈现后插入以下链接标记以加载其余样式：

<link rel="preload" id="stylesheet" href="/assets/css/below.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/css/below.css"></noscript>

rel = preload需要polyfill才能与旧浏览器一起使用。所以一定要包括以下脚本：

<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
!function(a){"use strict";var b=function(b,c,d){function e(a){return h.body?a():void setTimeout(function(){e(a)})}function f(){i.addEventListener&&i.removeEventListener("load",f),i.media=d||"all"}var g,h=a.document,i=h.createElement("link");if(c)g=c;else{var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]}var k=h.styleSheets;i.rel="stylesheet",i.href=b,i.media="only x",e(function(){g.parentNode.insertBefore(i,c?g:g.nextSibling)});var l=function(a){for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){l(a)})};return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);

/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
!function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(b){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){b.poly(),a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);
</script>

Is it possible to merge WordPress CSS hosted on CDN? Better solution?

1 个答案: