【问题标题】:Web page loads very slow [closed]网页加载速度很慢[关闭]
【发布时间】:2012-09-18 04:21:27
【问题描述】:

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

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

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

【问题讨论】:

标签: php html optimization


【解决方案1】:

浏览器对每个域允许的同时连接数有内置限制(现代浏览器默认为 8 个)。加快这一速度的一种方法是使用 CDN - 内容交付网络 - 从不同的域加载图像。

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

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

您可以结合使用这两种技术以获得更好的性能。

【讨论】:

    【解决方案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/

    干杯!

    【讨论】:

      【解决方案3】:

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

      【讨论】:

      • 虽然这对 UI 元素(CSS sprites)有好处,但 THIS PAGE 上图像的大小和数量相结合会导致页面在下载整个合成图像之前无法使用。
      • @Diodeus:是的,但我敢打赌,如果 JPEG 压缩率非常高,它可能小到 300KB。这会使图像变得相当模糊,但它们需要看起来有多好?我加载了页面,这些图片不值 13MB。
      【解决方案4】:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2018-05-22
        • 2015-05-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-08-08
        • 1970-01-01
        相关资源
        最近更新 更多