refactor: Inline and simplify glowing backdrop SVG pattern

Open damianstasik opened this issue 3 months ago • 6 comments

Description

The SVG pattern used for the glowing backdrop is quite big, fortunately thanks to compression instead of transferring 50kb only around 6kb is sent through the wire. There is still issue of the additional request just to show a pattern which blinks on page load no matter how fast your Internet connection might be. This PR is an experiment to simplify the SVG and inline it into a React component so that we do not make unnecessary requests.

To simplify the SVG I've tried to run it through SVGO, but there is a lot of separate/unmergable paths and a bit of unnecessary complexity so the outcome was not as good as it could be. I've decided to remake the it in Figma from scratch, make it pixel-perfect, controllable with local vars to make further adjustments much easier, then I flattened the paths and exported the result.

Old SVG – pre-optimized: 48.28kb, optimized: 11.38k (1.18kb gzipped) New SVG – pre-optimized: 6.81k, optimized: 4.89k (673b gzipped)

I still have a few ideas how to bring that down even more, but I'll need a bit more time if there's an interest, if no feel free to close this PR.

Validation

Related Issues

Check List

[ ] I have read the Contributing Guidelines and made commit messages that follow the guideline.
[ ] I have run npx turbo format to ensure the code follows the style guide.
[ ] I have run npx turbo test to check if all tests are passing.
[ ] I have run npx turbo build to check if the website builds without errors.
[ ] I've covered new added functionality with unit tests if necessary.

Mar 24 '24 23:03 damianstasik

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Apr 21, 2024 9:10am

Mar 24 '24 23:03 vercel[bot]

Just something strange the design had change. it's can from you svg manipulation. Try to keep SVG as it

Mar 25 '24 08:03 AugustinMauroy

it's can solve #6520

Mar 25 '24 08:03 AugustinMauroy

it's can solve #6520

Probably yes, yea.

Mar 25 '24 13:03 ovflowd

Note we have already an component HexagonGrid use on OG generation

Mar 29 '24 11:03 AugustinMauroy

Hey @damianstasik any updates to the PR?

Apr 15 '24 08:04 ovflowd

@AugustinMauroy do you mind taking over this PR?

Apr 21 '24 08:04 ovflowd

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 91	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 98	🟢 98	🟢 100	🟢 92	🔗
/en/download	🟢 99	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 100	🟢 92	🔗