What is Webpack? How Webpack Quickly Speeds Up Your Website and Generate Revenue for Your Business

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:

(Source: Think With Google)

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:

  1. Retrieve IP Address of URL from ISP
  2. Send a Request to the IP Address
  3. Build the HTML DOM (Document Object Model) Tree
  4. Send a Request for Other Files
  5. Build the CSSOM (CSS Object Model) Tree
  6. Combine the DOM and CSSOM
  7. Create the Layout
  8. 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

However, when reading the HTML file, it may across some CSS or Javascript files that live on the server. When this occurs, your browser will send out another request for these files.

For each CSS or Javascript file that lives on the server, it must make a request for it. It also blocks the DOM tree from finishing. Furthermore, if you have any images that you are using our website, your browser has to send out a request to download that image as well.

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.

Sometimes, our Javascript files will effect our layout as well, so our browsers have to work with the Javascript files to create the layout 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 something in your Javascript file changes something in the DOM (such as deleting an element or changing the style of an element), it must re-render those elements and paint the pixels again.

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.

When developing your website, Webpack will analyze your code and check which CSS styles and Javascript functions are being used and create a singular CSS and JS file. It will also minify it. Minifying, without getting into details, is a way to reduce the size of a file. For example, you can replace long variable names with shorter ones so you don’t use as many bytes. You can also delete all whitespace as that also takes up bytes.

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.

Conclusion

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store