View All SchoolsClaim My SchoolLogin

Are You Prepared for Resumption?

Damola Adeola

Damola Adeola

Cover Image for Are You Prepared for Resumption?

Page speed and performance are some of the key factors that determine if a user will stay on a website or not. Any website that takes over ~2 seconds for its initial page load isn’t performant. Today's users do not have the patience or attention span to wait long before getting a response on a site. Hence, it has become paramount for any website built today to be fast and responsive, especially during the initial load time.

Have you ever wondered why it’s taking time for your page to load whenever you visit a website? Did you check your network and confirm everything is okay? This is most likely due to the large Javascript bundle being fetched and parsed in the browser. If the JS bundle isn’t optimized, it will result in lower performance and higher user load time.

This article will review strategies and methods to reduce our overall Javascript bundle when deploying to production.

Prerequisites

This article assumes that you have:

  1. Node installed on your local machine
  2. yarn or npm installed on your local machine (npm comes pre-installed with node)
  3. A text editor installed, e.g., VsCode.
  4. Basic knowledge of HTML, CSS, Javascript, and the terminal. (see the link for a refresher on them)
  5. Familiarity with at least one UI Framework, i.e., React, VueJS, or Angular.

Before we proceed, we must understand why we must ensure our Javascript bundle is optimized and reduced to the smallest bundle size before deploying to production.

Why Do We Need To Ship Smaller JS Bundles to Production?

Shipping small Javascript bundles to production is paramount as it's one of the major factors contributing to a website's overall performance. It determines how long a user waits for a page, whenever it’s visited, and what kind of experience the user gets on the webpage, especially for first-time users. It’s in the best interest of the business owners to ensure they don’t keep users waiting while their page is loading.

In the background, whenever a page is visited, the browser makes an HTTP request to the server to download the assets and files needed for that page. The Javascript files are then parsed and executed before rendering occurs. After completing these processes, user interaction becomes active on the page. All these depend on how large the Javascript bundle is, so optimizing and reducing the overall bundle size is a necessity every serious business owner must perform.


  • How it works
  • Blog

Join our Community

We’d love to hear from you