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] Reduce .html response size #18356

Merged
merged 1 commit into from
Nov 17, 2019

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Nov 13, 2019

Explore if we can do better than (23.5 kB gzipped)

Capture d’écran 2019-11-13 à 20 45 17

with minimal changes.

After

Capture d’écran 2019-11-13 à 21 55 29

Aim to improve Google crawler download durations:
Capture-d-ecran-2019-11-13-a-19 46 15
https://www.google.com/webmasters/tools/crawl-stats?siteUrl=https%3A%2F%2Fmaterial-ui.com

240ms on average for a static website is not OK.

@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation performance labels Nov 13, 2019
@@ -91,6 +93,7 @@ const styles = theme => ({
},
'& pre': {
overflow: 'auto',
lineHeight: 1.5,
Copy link
Member Author

@oliviertassinari oliviertassinari Nov 13, 2019

Choose a reason for hiding this comment

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

Fix hydration layout jump (vs 1.43)

@mui-pr-bot
Copy link

Details of bundle changes.

Comparing: e0dd45f...77a9ee5

bundle Size Change Size Gzip Change Gzip
docs.main ▼ -410 B (-0.07% ) 606 kB ▼ -199 B (-0.10% ) 193 kB
@material-ui/core -- 351 kB -- 95.9 kB
@material-ui/core[umd] -- 310 kB -- 89.2 kB
@material-ui/lab -- 171 kB -- 51.6 kB
@material-ui/styles -- 50.8 kB -- 15.4 kB
@material-ui/system -- 14.8 kB -- 4.06 kB
AppBar -- 62.2 kB -- 19.5 kB
Autocomplete -- 126 kB -- 39.8 kB
Avatar -- 61.2 kB -- 19.3 kB
Backdrop -- 66.2 kB -- 20.4 kB
Badge -- 63.8 kB -- 19.7 kB
BottomNavigation -- 60.8 kB -- 19 kB
BottomNavigationAction -- 73.9 kB -- 23.3 kB
Box -- 69.2 kB -- 20.9 kB
Breadcrumbs -- 66.4 kB -- 20.8 kB
Button -- 77.8 kB -- 23.8 kB
ButtonBase -- 72.3 kB -- 22.6 kB
ButtonGroup -- 80.4 kB -- 24.7 kB
Card -- 61.2 kB -- 19.1 kB
CardActionArea -- 73.4 kB -- 23.2 kB
CardActions -- 60.5 kB -- 18.9 kB
CardContent -- 60.4 kB -- 18.9 kB
CardHeader -- 63.5 kB -- 20 kB
CardMedia -- 60.8 kB -- 19.1 kB
Checkbox -- 80.2 kB -- 25.1 kB
Chip -- 80.9 kB -- 24.7 kB
CircularProgress -- 62.5 kB -- 19.7 kB
ClickAwayListener -- 3.87 kB -- 1.56 kB
Collapse -- 66.3 kB -- 20.5 kB
colorManipulator -- 3.83 kB -- 1.52 kB
Container -- 61.6 kB -- 19.2 kB
CssBaseline -- 56 kB -- 17.5 kB
Dialog -- 80.9 kB -- 25.1 kB
DialogActions -- 60.5 kB -- 18.9 kB
DialogContent -- 60.6 kB -- 19 kB
DialogContentText -- 62.5 kB -- 19.6 kB
DialogTitle -- 62.7 kB -- 19.7 kB
Divider -- 61 kB -- 19.2 kB
docs.landing -- 55.8 kB -- 14.3 kB
Drawer -- 82.7 kB -- 25.6 kB
ExpansionPanel -- 69.6 kB -- 21.7 kB
ExpansionPanelActions -- 60.5 kB -- 19 kB
ExpansionPanelDetails -- 60.4 kB -- 18.9 kB
ExpansionPanelSummary -- 76.5 kB -- 24.1 kB
Fab -- 75.2 kB -- 23.3 kB
Fade -- 22 kB -- 7.6 kB
FilledInput -- 72 kB -- 22.3 kB
FormControl -- 62.8 kB -- 19.5 kB
FormControlLabel -- 63.9 kB -- 20.1 kB
FormGroup -- 60.4 kB -- 18.9 kB
FormHelperText -- 61.7 kB -- 19.3 kB
FormLabel -- 61.9 kB -- 19.1 kB
Grid -- 63.5 kB -- 19.9 kB
GridList -- 60.9 kB -- 19.1 kB
GridListTile -- 62.2 kB -- 19.5 kB
GridListTileBar -- 61.6 kB -- 19.3 kB
Grow -- 22.6 kB -- 7.72 kB
Hidden -- 64.5 kB -- 20.2 kB
Icon -- 61.2 kB -- 19.2 kB
IconButton -- 74.5 kB -- 23.2 kB
Input -- 70.9 kB -- 22.1 kB
InputAdornment -- 63.5 kB -- 20 kB
InputBase -- 69 kB -- 21.6 kB
InputLabel -- 63.7 kB -- 19.8 kB
LinearProgress -- 63.8 kB -- 19.9 kB
Link -- 65 kB -- 20.6 kB
List -- 60.8 kB -- 18.9 kB
ListItem -- 75.5 kB -- 23.5 kB
ListItemAvatar -- 60.5 kB -- 18.9 kB
ListItemIcon -- 60.6 kB -- 19 kB
ListItemSecondaryAction -- 60.4 kB -- 18.9 kB
ListItemText -- 63.4 kB -- 19.9 kB
ListSubheader -- 61.2 kB -- 19.2 kB
Menu -- 86.6 kB -- 27.2 kB
MenuItem -- 76.5 kB -- 23.8 kB
MenuList -- 64.4 kB -- 20.1 kB
MobileStepper -- 66.2 kB -- 20.6 kB
Modal -- 14.2 kB -- 4.96 kB
NativeSelect -- 75.2 kB -- 23.7 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 72.5 kB -- 22.5 kB
Paper -- 60.7 kB -- 18.9 kB
Popover -- 81 kB -- 25 kB
Popper -- 28.5 kB -- 10.2 kB
Portal -- 2.87 kB -- 1.3 kB
Radio -- 81 kB -- 25.4 kB
RadioGroup -- 61.7 kB -- 19.3 kB
Rating -- 68.4 kB -- 21.9 kB
RootRef -- 4.43 kB -- 1.67 kB
Select -- 112 kB -- 33.4 kB
Skeleton -- 60.9 kB -- 19.1 kB
Slide -- 24.1 kB -- 8.21 kB
Slider -- 74 kB -- 23.3 kB
Snackbar -- 75.6 kB -- 23.5 kB
SnackbarContent -- 64.1 kB -- 20.1 kB
SpeedDial -- 84.4 kB -- 26.6 kB
SpeedDialAction -- 115 kB -- 36.3 kB
SpeedDialIcon -- 63 kB -- 19.8 kB
Step -- 61 kB -- 19.1 kB
StepButton -- 80.7 kB -- 25.3 kB
StepConnector -- 61.1 kB -- 19.2 kB
StepContent -- 67.4 kB -- 21 kB
StepIcon -- 63.1 kB -- 19.6 kB
StepLabel -- 67 kB -- 21 kB
Stepper -- 63.2 kB -- 19.9 kB
styles/createMuiTheme -- 15.2 kB -- 5.36 kB
SvgIcon -- 61.5 kB -- 19.1 kB
SwipeableDrawer -- 90.1 kB -- 28 kB
Switch -- 79.5 kB -- 24.7 kB
Tab -- 74.7 kB -- 23.7 kB
Table -- 61 kB -- 19.1 kB
TableBody -- 60.5 kB -- 18.9 kB
TableCell -- 62.5 kB -- 19.6 kB
TableFooter -- 60.5 kB -- 18.9 kB
TableHead -- 60.5 kB -- 18.9 kB
TablePagination -- 139 kB -- 40.5 kB
TableRow -- 61 kB -- 19.1 kB
TableSortLabel -- 75.7 kB -- 23.9 kB
Tabs -- 83.8 kB -- 26.7 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
TextField -- 121 kB -- 35.4 kB
ToggleButton -- 74.5 kB -- 23.5 kB
ToggleButtonGroup -- 61.6 kB -- 19.4 kB
Toolbar -- 60.8 kB -- 19 kB
Tooltip -- 98.9 kB -- 31.3 kB
TreeItem -- 72 kB -- 22.7 kB
TreeView -- 64.8 kB -- 20.3 kB
Typography -- 62.1 kB -- 19.3 kB
useAutocomplete -- 12.1 kB -- 4.47 kB
useMediaQuery -- 2.49 kB -- 1.05 kB
Zoom -- 22.1 kB -- 7.6 kB

Generated by 🚫 dangerJS against 77a9ee5

@oliviertassinari oliviertassinari added the on hold There is a blocker, we need to wait label Nov 13, 2019
Copy link
Member

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

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

Very interesting. Rich Harris had a thread about this a few days ago about the fundamental issue of rendering interactive content on the server. The gist is that it's kind of useless to render a button on the server if it isn't interactive because the user sees a button but every click will be ignored until hydration completes.

This PR basically addresses this by not rendering the interactive controls for the demo on the server. It might make sense to investigate similar potential for the landing page because that's more likely to be server rendered. Do we have stats on pages where the user lands on (ssr is actually used) vs pages that are navigated to with client side routing (ssr is unused)?

@oliviertassinari
Copy link
Member Author

Thanks for the reference. I would like to wait the end of the Netlify enterprise hosting trial period to measure the impact of these changes. In 5 days.

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Nov 14, 2019

https://material-ui.com/components/material-icons/ might be a black sheep 😬

Capture d’écran 2019-11-14 à 14 09 37

@eps1lon
Copy link
Member

eps1lon commented Nov 14, 2019

Thanks for the reference. I would like to wait the end of the Netlify enterprise hosting trial period to measure the impact of these changes. In 5 days.

How do the changes in hosting relate to the changes in this PR?

material-ui.com/components/material-icons might be a black sheep grimacing

Please don't fall into the trap of condemning everything sent over the wire. The browser is capable of rendering partial html. The correct question to ask here is if everything that's sent visible before hydration completed.

@oliviertassinari
Copy link
Member Author

I believe that the metrics shared in the pull request description doesn't involve a browser, but the time it takes to crawl, on average, one page.

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Nov 14, 2019

Netlify enterprise benefits from more physical presence (more servers) and higher cache size, it should translate into faster HTML fetches for Google Bot.

@eps1lon
Copy link
Member

eps1lon commented Nov 14, 2019

I believe that the metrics shared in the pull request description doesn't involve a browser, but the time it takes to crawl, on average, one page.

What do you mean "believe"? You took the screenshots which look like something from the network panel in chrome devtools. Where did you get the screenshots from?

Just want to emphasize that SEO that targets the machine will always be bad SEO. Google is not interested in pages that are fast for their machine. They model their machine after the user. So by improving the experience for the user we do improve SEO. Initial page size does improve the experience for a regular user not just google.

And ultimately I don't understand how netlify relates to this? If enterprise improves SEO you don't want to ship this improvement? Could you expand the full context of this? It seems like you're omitting some important insight into the scope of this PR

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Nov 14, 2019

The graph comes from https://neilpatel.com/blog/google-search-console-crawl-stats/. Yeah, agree. It's definitely not the end metric we would like to improve. It's more of a derivative metric that we can observe to hint if we are going in the right direction or not. Google probably has some other hidden metrics to estimate the perceived speed of the website.

@eps1lon
Copy link
Member

eps1lon commented Nov 14, 2019

But there are two other images in your description. If these are not part of this PR why include them?

@oliviertassinari
Copy link
Member Author

how netlify relates to this?

It's about isolation. I think that we should deploy one change at the time, so we can measure the impacts.

@eps1lon
Copy link
Member

eps1lon commented Nov 14, 2019

Right that makes sense. It sounded like it's one or the other.

@oliviertassinari oliviertassinari added PR: ready to ship and removed on hold There is a blocker, we need to wait labels Nov 17, 2019
@oliviertassinari oliviertassinari merged commit 3772c19 into mui:master Nov 17, 2019
@oliviertassinari oliviertassinari deleted the docs-performance branch November 17, 2019 14:10
@oliviertassinari
Copy link
Member Author

Given that Netlify still has 1 more days to run, that Google Dashboard has 2 days of lag and that we won't release this change before next week. We can merge :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation performance
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants