Website Performance Optimization

CRP (Critical Render Path)

• Critical Render Path

• How DOM Construct

  • Tokenizer to parse HTML tag,

    • html-> head -> meta ,

    • html-> body -> div

• Use Timeline ( Performance ) tool to investigate load time

• DOM-> CSSOM (CSS Object Model) -> Render Tree

• display:none will cascading down to its children so that doen't showup at Render Tree.

• Steps of Rending HTML Documents

Layout

• Enhance

• Rendering Blocking Problem

• Parser Blocking Problem

• • async doesn't blocking critical render path, it start the request, but parser still continue to parse.

• • Inline script cannot apply async sytax.

• Three Methods (CRP Metric )

  • Minimize Bytes

  • Reduce Critical Resources (Number of critical resource)

  • Shorten the CRP Path ( Minimum CRP Path)

• Reference

• https://classroom.udacity.com/courses/ud884