logo标签列表

减少加载时间，或让用户感觉加载时间更短

htmlcssjoomlauser-experience
4
我一直在做一个网站，我们设法将页面加载的总内容从13.7MiB减少到2.4，但是页面加载仍然需要很长时间。这是一个joomla网站（糟糕），它有很多冗余的DOM元素（首页有2000多个），每个页面加载会进行60+个HttpRequest，包括所有的css，js和图片请求。与drupal不同，joomla不会即时合并它们，必须将它们分开保留，否则joomla组件将会出现问题。
我该如何改善加载时间？ 我已经做过以下操作：
- 为有大型图像背景的dom元素添加颜色，以便先加载颜色，再加载图像 - 将非常大的图像缩小到更小的文件大小 - 将DOM元素减少到约2000，而不是约5000 - 在页面开头加载CSS，而在页面底部加载JavaScript
- 这并不完全可能，因为joomla会注入自己的JavaScript和CSS，并且总是在标头处这样做。 - 压缩了大部分的javascript - 在服务器上设置缓存和gzip 未缓存的大小为2.4MB，缓存后为约300KB，但即使有这么多的dom元素，页面仍需要很长时间才能呈现。还能做些什么来改善加载时间？
4
一页需要2.4兆字节？天哪。 - Mike Daniels
1
我们为一家设计公司工作，他们喜欢图形。大的、巨大的图形。在某个时候，背景是一个 4 MB 的 JPEG 图像，没有压缩，从 PSD 导出。它很糟糕。 - Malfist
1
1 MB 是为 typeface.js 使用的两种不同字体（粗体和非粗体版本）所需的空间。 - Malfist
3
看起来问题在于平面设计师缺乏理解。除了从页面中删除大量内容之外，实际上没有技术解决方案可以不解决根本原因而解决您的问题。您需要与强制使用这些巨大未压缩图形的人进行讨论，并解释它如何对用户体验产生负面影响，并将导致公司销售额的损失。 - Mike Daniels
能否提供该网站的链接？ - Chetan S
显示剩余3条评论
6个回答
3
是的，我知道他已经谈论了大部分内容，但对于任何偶然发现这个问题的人来说，该网站提供了有关优化的良好概述。 - Hugh
2

您是否在您的Web服务器上启用了HTTP压缩（gzip）？这将使所有基于文本的文件的传输大小减少60-90％。这样，您的页面加载速度将提高6-10倍。

搜索StackOverflow或Google以了解如何启用它。（它因服务器软件而异：Apache，IIS等）。

2
听起来你已经很好地解决了实际问题：那些巨大的图片。你可能可以通过缓存、压缩等方法挤出更多的效率，但必须有一种方法来减小图片的大小。我曾与一支世界上最挑剔的设计师团队合作过，他们从未要求无损的JPEG。你是指从Photoshop中裁剪出来并以完整质量（10）保存的图像吗？如果是这样的话，真正的解决方案（我知道你可能无法做到这一点）就是要进行一次艰难的对话，向设计公司解释：“你不是你的用户。”如果网站的目的只是为了让其他视觉设计师对你的图像保真度印象深刻，也许这没关系。如果网站的目的是成为一个展示你公司工作的作品集，他们需要重新评估他们的受众是谁以及受众想要什么。我猜想，这并不是两分钟载入时间。
1

所有的DOM元素都是必要的吗？如果是，是否可以在页面加载时隐藏它们？基本上，您需要呈现与页面一起重要的DOM元素，然后当文档加载完成后，您可以根据需要显示其余的元素。

$('.hidden').removeClass('hidden')

这是一个好建议，但取决于它的实现方式，可能会有显著的重绘开销。 - Chetan S
0

我会说你无能为力了。你已经接近绝对极限了。

一旦你到达一个关键点，你就必须比较进一步压缩网站所需投入的努力与抛弃最耗带宽组件所需的努力。例如，你可能会花费20个小时将你的网站进一步压缩1%。你也可以花费40个小时抛弃Joomla主题并重新开始，节省50%的成本。（虽然可能不是这样）

我希望你能找到一个简单的答案。我感同身受，因为我正在努力完成一个Drupal项目，而这个项目已经被一个设计师屠杀了，他已经多年没有实现自己的代码，并且已经在靠近吞拿鱼沙拉三明治的地方的小隔间里变得僵化了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接