DEV Community: Nazar Hapak

Critical Rendering Path (CRP)

Nazar Hapak — Wed, 12 Jun 2024 08:29:42 +0000

Understanding Critical Rendering Path is crucial in web development, as it impacts performance and user experience of website. As a web developer you can optimize Critical Rendering Path for better perfomance and SEO rankings.

In this article, we will look at basic terms of Critical Rendering Path, its sequence and techniques to optimize it.

What exactly is CRP? 🤔

Critical Rendering Path (CRP) is a sequence of steps that the browser takes to convert HTML, CSS and JavaScript into pixels on the screen.

Understanding Terms 🧠

Parsing is a process of converting HTML and CSS into structures that the browser can understand and manipulate.
Rendering is a process of converting DOM and CSSOM into pixels on the screen.
DOM (Document Object Model) is a tree-like structure representing the HTML content of a web page. Each element, attribute, and piece of text in the HTML document becomes a node in this tree.
CSSOM (CSS Object Model) is a tree-like structure that represents the CSS styles of a web page.
Render Tree is combination of DOM and CSSOM. It contains only the nodes needed to render the page, including the visual information like styles and layout.

Sequence in CRP 🚦

Steps in rendering process:

As browser receives first package of HTML file, it starts constructing the DOM.
It continues the process of DOM construction and as soon as browser discovers a reference to CSS file (<link rel="stylesheet">) it sends HTTP request for CSS file.
When it receives packages of CSS file, it starts simultaneously constructing the CSSOM.
When the browser counters reference to JavaScript file (<script> element) it stops parsing HTML and CSS, as JavaScript can directly manipulate DOM and CSSOM. Only after JavaScript finished downloading and executing, parsing process continues.
When browser encounters tags for external data like images, videos, audio etc, it notes the locations of files but continues parsing the rest of the page. The browser can perform the initial paint of webpage even if the external data hasn't been fully loaded yet. (That's why u can see how images load even after main content has already appeared on screen).
DOM and CSSOM are combined to form the Render Tree, which represents what will be displayed on screen.
The browser makes the layout. It calculates the exact position and size of each visible element.
The browser paints pixels on the screen and displays the webpage.

Note, that when content on a webpage changes dynamically (text changes color, hover animations etc) or additional content is loaded browser do not repaint the entire page, instead it selectively updates parts of the page.

CRP Optimization Techniques 💪

Minimize Critical Resources

Ensure only the necessary resources are included in the critical path.
Use minification tools (to remove blank space) and compression(.zip) to reduce the size of resources.

Optimize CSS Delivery

Even though CSS simultaniously parsing itself along with HTML, rendering process won't start until both DOM and CSSOM are ready. So, it is a good idea to render important CSS first and defer everything else.

Inline important CSS content directly in the HTML.
Load non-critical CSS asynchronously. <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

Optimize JavaScript Delivery

As you know for now, JavaScript blocks the parsing process of HTML and CSS as it can directly manipulate DOM and CSSOM.

By default JavaScript behaviour, it stops parsing while it downloads and executes. But you can use defer and async attributes to change that.

Defering JavaScript ownloads it while HTML is parsing and executes it after it's done constructing DOM. <script src="script.js" defer></script>
Downloading JavaScript asynchronously happens while HTML is parsing, but execution happens as soon as JavaScript file has finished downloading. <script src="example.js" async></script>

Many developers also put their scripts at the end of <body> element to ensure that they are loaded after HTML has been parsed.

You can also inline important JavaScript directly in HTML just like CSS.

Use Preloading and Prefetching

Preloading tells the browser to start fetching the file as soon as possible, before it is discovered in the document’s standard flow. This means the file is given a high priority. It doesn’t block the rendering process. <link rel="preload" href="styles.css" as="style">
Prefetching loads resources that might be needed in the near future. By fetching them in advance, browser can serve them from cache when they are actually needed. These files are given lower priority, which means that they are loaded after everything else. <link rel="prefetch" href="about-us.html">

