Question

我正在使用新文物，对于我的网站，主页平均需要8秒才能完全加载。网络请求速度很快，但是dom和页面呈现的速度很慢。我有谷歌+，脸书，推特分享按钮和bxslider。

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

如果有人能给我提示加快速度;那会很棒。

我试图找出如何使用谷歌浏览器分析工具，但它说80％闲置。

网站为http://phppointofsale.com

Screnshot

布朗是网络
黄色是DOM
蓝色是页面呈现

Answer 1

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

Pingdom

如您所见，加载时间为1.2秒，您的网站比所有测试网站快85％。 plusone.js的加载时间最长为247毫秒，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毫秒。每个内容花费的时间：

-Script 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％
- 另外23.95％

Here你可以自己看到结果。
GTmetrix

此工具可为您的页面加载3秒（{3}}您可以自己看结果。
Here

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

Loadimpact你可以自己看到结果

现在您可以使用一些技术来加速您的网站。基于以前的工具，我建议您的网站具体：

缩小CSS
例子：Here CSS可缩小为Your，缩小25％。
指定图像尺寸

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

例如：你的JS可以缩小到this，你的尺寸缩小了44％。
减少HTTP请求数量

此页面有22个外部Javascript脚本。尝试将它们合二为一。此页面有8个外部样式表。尝试将它们合并为一个。
利用浏览器缓存
一些可缓存的资源（如this一个）具有较短的新鲜度生命周期。指定将来至少一周的到期日。
添加过期标题

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

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

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

了解最佳实践基础知识，阅读：
- 传奇的雅虎文章Best Practices for Speeding Up Your Web Site。雅虎基于该文章的表现工具YSlow。
- Google Developers撰写的文章：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和images。您可以在多个ways中执行此操作。）
- 使用gzip压缩组件。应该压缩发送21个纯文本组件。您可以发送http request for gzip。

还有一些其他人，但那些是校长。

总之，主要的推荐是缩小和加入：1个文件中的所有css文件，1个文件中的所有js文件，以及1 css sprite中的所有图像。使用Gruntjs或Gulpjs可以做得更好，但如果您需要快速而肮脏的方式，可以使用以下在线工具：

Answer 4

作为@ McCheesi的答案+ 1

使用bxslider，尝试添加属性preloadImages

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

将<script></script>标记放在<head>部分或正好在结束正文标记</body>

前端最小化加载时间

4 个答案: