https://www.youtube.com/user/CNInfotech

Front-End Performance Checklist 2021

Web performance is often a tricky technical concern that involves a myriad of aspects to be looked after. It affects usability, accessibility, search engine optimization, and even the design decisions when in the workflow. That’s why performance or more specifically front-end performance should get monitored, measured, and improved frequently.

Moreover, the intricacy of the web puts forth new challenges due to which it gets difficult to maintain track of metrics. So, here is the 2021 checklist for the improvement of front-end performance. This will surely help to confirm faster response times, smoother user interaction, and optimum bandwidth for users.

Planning and Metrics

  • Set up the performance culture: Here, you should consider business stakeholder buy-in that helps to sustain long-term performance. Factors such as a strong alignment between dev/design and business/marketing teams, consideration of common complaints from customer service and sales team, analysis of high bounce rates and conversion drops will help improve performance. Also, try performance experiments on mobile and desktop to measure outcomes, and here Google Analytics is the best to do so. Remember to keep your performance goals trackable, granular, and substantial.
     

  • Try to be faster than your fastest competitor: By examining your key competitors, gather metrics about their performance on mobile and desktop and decide about the threshold that helps to outpace them while analyzing user’s experience. Here, you can either use Chrome UX Report or Treo. Take into account loading sequence and trade-offs during the design process. Once you’ve established a strong performance culture in your organization, aspire to be 20% faster than your former self to keep priorities intact as time passes by.
     

  • Go for the right metrics: Learn about the metrics that matter most to your application. Generally, it will be defined by how fast you can start to deliver the most important pixels of your interface and how fast you can provide input responsiveness for these rendered pixels. A few of these useful metrics include Time to Interactive (TTI), Largest Contentful Paint (LCP), First Input Delay (FID), or Input responsiveness, Total Blocking Time (TBT), Speed Index, Cumulative Layout Shift (CLS), CPU time spent, Component-Level CPU Costs, Ad Weight Impact, FrustrationIndex, Deviation metrics, Custom metrics, and more. Hire an expert developers who can help you out to measure the marics
     

  • Optimization of core web vitals: In May 2020, Google publicized Core Web Vitals that is a set of new user-focused performance metrics, each signifying a distinct facet of the user experience. Google recommends a range of suitable speed goals for them, where at least 75% of all page views should surpass the good range to outdo this evaluation. LCP should occur within 2.5s, (FID) < 100ms, (CLS) < 0.1. You should combine Web Vitals with your custom-tailored metrics so that you can know where you stand in terms of performance.
     

  • Collect data about the most common device types: You can look into current Amazon Best Sellers for your target market. To closely observe the performance impact, you could even launch 2G Tuesdays or set up a throttled 3G/4G network in your office for quicker testing. For a good performance picture, performance metrics including lab data and field data are vital where Synthetic testing tools and Real User Monitoring (RUM) tools are used respectively to collect data.
     

  • Test with a ‘clean’ and ‘customer’ profile: Turn off the anti-virus and background CPU tasks, get rid of background bandwidth transfers, and test with a clean user profile without browser extensions to avoid distorted results. Then, get an idea about the browser extensions that your customers use frequently to conduct a test with dedicated customer profiles.
     

  • Distribute the performance goals across the entire team: This helps shun misunderstandings down the line. Decisions including design, marketing, or anything in-between have a great effect on performance, hence allocating responsibility and ownership across the whole team would streamline performance-focused decisions later on.

Deciding on realistic goals

  • For smoother user interaction, response time should be 100-millisecond. Also, each frame of animation should be completed in less than 16 milliseconds that lead to 60 frames per second.
     

  • Aim for Largest Contentful Paint (LCP) of less than 2.5s, Time to Interactive (TTI) under 5s, and acceptable First Input Delay (FID) under 100ms–70ms.
     

  • To attain the above goals, the Critical file size budget should be a maximum of 170KB (gzipped). However, you may need to change the budget depending on network conditions and hardware limitations. 

Defining the Environment

  • Setting up your build tools: Whether you are using build tools like Grunt, Rollup, Gulp, Snowpack, Webpack, Parcel, or a combination of tools, it is perfectly fine as long as you are getting required results and you don’t get any problems maintaining your build process.
     

  • Keep progressive enhancement as the guiding principle: This is a safe bet of your front-end architecture and deployment. First, go for designing and building the core experience, then enhance the advanced feature’s experience and resilient experience, including capable browsers.
     

  • Opt for a strong performance baseline: With a 170KB budget(mentioned above) you can have a good baseline as it contains the critical-path HTML/CSS/JavaScript, router, utilities, state management, framework, and the application logic. However, carefully examine network transfer cost, the runtime cost, and the parse/compile-time of the framework of our choice. Implementing JavaScript is still the key bottleneck and hence to be more impactful, it’s vital to pay close attention to script execution time and network.

Few other factors in this category that you need to consider for improving performance include; evaluation of framework and dependencies, Client-side and server-side rendering, statistical content distribution from a CDN, use of PRPL pattern and app shell architecture, optimization of the API’s performance, and picking CDN wisely. 

