javascript - PageSpeed Insights 在我的网站中检测到渲染阻塞 JS 和 CSS。我该如何解决？

Question

如何删除渲染阻塞 JavaScript 并解决此问题？

我没有使用任何 CMS。我只使用静态 HTML。

将我的页面 URL 提交到 Google PageSpeed Insights 时，我收到以下警告:

Remove render-blocking JavaScript:

http://www.mxxxxx.com/scripts/custom.js
http://www.mxxxxx.com/js/jqueryui.min.js
http://www.mxxxxx.com/scripts/jquery
http://www.mxxxxx.com/scripts/jqueryui

Optimize CSS Delivery of the following:

http://www.mxxxx.com/styles/style1.css
http://www.mxxxx.com/styles/framework.css
http://fonts.googleapis.com/…,700italic,800italic,400,300,600,700,800
http://fonts.googleapis.com/…,400italic,600italic,700italic,900italic
http://fonts.googleapis.com/css?family=Lato:400,700,900
http://fonts.googleapis.com/…00,500italic,700,700italic,900italic,900
http://fonts.googleapis.com/…?family=Signika+Negative:300,400,600,700
http://www.mxxxx.com/styles/owl.theme.css[need fix[\]\[1\]][1]

这是实际错误页面的屏幕截图:

/image/Y9FJn.png

Answer 1

我写了一篇文章，逐步向您展示如何获得 100 分的 Pagespeed:https://www.storyblok.com/tp/how-to-get-pagespeed-100

可能最耗时的任务是识别首屏 CSS 并将它们内联到头部部分。下面的折叠 CSS 和字体可以包含在结束 html 标记之后或使用 https://github.com/filamentgroup/loadCSS 的异步方法。

您可以轻松地将 Javascript 文件放在 html 文档的末尾。在结束 body 标签之前。但我会将它们合并为一个以减少 http 请求。