Skip to content

Optimize size of mapbox-gl-draw.css from 33 KB to 5 KB#1038

Merged
asheemmamoowala merged 4 commits intomapbox:mainfrom
johanrd:main
Apr 9, 2021
Merged

Optimize size of mapbox-gl-draw.css from 33 KB to 5 KB#1038
asheemmamoowala merged 4 commits intomapbox:mainfrom
johanrd:main

Conversation

@johanrd
Copy link
Contributor

@johanrd johanrd commented Feb 25, 2021

When inspecting the svgs in mapbox-gl-draw.css I saw a huge potential for cleanup and optimizations. The changes in this PR does not cause any visual changes, nor any browser relevant SVG specifications:

• Remove geometry outside (!) the viewbox
• Remove unused and unnecessary complex geometry and definitions inside the viewbox
• Optimize geometry representation to compound paths
• Optimize number of decimals from six to one through ImageOptim (lossy, yes, but not noticeable)
• Represent SVGs as SVGs in css, not Base64 encoded SVGs (Base64 encoding of well written SVGs is meaningless – it just increases the file size).

mapbox-gl-draw.css Minified Minified and gziped
Before 32.9 KB 32.6 KB 8.9 KB
After 4.7 KB 4.4 KB 1.3 KB

• Remove geometry outside the viewbox
• Remove unused and unnecessary complex geometry and definitions inside the viewbox
• Optimize geometry representation to compound paths
• Optimizing number of decimals from six to one through ImageOptim (lossy, yes, but not noticeable)
• Represent svgs as svgs in css, not Base64 encoded svgs (Base64 encoding of well written svgs is meaningless – it just increases the file size).
@Plantain
Copy link

Plantain commented Mar 8, 2021

This causes measurable improvements in load times - could this patch get some attention?

Copy link
Contributor

@asheemmamoowala asheemmamoowala left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the cleanup and simplification @johanrd !

@asheemmamoowala asheemmamoowala merged commit 2cdb090 into mapbox:main Apr 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants