使用 CDN 的 Google PageSpeed Insight CSS Javascript“首屏”问题
Posted
技术标签:
【中文标题】使用 CDN 的 Google PageSpeed Insight CSS Javascript“首屏”问题【英文标题】：Google PageSpeed Insight CSS Javascript "above the fold" issue using CDN 【发布时间】：2016-07-24 08:48:19 【问题描述】：我尝试实现 CDN 资源，并为我的网页提供本地后备支持。 但现在我无法摆脱“首屏”内容中 jquery 和 Bootstrap 的渲染阻塞 javascript 和 CSS CDN 资源。
我尝试遵守 Googles 指南，但没有解决我的问题：
Remove Render-Blocking JavaScript Optimize CSS Delivery<html>
<head>
</head>
<body>
<div id="wrapper">...</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<!-- jQuery local fallback -->
<script>
window.jQuery || document.write('<script src="./assets/scripts/jquery-2.2.2.min.js"><\/script>')
</script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js</script>
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') document.write('<script src="./assets/scripts/bootstrap.min.js"><\/script>')</script>
<!-- Bootstrap CSS local fallback -->
<div id="bootstrapCssTest " class="hide "></div>
<script>
$(document).ready(function()
if ($('#bootstrapCssTest').is(':visible') === true)
$("head ").append('<link rel="stylesheet " href="./assets/styles/bootstrap.min.css">');
);
</script>
</body>
</html>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ">更新：我尝试使用“async/defer”属性来加载我的 .js CDN 脚本。但它不起作用，因为我的本地后备脚本给了我 "Uncaught ReferenceError: $ is not defined" 错误，因为它们是在 jquery 异步加载完成之前执行的。
【问题讨论】：
将它们放在页面最底部的结束正文标记 (</body>) 之前。那会解决你的问题。那时不需要异步。并且永远不要在</html>之外。顺便提一句; css可以放在头部，只有javascript应该放在页面底部。
脚本已经在关闭正文标记之前。将 css 移到头部，但仍然遇到相同的 Pagespeed 问题。
【参考方案1】：
-
使用 jQuery 库包含页脚部分和下面的自定义代码启动 jquery 代码
40% CSS 代码在首屏内容（头部使用内部样式表）
<style type="text/css">...</style>
<html>
<head>
</head>
<body>
<div id="wrapper">...</div>
<div id="bootstrapCssTest" class="hide"></div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<!-- jQuery local fallback -->
<script src="../scripts/jquery-2.2.2.min.js"></script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<!-- Bootstrap JS local fallback -->
<script src="../scripts/bootstrap.min.js"></script>
<!-- Bootstrap CSS local fallback -->
<script>
$(document).ready(function()
if ($('#bootstrapCssTest').is(':visible') === true)
$("head ").append('<link rel="stylesheet " href="./assets/styles/bootstrap.min.css">');
);
</script>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ">
</body>
</html>【讨论】：
以上是关于使用 CDN 的 Google PageSpeed Insight CSS Javascript“首屏”问题的主要内容，如果未能解决你的问题，请参考以下文章
Google Pagespeed 第三方使用。谁是“在线研究”？如何检测软件？