Establish network connections early to improve perceived page speed
Learn about rel=preconnect and rel=dns-prefetch resource hints and how to use them.
Learn about rel=preconnect and rel=dns-prefetch resource hints and how to use them.
Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.
JavaScript is often the trigger for visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that will result in visual changes, like searching or sorting some data. Badly-timed or long-running JavaScript can be a common cause of performance issues, and you should look to minimize its impact where you can.