[website] Improve homepage rebranding #27663
Conversation
|
@oliviertassinari Email subscribe is working but might need to revisit the flow (around confirmation page). Let's move that part out of this PR. |
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
@oliviertassinari I have tweaked a bit of the sizing + spacing and changed the company logos to use their original branding color. Let me know what you think! The one I'm still thinking is a bit off is Amazon... but overall, I'm ok with it! |
|
@danilo-leal It looks great. We might be able to compress the SVG paths, e.g. with https://jakearchibald.github.io/svgomg/ |
Done! :) |
siriwatknp
changed the title
| name: null, | ||
| target: null, | ||
| }); | ||
| const debouncedSetData = React.useRef(debounce(setData, 200)); |
There was a problem hiding this comment.
@eps1lon The reason for debounce is to improve the ux when moving mouse between element. This demo is without debounce, https://codesandbox.io/s/element-pointer-j0p8q?file=/src/App.tsx
There was a problem hiding this comment.
Then debounce the specific call. Not all state updates. Especially not with a ref.
There was a problem hiding this comment.
The reason for debounce is to improve the ux when moving mouse between element.
I have never seen a debounce improve UX. It was always a crutch to fix performance bottlenecks.
There was a problem hiding this comment.
@eps1lon Is the demo in codesandbox does not bother you when moving mouse between elements? then compare with debounce version.
There was a problem hiding this comment.
Lighthouse between / and /home/branding:
First Contentful Paint
-0.5 s
+0.6 s
Speed Index
-0.8 s
+0.6 s
Largest Contentful Paint
-0.5 s
+1.0 s
Time to Interactive
-1.0 s
+1.3 s
Total Blocking Time
-50 ms
+100 ms
Cumulative Layout Shift
-0.002
+0.017Webpagetest between / and /home/branding:
/ was visually complete after 3s, /branding/home/ takes 8.5. This is quite the slow down that needs to be adressed before release. Not a good look if the homepage loads slower on a major release.
There isn't even a single paint with the new branding when the old homepage is already at 90%.
There's just way more sent over the wire on the first load:
Page Size First Load JS
┌ λ / 16 kB 304 kB
├ λ /branding/home 53.5 kB 467 kB
-- https://app.netlify.com/sites/material-ui/deploys/611c86c0f968db00075fd6f4
This PR can be merged since it's already an improvement. But this is important to do before release since it was decided to ship this with 5.0 not after.
siriwatknp
force-pushed
the
rebranding/homepage2
branch
from
f21e930 to
7abb8a0
Compare
|
Regarding the slowdown, if we migrate the current homepage (v4 version) from JSS to emotion at 100%, would we also see a change in performance? Maybe some of it can be explained by the styling solution that is slower in v5. |
Preview: https://deploy-preview-27663--material-ui.netlify.app/branding/home/, a follow-up on #27488
Important
import ShowcaseContainer from './ShowcaseContainer';is KO IMHO, make it harder to move code around.<Head>component, it comes with<title>, description, social sharing card and SEO metaThemeToggleUI according to design changeFix copy writing (from Matt's comments)
"2k people open-source community." -> "2000 member open-source community."(I'm not sure about this)Regarding the point of Matt, I think that it was related to something like this:
With 1 new contributor on average a day, and a pace that is slowing down, it will take us a while to reach 3k. It wouldn't make sense to round to 3k if we are at 2,600 contributors. Maybe this otherwise?
Hero
Broken tabs indicator size, it's not fixed yet, see my previous fix proposal (in the core)I have removedtransform: scale(0.9)for now, I think Tabs works just fine.@mui/corewon't be a real package,@mui/core-materialinstead?Products core
Fix the company logo alignment, dark mode, and color
Add more space at the bottom to match Figma
Products Advanced X
DataGridwith code previewOur sponsors
srcSetfor the magesGo live
Footer
Improvements
Testimonials
Footer
Defer
improve these points later if we have bandwidth after completing other important pages.
Hero
Testimonials
material design components section
Advanced X section
sponsors
[technical] coding wise