由于无法编辑 webpack 配置文件，因此解决渲染阻塞 CSS 以及仅使用 Create React App 加载关键 CSS 的最佳方法是什么？
reactjs webpack create-react-app render-blocking critical-css
我正在使用Gatsby.js及其带有Irving主题的Typography插件.
此主题需要Google字体"Exo"和"Yrsa",并<head>在导出的静态html文件部分添加导入:
<link href="//fonts.googleapis.com/css?family=Exo:700|Yrsa:400,700" rel="stylesheet" type="text/css"/>
此导入是渲染阻止内容,如果可能,我会更愿意避免使用这些内容和Google PageSpeed Insights分数.
我尝试使用gatsby-plugin-google-fonts并将以下内容添加到我的gatsby-config.js中:
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Exo\:700`,
`Yrsa\:400,700`,
],
}
},
然而,这只是添加了第二个导入调用.我应该将它们放在静态目录中吗？即使这样,我如何配置Typography仍然使用这些字体而不单独导入它们？
typography google-font-api google-pagespeed gatsby render-blocking
我有九个不同的CSS文件.在浏览器下载所有CSS文件之前,我的网站不会加载.大多数CSS甚至不需要主页.在JavaScript中你可以这样做<script async>,
但对于样式表,最佳解决方案是什么？
我搜索了以下文章 Code Pen
他们建议使用
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
要么
<head>
<!-- head content -->
<link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
<!-- body content -->
<link rel="stylesheet" href="style.css">
</body>