Performance Improvement of Front-end Stack

Introduction

Just Imagine you are visiting your favorite online store and the webpage takes 50 seconds to load.

Will you wait to shop there?

In this hyper-fast world, no one has enough patience. We will drop it and move to another online shopping destination.

This is the reality of today's “instant” world. That is why we must make sure our site's performance is also fast and in turn prevent the loss of potential shoppers.

What is Web Performance? It's all about the speed of serving the web pages through the user’s browser that drives the perceived user experience.

Core Web Vitals in web development

“It's rightly said that if we can't measure it then we CAN’T improve it”

All thanks to Core Web Vitals, which helps us measure Web Performance. Speed & responsiveness are 2 prime factors for page experience and the backbone for calculating vitals as well.

3 pillars of page experience can be summarized as:

• LCP (Largest Contentful Paint) - It measures how quickly our largest element in the viewport renders. The ideal render time should be < 2.5 seconds.
• FID (First Input Delay) - It impacts how quickly our site should be accessible or interactive - it should be interactive within 100ms
• CLS (Cumulative layout shift) - measures the cumulative score of all unexpected layout shifts within the viewport that occur during a page's entire lifecycle. Block should be at the same position while loading & after loads.

Tools like Lighthouse & Page speed highlight these vitals & help you take the right steps towards a better user experience

How we can Increase/Maintain Web Performance?

Now that we have a foundational understanding, let us discuss some methods that have helped us improve performance in our multiple projects.

• Reducing N/W Assets Size
• Resource Hints (Preload, Prefetch, Prerender)
• Images (WepP, Responsive)
• Lazy Loading
• External Fonts (FOIT, FOUT)
• CDN

