在我的网站上滚动时减少延迟的方法？

Question

我目前正在我的网站上工作：

http://unturned.de/

我注意到滚动时有一些延迟。 我的猜测是，它可能是由于背景图像，所以我已经将格式从.png更改为.jpg

还有其他方法可以减少滞后吗？

Answer 1

第一步是剖析您的网站并确定究竟是什么滞后。您可以使用Chrome的开发者工具，但我更喜欢WebPageTest。您网站的结果如下：

• http://www.webpagetest.org/result/141108_N8_G8C/

查看这些结果，查看您可以控制的因素（取决于您的主机），调整它们，然后再次运行测试。 Chrome还有YSlow扩展程序。这些项目中的每一项都在线完整记录，因为这是Web开发的一个重要领域。

根据您的结果，我会尝试以下方法：

• 减少HTTP请求的数量：

  • 缩小并压缩javascript和CSS（查看YUICompressor和SASS / Compass）。这可能是您需要的，也可能不是。您仍然可以通过编写脚本来连接所有文件来限制请求数。请务必确保以正确的顺序执行此操作，否则您将获得意外的结果。

• optipng等程序可以优化网络图片。 TL; DR：图像中有很多额外的信息，你并不总是需要超级高分辨率。确保图像的大小适当（例如，不要将大图像缩小到128x128，使用imagemagick或其他东西来调整大小）。使用progressive JPEGs可以提供更快加载的外观，但图片仍然需要相同的时间才能下载。

• 设置缓存。缓存的主题可能会填充卷，并且它特定于您正在做的事情。这里有一些资源：

  • https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
  • https://developer.yahoo.com/performance/rules.html
  • Web front end caching best practices for site?

• 根据我的经验，将CDN用于静态资产通常不值得分发代码库的麻烦。有些东西，比如HTML背景视频，常见的javascript库（jQuery）和Web字体很容易集成，并且通常可以提供合理的好处。这主要是由于CDN实施的缓存，以及与您的网站（可能）比您的客户更近。

• 最后，配置您的后端代码。查看静态或缓存中可以提供内容的位置。最大限度地减少数据库命中，访问服务器等。这完全取决于您的网站如何工作。

希望这能让你开始！