Stuck?

Check out the changes https://github.com/pearlbea/bloaty-mcbloatface/pull/2

Loading Timeline

• Clear part 1 changes with git checkout master
• Launch prod yarn run prod
• Go to a /stories/:id page with a lot of comments
• Open Dev Tools to the Performance tab

• Select "screenshots"
• Select "4x slowdown" under CPU
• Click the "start profiling and reload page" icon in the upper left
• How much of that time is spent rendering? How much time scripting?

Trade-offs: Nested HTML vs Bad JS

• Uncomment the body of the init method in app/javascript/story.ts
• (Don't forget to restart yarn run prod)
• Look at the story page to see the changes
• Click the "start profiling and reload" icon again
• How do these changes affect the times?

Set CPU back to "no throttling" before moving on to the next exercise.