1. 1. Reducing N/W Assets Size
      
      It’s natural to think that if we could decrease the N/W assets/resource size, then it will lower the burden on the browser’s main thread and speed should improve.
      
      So, to achieve the goal, we tried the following:
      
      • Removed external 3rd Party Packages like jQuery and instead used plain JS
      • Code Splitting:
        - Improved Manual Code Splitting for better bundling of chunks
        - Upgraded to webpack v5 from v4
      • Dynamic Imports
        Non-critical view/HTML/JS was loaded dynamically using dynamic imports which reduced initial DOM Size
      • Reduced the API Response Size coming from the Backend by keeping only relevant fields needed for rendering on the Front end.
      • Tools that helped us achieve the above were Chrome Coverage Tool, and Google Lighthouse Reports
      
      Impact: Reduced DOM Elements / HTML Size + JS Size + CSS Size
   2. Resource Hints
      
      • Preloads:
        Preloads tell the browser to download & cache a resource like a script or CSS as soon as possible for current navigation. It does not mean you preload everything, but it means you only preload critical & external assets to increase the speed of the web page.
        
      • Prefetch:
        Low Priority Resource Hint for fetching next navigation resources during browser’s idle time.
        In nutshell, it tells the browser to start fetching the resource and store it in memory, as it would need it soon for the next navigation. As an example, if the user is on the Shipping page & reviewing the order & address, we know the next destination would be the billing page, and so we would preload assets of the Billing page to increase speed on the next navigation
        
        3 types of prefetching:
        
        a. Link
        Prefetch resources inside the browser cache designated with
        link tag with prefetch attribute
        
        
        b. DNS
        dns-prefetch = Resolve only domain name before resources get requested. **
        
        
        c. Prerender
        Prerender caches the entire page instead of the designated resource. This needs some caution to ensure that the prerendered page is indeed the next page.
        
        
      • Preconnect:
        While working with APIs, browsers can establish a connection prior to the actual request/API call.
        
        
        Resolve domain name + TCP connection + TLS handshake.
        
        *Saves round trip latency
        
        Impact: Faster fetch / load without blocking the main thread
        
        
   3. Images
      It is tough to imagine ecommerce sites without images and this is the major contributor to LCP.
      We tried several experiments to render images faster and here are some of the successes:
      
      
      • Attributed height & width:
        Appropriate dimensions can improve speed, user experience, SEO rankings, and ultimately sales through the ecommerce website.
        
        
      • Image Format:
        Webp is a modern image format that provides superior lossless & lossy compression for images on the web.
        
        Code Snippet:
        
        
        Picture tag here works as a progressive enhancement where it gives options to Browser based on support/fallback.
        
        ** Do check whether your browser supports Webp format or not. The second-best option is to go for JPEG in case Webp format is unsupported .
      • Responsiveness:
        Instead of using the old way of media query OR JS to load images of different dimensions, the srcset attribute provides controls for loading of responsive images directly via HTML.
        
        For instance:
        
        Case 1: Pixel Density is default i.e., without zoom
        
        **Without Zoom, lake_100.jpg loaded on the page
        
        Case 2: Pixel Density is 2x i.e., 200 % zoom
        
        **With 200% Zoom, lake_720.jpg loaded on the page
      • Blur Effect:
        We loaded skeleton/default placeholders in containers like Hero Banner, Product Items, and Carousal to help reduce LCP, CLS, FID.
        
        **Product Item having default placeholder before actual image loads
        
        Impact: Reduced N/W assets size, load time
        
        
   4. Lazy Loading (HTML-Components, JS, and Images)
      • This concept is a widely used technique to defer components/JS or images which are not critical to your user/viewport and are also not needed for SEO.
        
        *IMG_3 loading is deferred as it's not part of the viewport and will load only once it intersects with the viewport.
      • Lazy Loading Implementation Ways:
        
        Option 1:
        Use chrome native support
        

        <img src="encoraBlog.jpg" loading="lazy" alt="..." />

        
        loading attribute supports these values:
        
        lazy - Defer a load of assets till it intersects with the viewport
        
        eager - loading asset immediately without thinking about its positioning
        
        auto - Default lazy loading
        
        Option 2:
        Use external npm packages like react-lazyload or write your custom intersection observer.
        
        
      • Minimum height of the components which contribute often to CLS (Example: Hero Banner, Carousel Container, Eyebrow Banner, etc.)
        
        **min-height css style is the magic that solved 90% of our CLS issues and helped us turn CLS from Red to Green.
        
        Caution: Do not overuse it and do check the impact on SEO as bot crawlers are not able to read everything which comes post scrolling/lazy loaded.
        
        Also, check https://caniuse.com/loading-lazy-attr based on the support and your use case.
        
        Impact: Reduced DOM Size
        
        
   5. Fonts
      Are you also using external fonts on your site? Here are some best practices we found:
      
      • Preload / hard coding fonts in style tag (inline jsx)
        
        Initially, we used the code snippet inside our document head tag but this caused two approach was
        
        N/W calls – the first one to getcss, and then the actual font from the google server.
        
        We decided to reduce it to a single n/w call by storing fonts on GCP and then referring it in our app directly, thereby saving 1 n/w call.
        
        Sample Code Snippet used in Next Js Project:
        
        Impact: Reduced Flash of invisible text (FOIT) and Flash of unstyled Text (FOUT) Fonts Switch Impact.
        
        
   6. CDN
      CDN is critical to performance when physical servers are geographically distant from users. CDN is used to store versions of content in distinct locations. In simple terms, it is the middleman between server & user. The content is closer now compared to the physical server resulting in faster page load time. For example, Fastly is a modern CDN to go with. Storing Images on CDN can save significant page load time.

Wrapping up

Web Performance impacts sales, User Experience, and SEO Rankings.
In this post, we covered the importance of web performance for an online business and best practices based on our experience.
We wish you luck with better conversions and a better search ranking of your site/business post-performance optimization

References

https://developer.mozilla.org/en-US/docs/Learn/Performance/why_web_performance

https://web.dev/vitals/

https://web.dev/tags/case-study/

About Encora

Fast-growing tech companies partner with Encora to outsource product development and drive growth. Contact us to learn more about our software engineering capabilities.