是否可以合并托管在 CDN 上的 WordPress CSS？更好的解决方案？

Question

我们正在尝试合并 CDN 托管的 CSS 文件以提高 Google PageSpeed 结果。可能吗？什么是最快的解决方案？

在 CDN 上托管多个缩小文件
本地有一个缩小的自托管文件吗？

解决这个问题的最佳方法是什么？提前致谢

Answer 1

如果只是为了提高 Google Pagespeed 结果，您应该确定渲染首屏内容所需的 CSS 代码，然后将其内联到头部部分。如本文所述：https://www.storyblok.com/tp/how-to-get-pagespeed-100

CDN 始终适合静态文件，但 Google Pagespeed 无法衡量您的 CSS 是否由 CDN 提供服务。相反，它会测量 CSS 是否阻止了页面的呈现。

如果您有多个 CSS 文件，请尝试合并它们。将 CSS 内联到首屏内容并插入以下 link 标记以在页面呈现后加载其余样式：

<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>

是否可以合并托管在 CDN 上的 WordPress CSS？更好的解决方案？

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

wordpress

minify