search

mozilla / blurts-server

Mozilla Monitor arms you with tools to keep your personal information safe. Find out what hackers already know about you and learn how to stay a step ahead of them.
https://monitor.mozilla.org
Mozilla Public License 2.0
724 stars 204 forks source link

Make sure image assets are minified for production #115

Closed pdehaan closed 6 years ago

pdehaan commented 6 years ago

Stuff like JS/CSS/images/etc.

I noticed that the SVGs weren't minimized. Here's a little svgo command we can hack into a package.json script command to make sure the SVGs are production-ready:

svgo public/img/*.svg --indent 2 --pretty

Before:

$ ls -lh public/img/*.svg | awk '{print $5"    "$9}'

5.3K    public/img/Tip1.svg
3.8K    public/img/Tip2.svg
4.2K    public/img/Tip3.svg
5.2K    public/img/Tip4.svg
4.2K    public/img/Tip5.svg

After:

$ ls -lh public/img/*.svg | awk '{print $5"    "$9}'

3.2K    public/img/Tip1.svg
2.7K    public/img/Tip2.svg
3.0K    public/img/Tip3.svg
3.2K    public/img/Tip4.svg
2.6K    public/img/Tip5.svg

So by running through SVGO, we get a savings of roughly 30-40% for each SVG.

pdehaan commented 6 years ago

Similarly, here's a command for minifying the PNG files:

$ npx imagemin-cli public/img/*.png --out-dir public/img
  ✔ gifsicle pre-build test passed successfully
  ✔ jpegtran pre-build test passed successfully
  ✔ optipng pre-build test passed successfully
5 images minified

Before:

$ ls -lh public/img/*.png | awk '{print $5 "    " $9}'

 18K    public/img/Adobe.png
 19K    public/img/AllMusic.png
 12K    public/img/Linkedin.png
 12K    public/img/firefox.png
240K    public/img/footer.png

After:

$ ls -lh public/img/*.png | awk '{print $5 "    " $9}'

7.3K    public/img/Adobe.png
 12K    public/img/AllMusic.png
3.7K    public/img/Linkedin.png
 12K    public/img/firefox.png
140K    public/img/footer.png
pdehaan commented 6 years ago

Actually, here's a list of network payload sizes for the breach page:

firefox_monitor_network_filesize

We're running a development (non-minified) version of jQuery, which is 261KB (60% of total file size). Foundation (CSS and JavaScript) comes in at another 85KB and 35KB, respectively (combined 27% of total file size).

pdehaan commented 6 years ago

I think the majority of these have already been addressed, with more discussion/info at:

That'd only leave optimizing breach logos (where I think running through SVGO and imagemin reduced the images from 2.4MB to ~2.2MB, IIRC). And I should check to see if the JavaScript is being optimized via uglify-js or uglify-es or whatever.

pdehaan commented 6 years ago

Image optimization PR #171; "Optimize images using svgo and imagemin-cli".

pdehaan commented 6 years ago

Moved CSS+JavaScript minification to #172; "Minify CSS and JavaScript for production?"

pdehaan commented 6 years ago

I did this in PR #171. CSS+JavaScript minification is still valid, but we have a separate tracking issue for that. Closing.