Learn about the Critical Rendering Path, AJAX, and HTTP, as well as how to retrieve data from a server
About This Video
In Detail
In this course, …
Learn about the Critical Rendering Path, AJAX, and HTTP, as well as how to retrieve data from a server
About This Video
In Detail
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.
Audience
This course is for anyone interested in dabbling in the world of programming; learning the fundamentals of HTTP, AJAX, data packets, and rendering will allow you to extend this knowledge to any language. It is useful for anyone who wants to gain a solid understanding of web performance; wants to start using backend frameworks such as Node.js, which are heavily reliant on having a deeper understanding of how to make AJAX requests, manipulate the response, and then deliver it to the screen; wants to know what the Critical Rendering Path is, but not sure how it works behind the scenes or how to put it into practice in your code.
Chapter 1 : 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
Chapter 2 : 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
Chapter 3 : 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
Chapter 4 : 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
Chapter 5 : 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?
Chapter 6 : 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
Chapter 7 : 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