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

时间:2014-11-08 14:15:42

标签: web

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

http://unturned.de/

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

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

1 个答案:

答案 0 :(得分:1)

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

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

根据您的结果,我会尝试以下方法:

  • 减少HTTP请求的数量:

    • 缩小并压缩javascript和CSS(查看YUICompressorSASS / Compass)。这可能是您需要的,也可能不是。您仍然可以通过编写脚本来连接所有文件来限制请求数。请务必确保以正确的顺序执行此操作,否则您将获得意外的结果。
  • optipng等程序可以优化网络图片。 TL; DR:图像中有很多额外的信息,你并不总是需要超级高分辨率。确保图像的大小适当(例如,不要将大图像缩小到128x128,使用imagemagick或其他东西来调整大小)。使用progressive JPEGs可以提供更快加载的外观,但图片仍然需要相同的时间才能下载。

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

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

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

希望这能让你开始!