It looks like you could use some more webpack dynamic imports to modularize your output js/css further down - with http2 it should help a lot. Maybe even think about separating "shell" css from the details, and load details asynchronously. This could make a big difference in that big css.
If you are brave, play around with purgeCSS - Ive found it an amazing thing if it works :)
Also, doing metatag dns prefetch to your CDN domain could also speed things up - ssl handshakes can slow things up a bit.
It looks like your fonts have all the possible characters in them (19KB is pretty big) - you might want to check out this article - florianbrinkmann.com/en/glyphhange... - i found this recipe to work wonders on fonts i used in one project:
before: 19KB
after: 5KB
Additionally, instead of loading them in the main CSS, inlining them into <style> in body, makes the request starts earlier, hence minimizing FOUT.
Also, normally i wouldnt even mention this, but i think this is one of those rare cases where looking at the DOM depth and size could be a good investment if you look into performance issues.
Im a big fan of svg, but im not entirely sure that copying whole SVG tree every time its needed on the map is the way to go - if there is a big DOM tree with a depth, light png might be first easy step to make it a little bit shallower. But its very possible that with react and all that, its possible that your wiggle room will be small.
Thank you for the detailed suggestions, appreciate a lot!
Addressing your points:
We are using Create-React-App, not sure if it supports dynamic imports without a custom webpack config, will have a look.
Gonna try purgeCSS, looks like fun :)
Already doing DNS-prefetch.
I thought that the fonts are already optimized - we use something like: nunito-latin which should already be stripped down to only latin characters - or is it possible to go further?
Good point, will look into unnecessary DOM elements.
What do you mean exactly with the SVG tree copying?
Fonts: ouh yeah, you can strip it down to characters you need - its very effective.
SVG - inlined svg is just a bunch of xml tags, so for 20 (even the same icons) your dom has 20x copy of that xml structure. I presume tiny png would be much flatter and i saw that you dont zoom/animate/manipulate icons on the map, so its less of a sin to migrate. Second option (probably better) would be to use svg symbols and use tag, to not duplicate the tree.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
It looks like you could use some more webpack dynamic imports to modularize your output js/css further down - with http2 it should help a lot. Maybe even think about separating "shell" css from the details, and load details asynchronously. This could make a big difference in that big css.
If you are brave, play around with purgeCSS - Ive found it an amazing thing if it works :)
Also, doing metatag dns prefetch to your CDN domain could also speed things up - ssl handshakes can slow things up a bit.
It looks like your fonts have all the possible characters in them (19KB is pretty big) - you might want to check out this article - florianbrinkmann.com/en/glyphhange... - i found this recipe to work wonders on fonts i used in one project:
before: 19KB
after: 5KB
Additionally, instead of loading them in the main CSS, inlining them into
<style>in body, makes the request starts earlier, hence minimizing FOUT.Also, normally i wouldnt even mention this, but i think this is one of those rare cases where looking at the DOM depth and size could be a good investment if you look into performance issues.
Im a big fan of svg, but im not entirely sure that copying whole SVG tree every time its needed on the map is the way to go - if there is a big DOM tree with a depth, light png might be first easy step to make it a little bit shallower. But its very possible that with react and all that, its possible that your wiggle room will be small.
Hey Paweł,
Thank you for the detailed suggestions, appreciate a lot!
Addressing your points:
Fonts: ouh yeah, you can strip it down to characters you need - its very effective.
SVG - inlined svg is just a bunch of xml tags, so for 20 (even the same icons) your dom has 20x copy of that xml structure. I presume tiny png would be much flatter and i saw that you dont zoom/animate/manipulate icons on the map, so its less of a sin to migrate. Second option (probably better) would be to use svg symbols and use tag, to not duplicate the tree.