1

診断する

最近見つけた : PageSpeed Insightsは、基本的にページ速度をテストし、スコアを吐き出し、ページが遅くなる原因を表示します。

URL を入力すると、ここに my : resultがあります。

ここに画像の説明を入力

問題

私は明らかに多くのスコアを持っていませんが、改善に取り組んでいます。

画像最適化の問題がたくさんありました。私は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
    }]
}

画像最小結果

幸いなことに、104 枚の画像がすべて縮小されました4.11MB。

ここに画像の説明を入力

再検査結果

しかし悲しいことに、ページ全体を新しい画像ディレクトリに再リンクした後dist/img/. PageSpeed Insightsでサイトを再度テストしましたが、同じ警告画像の最適化が表示されました。

ここに画像の説明を入力

この問題を修正/改善するにはどうすればよいですか? 設定optimizationLevel: 3が低すぎたからでしょうか？

アプローチ/アイデア/戦略/より良い解決策/提案はありますか?

どうもありがとう ！

4

3 に答える 3

0

imagemin を使用しても問題はありません。

問題は、css ベースのサイズ変更に関するものです。本来の img サイズが 150px で、css が 100px のボックス内に圧縮している場合、Google は img のサイズを 100px に変更することを求めています。

于 2016-04-03T16:34:08.143 に答える