问题
Diagnose
I recently came across : PageSpeed Insights, it basically test your page speed, spit out a score, and display what cause your page to slow-down.
I enter my url and here is my : result.
Issues
I clearly don't have a lot score, but I'm working on improving them.
I got a lot of image optimization problems. I've tried 2 things. __
1.Use ImageOptim Software
I've tried using ImageOptim Mac Software to optimize all my images in my img/
folder.
2.Use grunt imagemin plug-in
On top of that I , I use a build tool to re-compress all my images
in my img/
folder, and store the compress one in dist/img/
folder.
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 Result
Luckily, I got all my 104 images reduce down 4.11MB
.
Re-Test Result
But sadly, after re-linking my entire page to new images directory dist/img/
. I test my site again with PageSpeed Insights, I still got the same warning image optimization.
How can I can fix/improve this problem ?
Is it because I set the optimizationLevel: 3
too low ?
Any approach / idea / strategy / better solution / suggestion ?
Thanks a lot !
回答1:
I would recommend optimizing your images beforehand using one of these tools:
Windows
- FileOptimizer It uses multiple tools to make your images as small as possible.
JPEG (All Platforms)
- MozJPEG (by Mozilla)
PNG (All Platforms)
- PNGQuant, especially the web fronted for it: TinyPNG (careful lossy!)
回答2:
You could consider using a PageSpeed server module. Those are able to automatically apply image optimization and thereby satisfy PageSpeed Insights recommendations. See https://developers.google.com/speed/pagespeed/module and https://developers.google.com/speed/pagespeed/module/faq#other-servers for availability.
回答3:
There is nothing wrong in using imagemin.
The problem is about css based resizing. If the natual img size is 150px and the css is squeezing it inside a 100px box, google wants you to resize the img to 100px.
来源:https://stackoverflow.com/questions/30332689/how-can-i-optimize-all-my-images