修复网站加载时间？

时间：2012-12-21 10:28:51

标签： javascript jquery html css

目前我的网站需要几千年才能加载，即使它几乎没有任何内容。我的假设是，因为页面上有很多图像和JavaScript。

有没有办法测试导致长加载时间的原因？

17 个答案:

答案 0 :(得分：50)

在此处PageSpeed Insights - Google Developers测试您的网页，您将看到有关提高网站速度的所有建议。

答案 1 :(得分：28)

以下是一些可以提高网站速度的基本内容：

  1. 后期加载内容：首先不要加载JavaScript文件，图片，数据等所有内容。制作用户应首先看到的内容并按顺序加载的流程。这将减少用户感知的等待时间，因为他们将能够在其他东西加载时查看网站的加载部分。
  2. 预加载内容：受益于用户的空闲时间。使用Ajax或图像缓存技巧在背景中加载内容，因此用户不会注意到页面仍在“正常工作”。因为文件已经预先加载到浏览器的缓存中，所以当用户加载下一页或视图时，它看起来会非常快，因为数据已经存储在本地。 （简而言之，post和pre-loaded内容背后的主要思想是首先向用户显示他们想要的内容，然后在他们需要查看内容之前在后台加载其他内容。使用JavaScript或jQuery Ajax加载你的内容和缓存它们。
  3. 优化图片：
    1. 将图像质量降低到人眼无法辨认的程度。您可以牺牲一点图像质量，大大减少文件大小，从而提高下载/加载速度。
    2. 不要使用浏览器缩小图像：不要发送大图像，并使用CSS宽度和高度让浏览器缩小到更小的尺寸。即使您确实想要使用像完全拉伸的背景图像那样的缩放，也可以手动调整图像的大小，使其大小正确。
    3. 使用CSS替换图像。
    4. 使用CSS精灵：将小图像合并到一个图像上，并使用CSS显示正确的部分。
    5. 使图像可缓存。
  4. 将CSS放在首位：将CSS保持在最顶层会让您觉得网页加载速度更快。随着CSS的应用，内容的一部分被加载。
  5. 将JavaScript保留在底部：JavaScript用于操作DOM元素，因此首先加载DOM元素，以便首先呈现页面，然后加载脚本。 JavaScript还会阻止并行下载。
  6. 缩小JavaScript和CSS ：缩小CSS和JavaScript可以将其大小缩小到原始副本的50％到30％。
  7. 使用外部CSS和JavaScript ：.css和.js文件是可缓存的，因此请使用外部CSS和JavaScript文件。
  8. 跨域拆分组件：将您的组件拆分为两个或三个域，如example.com到com1.example.com和com2.example.com。这允许您最大化并行下载。不要保留超过两到四个域，否则会给你DNS查找惩罚。

答案 2 :(得分：24)

