固定站点加载时间

Fixing site load times?

本文关键字：时间 加载 站点      更新时间：2023-09-26

目前我的网站需要一千年才能加载，尽管它几乎什么都没有。我的假设是，这是因为页面上有相当多的图像和JavaScript。

是否有一种方法来测试导致长加载时间的原因?

在这里测试你的页面PageSpeed Insights - Google Developers，你会看到让你的网站更快的所有建议。

以下是一些提高网站速度的基本方法:

  1. Post-load content:首先不要加载所有的东西，比如JavaScript文件、图像、数据。制作一个用户应该首先看到的内容流，并按照这个顺序加载。这将减少用户感知到的等待时间，因为当其他内容加载时，他们将能够看到网站加载的部分。
  2. 预加载内容:受益于用户空闲时间。使用Ajax或图像缓存技巧在后台加载内容，这样用户就不会注意到页面仍在"工作"。由于文件已经预加载到浏览器的缓存中，当用户加载下一个页面或视图时，它看起来会非常快，因为数据已经存储在本地。(简而言之，发布和预加载内容背后的主要思想是首先向用户展示他们想要的内容，然后在他们需要看到这些内容之前在后台加载其他内容。使用JavaScript或jQuery Ajax加载内容并缓存它们。
    3. <
  3. 优化图像/strong>:
    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查找惩罚。

你可以在这里测试你的网页:

  1. pagespeedinsights - Google Developers
  2. YSlow
  3. Webpagetest
    4. <
  4. Pingdom工具/gh>
  5. GTmetrix
  6. iWebTool
  7. APM Cloud Monitor

你还可以使用:

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

1。优化您的图像

知道什么时候为你的图像使用合适的文件格式。更改为不同的文件格式可以显著减小图像的文件大小。

  • GIF -是理想的图像与很少的颜色，如徽标。
  • JPEG -非常适合具有大量颜色和细节的图像，如照片。
  • PNG -是您需要高质量透明图像的选择。

查看这些资源以了解更多关于优化图像的信息:

  • 为Web保存图像的综合指南
  • JPEG 101: JPEG速成课程指南
  • 网页设计师PNG图像格式指南
  • 8个优化图像的优秀工具

为了减小图像大小，我推荐使用TinyPNG

2。不要缩小图片

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

*如果你需要一个100x100px的图像，而你有一个700x700px的图像，使用图像编辑器，如Photoshop或这些基于web的图像编辑器之一来调整图像到所需的尺寸。这降低了图像的文件大小，从而有助于减少页面加载时间。

3。压缩和优化您的内容

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

你也可以优化和压缩你的JavaScript和CSS文件，通过组合它们和最小化源代码。

4。

将样式表引用移动到HTML文档的<head>中可以让页面感觉加载速度更快，因为这样可以让页面逐步呈现样式。另外，它是W3C的标准也没什么不好。

5。把脚本引用放在底部

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

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

6。将JavaScript和CSS放到外部文件

如果你的JavaScript和CSS直接在HTML文档中，每次HTML文档被请求时它们都会被下载。这样就没有利用浏览器缓存，反而增加了HTML文档的大小。

总是把你的CSS和JavaScript放在外部文件中;这是一个最佳实践，使您的网站更容易维护和更新。

7。最小化HTTP请求

当访问一个新的网页时，大部分的页面加载时间都花在下载该页面的组件上(例如图像、样式表和脚本)。

通过最小化网页需要的请求数量，它将加载得更快。为了减少HTTP对图像的请求，你可以使用CSS精灵来组合多个图像。

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

8。缓存你的网页

如果你使用一个动态生成网页的内容管理系统，你应该静态缓存你的网页和数据库查询，这样你可以减少你的服务器上的压力，并加快页面渲染时间。

9。减少301重定向

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

这里的其他答案很好地详细介绍了性能调试工具和改进加载时间的技巧，因此我不再重复它们。

你的主要问题是，你加载你的网站上的一切之前，你的主页显示给访问者。这是不必要的，而且是你的网站加载缓慢的主要原因。

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

实现小加载时间的最简单方法是将每个部分拆分为自己的页面，然后只加载在该页上显示的内容。像Javascript和CSS这样的资源通常缓存得很好，所以你通常不需要担心它们的加载时间会影响你的主页以外的任何东西。

或者，假设你想把整个网站放在一个页面上，你需要使用Javascript动态地将各种子部分添加到页面上，一旦你的主页所需的一切都完成加载并且进度条已经隐藏。是的，如果访问者快速点击一个子部分，他们将看到它的内容被加载，但如果他们只对你的Contact Me部分感兴趣，他们将能够更快地获得他们需要的信息，甚至不会注意到其他部分还没有完全加载。

那，不要使用巨大的背景图像。可以将较低分辨率的图像升级以填充屏幕，也可以提高JPEG压缩级别以减小文件大小。这是一个背景图片，不应该成为焦点——把高分辨率的图片留给你的作品集。:)

Chrome有一个控制台，您可以查看网站的加载时间和所有需要下载的东西。

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

看起来有两个背景图像，每个都需要超过20秒的加载时间。

自从我发表这篇文章以来，世界已经发生了很大的变化。Chrome现在提供了一个审计选项卡，使您能够模拟一系列设备和网络速度等，以及网络，性能和内存分析器。灯塔插件https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en也很好。

