Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
e6b7ba7
starting over
mapache-salvaje Apr 10, 2024
028eff7
reverting
mapache-salvaje Apr 10, 2024
5909f0c
initializing
mapache-salvaje May 10, 2024
a522128
outline
mapache-salvaje May 10, 2024
cc8681f
dedupe and prettier
mapache-salvaje May 10, 2024
accf09b
rever pnpm lockfile
mapache-salvaje May 10, 2024
c145800
Merge remote-tracking branch 'upstream/next' into pigment-intro-post
LukasTy May 10, 2024
702d8ae
title
mapache-salvaje May 10, 2024
e41dc62
straight quotes
mapache-salvaje May 10, 2024
c25dfdb
intro first pass, nbsps
mapache-salvaje May 13, 2024
db5806b
why pigment
mapache-salvaje May 13, 2024
f4eb4f7
how pigment works
mapache-salvaje May 13, 2024
4c01719
tailwind nbsp
mapache-salvaje May 13, 2024
215673e
benefits
mapache-salvaje May 13, 2024
f661b38
for material ui
mapache-salvaje May 13, 2024
7c4699b
typo
mapache-salvaje May 13, 2024
7396c50
state of css
mapache-salvaje May 13, 2024
3712171
briefly clarify whys in intro
mapache-salvaje May 13, 2024
89042b8
rephrasing a little
mapache-salvaje May 13, 2024
0325259
perf, future
mapache-salvaje May 13, 2024
a6a356d
first draft complete
mapache-salvaje May 13, 2024
e86ebf9
run-time, build-time
mapache-salvaje May 13, 2024
48a33f3
nbsps
mapache-salvaje May 13, 2024
b8696f0
more vale fixes
mapache-salvaje May 13, 2024
c865606
Apply suggestions from code review
mapache-salvaje May 14, 2024
1271247
title
mapache-salvaje May 14, 2024
d14d96d
review feedback
mapache-salvaje May 14, 2024
55ab13e
perf test app callout
mapache-salvaje May 14, 2024
56cf3c9
nbsp
mapache-salvaje May 14, 2024
00c43f7
add Pigment as a tag
danilo-leal May 15, 2024
41674b8
change publication date
danilo-leal May 15, 2024
fb0abde
add custom OG image
danilo-leal May 15, 2024
cbcbe7f
add code blocks
danilo-leal May 15, 2024
11c2151
shorthand notation
danilo-leal May 15, 2024
4ba9aaf
theme-aware sx prop
danilo-leal May 15, 2024
9a9e884
use a table instead of bullet list
danilo-leal May 15, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
use a table instead of bullet list
  • Loading branch information
danilo-leal committed May 15, 2024
commit 9a9e884d95db8a8b117bef69e9dcb3cd4a29cbb2
14 changes: 8 additions & 6 deletions docs/pages/blog/introducing-pigment-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,14 @@ For users of Emotion and styled-components, the benefits of adopting Pigment CS

### Better performance
Copy link
Copy Markdown
Member

@oliviertassinari oliviertassinari May 16, 2024

Choose a reason for hiding this comment

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

I'm lost by this section.

These seem to be load time performance, which I believe is not the same as runtime performance. So I would start with:

Suggested change
### Better performance
### Better page load performance

and then add a new header for render performance specifically.


When comparing the same Material UI app built with Next.js and either Emotion or Pigment CSS, the latter led to:

- 20% reduction in first load JavaScript (104 kB vs. 131 kB)
- 9% decrease in First Contentful Paint (455 ms vs. 503 ms)
- 15% reduction in Time To First Byte (381.5 ms vs 447.5 ms)
- 7.5% reduction in page HTML (14.7 kB vs. 15.9 kB)
When comparing the same Material UI app built with Next.js and either Emotion or Pigment CSS, we've observed the following results:

| Metrics | Emotion | Pigment CSS | Reduction |
| :--------------------- | ------: | ----------: | --------: |
| First load JavaScript | 131kB | 104kB | 20% |
| First Contentful Paint | 503ms | 455ms | 9% |
| Time To First Byte | 447.5ms | 381.5ms | 15% |
| Total Page HTML | 15.9kB | 14.7kB | 7.5% |

:::info
Curious about where those performance numbers came from?
Expand Down