以下是您可以测试网页的列表：

  1. PageSpeed Insights - Google Developers
  2. YSlow
  3. Webpagetest
  4. Pingdom Tools
  5. GTmetrix
  6. iWebTool
  7. APM Cloud Monitor

    8. 另外，为了加快您的页面，您可以使用：

    1. Amazon CloudFront
    2. CloudFlare - 有免费计划


      3. <强> 1。优化图像

      知道何时为图像使用适当的文件格式。更改为不同的文件格式可以大大减少图像的文件大小。

      • GIF - 适用于徽标颜色较少的图片。
      • JPEG - 适用于包含大量颜色和照片等细节的图像。
      • PNG - 是您需要高质量透明图像的选择。

      查看这些资源，了解有关优化图片的更多信息：

      为了缩小图片尺寸，我建议TinyPNG

      <强> 2。不要缩小图像

      避免使用比您需要的更大的图片，因为您可以在HTML中设置width元素的height和<img>属性。

      *如果您需要100x100px图像且图像尺寸为700x700像素，请使用Photoshop等图像编辑器或其中一个基于Web的图像编辑器将图像调整为所需尺寸。这会降低图像的文件大小，从而有助于减少页面加载时间。

      第3。压缩和优化您的内容

      压缩网站内容的任务会对减少加载时间产生巨大影响。使用HTTP压缩时，所有网页数据都在一个较小的文件中发送，而不是一个包含许多不同文件的请求。有关更多信息，请参阅HTTP Compression上的这篇维基百科文章。

      您还可以通过组合它们并缩小源代码来优化和压缩JavaScript和CSS文件。

      <强> 4。将样式表引用放在顶部

      将样式表引用移动到HTML文档的<head>可以帮助您的页面感觉加载速度更快，因为这样可以让您的页面逐步呈现样式。此外，W3C标准并没有受到伤害。

      <强> 5。将脚本引用放在底部

      浏览器每个主机名只能同时下载两个组件。如果您将脚本添加到顶部，它将在页面的初始加载时阻止其下面的任何其他内容。这使得感觉页面加载速度较慢。

      要避免这种情况，请将脚本引用放在尽可能靠HTML文档的位置，最好是在结束<body>标记之前。

      <强> 6。将JavaScript和CSS放在外部文件中

      如果您的JavaScript和CSS直接在HTML文档中，则每次请求HTML文档时都会下载它们。这样就不会利用浏览器缓存并增加HTML文档的大小。

      始终将CSS和JavaScript放在外部文件中;这是一种最佳做法，使您的网站更易于维护和更新。

      <强> 7。最小化HTTP请求

      访问新网页时，大部分页面加载时间都花在下载该页面的组件上（例如图片，样式表和脚本）。

      通过最小化网页需要进行的请求数量，它将加载更快。要减少对图像的HTTP请求，您可以做的一件事是使用CSS sprites来组合多个图像。

      如果您有多个样式表和JavaScript库，请考虑将它们组合起来以减少HTTP请求的数量。

      <强> 8。缓存您的网页

      如果您使用动态生成网页的content management system，则应静态缓存网页和数据库查询，这样可以减轻服务器的压力并加快页面渲染时间。

      <强> 9。减少301重定向

      每次使用301重定向时，它都会强制浏览器使用新的URL，这会增加页面加载时间。如果可能，请避免使用301重定向。

答案 3 :(得分：8)

这里的其他答案很好地详细说明了性能调试工具和改进加载时间的技巧，所以我不再重复了。

您的主要问题是，在向访问者显示主页之前，您绝对会在网站上加载所有内容。这是不必要的，并且是导致您的网站加载缓慢的主要原因。

我可以理解你想要尽可能多地预加载，这样当访问者浏览你的网站时，一切似乎都会立即加载。但是，您所做的只是将每个部分的小加载时间转移到一个巨大的前期加载时间。如果访问者只能浏览您网站的某个区域，他们仍然会支付整个网站的加载时间，而不仅仅是他们访问的部分。

实现小加载时间的最简单方法是将每个部分拆分为自己的页面，然后仅加载您在该页面上显示的内容。 Javascript和CSS等资源通常可以很好地缓存，因此您通常不必担心其加载时间会影响除主页之外的任何内容。

或者，假设您希望将整个网站保留在一个页面上，您需要使用Javascript动态添加各个子部分，一旦您的主页所需的所有内容都已加载并且进度条已被隐藏。是的，如果访问者快速点击子部分，他们将看到其内容被加载，但如果他们只对您的“与我联系”部分感兴趣，他们将能够更快地获得他们需要的信息。甚至没有注意到其他部分还没有完全装满。

那，并且不要使用巨大的背景图像。可以升级较低分辨率的图像以填充屏幕，并提高JPEG压缩级别以减小文件大小。这是一个背景图片，不应该成为焦点 - 为您的投资组合留下高分辨率图像。 ：）

答案 4 :(得分：7)

