Web Development Secrets Revealed - Critical Rendering Path, HTTP, AJAX, and More

Focused View

SkillZone .

8:11:43

101 View

00001 Course Overview.mp4

02:20

00002 Introduction.mp4

01:17

00003 What This Course Covers.mp4

01:21

00004 How Browsers Used to Make Data Requests.mp4

01:33

00005 AJAX - Introduction.mp4

04:37

00006 Quick Step Back.mp4

01:51

00007 XMLHttpRequest - Introduction.mp4

04:26

00008 Building the XMLHttpRequest Object.mp4

09:22

00009 Dealing with the Response Data.mp4

06:05

00010 Another Example - Displaying Time from a Server.mp4

07:11

00011 Building Our Custom Time Function.mp4

05:50

00012 Another Example - Fetching an Image and Person s Name.mp4

07:25

00013 Defining Our requestListener Function.mp4

11:02

00014 XMLHttpRequest - Summary of Our Picture and Name Example.mp4

02:08

00015 Fetch - Introduction.mp4

03:29

00016 Fetch - Setting It Up.mp4

01:53

00017 Fetch - What Is the .json Method.mp4

02:05

00018 Fetch - with POST.mp4

11:53

00019 Replacing XMLHttpRequest with Fetch for Our Picture and Name Example.mp4

09:08

00020 Conclusion.mp4

02:37

00021 The Browser s Main Functionality.mp4

03:32

00022 Browsers and W3C.mp4

02:47

00023 Browsers Request - Introduction.mp4

01:35

00024 Packets.mp4

02:32

00025 Packets - Five Layers Explained.mp4

04:39

00026 Packets - Example.mp4

03:48

00027 HTTP Protocol - Introduction.mp4

02:49

00028 HTTP - Request and Response.mp4

04:53

00029 Take a Step Back - This Stuff Is Practical.mp4

03:41

00030 Section Summary.mp4

01:36

00031 Polyfill Introduction.mp4

03:27

00032 What Is a Browser.mp4

03:33

00033 Do Browsers Follow a Set of Standards.mp4

02:46

00034 What Is a Polyfill.mp4

04:32

00035 Testing Whether the forEach Method Exists in Our Browser.mp4

03:07

00036 What Is forEach.mp4

03:02

00037 Practical Example of forEach.mp4

05:49

00038 Custom forEach Polyfill - Introduction.mp4

01:24

00039 Custom forEach Polyfill - First Step.mp4

04:38

00040 Custom forEach Polyfill - Callback Function.mp4

04:48

00041 What Is THIS.mp4

04:12

00042 Custom forEach Polyfill - Final.mp4

04:42

00043 Section Summary.mp4

01:27

00044 Introduction.mp4

01:52

00045 JS Engine Rendering Engine and the Glue that Holds It All Together Browser.mp4

04:02

00046 How the Browser Works the Steps It Takes to Fetch Data and Display It.mp4

12:56

00047 Critical Rendering Path - Introduction.mp4

02:57

00048 Constructing the DOM - Part 1.mp4

03:23

00049 Constructing the DOM - Part 2.mp4

03:50

00050 Quick Recap.mp4

02:14

00051 Performance Tab - DevTools.mp4

10:56

00052 Call Tree - an Alternative Way to Analyze Your Website s Activities.mp4

03:55

00053 Bottom-Up and Event Log - an Alternative Way to Analyze Your Website s Activities.mp4

07:22

00054 CSSOM - Introduction.mp4

01:34

00055 Why Do We Need to Have a CSS Tree.mp4

04:20

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

02:41

00057 Render Tree - Introduction.mp4

02:05

00058 Render Tree - Challenge.mp4

02:59

00059 Render Tree - Solution.mp4

01:16

00060 Quick Recap - Render Tree.mp4

01:56

00061 Comparing DOM CSSOM and Render Tree.mp4

10:34

00062 Render Tree - Layout.mp4

02:07

00063 Viewing the Layout Process in DevTools.mp4

02:13

00064 Render Tree - Paint.mp4

01:47

00065 Step Back.mp4

02:09

00066 Render Blocking Resources - Introduction.mp4