Assets Optimization

  • Using adaptive media loading and client hints: For sites with a heavy media footprint, adaptive media loading (e.g. React + Next.js), serves as a poor experience to low-memory devices and slow networks while a great experience to high-memory devices and fast networks.
     

  • Using AVIF: This is an open, royalty-free image format that holds up lossless compression, animation, lossy alpha channel, and also deals with sharp lines and solid colors (that was an issue with JPEG).

Also consider Brotli for plain text compression, utilization of WebP, use of responsive images as background images, right optimization of JPEG/PNG/SVGs, video optimization, and optimization of web font delivery, etc. under assets optimization. 

Build Optimization

  • Define priorities: Take a look at an inventory of all your assets and then further divide them into groups in a spreadsheet. Define the core experience first, then enhancements, and then extras.
     

  • Use Webpack features namely tree-shaking, scope hoisting, and code-splitting: Tree shaking helps clean up your build process only considering production code, scope hoisting detects the point at which import chaining can be flattened and converted into one inlined function, irrespective of the code and the code splitting divides the codebase into portions that are used as per demand.

 

  • Deferring of native JavaScript modules in production: Here, two separate JavaScript bundles are compiled and the native JavaScript module scripts are deferred by default. This helps to decrease the blocking of the main thread (during HTML parsing) by dropping the number of scripts the browser needs to process.
     

  • Offload JavaScript into a Web Worker: Offloading heavy JavaScript into a Web Worker helps to lessen the negative impact on Time-to-Interactive.
     

  • Discover and rewrite legacy code with incremental decoupling: By revisiting your dependencies, estimate the time required to refactor or rewrite legacy code that is the root of the trouble, and then start with incremental decoupling.
     

  • Reduce the size of your JavaScript bundles: Here, you can use webpack-libs-optimizations that avoid overhead by removing idle methods and polyfills during the build process.
     

  • Using partial hydration: In this method, instead of doing server-side rendering (SSR) and sending the entire app to the client, small chunks of the app's JavaScript are delivered to the client and then hydrated.
     

  • Set HTTP cache headers properly: It’s necessary to double-check cache headers including expires, max-age, cache-control, and other HTTP cache headers are set correctly.

In addition, also check to improve Webpack's output, offload hot paths to WebAssembly, serve legacy code only to legacy browsers, identify and remove unused CSS/JS, optimize the strategy for React/SPA, use predictive prefetching for JavaScript chunks, and constrain the impact of third-party scripts. 

Delivery Optimizations

  • Use defer to load critical JavaScript asynchronously: Start rendering the page with the defer and async attributes in HTML.
     

  • Load images progressively: Adding progressive image loading to your pages is a lazy loading to the next level. First, you can load blurry or low-quality images and then the full quality versions.
     

  • Generate and serve critical CSS: For browsers to start rendering your page quickly, it’s good to collect all the CSS involved in rendering the first visible portion of the page (that is "critical CSS" or "above-the-fold CSS") and incorporate it inline in the <head> of the page. 
     

  • Try regrouping your CSS rules: When the main CSS file is split, the browser will retrieve critical CSS with high priority, and rest with low priority. 
     

  • Using stream responses: By using the entire HTML stream response, HTML rendered during early navigation requests gets benefited from the browser’s streaming HTML parser.
     

  • Use service workers for caching and network fallbacks: Service workers are helping to send smaller HTML payloads that create responses programmatically. It can request minimum data (e.g. an HTML content partial, JSON data, or a Markdown file) from the server and then programmatically transforms it into a full HTML document.
     

  • Running service workers on the CDN/Edge: In A/B tests, when HTML has to change its content for different users, service workers on the CDN servers are used to handle the logic. Thus, it helps tweak performance on the edge as well.
     

  • Networking and HTTP/2: It covers OCSP stapling, SSL certificate revocation, IPv6, running assets on HTTP/2 or HTTP/3, servers and CDNs support with HTTP/2/ HTTP/3, HPACK, and bulletproof security.   

The list can be extended as; defer rendering with content-visibility and decoding with decoding="async", making your components connection-aware and device memory-aware, warming up the connection to speed up delivery, optimizing perceived and rendering performance, and prevent layout shifts and repaints.

Testing and Monitoring

  • Optimization of auditing workflow: Correct settings in place will save quite a bit of time for testing. AutoWebPerf is a recently released modular tool that automatically collects performance data from multiple sources.

  • Maintaining a performance diagnostics CSS: It can underline lazy-loaded images, legacy format images, unsized images, and synchronous scripts.

  • Set up continuous monitoring: Continuous monitoring tools such as Site speed, SpeedCurv, and Calibre give a thorough picture of your performance with automatic alerts.  

For this category, don’t forget to test in proxy browsers and legacy browsers, test the performance of 404 pages, test the performance of GDPR consent prompts, and test the impact on accessibility.

Wrap Up

Though the front-end performance checklist 2021 given above is quite big, it summarizes almost every point for optimization. You can refer to this checklist as a general guide and make another list of issues that apply only to your context. Hope the list is helpful to have great performance results!

dofollow

Share
LEAVE A REPLY
Related Post
COMMENTS
  1. author
    27 Aug 2019
    Tomas Mandy

    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius

    1. author
      27 Aug 2019
      Britney Millner

      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius

  2. author
    27 Aug 2019
    Simon Downey

    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius