我想在Google Page Speed Insights上获得100/100分。但它一直告诉我一些css文件正在阻止折叠上方的内容。如何确保在加载主要内容后加载这些文件?这样它就不会再出现在Page Speed Insights中。
我尝试使用jquery异步加载文件,但这样页面速度工具仍然会弹出消息。
我尝试了以下方法:
<script>
var loadMultipleCss = function(){
//load local stylesheet
loadCss('myawesomestyle.css');
//load Bootstrap from CDN
loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
//load Bootstrap theme from CDN
loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');
}
var loadCss = function(cssPath){
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = cssPath;
var head = document.getElementsByTagName('head')[0];
head.parentNode.insertBefore(cssLink, head);
};
//call function on window load
window.addEventListener('load', loadMultipleCss);
</script>
字符串
当然是用我自己的文件路径。
但对于Google PageSpeed Insights来说,这并不起作用。
2条答案
按热度按时间yvfmudvl1#
你能分享你正在优化的网站的链接吗?
您确定您的页面没有缓存在某处吗?
有两种方法对我有效:
A)您可以只将样式表标签放在结束的
</html>
标签之后。B)另一种技术是将以下链接标记放入head部分:
字符串
方法B的缺点是,并非所有浏览器都支持在link标记中使用rel=preload,因此您需要包含以下多边形填充:
型
我写了一个an article关于优化一个页面从pagespeed 59到100,你可以看到之前和之后的以下分支:
之前:https://github.com/storyblok/storyblok-express-boilerplate/blob/unoptimized/views/layouts/main.hbs
之后:https://github.com/storyblok/storyblok-express-boilerplate/blob/master/views/layouts/main.hbs
rjee0c152#
您可以 AJAX / jQuery在页面加载后加载CSS。这将允许您随时加载不重要的CSS,例如,使用
setTimeout
。示例如下:
字符串
编辑:请删除链接词('link)前的'字符。它被插入到那里,以便stackoverflow可以显示代码。否则它会显示“... apend(“<>"...)。
在上面的例子中,CSS只会在页面完全加载后3秒加载。
我在我的一些页面中做到了这一点,并在不影响用户界面或布局的情况下获得了100%的页面速度,因为我在该方法中使用的CSS文件是次要的,如sweetalert。