Is your HTML bloated? A flamegraph can tell you why

HTML Flamegraph

What problems can you diagnose with this?

  1. You don’t want to block rendering with CSS links. You embed some critical CSS in your HTML. Sometimes this goes unchecked and tens of KBs of CSS goes into your initial HTML that’s not critical at all.
  2. If you carelessly embed SVGs in your HTML it can also increase the size significantly. I’ve seen some pages having low priority footer logos as much as 30% of the initial HTML payload.
  3. You server-side render (SSR) your React app to ensure loading performance is better. But now you have to re-hydrate your SSR-ed markup on the client side using the same state as on the server.
    This preloaded state goes into your HTML.
Alex Russell’s nemesis

How does it work?

  1. Fetch the HTML for the given URL (follows redirects and forwards your User-Agent header)
  2. Parse the HTML into an AST using htmlparser2
  3. Calculate the byte size by subtracting startIndex from the endIndex for each node (please note: this is the non-compressed size!)
  4. Display the resulting tree as a flamegraph using react-flame-graph
HTML Flamegraph
  1. HTML AST nodes display the first value from their class attribute after the tag name. (e.g. div.carousel)
  2. JS AST AssignmentExpression nodes have the left hand side pretty-printed using @babel/generator (e.g window.__INITIAL_STATE=)
  3. JS AST ObjectProperty nodes have the key pretty printed. This allows nicely inspecting preloaded/initial state for React apps.
  4. and so on…

What are the alternatives?

--

--

--

Development, DevOps & Web Performance Consultant

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Csaba Palfi

Csaba Palfi

Development, DevOps & Web Performance Consultant

More from Medium

Rendering line breaks from JavaScript strings

Chapter 20: Advanced CSS Selectors and JavaScript Selector Functions

Introduction to Cascade Layers in CSS

How to compile SASS into CSS and watch for changes?