Did you know that for every second a potential customer waits for your website to load, you’re losing more and more business. The consumers of this day and age expect for things to load quick. The days of waiting for a site to load up are long gone. If your website isn’t loading quickly, you’re losing money.
Google did some research and found that bounce rates increased dramatically the longer a user has to wait for a website to load. Below is a small snippet of what they found:
Website load times are extremely important. Back in 2009, even when consumers weren’t as expecting of fast websites as today, Amazon found that for every 100ms of waiting, it was costing them 1% in sales. You can read more about this here.
So what can we do in order to fix a slower website? That’s where Webpack comes in to help. Now, this post is just going to talk about what Webpack is and how it helps. It won’t go into the details of how to configure Webpack for your project. This is a post that will help you grasp an intuitive understanding of Webpack.
However, to first understand Webpack, we have to understand how a website loads up in your browser. From there, understanding Webpack’s function is much easier.
The Process of Loading a Website
What seems like magic to load a website is actually a long string of simple steps. The whole process can be broken down into the following components:
- Retrieve IP Address of URL from ISP
- Send a Request to the IP Address
- Build the HTML DOM (Document Object Model) Tree
- Send a Request for Other Files
- Build the CSSOM (CSS Object Model) Tree
- Combine the DOM and CSSOM
- Create the Layout
- Render and Paint Pixels
Let’s go through each one.
1. Retrieve IP Address of URL from ISP
In order to load up a website, you have to contact the server that holds the files of the website. That server can be contacted if you have the server’s IP address. However humans aren’t like computers. We don’t remember IP address, we remember names.
So whenever you type in something like google.com, what’s happening is that you send a DNS request to your internet service provider (ISP). Your ISP will then find the IP address for that URL and return it back to your browser. Now that your browser has the IP address it must contact, we can move onto the next step.
2. Send a Request to the IP Address
Your browser will then send an HTTP/S request to the server using the IP address that you obtained in step one. This HTTP request is generally a GET request since you’re trying to “get” the files for the website.
The server will process your GET request and get the file that you requested. This is generally an HTML file. Sometimes it can be something like a PHP file but I’m going to keep it simple.
This HTML file is then returned over the internet back to your computer. Now that your browser has the HTML file, we can move into the next step.
3. Build the HTML DOM Tree
Now that your browser has the HTML file, it must understand what’s in that file. In order to do this, the browser will create something called a Document Object Model (DOM) tree. If you’re not familiar with the tree data structure, you can read up about it here.
For an HTML file, the root node generally tends to be the <html> tag that we put in the beginning of our HTML files. From there, it will put <head> and <body> as children of the root <html> node. It will do that all the way through the HTML file.
4. Send Requests for Other Files
As a quick side note, when downloading images, it does not block the DOM tree from finishing. However, over a slow internet connection, the images may not show up right away.
Once all your CSS files are done loading, we can move onto the next step.
5. Build the CSSOM Tree
Just how the HTML file is read by your browser, the CSS files will be read as well. While your browser reads the CSS files, it will create a CSS Object Model (CSSOM) tree.
Once this tree is done, we can move into the next step.
6. Combine the DOM and CSSOM
By now, the DOM tree is done and so is the CSSOM tree. These trees are then essentially “combined” to tell the browser what the styling will be for each of the elements in the DOM tree.
Once this combined tree is done, we can move onto the next step.
7. Create the Layout
Your browser will get information about your screen size, pixel density and more to figure out how to divide up the layout for the elements in the DOM. For example, not every device in the world has the same screen size, so how wide would something be in number of pixels if something has a width of 50%.
To make things a bit more complicated, when on a desktop browser, we can generally resize our browser window. Whenever we resize our browser window, the layout has to be updated as well.
8. Render and Paint Pixels
Finally, once the layout is done, your browser will render the HTML elements and apply the styles on them. It will paint each pixel one by one based on the CSS styles.
If you included any images in your site, it must also paint the pixels for that image.
That’s essentially the process that goes into loading up a website. Given our modern computers with powerful processors, if we have a solid internet connection, this process seems seamless. It feels like magic. However, on a slower internet connection, there’s a bottleneck that exists that can ruin the user experience. Specifically, this bottleneck occurs at step four of this process.
That’s where Webpack comes in to help.
How Webpack Speeds Things Up
So in step four of the process above, for each CSS file, JS file or image that we reference out to in our HTML file, we have to send another request for that file.
There’s a latency cost with each request. It takes time for your router to send a request. It takes time for the server to load up the files that need to be returned. It takes time for the server to send the files back to your computer. There are costs everywhere.
Furthermore, if your image files are huge, it will take time to download all those bytes from the server.
What if there was a way where didn’t have to send as many requests and that images were the smallest size possible? That’s what Webpack does.
As for images, Webpack will compress them as much as possible so that whenever a browser requests the image, it can be quickly downloaded.
That’s basically the main purpose of Webpack. It packs things up into neat little files that reduce the number of requests that your browser has to make. It costs less comparatively to download one slightly larger file than to send a bunch of requests for separate files. That will speed up how quickly your website loads up.
Overall, Webpack is just a tool that helps to reduce the number of requests that your browser has to make in order to build the webpage on your computer. It also helps to compress images so your browser can quickly download them.
All of these optimizations can help speed up your website and start to drive more revenue to your website. Remember, each second counts. If you can even shave off a couple seconds on your website load time with Webpack, you’re going to be in much better shape.
Furthermore, Google’s PageRank algorithm is always aiming to provide a better experience to their users. If they can consistently serve websites that load quickly, that will help to keep users on their platform. So if you can make your website faster, you may even get a boost in search term rankings.
If you have more questions about Webpack and what it is, feel free to contact me. My username is SunnyChopper on pretty much every social media out there. Look forward to hearing back from you.