Summary 📝

Critical Rendering Path is a sequence of steps which browser takes to display web content and there are several techniques to optimize it.

Thank you for reading, leave a comment if you want and stay cool!😎

How the Internet works? TCP/IP

Nazar Hapak — Fri, 07 Jun 2024 10:45:25 +0000

Understanding how the Internet works is a fundamental step for anyone diving into the world of web development. Whether you're a beginner starting out or an experienced developer refreshing your knowledge, knowing the basics of the Internet provides a strong foundation to build upon.

In this article, we'll explore the core concepts of how the Internet operates, from the role of servers and clients to the intricacies of protocols and data transmission.

What is the Internet? 🌐

The Internet is a large network of computers that communicate with each other. The whole idea of the Internet is to ensure that computers stay connected, regardless of any disruption. This idea was implemented using decentralized network. If one part of the network fails, data can be rerouted through other paths.

Network is two or more computers connected either physically or wirelessly. The Internet consists of numerous smaller networks connected together. These networks communicate through a variety of protocols and hardware.

Note, that computers that are connected to network are called host. This term you can often see in tutorials and other posts. Network hosts that share or receive information are classified as server or client.

The internet provides a wide range of services that facilitate communication, information access, commerce, entertainment, and more. For example: Email, World Wide Web(WWW), File Transfer.

Note, that WWW is not the Internet. World Wide Web (WWW) is a system of interconnected public webpages accessible through the Internet.

Infrastructure of the Internet 📡

How exactly computer from your home and any other computer can reach computers from all over the world? Here are some of components that make this possible:

Routers and switches are intermediary devices that manage the flow of data between and inside the networks. They ensure data packets find the most efficient path from the source to the destination.
Modem is a computer hardware that transforms data from digital format to a format suitable for wireless transmission.
Inernet Service Provider (ISP) is a company that manages high-performance routers that are linked together and can also access other ISP's routers.
Submarine cables are fiber optic cables laid on the ocean floor to connect continents, enabling high-speed internet communication between regions.

Note, that fiber optic cables are used to transfer data over long distances, as they have much lower attenuation compared to copper cables. If you want to dive deeper in how the submarine cables transfer data between continents, I recommend to watch this short video.

Interesting fact: The data that is transferred through the Internet moves with speed that is close to speed of light, that is why you can download your videos so fast.

Data transfering through the Internet 🗃️

TCP/IP - suite of protocols that defines how information moves from sender to receiver. It is commonly used in the Internet. The key component of TCP/IP is IP adress (unique numerical adress assigned to every device on the Internet).

TCP/IP can be understood in terms of layers:

Application Layer - defines how application uses the network (for example HTTP for communication between browser and web-server)
Transport Layer - creates and contains conversations between application processes on host (Can be either TCP or UDP)
Network Layer - data is being broken into packages in order to be delivered fast (uses IP headers so data from one host can find it's way to another host)
Data Link Layer - delivery of traffic on a single portion of computer network
Physical Layer (transmitting data through physical network connection)

Packages or packets, are small units of data transmitted over a network. When large amounts of data need to be sent, they are broken down into smaller packets for efficient transmission.

Example of communication between web browser and web server on the Internet using TCP/IP:

Client prepares HTTP request. (HTTP is the underlying protocol used for communication on the World Wide Web)
TCP Header is added to the HTTP request, forming a segment.
Segment is broken into packages. IP Header(mostly IP adresses of client and server) is added to each of packets. (When the packets arrive, host strips off IP Headers and reassembles the packets into original data).
Ethernet Header (Mostly MAC-adresses of computers in subnetwork) and Ethernet trailer are added to every packet. This creates Ethernet frame
Data is transmitted through physical connections.

Summary 📝

Internet is a complex network of interconnected computers that communicate through TCP/IP protocol.

Thank you for reading, leave a comment if you want and never stop learning!💖