前端最小化负载时间

Question

我正在使用新的文物和我的网站，主页是平均8秒，以充分加载。网络请求是快速的，但是dom和页面呈现是减慢其速度的原因。我有google +，facebook，twitter共享按钮和bxslider。

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

如果有人能给我提速的话，那就太好了。

我试着找出如何使用谷歌铬分析器工具，但它说80%是空闲的。

网站是http://phppointofsale.com

​

​

• Brown是网络
• 黄色是DOM
• 蓝色是页面呈现

Answer 1

我认为您使用的分析工具可能有问题。在我的个人电脑(Windows 7，Chrome 34.0.1847.131)中，你的网站在大约2秒内加载。因此，我使用各种工具进行了一些测试，以了解发生了什么。

1. 平定

如您所见，加载时间为1.2秒，您的站点比所有测试站点快85%。负载时间以plusone.js最多，为247 is，jquery.bxslider.js?v=1.0、jquery.fitvids.js?v=1.0、jquery.slicknav.min.js?v=1.0、functions.js?v=1.0各为227 is。

每项内容花费的时间：

                 -Script 39.44%

-Image 37.75%

-HTML 12.67%

-Other 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%

这里你可以自己看到结果。

1. GTmetrix

此工具为您的页面提供3秒。

这里你可以自己看到结果。

1. [医]鼓膜

该工具还给出(作为第一个工具)1.3秒的加载时间。

这里你可以自己看到结果

现在是一些技术，您可以使用，以加快您的网站。根据以前的工具，我会为您的站点提出具体建议：

1. 缩小CSS

示例：你的 CSS可以缩小为这，您可以减少25%的大小。

1. 指定图像尺寸

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

1. 缩小JavaScript。

示例:您的JS可以缩小到这，并且您的尺寸减少了44%。

1. 减少HTTP请求

此页面有22个外部Javascript脚本。试着把它们组合成一个。此页面有8个外部样式表。试着把它们组合成一个。

1. 利用浏览器缓存

一些可缓存资源(如这资源)具有较短的新鲜度寿命。指定未来至少一个星期的到期时间。

1. 添加过期标头

有44个静态组件(如这 1)没有一个遥远的过期日期。

这些和更多的信息，你可以从提供的链接获得tehm。

Answer 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.

Answer 3

1. 了解最佳实践基础，阅读：

- The legendary Yahoo article [Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html). Yahoo based his performance tool [YSlow](https://developer.yahoo.com/yslow/) on that article. 
- Article by Google Developers: [Web Performance Best Practices](https://developers.google.com/speed/docs/best-practices/rules_intro)

​

1. 还有其他几种诊断工具，如谷歌Chrome审计小组。Firefox和IE有类似的工具。
2. 使用一个工具将这些主要的良好实践自动化。有两个很好的工具：Grunt.js和Gulp.js。这里你有一个古尔普简介。
3. 我现在查看了您的站点，下面是一些YSlow推荐内容：

- This page has 19 external Javascript scripts. Try combining them into one (you can do this with Grunt.js or Gulp.js).
- This page has 8 external stylesheets. Try combining them into one (you can do this with Grunt.js or Gulp.js).
- Add Expires headers. There are 45 static components without a far-future expiration date (mainly css, js and images.you can do this in several [ways](https://developer.yahoo.com/performance/rules.html#expires)).
- Compress components with gzip. There are 21 plain text components that should be sent compressed. You can do this sending a [http request for gzip](https://developer.yahoo.com/performance/rules.html#gzip).

​

还有一些其他的，但这些是校长。

总之，主要的建议是缩小和连接:1个文件中的所有css文件，1个文件中的所有js文件，以及在1个css精灵中可以看到的所有图像。这最好用Gruntjs或Gulpjs来完成，但是如果您需要一种快速而肮脏的方法，您可以使用以下在线工具：

• Jscompress
• 速溶雪碧