1

诊断

我最近遇到了：PageSpeed Insights，它基本上测试你的页面速度，吐出一个分数，并显示导致你的页面变慢的原因。

我输入我的网址，这是我的 :结果。

在此处输入图像描述

问题

我显然没有很多分数，但我正在努力改进它们。

我遇到了很多图像优化问题。我已经尝试了 2 件事。__

1.使用 ImageOptim 软件

我尝试使用ImageOptim Mac 软件优化img/文件夹中的所有图像。

2.使用grunt imagemin插件

最重要的是，我使用构建工具重新压缩img/文件夹中的所有图像，并将压缩后的图像存储在dist/img/文件夹中。

imagemin: {

    dynamic: {

        options: {
            optimizationLevel: 3,
            svgoPlugins: [{ removeViewBox: false }],
            use: [mozjpeg()]
        },

        files: [{
        expand: true,                         // Enable dynamic expansion
        cwd: 'img',                           // Src matches are relative to this path
        src: ['**/**/**/*.{png,jpg,gif,ico}'],         // Actual patterns to match
        dest: 'dist/img'                      // Destination path prefix
    }]
}

Imagemin 结果

幸运的是，我把所有 104 张图片都缩小了4.11MB。

在此处输入图像描述

重新测试结果

但可悲的是，在将我的整个页面重新链接到新图像目录之后dist/img/。我再次使用PageSpeed Insights测试我的网站，我仍然得到相同的警告图像优化。

在此处输入图像描述

我怎样才能解决/改善这个问题？是不是因为我设置的optimizationLevel: 3太低了？

任何方法/想法/策略/更好的解决方案/建议？

非常感谢 ！

4

3 回答 3

1

我建议您使用以下工具之一预先优化您的图像：

视窗

  • FileOptimizer它使用多种工具使您的图像尽可能小。

JPEG（所有平台）

PNG（所有平台）

于 2015-05-20T13:23:45.743 回答
1

您可以考虑使用 PageSpeed 服务器模块。它们能够自动应用图像优化，从而满足 PageSpeed Insights 的建议。有关可用性，请参阅https://developers.google.com/speed/pagespeed/module和https://developers.google.com/speed/pagespeed/module/faq#other-servers。

于 2015-05-27T07:28:29.770 回答
0

使用 imagemin 没有任何问题。

问题是关于基于 css 的调整大小。如果自然 img 大小为 150px 并且 css 将其挤压在 100px 的框内，则谷歌希望您将 img 的大小调整为 100px。

于 2016-04-03T16:34:08.143 回答