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---C…
publication date
2022-05-30
what you will learn
Understand the DOM, CSSOM, Render Tree, and Layout
Master HTTP, HTTP/2, and AJAX
Learn where to write your JavaScript for optimized performance
Master the Critical Rendering Path
Learn to write your own Polyfill
Learn how to optimize any website for speed by writing better code
key features
Understand the Network Panel, Performance Panel, and Audit Lighthouse functions within DevTools * Understand HTTP, TCP, data packets, and a whole bunch more * Real examples of how AJAX works (we will use both the XMLHttpRequest object and the newer Fetch API)
approach
Theory is theory, but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing, and pulling out our hair together as we code real-life websites and exercises during this course. We will build simple pages and analyze the CRP together using the Network Panel, Performance Panel, and Audit Lighthouse within DevTools.
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.
short description
A comprehensive web development course that will help you understand “why” things work and not just “how”. Learn to write better code to boost your website traffic; know how to precision fix and tweak behavior and performance; improve your market penetration and your margins. Everything you need to know about the Critical Rendering Path, AJAX, and HTTP is right here at your fingertips.
subtitle
Understand the Critical Rendering Path, AJAX, HTTP, and how to fetch data from a server. Novice to pro in easy steps
keywords
CRP, HTTP, AJAX, Polyfill, JavaScript, XML, Web development, Network Panel, Performance Panel, Audit Lighthouse, TCP, data packets, render-blocking resources, CRP, Critical Rendering Path
Product ISBN
9781804618240
