[英]Google PageSpeed Insight CSS Javascript “above the fold” issue using CDN
我试图通过对我的网页的本地后备支持来实现CDN资源。 但是现在，我无法摆脱“折叠式”内容中用于jquery和Bootstrap的渲染阻止JavaScript和CSS CDN资源。
我试图遵守Google指南，但未能解决我的问题：
<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 ">
更新：我尝试使用“异步/延迟”属性来加载我的.js CDN脚本。 但这没有用，因为我的本地后备脚本给我“ Uncaught ReferenceError：未定义$”错误，因为它们是在jquery异步加载完成之前执行的。
<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>
延迟折叠的CSS渲染器突然无法通过Google Pagespeed Insight Test
[英]deferring above the fold CSS render suddenly fails to pass Google Pagespeed Insight Test
Google PageSpeed消除了折叠式内容Wordpress中的渲染阻止CSS
[英]Google PageSpeed Eliminate render-blocking CSS in above-the-fold content Wordpress
OpenCart PageSpeed-在首屏内容中消除渲染阻止的JavaScript和CSS
[英]OpenCart PageSpeed - Eliminate render-blocking JavaScript and CSS in above-the-fold content
google pageSpeed Insights，javascript IS折叠在WORDPRESS下方
[英]google pageSpeed Insights, javascript IS loaded below the fold WORDPRESS
如何将Google PageSpeed Insight JSON结果转换为HTML
[英]How to convert Google PageSpeed Insight JSON results to HTML
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.