Since internet speed varies for everybody and people don't have time to wait for your website to load, it makes the performance very important. All big and growing companies prioritize fast and seamless user experience because they know that people of today's age are not used to waiting around. Amazon calculated that if the page load slows down with 1 second, that could cause them to lose 1.6$ billion in sales each year. Google calculated that if their search results slow down 4/10 of a second they could lose up to 8 million searches a day, resulting in them losing profit on their ad revenue. Now there are a lot of ways to make your code more performant and your website faster, let's dabble into the different ways to do that.
Let's first review what happens when someone visits a website while browsing the web. There is a client/browser and a server, you make a get request to the server with the URL (www.)example_site.(com), then that server returns an HTML file, and after receiving an HTML file it parses through the different tags and maybe finds out a link tag containing CSS required for the styling.
THE CLIENT, THE SERVER, AND THE NETWORK TRANSFER
The client, the server, and the network transfer are where the work happens to display a website. This gives us 3 ways to optimize the speed of your website and application and thereby improving customer or user satisfaction, retention, and conversion.
So the first thing we can improve on is the front end and rendering of the client view, the next thing we can improve on is the network transfer of files and requests and reduce the network latency. And the third place we can improve on is the backend.
The Network transfer optimization
When it comes to network transfer optimization we can minimize the text files with build tools which will usually delete the white space in the code making it lighter, we can minimize the images and use lower size images on smaller screens, we can also pick the right file format for the images based on how they look and what you want to use them for. For example, if the picture is colorful then we should make the format jpg, if it's going to be transparent then SVG format works best, gif for animation and png for simple pictures with few colors, so maybe something like a logo.
Another thing that can help network optimization is delegating the number of files that can be delivered at a time. By limiting the files delegated in the request process the website won't be overloaded and speed down but rather be lighter on its loading, for this, we bundle the info into one file. And we can also use media queries to change the size based on viewport size and also delete metadata resulting in a faster website.
The Critical Render Path optimization
Let's talk about what happens after the files arrive in the browser and how we can optimize this step. After the HTML arrives, the browser commences building what we call the DOM(Document Object Model). And when the browser parses or reads the HTML, it incrementally generates a tree model of the HTML tags needed to build the website.
And this DOM describes the content of the webpage, but as its parsing, through the HTML it encounters a link tag that's asking for a CSS file. So it requests a CSS file from the server and fetches it for use and then continues generating the DOM and creating the structure of the website. After finishing with the DOM and fetching all the CSS files the browser starts creating the CSSOM.
After all those processes are finished, the browser then combines the DOM and the CSSOM into a render tree. This render tree has both the information from the HTML and the styling and layout information from the CSS. By combining the DOM and the CSSOM the browser constructs this render tree so that it knows what to exactly render on the page. The browser then forgets the server files and just uses the render tree to paint and display the website, and then at the end of all that we will finally have a website.
This is called the critical render path, which is one of the most important concepts for optimizing browser performance. This is the path the browser takes to display the website on the screen. Even though it may seem like a long process, in real life it happens extremely fast. And just like we can optimize the network performance, we can do the same thing with the critical render path.
The second step is optimizing the CSS, and one thing we can do is load what is necessary by not repeating the same code multiple places. Another thing we can do is code CSS that only renders the components that are needed, for example, if we refresh a page then the CSS will render the components that are in the view first on top of the page, this is called above the fold loading.