Web Development Secrets Revealed - Critical Rendering Path, HTTP, AJAX, and More [Video]
Video
Video
$39.99
Subscription
$15.99
$10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
What do you get with video?
What do you get with video?
What do you get with Audiobook?
What do you get with Exam Trainer?
Video
$39.99
Subscription
$15.99
$10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
-
Free ChapterIntroduction
- 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
-
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?
About this
video
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
- Publication date:
- May 2022
- Publisher
- Packt
- Duration
- 8 hours 15 minutes
- ISBN
- 9781804618240