search

Rudloff / openvegemap

Find vegetarian and vegan restaurants in your city
https://openvegemap.netlib.re/
GNU General Public License v3.0
72 stars 9 forks source link

Large assets #92

Open Rudloff opened 3 years ago

Rudloff commented 3 years ago 
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  fonts/fa-solid-900.svg (798 KiB)
  main.bundle.js (702 KiB)
  style.bundle.js (353 KiB)
  test.bundle.js (258 KiB)

I tried to optimize fa-solid-900.svg with image-webpack-loader but it is still quite large. As for the JS bundles, we probably need to split them in smaller bundles.

Rudloff commented 3 years ago

I moved the CSS to a separate file and minified it, so it is now slightly better:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  fonts/fa-solid-900.svg (798 KiB)
  main.bundle.js (695 KiB)
KristjanESPERANTO commented 3 years ago

Are the seven icons in the menu the only place where Font Awesome is used? If this is the case, we could replace Font Awesome with seven small svg files or include them as inline svg in a css file.

Rudloff commented 3 years ago

It is used in the menu, but also on markers (with Leaflet.awesome-markers). But yes, we only use a small number of icons, so we should either replace them or only extract the icons we need from FontAwesome.

Rudloff commented 3 years ago

I used fontmin-webpack to only keep the icons we are actually using.

Now the only remaining problem is that main.bundle.js is still a bit big.

KristjanESPERANTO commented 3 years ago

Did you already gzip this file?

https://css-tricks.com/snippets/htaccess/active-gzip-compression/

Rudloff commented 3 years ago

Yes it is served gzipped, which means only ~180 KB are transferred to the browser instead of the full ~700 KB.