Especially after it was announced in July 2018 that page speed would be a ranking factor for all sites on mobile, all eyes started looking for the answer to the question of how to optimize my site.
However, when we do research on site speed optimization, we see that the content is generally more superficial and far from an approach that explains what it does and why. In this article, we will explain the page loading steps, what causes a page to open late, at what stage the page does not load for a long time, how you can control this and how you can optimize these steps. In other words, we will try to explain in detail the movements that occur in seconds and sometimes even in milliseconds. If we are ready for page loading speed optimization, let's start.
Technical Parts Before Optimization
1. Critical Rendering Path
Critical Rendering Path, or CRP for short, is the set of steps that begin when you click on a page on your browser and continue until the page is fully loaded.
Page speed optimization is actually the optimization process business owner database of CRP . By observing the steps in CRP, you can understand where your page takes a long time to load and where you can optimize. I will talk about this in the optimization section, I am continuing for now. Let's examine the CRP steps in detail one by one.
The above graph may seem a bit confusing, but don't be! What we call CRP is actually exactly this and it's not that complicated. When a user clicks on a page to enter a site, the browser first looks up the IP address on the DNS server. And gets a response. In the next step, the browser makes a request to the server and says "GIVE ME THE HTML!" The browser starts to parse the HTML source from top to bottom and extracts the skeleton of the objects (title, body, image, p, etc.) in the HTML, which we call the DOM (Document Object Model) tree.
What will happen if it encounters CSS while scanning the HTML source from top to bottom?
When your browser encounters CSS while creating the DOM tree, it stops the DOM process. That's why we call CSS "render blocking". In other words, it stops the rendering process. Here, you can think of your browser as an unplanned worker that moves on to another job without finishing one. But there is a reason for this, I will explain. THERE IS NOTHING ON THE SCREEN YET!
If HTML has DOM, CSS has CSSOM!
The browser that encounters CSS starts to determine the style hierarchy, which it calls CSSOM. After creating the CSSOM, it enters a process called ''render tree'' where it determines which content to display in which style by combining the title, head, paragraph contents in HTML with the commands in CSS. You can think of it as a matching process. For example, it takes the title content from the HTML code, finds the style to display this title content in from the CSS code, and tries to complete the render tree process by matching them.
