Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs Site] chore: optimize SVGs #17350

Merged
merged 1 commit into from
Oct 7, 2024

Conversation

Cherry
Copy link
Contributor

@Cherry Cherry commented Oct 6, 2024

This PR optimizes all of the SVGs in the repo currently, saving a total of ~33.12MB across all of the docs!

Before: ~68.44 MB of total SVGs
After: ~35.33 MB of total SVGs

Astro's image service doesn't process SVGs today, so it just passes them through entirely unoptimized. Many of the SVGs in this repo are exported from Illustrator and the likes which massively inflates their sizes, sometimes into the megabytes. Some pages with multiple SVGs can end up loading over a MB of SVG content which not only takes longer at a network level, but also longer for the browser to parse and then render.

I originally made this an Astro integration plugin, but it was taking a minute or two per SVG on some of the more large and complex ones, so adding tens of minutes to the build every time didn't make sense. I've instead moved it to a generic script in a new scripts folder. The long-term goal is to run these automatically and then push back to the repo any time a new SVG file is added, but for now, they can just be run manually every so often.

It might make more sense to build these optimised versions to another folder, and then somehow tweak Astro/rehype's file loading to pull from there first if exists, before the raw sources, I'm not sure.

@securitypedant
Copy link
Contributor

securitypedant commented Oct 6, 2024

Interesting work. All the reference architecture SVGs are exported from Figma, not Illustrator. Some of our docs have 15+ SVGs in them. Is there a process we can add into our release of new documents to optimize our images?

@Cherry
Copy link
Contributor Author

Cherry commented Oct 6, 2024

I'm not sure if Figma has a more web-optimised export honestly - that's something worth looking into.

But once this lands, ideally eventually in PRs the optimisation will run automatically and transparently to contributors (out of scope for this PR, and probably something more suited in addition to #17011), but in the meantime, if folks will just run npm run script:optimize-svgs locally, it'll optimise all of the SVGs for faster downloads/parsing on the web.

Or, someone can do a fly-by pass optimisation PR every so often to crunch any SVGs that didn't get optimised.

Copy link
Member

@GregBrimble GregBrimble left a comment

Choose a reason for hiding this comment

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

Thank you for your contribution! This'll save our end-users a lot of network bytes!

@KianNH KianNH merged commit 30b3bfd into cloudflare:production Oct 7, 2024
9 checks passed
@workers-devprod workers-devprod added the contribution [Holopin] Recognizes a docs contribution, big or small label Oct 7, 2024
Copy link

holopin-bot bot commented Oct 7, 2024

Congratulations @Cherry, the maintainer of this repository has issued you a holobyte! Here it is: https://holopin.io/holobyte/cm1ys4rka26960clbpenssst8

This badge can only be claimed by you, so make sure that your GitHub account is linked to your Holopin account. You can manage those preferences here: https://holopin.io/account.
Or if you're new to Holopin, you can simply sign up with GitHub, which will do the trick!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
contribution [Holopin] Recognizes a docs contribution, big or small size/xl
Projects
None yet
Development

Successfully merging this pull request may close these issues.