如何使单页 HTML 网站呈现更快[关闭]答案

【问题标题】：How to make a single page HTML website render faster [closed]如何使单页 HTML 网站呈现更快[关闭]
【发布时间】：2015-08-07 05:57:35
【问题描述】：

我的问题有点笼统，我有一个网站

所以这是一个单页网站，因为它的内容很大，所以网站的大小增加了超过98kb，根据规范，这远远超过了限制，导致渲染速度变慢。

任何人都可以建议我可以应用的任何插件以使其异步加载。

谢谢

【问题讨论】：

【解决方案1】：

所以根据我在您的网站上进行的检查，我得到了以下几点：

您的页面有超过 25 个外部 javascript 文件和超过 10 个外部 css 文件。将它们组合成一个 js 和一个 css 文件。
您没有对文件启用 gzip 压缩。这将减少 50% 以上的负载。
你应该把 css 文件放在上面。有两个文件你应该包括在上面。

http://fonts.googleapis.com/css?family=Raleway400,200
http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

这些应该会提高您网站的性能。对于插件，有许多选项可以让您深入了解您的网站性能和改进它们的建议，但它们不会直接提高您的网站性能。例如。

祝你好运。

【讨论】：

【解决方案2】：

对我来说，你有两个大问题：

请求数：浏览器可以处理的并行请求数是有限的。对此的优化应该是（按此顺序）：
- 检查不需要的依赖项
- 检查以后可以加载什么
- 将 js 和 css 组合到一个文件中。
文件大小：您有几个大文件1.3 MB background image、660k video
- 对于视频，这是带宽损失。这可以用 1k 的 js 和 10k 的图像来完成。此外，当前的视频很模糊。
- 您需要压缩图像。有些图像可能会小 10 倍而不会造成视觉损失。在线搜索图像优化器，有很多。
- 在服务器上激活 gzip。

【讨论】：

【解决方案3】：

有多种可能会降低您的网站速度

网络请求
- 一个浏览器可以从一个域发出20个并行下载请求。所以你需要避免无用的请求。
修复

您可以使用 fontawesome 代替图标图像，也可以将图像组合成单个 spritesheet。
避免渲染阻塞
- 您必须使用异步调用加载所有 .js，这将消除您的 .js 渲染阻塞。
您可以使用 CDN
- CDN 是一个内容分发网络，可将您的所有静态资源复制到全球不同的服务器，以便数据可以轻松到达客户端计算机。

这里只是一个概述，为了让您的网站真正更快，您还需要做更多的事情。

【讨论】：