Instant Mobile Web Apps
Stay organized with collections
Save and categorize content based on your preferences.
The Critical Rendering Path refers to anything (JavaScript, HTML, CSS, images) that the browser requires before it is able to begin painting the page. Prioritizing the delivery of assets on the critical rendering path is a must, particularly for users on network-constrained devices such as smartphones on cellular networks. Bryan talked through how the team at Google went through the process of identifying and prioritizing the assets for the PageSpeed Insights website, taking it from a 20 second load time to just over 1 second!
Slides
- Eliminate render-blocking JavaScript and CSS.
- Prioritize visible content.
- Load scripts asynchronously.
- Render the initial view server-side as HTML and augment with JavaScript.
- Minimize render-blocking CSS; deliver only the styles needed to display the initial viewport, then deliver the rest.
- Large data URIs inlined in render-blocking CSS are harmful for render performance; they are blocking resources where image URLs are non-blocking.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-08-06 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-08-06 UTC."],[[["The Critical Rendering Path encompasses all browser-required elements for page painting, demanding asset delivery prioritization, especially for users on slower connections."],["Google's PageSpeed Insights team drastically reduced their website load time by identifying and prioritizing critical assets."],["Optimizing the Critical Rendering Path involves eliminating render-blocking JavaScript and CSS, prioritizing visible content, loading scripts asynchronously, and minimizing render-blocking CSS by initially delivering only essential styles."],["Large data URIs embedded within render-blocking CSS negatively impact rendering performance compared to non-blocking image URLs."]]],["The core content discusses optimizing the Critical Rendering Path (CRP) for faster page load times. Key actions include eliminating render-blocking JavaScript and CSS, prioritizing visible content, loading scripts asynchronously, and rendering the initial view server-side as HTML. Minimizing render-blocking CSS by delivering only initial viewport styles is crucial. Large data URIs inlined within blocking CSS negatively impacts performance, unlike image URLs. These steps were used to significantly improve the PageSpeed Insights website's load time.\n"]]
