2

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

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

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

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

该网站是http://phppointofsale.com

截图

  • 布朗是网络
  • 黄色是DOM
  • 蓝色是页面渲染
4

4 回答 4

5

I think the profiling tool you are using might have issues. In my PC (Windows 7, Chrome 34.0.1847.131) your website loaded in more or less 2 seconds. So i run some tests with various tools to see what is going on.

  1. Pingdom

    enter image description here

    As you can see the load time is 1.2 seconds and your site is 85% faster of all tested sites. The most load time is taken by plusone.js which is 247ms and jquery.bxslider.js?v=1.0 , jquery.fitvids.js?v=1.0 , jquery.slicknav.min.js?v=1.0 , functions.js?v=1.0 each of them take 227ms.

    Time spent per Content:

    -Script 39.44%
    -Image 37.75%
    -HTML 12.67%
    -Other 7.45%
    -CSS 2.69%

    Time spent per Domain

    -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 you can see the results by yourself.

  2. GTmetrix

    enter image description here

    This tool gives your pageload 3secs

    Here you can see the results by yourself.

  3. Loadimpact

    enter image description here

    This tool also gives(as the first one) a load time of 1.3secs.

    Here you can see the result by yourself

Now the are some technics that you can use to speed up your site. Based on the previous tools i would suggest specific for your site:

  1. Minify CSS

    Example:Your CSS could be minified to this and you have 25% size reduction.

  2. Specify image dimensions

    Example:<img class="feature-img scale" src="img/multiple_devices.png" alt=""> is missing width and height attributes

  3. Minify JavaScript.

    Example: Your JS could be minified to this and you have 44% size reduction.

  4. Make fewer HTTP requests

    This page has 22 external Javascript scripts. Try combining them into one. This page has 8 external stylesheets. Try combining them into one.

  5. Leverage browser caching

    Some cacheable resources (as this one) have a short freshness lifetime. Specify an expiration at least one week in the future.

  6. Add Expires headers

    There are 44 static components (as this one) without a far-future expiration date

These and many more information you can get tehm from the links provided.

于 2014-05-14T12:53:03.113 回答
3

从访问您的网站开始，我认为您的报告与对您的 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.
于 2014-05-13T18:00:34.053 回答
2

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

  2. 还有其他几种诊断工具，例如Google Chrome 审核面板。Firefox 和 IE 也有类似的工具。

  3. 使用工具自动化这些主要的良好实践。两个很好的工具是：Grunt.js和Gulp.js。在这里你有一个Gulp 的介绍。

  4. 我现在检查了你的网站，这些是一些 YSlow 建议：

    • 此页面有 19 个外部 Javascript 脚本。尝试将它们合二为一（您可以使用 Grunt.js 或 Gulp.js 来实现）。
    • 此页面有 8 个外部样式表。尝试将它们合二为一（您可以使用 Grunt.js 或 Gulp.js 来实现）。
    • 添加过期标题。有 45 个静态组件没有遥远的到期日期（主要是 css、js 和图像。你可以通过多种方式做到这一点）。
    • 使用 gzip 压缩组件。有 21 个纯文本组件应该被压缩发送。您可以发送一个gzip 的 http 请求。

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

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

于 2014-05-14T15:43:29.987 回答
1

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

  1. 使用 bxslider，尝试添加属性preloadImages

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

  2. 将您的<script></script>标签放在该<head>部分或结束正文标签之前</body>

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

于 2014-05-13T18:04:42.567 回答