03:39

00067 How to Make CSS Non-Render Blocking Hint - Media Queries.mp4

05:18

00068 Media Types - Example.mp4

07:09

00069 Is JavaScript Render Blocking.mp4

01:44

00070 JavaScript and the DOM.mp4

03:13

00071 The Order of Your Code Matters - Part 1.mp4

05:58

00072 The Order of Your Code Matters - Part 2 Solution.mp4

06:14

00073 JavaScript and the CSSOM.mp4

01:34

00074 Example of JavaScript Having to Wait for the CSS.mp4

02:22

00075 Step Back - DOM Versus CSSOM Versus JavaScript.mp4

02:59

00076 JavaScript Is Render Blocking.mp4

03:32

00077 Approach 1 - Placing JavaScript at the Bottom of Your Page.mp4

07:29

00078 Approach 2 - Using Async.mp4

05:57

00079 Comparing Approach 1 Bottom Versus Approach 2 Async.mp4

01:25

00080 Approach 3 - Defer.mp4

03:51

00081 Comparing Approach 2 Async Versus Approach 3 Defer.mp4

05:22

00082 Approach 4 - Custom Event Listener - Part 1.mp4

07:48

00083 Approach 4 - Custom Event Listener - Part 2 Let s Analyze the Entire Render.mp4

03:25

00084 Async Versus Defer Versus Custom.mp4

05:17

00085 Approach 5 - Preload.mp4

03:48

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

01:46

00087 Introduction to Speculative Parsing.mp4

12:53

00088 What Is Speculative Parsing.mp4

02:23

00089 Section Introduction.mp4

01:38

00090 Why Is the Network Panel Important.mp4

02:02

00091 Introduction to Network Panel.mp4

02:07

00092 What Do All the Columns Mean in the Network Panel.mp4

08:20

00093 Response and Request Headers.mp4

02:41

00094 Timing Tab and Waterfall Stack.mp4

01:34

00095 Three Most Common Network Requests You Will See.mp4

02:14

00096 Time Phases - Introduction.mp4

00:40

00097 Time Phases - Detailed Explanation.mp4

11:50

00098 CDN - An Introduction.mp4

05:15

00099 Analyzing File Requests in the Network Panel.mp4

11:28

00100 Network Panel High-Level Overview.mp4

02:55

00101 Analyzing Our File s CRP - No CSS and No JS.mp4

02:55

00102 What Is the Size Column.mp4

01:10

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

03:08

00104 Let s Add JavaScript and CSS.mp4

08:12

00105 Rendering Our New File with JavaScript and CSS.mp4

01:34

00106 Impact that JavaScript and CSS Have on Our CRP.mp4

07:49

00107 Inline JavaScript.mp4

02:44

00108 Adding ASYNC to Our File and Its Impact on the CRP.mp4

03:24

00109 Steps to Take to Optimize the Critical Rendering Path.mp4

04:38

00110 Audit Lighthouse - Introduction.mp4

02:00

00111 Audit Lighthouse - Example.mp4

07:04

00112 Section introduction.mp4

04:02

00113 HTTP 1.1 - Recap.mp4

03:10

00114 HTTP 2 - Where Did It Come From.mp4

02:20

00115 HTTP 2 - What Is It.mp4

06:47

00116 HTTP 2 Questions and Answers.mp4

06:56

Description

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

More details

User Reviews

Rating

average 0

Total votes0

Focused display

Web Development

SkillZone .

Instructor's Courses

SkillZone has the simple goal of teaching complicated concepts in an effortless way. They are Johannesburg-based and create quality, easy-to-understand eLearning solutions. In today’s rapidly evolving workplace, it is imperative to make sure you have the skills and expertise required to succeed. The content we offer ensures that the learning materials and delivery approach are aligned to meet intended outcomes and address your specific training needs without covering topics that may be unnecessary or irrelevant. The author’s goal is to help you with in-depth learning whilst avoiding the pitfalls that he discovered the hard way. He is enthusiastic and has a lot of fun teaching and brings his personality and charisma to the teaching platform to benefit his students the most.

PacktPub

View courses PacktPub

Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.