如何使单页HTML网站渲染速度更快

Question

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

ide-global.com

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

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

谢谢

Answer 1

基于我在您网站上的检查，我得到了以下几点：

1. 您的网页包含超过25个外部JavaScript文件和超过10个外部CSS文件。将它们组合在一个js和一个css文件中。
2. 您尚未对文件启用gzip压缩。这将减少50％以上的负荷。

3. 您应该将css文件放在最上面。你应该把两个文件放在最上面。

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

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

1. 适用于chrome和firefox的Yslow扩展程序
2. 页面速度扩展

最好的运气。

Answer 2

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

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

Answer 3

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

1. 网络请求

   • 浏览器可以从域进行20个并行下载请求。 所以你需要避免无用的请求。

   <强> FIX

   您可以使用fontawesome代替图标图像，也可以将图像合并到单个精灵图片中。

2. 避免渲染阻止

   • 您必须使用异步调用加载所有.js，这将删除.js渲染阻止。

3. 您可以使用CDN

   • CDN是一个内容交付网络，它将所有静态资源全局复制到不同的服务器，以便数据可以轻松地连接到客户端计算机。

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