将FireBug插件安装到FireFox中，然后在FireBug中打开NET选项卡的情况下加载您的站点。您可以查看每个资源加载所需的时间。

看起来有两个背景图像每个需要超过20秒才能加载。

答案 5 :(得分：7)

Chrome已a console，您可以在其中查看网站的加载时间以及需要下载的所有内容。

答案 6 :(得分：5)

我几乎没有改善加载时间的建议：

  1. 您正在使用三张背景图片，而只显示一张。删除其他两个或稍后加载它们。
  2. 将PNG图像转换为JPEG，看看是否可以节省大小。
  3. 从cdn存储库加载标准JavaScript文件，而不是从服务器加载它们。很可能在其缓存中找到文件。
  4. 连接后缩小JavaScript文件，如果还没有这样做的话。

答案 7 :(得分：5)

所以：是的，你真的需要修复你的网站。人们不会等到加载网站，特别是个人/专业网站。我在您的网站上看到的最大的事情是几乎不存在图像压缩/优化。以下是一些指导原则：

将JPEG用于照片和渐变。将PNG（或GIF）用于艺术线条或文字。这与用于每种类型图像的压缩算法有关。

通常 80％的JPEG压缩率对于网络上的大多数图片都非常有用，包括所有缩略图/图库照片。例如，这里的JPEG：http://www.jj-triggs.com/images/page4_img3.jpg是25k。 25K！这是巨大的，你在页面上有15个！在80％的压缩率（7k的图像大小）下，我可以检测到一些compression artifacts，但我也是一名专业设计师＆amp;我正在寻找它。即使在85％时，图像尺寸也降至约8k。

同样你的背景图片。 bg_img1.jpg的时间约为900k; bg_img2.jpg是1.5 MB。这太疯狂了！特别是因为城市景观已经部分模糊 - 没有任何细节可以保证完全没有JPEG压缩。我将bg_img2.jpg上的压缩率降低到了60％，得到的文件大小为<200k，并且几乎没有可检测到的质量差异：https://d3vv6lp55qjaqc.cloudfront.net/items/1y3V2B2r0S1W0T1i081n/cityscape-compressed.jpg?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&v=3cf18008。

有时，当图像是内容/网站的焦点时，它可以变得更大并且压缩程度更低。但是你背景和画廊中的这些图像并不重要：它们是背景图像。他们不打算学习。画廊图像同上;他们只是让用户知道他们在下次点击时会得到什么。

使用选择性JPEG压缩。 Adob​​e Fireworks提供此功能 - 如果您有大图像，其中部分图像清晰且清晰，但其余部分模糊或将被内容覆盖，您可以选择您想要更高JPEG压缩率（例如85％）的区域，并将图像的其余部分降低到50％或其他任何值。例如，这里是具有选择性JPEG选择的城市景观https://d3vv6lp55qjaqc.cloudfront.net/items/2V1I1o0B1H0v2O141w1R/cityscape-compressed-selective.jpg?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&v=375e11ed。对焦部分为75％;其余的是50％，打开平滑。

不要将图形用于文本。在TypeKit，Google Webfonts的这一天以及通过CSS进行合理的排版控制时，几乎不需要。

减少需要传输的文件数量。除下载时间外，每个图像，JavaScript文件，CSS文件等都需要自己的HTTP请求。

以下是一些关于图像压缩和下载时间的文章：

答案 8 :(得分：5)

这是一个很长的回复...但我觉得它提供了一些基本方法的足够细节，以提高网站的性能。 以下答案也适用于几乎所有网站。 下面提供的任何具体示例可能适用于http://www.jj-triggs.com/

的当前版本

在下面的几点中，我指的是在Firefox中使用Net Panel of Firebug插件但其他浏览器 也有类似的工具，几乎和我提到的方法相同。

在Firefox上安装Firebug并打开您的网站。 为您的站点启用Firebug（F12）。 如果Firebug的Net面板尚未启用，请启用它。

