Google PageSpeed 冲突建议答案

【问题标题】：Google PageSpeed Conflicting SuggestionsGoogle PageSpeed 冲突建议
【发布时间】：2013-09-16 14:32:09
【问题描述】：

在加载 CSS 时，Google PageSpeed 的建议相互矛盾。

一方面，它告诉我们在头部加载所有 CSS：https://developers.google.com/speed/pagespeed/service/MoveCSSToHead?csw=1

另一方面，它告诉我们只将优先级 CSS 放在头部，并在页面完全加载后插入其余的 CSS： https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

那么我应该遵循哪条规则？另外，如果有人能指出如何在“onLoad”之后使用 Javascript 加载 CSS 的示例，我将不胜感激。

【问题讨论】：

【解决方案1】：

99% 的情况下，所有 CSS 都应该以外部链接的形式出现在头部。并且所有 js 都应该在结束 body 标记之前。如果它告诉您将 css 放入正文中，那是错误的。页面速度不仅仅是实际速度。这也是坚持的速度。头部的 css 将使页面看起来加载得更快。以下是我所知道的使用 js 加载 CSS 的所有方法。 http://www.websitecodetutorials.com/code/javascript/add-css-with-javascript.php。

【讨论】：

【解决方案2】：

这里的想法是您将页面实际需要最初呈现的 CSS 规则内联到 head 标记中，并将其余 CSS 的加载推迟到页面加载之后。

例如，见http://www.iispeed.com/mod_pagespeed_example/prioritize_critical_css.html?PageSpeed=on&PageSpeedFilters=rewrite_css,flatten_css_imports,inline_import_to_link,prioritize_critical_css

【讨论】：

【解决方案3】：

您好，最近我们创建了一个名为“优雅框架”的开源 nodejs 框架，它可以帮助您构建快速的 Web 应用程序，我们成功地在所有页面中在桌面和移动设备上获得 100% 的谷歌页面速度：您可以在以下位置查看：

https://developers.google.com/speed/pagespeed/insights/?url=getelegant.com

有很多东西可以通过查看页面源来学习

【讨论】：