Skip to main content

Front-end Performance

· 7 min read
Bruno Carneiro
Bruno Carneiro
Fundador da @TautornTech

Introduction​

This is a very important topic because it directly impacts how an application is presented to the user. If this topic is neglected, no matter how good your site or application's purpose is, it may end up suffering from slowness and unnecessary resource usage, affecting the end user — who may give up on using the application altogether. Imagine an e-commerce site where product pages load slowly; you would certainly give up on continuing to use it.

Web application optimization is something fundamental that is often overlooked. Performance improvement aims for speed, responsiveness, smoothness, resource efficiency, and much more. There are various strategies to minimize page load times and reduce server response times, making the system much more appealing to the end user.

There are many ways to approach this topic. In this article, I bring some key areas that are very relevant for making your application more efficient, with smarter resource usage, and delivering all the speed and reliability benefits to the end user.

Why Does Performance Matter?​

Performance optimization directly impacts three crucial aspects of an online system:

  1. Conversions: Research conducted by Unbounce indicates that 70% of customers consider page speed a decisive factor in their purchasing decisions. People are increasingly impatient and want faster content.

  2. Visibility: Research by Backlinko shows that Google's PageRank algorithm prioritizes site performance in its listings. To appear on the first page, a site must have an average load time of 1.65 seconds. This accounts for the full load of the home page including assets, HTML, CSS, and JavaScript. Content and tools for this are very important.

  3. User Experience (UX): A faster, more responsive site significantly improves customer satisfaction and trust.

Essential Performance Metrics​

For effective optimization, it is crucial to monitor the following metrics:

  • Page Load Time: Total duration to load all elements of the application;
  • Time to First Byte (TTFB): Time until the first byte of data is received;
  • Time to Interactive (TTI): The moment the page becomes fully interactive;
  • First Contentful Paint (FCP): Time to render the first piece of content;
  • Largest Contentful Paint (LCP): Time to render the largest visible element;
  • Total Blocking Time (TBT): Total time the main thread is blocked;
  • Number of HTTP Requests: Total number of requests to the server.

Fundamental Optimization Techniques​

Here I list some techniques to make the application more efficient, addressing the metrics mentioned above.

1. Efficient Resource Management​

Lazy Loading​

Lazy Loading is a technique that allows loading only the parts that have been requested based on user interaction, without needing to load all files before they are needed. Frameworks like React have built-in support for this approach, considerably improving the application's performance and smoothness.

  • Viewport detection with the Intersection Observer API;
  • Prioritization based on user metrics;
  • Optimized placeholders during loading;
  • Graceful fallback for unsupported browsers;
  • Route-based file loading.

Code Splitting​

Code splitting is the process of breaking code into smaller files, improving loading and avoiding download blocking. This allows the page to load progressively, downloading multiple files simultaneously. Code splitting should follow specific patterns:

  • Route-based splitting for route-level loading;
  • Component-based splitting for complex elements;
  • Vendor splitting for dependency cache optimization;
  • Dynamic imports with prefetch for likely routes.

2. Asset Optimization​

Images​

Image optimization enables faster loading and more efficient use of internet and application resources. Large images are a problem for Web/Mobile applications, and with simple changes we can achieve great benefits. Always consider image processing, both for display in the application and for upload and storage. Care must also be taken to ensure images are not distorted or unreadable. Quality and speed must go hand in hand. Key points for image optimization:

  • Adaptive format: WebP with fallback to traditional formats;
  • Art direction with the picture element;
  • Appropriate pixel density with srcset and sizes;
  • Intelligent compression based on visual content;
  • CDN with automatic optimization and caching.

Minification​

Strategies for reducing file sizes:

  • Tree shaking to remove unused code;
  • Differential compression with Brotli or other tools for this purpose, such as gzip;
  • Analysis of dependencies and duplicate files;
  • Optimized source maps for production environments;
  • Strategy to make files smaller and more efficient for the browser.

3. Content Rendering Optimization​

Critical Path Optimization​

Optimization of the critical rendering path:

  • Identification and prioritization of CSS;
  • Asynchronous loading strategies for non-critical/non-essential resources;
  • Preconnect for important external domains;
  • Resource hints (preload, prefetch, preconnect).

Preventing Render Blocking​

There are several approaches to avoid render blocking due to file size, API fetches, and other factors:

  • Asynchronous JavaScript with prioritization;
  • Web fonts with font-display: swap;
  • Progressive component loading;
  • Fallback to keep the user waiting gracefully;
  • Parallel requests.

4. Runtime Performance​

DOM Optimization​

Some strategies for optimizing the DOM can yield significant gains in the application:

  • Virtualization for long lists (imagine rendering 300 items in a li — the system may simply freeze);
  • Event delegation for better event management;
  • Debouncing and throttling of frequent events;
  • Element recycling for smooth animations.

State and Memory Management​

Practices for scalable applications:

  • State normalization to avoid duplication;
  • Intelligent memoization of components and calculations;
  • Optimized garbage collection;
  • Memory leak monitoring.

5. Infrastructure and Delivery​

HTTP/2 and HTTP/3​

Maximizing the use of modern protocols:

  • Strategic server push;
  • Optimized multiplexing;
  • Stream prioritization;
  • QUIC for faster connections.

CDN and Edge Computing​

This is a very important and underexplored point. Many applications barely make efficient use of this resource:

  • Multi-CDN for redundancy and performance;
  • Edge caching with selective invalidation;
  • Edge functions for processing close to the user;
  • Geographic route optimization.

Monitoring and Analysis​

Essential Metrics​

Continuous tracking of:

  • Core Web Vitals (LCP, FID, CLS);
  • Time to Interactive (TTI);
  • First Contentful Paint (FCP);
  • Time to First Byte (TTFB).

Analysis Tools​

Recommended set of tools:

  • Lighthouse: Built into Chrome, it allows you to record and analyze page load performance and runtime behavior, providing detailed insights into site behavior.
  • WebPageTest: An open-source tool for measuring and analyzing web page performance on real devices. It allows you to choose different locations and browsers for comprehensive testing.
  • Real User Monitoring (RUM): An approach for capturing performance metrics from real user interactions with your site, providing accurate data about the user experience.

Final Thoughts​

This is a very important topic and also a difficult one to apply. Building web applications is not a complex task; many beginners are already creating their own systems. However, building a well-crafted system that truly scales is the real challenge here.

Performance optimization is a continuous process that requires constant attention and adaptation to new technologies and web standards. For each library/framework, there may be other approaches that help with this topic, such as Hooks and the use of SSR and Lazy Loading with React.

The success in implementing these techniques depends on several factors, as mentioned here. There are many others, but it is worth summarizing the main ones:

  • Consistent monitoring
  • Frequent testing on different devices and network conditions
  • Analysis of real user metrics
  • Constant updating with industry best practices

I hope this material helps give you an initial idea of how rich and important this topic is. There are many other techniques and possibilities for improving application performance, always keeping in mind the needs of the user, the project, and the purpose for which it was built.

tip

If you are interested in a performance and optimization topic specific to React, I have prepared an exclusive chapter on this subject in my book

https://www.tautorn.com.br/react-beyond

References:​