您的网站：http://www.jj-triggs.com/      - 我的系统需要5-6秒重复访问（对于这个答案，我没有提到改进的方法）      - 但第一次访问大约需要60秒。 （以下几点着重于如何改进）       下面提到的大多数要点都会改善您的网站第一次加载（或重新加载）

在已经加载页面后，为了测试新负载，您可以使用Ctrl + F5，Ctrl + R，Ctrl + Shift + R（取决于浏览器）。 在页面加载时监控Firebug的Net Panel。

网站需要多长时间取决于：

- The speed of the site host server (seems OK, nothing much to do for now)

- Visitor's connection speed (cannot do anything for it)

- Everything else (where you need to fix many things).
  The important approaches to resolve them are listed below:
    - Serve the user files with less size but same content:
        - Approach:
            Enable gzip on files which contain text contents (*.js, *.css, *.html etc) (currently your site does not use gzip)
        - How to identify:
            In Net panel, expand the HTTP request details for a file, in the Headers tab of the expanded details, Content-Encoding field should show the value gzip.
        - Solution:
            It might need you to modify .htaccess file (or some other approach based on the server)
            Search on Google or StackOverflow to see how to enable it.

        - Approach:
            Use minified JS and CSS files
        - How to identify:
            In Net panel, expand the HTTP request details for a JS/CSS file, in the Response tab of the expanded details, the code should be a minified version (no whitespace characters) of the file.
        - Solution:
            Use either the minified JS/CSS files as provided by the library.
            Or you can minify them yourself by using tools like "JSMin" or "YUI (CSS and JS) Compressor"

    - Approach:
        - Serve the user optimum images, i.e., less size with good enough quality
    - How to identify:
        - In Net Panel, go to Images tab > Sort by size
        - Generally the size of the images should be ... 1kb to 30kb for simple icons and logos and 20kb to 250kb for photos and large backgrounds.
    - Solution:
        - Compress the large images with softwares like GIMP (free) or Photoshop.

    - Approach:
        - Load the files from a CDN if possible
        - eg: Load jQuery, jQuery UI etc from popular but still free CDN
        - Advantage even for first visit: If the user has visited any other site which refers to the same path, it would be fetched from the cache itself
    - How to identify:
        - Check the Net panel's "Domain" column for popular libraries like jQuery, jQuery UI etc.
          They should be getting loaded from a popular CDN such as Google.
    - Solution:
        - Include JS and CSS from (Google) CDN if available.

    - Approach:
        - Load CSS before JS
        - It may not necessarily help much with faster loading completion,
          but it usually gives a faster feeling of load because your CSS gets applied as soon as possible.
    - How to identify:
        - Check the Timeline column in Net panel. Usually CSS files should be the getting loaded before JS.
    - Solution:
        - Move the <script> tags towards the bottom of the page.

    - Approach:
        - Wherever possible, load third-party components like Google Maps dynamically after the page load has completed
    - How to identify:
        - Check the Timeline column in Net panel. The 3rd-party components should usually begin loading after almost all the other code for the site has loaded.
    - Solution:
        - The solution would depend on the third-party component and might be a bit tricky.
          Generally, loading the 3rd-party JavaScript after a small delay (using window.setTimeout and code to dynamically add script tags) would provide you better performance compared to loading the 3rd-party JS using plain HTML.

我认为修复这些提到的问题可能会使您的首次加载时间减少到目前所用时间的10-30％。

答案 9 :(得分：4)

对Firefox使用YSlow plugin。它将为您提供各种性能桶的详细分析。

答案 10 :(得分：4)

您可以尝试使用site和pingdom来查看网站的每日效果

答案 11 :(得分：3)

您也可以在这里查看： Test site

此测试显示图像是您加载时间的重要贡献者。特别是背景图像，似乎没有优化，重量为1.4 MB

研究一下，减少请求数量，缩小图像尺寸，延迟加载，你应该开始减少加载时间