我有几个改善加载时间的建议:

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

这漫长的回复…但我觉得它提供了足够的细节，一些基本的方法来提高网站的性能。下面的答案也几乎适用于任何网站。下面提供的任何特定示例可能适用于当前版本的http://www.jj-triggs.com/

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

在Firefox上安装Firebug并打开您的网站。为您的站点启用Firebug (F12)。如果Firebug的网络面板尚未启用，请启用。

您的网站: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.

我相信修复这些提到的问题可能会减少你的(http://www.jj-triggs.com/)第一次加载时间到目前所需时间的10-30%。

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

使用jpeg的照片和渐变。使用png(或gif)线条艺术或文本。这与用于每种类型图像的压缩算法有关。

通常 80%的JPEG压缩率对于网络上的大多数图像来说是相当不错的，包括你所有的缩略图/图库照片。例如，这里的JPEG: http://www.jj-triggs.com/images/page4_img3.jpg是25k。25 k ! !这是巨大的，你的页面上有15个这样的页面!在80%的压缩率(图像大小为7k)下，我可以检测到一些压缩伪影，但我也是一名专业设计师。我正在找。即使在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压缩。 Adobe Fireworks提供了这个功能——如果你有一个大图像，其中部分清晰且对焦，但其余部分模糊或将被内容覆盖，你可以选择一个区域，你想要更高的JPEG压缩率(比如85%)，并将图像的其余部分降低到50%或其他什么。例如，下面是带有选择性JPEG选择的Cityscape 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请求。

这里有一些关于图像压缩和下载时间的文章:

  • http://www.noupe.com/design/everything-you-need-to-know-about-image-compression.html
  • http://www.uxbooth.com/articles/speed-up-your-website-with-better-image-optimization-in-photoshop/
  • http://www.uxbooth.com/articles/how-to-minimize-load-time-for-fast-user-experiences/

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

你可以试试这个网站和pingdom，在那里你可以检查你的网站的日常性能

你也可以在这里检查:测试网站

这个测试向您展示了图像对加载时间的巨大贡献。特别是背景图片，似乎没有优化和1.4 MB的重量

研究这个，减少你的请求数量，缩小你的图像，延迟加载，你应该开始减少你的加载时间

免责声明:我是参与上述免费工具的开发人员之一

本页的主要问题是大图bg_img1.jpg, bg_img2.jpg和bg_img3.jpg。它们的大小在0.91MB到1.45MB之间。

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

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

此分析器将告诉您应用程序的时间花在哪里，以及哪些函数占用了您的大部分时间。

由于JavaScript是单线程的，如果你在应用程序"init"上执行很多东西，那么你的页面将在短时间内无响应。你怎么知道是否有JS阻塞?嗯，主要的症状是当你滚动鼠标滚轮或点击一些东西时，在页面加载的一段时间内什么都没有发生。

在此期间，滚动事件和点击会发生什么?它们被放到事件队列中。每当其他JavaScript没有执行时，事件队列就会被调用。通常，这些问题的原因可以通过在JS调试器中单击"暂停"按钮并探索堆栈跟踪来追溯到根源。是的，执行速度就是这么慢!

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

问题:页面加载时无响应

通常有两种方法来解决这些问题:-首先(不是很好，但通常是合理的方式)，你可以采取昂贵的操作，可能在页面加载时运行在for循环中，并将它们扔到setTimeout(fn, 0)中。注意:0实际上是4ms或5ms，您的操作被抛出到事件队列中。这让应用程序的更多部分可以在需要执行大量操作之前加载。第二，构建你的应用程序，让这些操作只在需要的时候才运行，而不是把所有的东西都扔到"ready"或"load"页面。这在很大程度上是一种预防措施或重构。一般来说，要理清这类问题是很困难的。

问题:点击/交互缓慢(页面加载后)

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

问题:初始AJAX调用等待时间过长

解决这个问题的一种方法是使AJAX请求更快。您可以在页面加载时放置请求，但在页面准备好之前。然后，您的请求将与正在加载的其他页面资源并行。

问题:JS文件太多

现在人们每天都在使用模块系统(看看AMD和CommonJS)，但解决网络流量过大导致页面加载延迟的最基本方法是删除所有JS文件。现在，如果你有10万行JS，那么你就会遇到相反的问题(编译JS需要很长时间，你需要拆分你的文件)。一般来说，把所有东西捆绑在一起是一个快速解决方案。您还可以将网络流量划分到多个子域。这将允许您并行更多的下载。我相信浏览器现在每个域名最多只能下载6次。CDN也会有所帮助。

Firefox/Chrome/IE -按F12，打开开发者面板，在那里你应该可以找到一个网络面板。

或者试试:http://tools.pingdom.com/fpt/

在这种情况下，我会使用Chrome和Dev工具栏(网络选项卡)来观察什么是重元素。

虽然这是一个老问题，但我想抛出一个更优秀的免费工具，可用于发现网站的性能问题。

Compuware的(dnyaTrace) AJAX免费版工具已经帮助我解决了一些事情，我错过了几个我的网站在过去…我记得在使用该工具时发现了一个缓存问题(与htaccess相关)，以及其他一些很棒的技巧。

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

相关文章：