网页加载速度很慢

Question

我的网页加载速度很慢：https://www.mlh-shop.com/press/233

该滑块中有185个小图像。如何优化它以加快加载速度？

我可以只加载几张图片，显示页面，然后在后台加载其他图片吗？

Answer 1

浏览器内置限制PER DOMAIN允许的同时连接数（现代浏览器默认为8）。提高速度的一种方法是使用CDN - 内容传送网络 - 从不同的域加载图像。

另一个问题是如何尽可能快地使页面可用。为此，您使用“延迟加载”，其中只有最少数量的图像加载页面HTML，其余图像使用JavaScript动态加载。您发送图像列表，然后在页面加载完成后开始提取它们。

这并没有真正“加快”加载时间，而是允许在后台加载图像时立即使用页面。

您可以将这两种技术结合起来以获得更好的性能。

Answer 2

我通过Google Page Speed Analisys运行了您的网站，以下是他们的建议：

1. 图像在HTML或CSS中调整大小。提供缩放图像可以节省 3.4MiB（减少29％）。
2. 优化（压缩文件大小）图像可能会减少 它们的尺寸为2.6MiB（减少22％）。
3. 可缓存资源的新鲜生命周期较短。为您的资源指定将来至少一周的到期时间......

对于＃3，您可以简单地使用.htaccess规则来设置下载资产的到期日期。这是一个关于这方面的前沿指导：http://css-tricks.com/snippets/htaccess/set-expires/

干杯！

Answer 3

您可以做的一件事是将滑块中的所有图像预处理为一个大型静态图像。

Answer 4

你应该使用延迟加载。不要使用PHP输出所有img元素，而是稍后在客户端使用JavaScript创建它们。在您的情况下，这没有真正的可用性损失，因为您的滑块已经使用JavaScript，并且如果用户已禁用JS，则无论如何都无法工作。