前端最小化加载时间答案

【问题标题】：Frontend minimize load time前端最小化加载时间
【发布时间】：2014-05-11 16:16:04
【问题描述】：

我正在使用 new-relic，对于我的网站，主页平均需要 8 秒才能完全加载。网络请求很快，但是 dom 和页面渲染是什么减慢了它。我有 google +、facebook、twitter 分享按钮和 bxslider。

当我在浏览器中运行它时，它需要 2-4 秒。我对如何优化前端性能不是很熟悉。我很震惊花了这么长时间。

如果有人可以给我提示以加快速度；那太好了。

我试图弄清楚如何使用 google chrome profiler 工具，但它显示 80% 空闲。

网站是http://phppointofsale.com

棕色是网络
黄色是 DOM
蓝色是页面渲染

【问题讨论】：

网站的网络部分很快，是dom加载和页面渲染的问题。
我添加了过去 7 天的分析
我注意到（在我早期的一个项目中）在使用 Google+ 和 Facebook 按钮时出现了一些令人讨厌的减速，尽管您的图表似乎没有表明这一点。但是当我加载您的网站时，我看到它在 3 秒内完全呈现并运行良好。那是在 3 年以上的笔记本电脑上，无论如何都可能需要重新安装。
您认为分析工具可能有问题吗？我刚在一台 4 岁的电脑上试过，不到 4 秒
这里有类似的结果。我将在 2 秒内完全呈现页面并使其正常运行。

标签： javascript html css frontend load-time

【解决方案1】：

我认为您使用的分析工具可能存在问题。在我的电脑（Windows 7，Chrome 34.0.1847.131）中，您的网站加载时间大约为 2 秒。所以我用各种工具运行了一些测试，看看发生了什么。

Pingdom

如您所见，加载时间为 1.2 秒，您的网站比所有测试网站快 85%。加载时间最长的是 plusone.js，即 247ms 和 jquery.bxslider.js?v=1.0 、 jquery.fitvids.js?v=1.0 、 jquery.slicknav.min.js?v=1.0 、 functions.js?v=1.0 每个都需要 227ms。

每个内容花费的时间：
-脚本 39.44%
-图像 37.75%
-HTML 12.67%
-其他 7.45%
-CSS 2.69%

每个域花费的时间

-phppointofsale.com 51.40%
-apis.google.com 8.01%
-www.facebook.com 6.80%
-themes.googleuser… 5.83%
-static.xx.fbcdn.net 4.01%
-other 23.95%

Here你可以自己看结果。
GTmetrix

这个工具可以让你的页面加载3秒

Here你可以自己查看结果。
Loadimpact

此工具还提供（作为第一个）1.3 秒的加载时间。

Here 您可以通过以下方式查看结果你自己

现在，您可以使用一些技术来加速您的网站。根据之前的工具，我会建议针对您的网站：

缩小 CSS

示例：Your CSS 可以缩小为 this，并且您的尺寸减少了 25%。
指定图像尺寸

例如：<img class="feature-img scale" src="img/multiple_devices.png" alt=""> 缺少宽度和高度属性
缩小 JavaScript。

示例：您的 JS 可以缩小到 this，并且大小减少了 44%。
减少 HTTP 请求

此页面有 22 个外部 Javascript 脚本。尝试将它们合二为一。此页面有 8 个外部样式表。尝试将它们合二为一。
利用浏览器缓存

某些可缓存资源（如 this 之一）的新鲜生命周期很短。指定至少在未来一周内到期。
添加 Expires 标头

有 44 个静态组件（如 this 一个）没有远期到期日期

您可以从提供的链接中获得这些以及更多信息。

【讨论】：

【解决方案2】：

从访问您的网站开始，我认为您的报告偏离了对您的 adroll.com 和社交媒体的调用。在这里使用的一个好工具是 YSlow：我在您的网站上快速运行它，这将是我首先要解决的问题：

Grade F on Make fewer HTTP requests
This page has 21 external Javascript scripts. Try combining them into one.
This page has 8 external stylesheets. Try combining them into one.

【讨论】：

【解决方案3】：

了解最佳实践基础，阅读：
- 雅虎传奇文章Best Practices for Speeding Up Your Web Site。雅虎基于该文章的性能工具YSlow。
- Google 开发者的文章：Web Performance Best Practices
还有其他几种诊断工具，例如Google Chrome Audit Panel。 Firefox 和 IE 有类似的工具。
使用工具自动化这些主要的良好实践。两个很好的工具是：Grunt.js 和 Gulp.js。在这里你有一个introduction to Gulp。
我现在查看了您的网站，这些是 YSlow 的一些建议：
- 此页面有 19 个外部 Javascript 脚本。尝试将它们合二为一（您可以使用 Grunt.js 或 Gulp.js 来实现）。
- 此页面有 8 个外部样式表。尝试将它们合二为一（您可以使用 Grunt.js 或 Gulp.js 来实现）。
- 添加过期标头。有 45 个静态组件没有一个遥远的未来到期日期（主要是 css、js 和图像。你可以在几个ways 中做到这一点）。
- 使用 gzip 压缩组件。有 21 个纯文本组件应该被压缩发送。为此，您可以发送 http request for gzip。

还有一些其他的，但这些是主要的。

总之，主要建议是缩小和加入：1 个文件中的所有 css 文件，1 个文件中的所有 js 文件，以及您可以在 1css sprite 中的所有图像。最好使用 Gruntjs 或 Gulpjs 完成，但如果您需要一种快速而肮脏的方式，您可以使用在线工具，例如：

【讨论】：

【解决方案4】：

作为@McCheesiIt 的答案 +1 的补充

使用bxslider，尝试添加属性preloadImages

$('#features').bxSlider({
    auto: true,
    pause: 8000,
    preloadImages: 'all' // or 'visible'
});

将您的<script></script> 标记放在<head> 部分中，或者就在结束正文标记</body> 之前

顺便说一句：我的 DSL 线路非常慢（8'000Kbytes DL / 15Kbytes UL），您的网站在 3.00 秒内加载，这是可以接受的。

【讨论】：