Having Fun: Lets Analyze the Critical Rendering Path Together | Critical Rendering Path All Inclusive 2025: Accelerate Your Web Learning

Book Overview & Buying
Table Of Contents

Critical Rendering Path All Inclusive 2025: Accelerate Your Web Learning

By : SkillZone

Buy this Video

Critical Rendering Path All Inclusive 2025: Accelerate Your Web Learning

By: SkillZone

Buy this Video

Overview of this book

In this course, you will learn about the Critical Rendering Path. This refers to the set of steps browsers must take to fetch and then convert HTML, CSS, and JavaScript into living, breathing websites. From there, you will start exploring and experimenting with tools to measure performance. You will learn simple, yet very powerful strategies to deliver the first pixels to the screen as early as possible. Knowledge of the CRP is incredibly useful for understanding how a site’s performance can be improved. There are various stages to the CRP, such as constructing the DOM, constructing the CSSOM, running JavaScript, creating the Render Tree, generating the layout, and finally painting pixels to the screen. As you can see, this covers a whole bunch of interesting material. We will dig deeper in every lecture, by learning about things such as HTTP, TCP, data packets, render-blocking resources, and a whole bunch more! This course has many bonus lectures that will extend your knowledge base and test your skills. Through practical examples, this course helps you understand the CRP piece by piece. We will use the latest and best features of JavaScript and browsers (such as the new Fetch API) along the way so you can stay ahead of the pack. By the end of this course, you will be able to “speak” CRP by gaining an understanding of how to fetch data from a server and then get that data to your user as quickly as possible. All the resources for this course are available at https://github.com/PacktPublishing/Web-Development-Secrets-Revealed---Critical-Rendering-Path-HTTP-AJAX-and-More

Introduction

Course Overview

Introduction

What This Course Covers

How Browsers Used to Make Data Requests

AJAX - Introduction

Quick Step Back

XMLHttpRequest - Introduction

Building the XMLHttpRequest Object

Dealing with the Response Data

Another Example - Displaying Time from a Server

Building Our Custom Time Function

Another Example - Fetching an Image and Person's Name

Defining Our requestListener Function

XMLHttpRequest - Summary of Our Picture and Name Example

Fetch - Introduction

Fetch - Setting It Up

Fetch - What Is the .json() Method

Fetch - with POST

Replacing XMLHttpRequest with Fetch for Our Picture and Name Example

Conclusion

HTTP Protocol, TCP, and Packets

The Browser's Main Functionality

Browsers and W3C

Browsers Request - Introduction

Packets

Packets - Five Layers Explained

Packets - Example

HTTP Protocol - Introduction

HTTP - Request and Response

Take a Step Back - This Stuff Is Practical

Section Summary

Advanced - Building a Custom Polyfill

Polyfill Introduction

What Is a Browser

Do Browsers Follow a Set of Standards

What Is a Polyfill?

Testing Whether the forEach() Method Exists in Our Browser

What Is forEach()?

Practical Example of forEach()

Custom forEach() Polyfill - Introduction

Custom forEach() Polyfill - First Step

Custom forEach() Polyfill - Callback Function

What Is THIS?

Custom forEach() Polyfill - Final

Section Summary

Critical Rendering Path - DOM, CSSOM, Render Tree

Introduction

JS Engine, Rendering Engine, and the Glue that Holds It All Together (Browser)

How the Browser Works (the Steps It Takes to Fetch Data and Display It)

Critical Rendering Path - Introduction

Constructing the DOM - Part 1

Constructing the DOM - Part 2

Quick Recap

Performance Tab - DevTools

Call Tree - an Alternative Way to Analyze Your Website's Activities

Bottom-Up and Event Log - an Alternative Way to Analyze Your Website's Activities

CSSOM - Introduction

Why Do We Need to Have a CSS Tree?

How to View the CSSOM Process for Your Website - Recalculate Style

Render Tree - Introduction

Render Tree - Challenge

Render Tree - Solution

Quick Recap - Render Tree

Comparing DOM, CSSOM, and Render Tree

Render Tree - Layout

Viewing the Layout Process in DevTools

Render Tree - Paint

Step Back

Render Blocking Resources

Render Blocking Resources - Introduction

How to Make CSS Non-Render Blocking (Hint: Media Queries)

Media Types - Example

Is JavaScript Render Blocking?

JavaScript and the DOM

The Order of Your Code Matters - Part 1

The Order of Your Code Matters - Part 2 (Solution)

JavaScript and the CSSOM

Example of JavaScript Having to Wait for the CSS

Step Back: DOM Versus CSSOM Versus JavaScript

JavaScript Is Render Blocking

Approach 1: Placing JavaScript at the Bottom of Your Page

Approach 2: Using Async

Comparing Approach 1 (Bottom) Versus Approach 2 (Async)

Approach 3: Defer

Comparing Approach 2 (Async) Versus Approach 3 (Defer)

Approach 4: Custom Event Listener - Part 1

Approach 4: Custom Event Listener - Part 2 (Let's Analyze the Entire Render)

Async Versus Defer Versus Custom

Approach 5: Preload

Summary of Where We Can Place Our JS to Improve the CRP

Introduction to Speculative Parsing

What Is Speculative Parsing?

Having Fun: Lets Analyze the Critical Rendering Path Together

Section Introduction

Why Is the Network Panel Important

Introduction to Network Panel

What Do All the Columns Mean in the Network Panel

Response and Request Headers

Timing Tab and Waterfall Stack

Three Most Common Network Requests You Will See

Time Phases - Introduction

Time Phases - Detailed Explanation

CDN - An Introduction

Analyzing File Requests in the Network Panel

Network Panel â€“ High-Level Overview

Analyzing Our File's CRP - No CSS and No JS

What Is the Size Column?

How to Identify the Number of Critical Resources and Server Round Trips

Let's Add JavaScript and CSS

Rendering Our New File with JavaScript and CSS

Impact that JavaScript and CSS Have on Our CRP

Inline JavaScript

Adding ASYNC to Our File, and Its Impact on the CRP

Steps to Take to Optimize the Critical Rendering Path

Audit Lighthouse - Introduction

Audit Lighthouse - Example

What Is HTTP/2?

Section introduction

HTTP/1.1 - Recap

HTTP/2 - Where Did It Come From?

HTTP/2 - What Is It?

HTTP/2 Questions and Answers

Critical Rendering Path All Inclusive 2025: Accelerate Your Web Learning

By : SkillZone

Critical Rendering Path All Inclusive 2025: Accelerate Your Web Learning

By: SkillZone

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access