免责声明：我是上述免费工具中开发的开发者之一

答案 12 :(得分：3)

这个页面的主要问题是大图像bg_img1.jpg，bg_img2.jpg和bg_img3.jpg。它们的大小介于0.91MB和1.45MB之间。

答案 13 :(得分：1)

每个人都提到与网络流量相关的问题，但页面加载也可能是由于JavaScript造成的。以下是我在这个问题上采取的一些技巧......

Chrome开发者工具在浏览器中内置了一个分析器。您可以通过打开开发人员工具，单击配置文件，单击开始并执行您喜欢的任何任务来启动它。

此分析器将告诉您应用程序的使用时间以及占用大部分时间的功能。

由于JavaScript是单线程的，如果您在应用程序“init”上执行大量操作，那么您的页面将在短时间内无响应。你怎么知道是否有一些JS被阻止？好吧，主要的症状是当你滚动你的鼠标滚轮或点击一些事情在页面加载时没有发生任何明显的时间。

在此期间您的滚动事件和点击会发生什么变化？好吧，他们被放置在事件队列中。每当其他JavaScript未执行时，就会调用事件队列。通常可以通过单击JS调试器中的“暂停”按钮并探索堆栈跟踪来查找这些问题的原因...是的，执行速度有多慢！

以下是一些问题/解决方案

问题：页面加载时无响应页面

通常有两种方法可以解决这些问题： - 首先（不太好，但通常是合理的方式）你可以采取昂贵的操作，可以在页面加载的for循环中运行并将它们放在setTimeout(fn, 0)中。注意：0实际上是4ms或5ms，您的操作将被抛到事件队列中。这样可以在需要进行大量繁重操作之前加载应用程序的更多部分。 - 其次，构建您的应用程序，使这些操作仅在需要时运行，而不是将所有内容都放在“准备好”或“加载”页面中。这是一种预防措施或重构。通常很难解决这些问题。

问题：单击/交互很慢（页面加载后）

您通常可以通过更好地完成委派活动来解决此问题。事件冒泡是每个人都应该在JS中知道的事情。简而言之，想一想1对象上的click事件实际上是如何在包含该对象的每个父对象上发生的单击。委托使用该事实允许您为许多类似/相同的DOM元素创建1个处理程序。阅读jQuery的on方法的文档，并真正关注如何使用filter参数，以及e.currentTarget vs e.target vs this。

问题：初始AJAX调用等待时间太长

解决此问题的一种方法是尽快制定AJAX请求。您可以在页面加载之前但在页面准备好之前放置请求。然后，您的请求将与正在加载的其余页面资产并行化。

问题：JS文件太多

人们现在使用模块系统（查看AMD和CommonJS），但是解决网络流量过多而延迟页面加载的最基本方法是捕获所有JS文件。现在，如果你有100k行JS，那么你将遇到相反的问题（编译JS需要太长时间，你需要拆分你的文件）。通常，将所有内容捆绑在一起是一种快速解决方案。您还可以将网络流量划分为多个子域。这将允许您并行化更多下载。我相信浏览器现在每个域的下载次数为6次。 CDN也有助于此。

答案 14 :(得分：1)

Firefox / Chrome / IE - 按F12，打开一个开发人员面板，您可以在其中找到网络面板。

或尝试：http://tools.pingdom.com/fpt/

答案 15 :(得分：1)

在这种情况下，我会使用Chrome和开发工具栏（网络标签）来观看重要元素。

答案 16 :(得分：1)

虽然这是一个较旧的问题，但我想抛出一个优秀的免费工具，可用于查找网站的性能问题。

Compuware（dnyaTrace）AJAX免费版工具帮助我解决了过去我在几个网站上遗漏的一些问题......我记得我发现使用该工具发现的缓存问题（htaccess相关）等等很棒的提示。

无论如何，目前可以在这里下载： http://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html

相关问题
最新问题