In our continuous pursuit of page speed, we often find ourselves circling back to the same point. Despite the efforts of product, marketing, and growth teams to motivate tech teams, tasks that could improve site performance are often postponed due to the need for refactoring, and even when they are done, they don't always yield complete results. In this cycle, it is beneficial to consider some insightful perspectives on achieving real performance. For example, what lessons can we learn from the speed of React.js and Vue.js or their SSR (server-side rendering) extensions like Next.js and Nuxt.js compared to other platforms? Isn't it time to optimize the MBs of jQuery and CSS files? When will large companies that sacrifice their web performance to ill-informed front-end developers wake up? Let's address these questions one by one.
Why are Next.js and Nuxt.js Based Sites Fast?
The Next and Nuxt platforms, which are SEO-friendly structures built on React and Vue, stand out for speed performance. But why are these platforms so fast?
React.js and Vue.js are component-based frameworks that break down each page into sub-components, as shown below.
Let's take a real-world example to illustrate this point: an e-commerce listing page. This listing page can be thought of as having the following sub-components:
- Header
- Listing
- Listing entry information
- Page title
- Breadcrumb
- Product count
- Filter
- Category filter
- Price filter
- ...
- Sorting
- Product cards
- Product photo
- Product details
- Product name
- Product price
- Strikethrough price
- Sale price
- Discount rate
- Campaign information
- Pagination
- Category content
- Listing entry information
- Footer
When creating a component-based application with Nuxt.js, each of these components is coded separately and included in the master page. For example, consider a file named ProductPhoto.js. Whatever functions are needed for product photos (carousel, responsive image display, etc.), the JS code is written within this component. Similarly, only the CSS files used by this component are included in it. This means that only the files required by each component are executed if the component is used.
How is this process currently handled on most web platforms?
A script.js file includes code for everything from membership, filters, and cart pages to the menu, which runs on all pages. The result?
Websites with a 3 MB JS file and a 1.5 MB CSS file. The main problem is not just the file sizes but the fact that you can't expect an average Android mobile device's CPU to execute thousands of lines of code within milliseconds. By running only the code you need, you can achieve performance gains.
How to Eliminate Render-Blocking Resources?
Today, 32% of the top 1 million websites use the Font Awesome font library, which averages around 250 KB. Considering asynchronous loading is not preferred due to the flick effect, think about how many fonts are visible on the first screen of a page when it opens on mobile or desktop. A short study on 50 different platforms found an average of 3.4 icons used (most commonly: cart, user, menu, notification). Thus, to load just four icons without issues, we load the entire library.
How do advanced JS frameworks manage this? By importing only the SVG format of the icons used in the relevant component, eliminating the need to load entire font or CSS libraries.
What Do Bootstrap vs. React JS Usage Tell Us?
Bootstrap JS library has a market share of 26% across all sites worldwide, while React usage is around 4%. Bootstrap is popular for its flexibility and ease of use, enabling quick development. However, this flexibility comes at a cost: general JS functions, extensive code coverage, and functions for features you may never use are included in your project.
So, let's ask: What does a more than 100% increase in usage from the top 10,000 to the top 1,000 sites indicate? It shows that the best are turning details to their advantage to be even better.
In summary, Instead of rewriting our sites with technologies like Next, Nuxt, Angular, React, Vue, etc., we should understand what these technologies do right for speed and apply these best practices to our web applications.
