Rendering long select lists in react can be very heavy and inefficient. The article shows how to use a common virtualization technique to reduce render time and significantly improve performance.

Efficient rendering of really large lists with react-select

<h2>Introduction</h2>
Using React as the UI framework of a web application always leaves developers with many choices through the development process. One of the most popular decisions to make is which Select component to use. React-select (<a href="http://react-select.com">react-select.com</a>) is the first choice when a select component (with many other features) is required - it has 20.5k stars on GitHub and 2 million weekly downloads on npm.&nbsp;
Like any common open-source component, react-select solves the common use cases very well. However, at the edges, react-select falls short sometimes and calls for customizations.
The problem we want to tackle with react-select is quite common: we want to allow selection from a large list of options. How large? We've seen the component start to break at around 1,000 options.&nbsp;
Keep reading and we'll show you how it breaks, and also demonstrate to you how we improved the performance by using another open-source library - <a href="https://github.com/bvaughn/react-window">react-window</a>. We'll also dive into the react-window implementation to understand how the improvement is achieved.
By the way - the entire code used in the post is public.

<h2>The problem - React select with large lists</h2>
To demonstrate the problem, we've created a new project with create-react-app. We added the react-select component by running `<code>yarn add react-select</code>`.
The most simple code for displaying a select component would be: 
<pre class="language-javascript"><code>import React, { useState } from "react";
import Select from "react-select";
import "./App.css";
 
const options = [...Array(100).keys()].map(idx =&gt; ({
 value: `value-${idx}`,
 label: `label-${idx}`,
}));
 
function App() {
 const [inputValue, setInputValue] = useState("");
 
 return (
 &lt;div className="App"&gt;
 &lt;header&gt;
 &lt;h1&gt;React-select With Large Lists&lt;/h1&gt;
 &lt;/header&gt;
 &lt;div style={{ width: "30%", margin: "auto" }}&gt;
 &lt;Select
 inputValue={inputValue}
 onInputChange={val =&gt; setInputValue(val)}
 options={options}
 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
}
 
export default App;</code></pre>
 
This would result in a high-performance select component, with 100 options. We'll use the same code to generate a large list of items to include in the select.
The following two gifs compare the performance of a select with 100 options to that of 10,000 options: 
<table>
<tbody>
<tr>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHNCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9b68801905f0b24ee608026b098b1ed251bb767f/1WNemZzm8ZLPIPcxs6Vse0ozqnXA1T0AGCLEZEFY.gif" alt="React select 100 options" width="595" height="455" /></td>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHdCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e361afc06a6675d4e27c79df72680391bebd6456/1Y89oZvmrGG0DmPHokp_6W54JjKhvx3wLwQskscw.gif" alt="React select 10,000 options" width="514" height="455" /></td>
</tr>
<tr>
<td>
React select 100 options
</td>
<td>
React select 10,000 options
</td>
</tr>
</tbody>
</table>
&nbsp;
The performance degradation is significant. With 10,000 options, the react-select component takes about 5 seconds to open its options menu. Why should it take so long? In both cases, only the first 8 or so options are visible. This is the first hint to how react-window approaches this problem - let's see more details.

<h2>React-window to the rescue</h2>
The key to improving the performance is limiting the rendering of the list. It's enough to only render 8 items while keeping the same usability as rendering all 10,000 items.&nbsp;
React-window is another prevalent open-source library, with 8.5k stars on Github and 300,000 npm downloads. React-window is used to render large lists in a virtual way: only the visible elements of the list are actually rendered.
How do we combine the two? Lucky for us, react-select exposes an API that allows us to replace any of its core building blocks. In this case, we would like to replace the MenuList component with our own, custom, MenuList. The new declaration of react-select would look like so:
<pre class="language-javascript"><code> ...
&lt;Select
 inputValue={inputValue}
 onInputChange={val =&gt; setInputValue(val)}
 options={options}
 components={{
 MenuList: CustomMenuList,
 }}
/&gt;
...</code></pre>
And now in our own CustomMenuList component, we utilize react-window to virtually render the list of options. To enable the virtualization, we must provide the virtual list with some basic data about the list: the list's height, and the height of each item in the list. That way the component knows exactly how many and which items to render.&nbsp;
The list's height is passed to the component as the props of the MenuList component, as provided by the react-select library. We determine the item heights ourselves, per our usability needs.
This is how the CustomMenuList ends up looking:
<pre class="language-javascript"><code>import { FixedSizeList as List } from "react-window";
 
const CustomMenuList = props =&gt; {
 const itemHeight = 35;
 const { options, children, maxHeight, getValue } = props;
 const [value] = getValue();
 const initialOffset = options.indexOf(value) * itemHeight;
 
 return (
 &lt;div&gt;
 &lt;List
 height={maxHeight}
 itemCount={children.length}
 itemSize={itemHeight}
 initialScrollOffset={initialOffset}
 &gt;
 {({ index, style }) =&gt; &lt;div style={style}&gt;{children[index]}&lt;/div&gt;}
 &lt;/List&gt;
 &lt;/div&gt;
 );
};
</code></pre>
The first thing we would like to see is performance improvement. This is the normal react-select rendering alongside the virtualized list one:
&nbsp;
<table>
<tbody>
<tr>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdDBCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3ac32457a8f04ff0b4cb455a58df12f69b0bb64c/3.gif" alt="" width="536" height="455" /></td>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdDRCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7fd3353b1be2fa99dfe6798752f65d6a1d74342e/4.gif" alt="" width="514" height="455" /></td>
</tr>
<tr>
<td>
React select 100 options
</td>
<td>
React select 10,000 options
</td>
</tr>
</tbody>
</table>
&nbsp;
The time to render with the virtualized list is almost the same as the list with 100 options. Also - the rest of the react-select functionality is enhanced: filtering options by value search, selecting an option or scrolling down the list. These were almost unusable before virtualizing the list.

<h2>React-window Shallow Dive</h2>
React-window solves the performance problem by virtualizing the list, and only rendering the visible items. At this point, it's important to note that mounting elements to the real (i.e non-virtual) DOM is the most expensive operation for the browser to perform. In order to avoid performance degradation, we will try to minimize the number of such operations.&nbsp; What does it look like in the real DOM?&nbsp; 
This is the DOM of the normal react-select options list:
<img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdDhCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--bb1a74e55fd23fe3b63470b8e64973b2d6c959ae/5.gif" alt="" width="600" height="312" />
And this is the new DOM with the virtual list:
<img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdUFCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4eb440265b421729c29af007be1a48a1e23b60c9/6.png" alt="" width="600" height="304" /> 
The new DOM only has 9 list items. Of course, when scrolling down the list the items that are rendered change, but the amount of items remains 9 all the same. 
To better understand how this is achieved, we can inspect the react-window code. The key is a couple of methods called getStartIndexForOffset and getStopIndexForStartIndex:
<pre class="language-javascript"><code>getStartIndexForOffset: (
 { itemCount, itemSize }: Props&lt;any&gt;,
 offset: number
 ): number =&gt;
 Math.max(
 0,
 Math.min(itemCount - 1, Math.floor(offset / ((itemSize: any): number)))
 ),
 
getStopIndexForStartIndex: (
 { direction, height, itemCount, itemSize, layout, width }: Props&lt;any&gt;,
 startIndex: number,
 scrollOffset: number
 ): number =&gt; {
 const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
 const offset = startIndex * ((itemSize: any): number);
 const size = (((isHorizontal ? width : height): any): number);
 const numVisibleItems = Math.ceil(
 (size + scrollOffset - offset) / ((itemSize: any): number)
 );
 return Math.max(
 0,
 Math.min(
 itemCount - 1,
 startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
 )
 );
 },
</code></pre>
The start index is calculated by the scroll offset, and according to the item's height. The stop index is fitted to the start index and is calculated by the provided height and item height. The visible items are inferred by the start and stop indexes, and rendered to the screen accordingly.
&nbsp;

<h2>Conclusion</h2>
React-select is a great choice for select components in React applications. We saw that the component might break for a large list use case, and also how to handle it. React-select is smart to provide a strong customization API, which should be a consideration when choosing an open-source component.
Moreover, we explained how to use react-window, as a very straightforward solution to handling large amounts of data, and rendering long lists efficiently.
The virtualization of list rendering can be used in many cases. Any time we would want to render a long list, we can utilize virtual rendering to enhance performance.

 Learn the prominent software development trends that will dominate the industry in 2021and beyond. Stay up to date with the latest tech innovations on the Faster Than Light blog!

Here Are Top 8 Software Development Trends to Implement in 2021

2020 marked a challenging year for all of us. The global pandemic has shaken the world, which led to the significant transformation in various industries&mdash;and software development was no exception.&nbsp;
Social distancing, lockdowns, and related restrictions forced millions of companies to abandon their offices, which only fueled the demand for management and enterprise systems. Other software solutions were on the rise since we witnessed a significant increase in <a href="https://www.statista.com/statistics/1116831/business-software-spending-covid19-forecast/">software spending</a> across all areas, including web conferencing applications, collaboration, and remote tools, e-learning platforms, etc.&nbsp;
Since social distancing and other precautionary measures seem likely to stay with us a while longer, investing in software development might be a good solution to keep your business afloat.&nbsp;
To ensure you succeed in this challenging endeavor, we compiled a list of the top eight software development trends that will dominate the global market in 2021.

<h3>The Most Prominent Software Development Trends of 2021 </h3>
<h5>Big Data Solutions</h5>
&ldquo;The world is one big data problem.&rdquo;― Andrew MacAfee
Data is power, and those who possess it will dominate the industry. Big data solutions are frequently listed among the current software development trends. Businesses and large corporations have been utilizing big data to extract meaningful insights and apply them to better market their products and services.&nbsp;
While 54% of companies are taking the first steps in adopting big data analytics, unstructured data remains a top problem for 95% of companies worldwide. The demand for big data solutions remains high, which means it&rsquo;s going to be a leading software industry trend in the upcoming year.
<h5>The Rise of AI Solutions</h5>
Artificial intelligence has already received multiple applications across industries. It&rsquo;s widely applied to automate business operations, carry out in-depth market research, gather analytics, enhance data flows, and more.&nbsp;
But according to <a href="https://www.idc.com">IDC</a>, AI revenues are expected to hit $156 billion in 2021, which is a 12% increase from 2019. If you&rsquo;ve been wondering which new technology to apply to software development, artificial intelligence might be a good option. With the capabilities it provides, you&rsquo;ll have every opportunity to build a revolutionary solution to disrupt the market.&nbsp;
<h5>5G Technology</h5>
5G has been making the headlines of all IT blogs for almost two years. It&rsquo;s one of the current software development trends that are going to stay with us in 2021. This technology innovation caused a real buzz on the market, but, unfortunately, hasn&rsquo;t seen a wide deployment in recent years.
In 2021, 5G is expected to meet the needs of its advocates. With the release of 5G New Radio, a radio access technology designed for 5G native mobile networks, the network capacity will increase, which will enable businesses to use it for everything from machine learning systems to large-scale IoT devices.&nbsp;
If you&rsquo;ve been waiting for this innovation, 5G technology might be the best choice of software development trends for you.
<h5>Microservices Architecture</h5>
We&rsquo;re now seeing a dramatic shift from monolithic structures to microservices architecture, and that trend is only predicted to accelerate in 2021.&nbsp;
Monolithic architecture has been successfully applied across industries. But with changing consumer demands, and the emergence of new tech that required reduced downtime and more agile development, companies faced the need for a new architecture.&nbsp;
Microservices allow applications to be built as a set of small independent units that can be developed and launched separately. This software industry trend will provide businesses with greater flexibility, reduced costs, and increased agility.&nbsp;
<h5>DevSecOps</h5>
If you&rsquo;ve been operating in the IT market long enough, you&rsquo;ve probably heard about DevOps. It was a leading software development trend in 2018, and it undoubtedly continues to perform an important function in all IT organizations.&nbsp;
However, the latest tendencies clearly show that we&rsquo;re likely to see the integration of security practices in DevOps processes, which will result in the rise of a new field called DevSecOps.&nbsp;
The ascent of new technology in software development will enable DevOps to conduct security testing without the need to involve a security expert. DevSecOps provide companies with more opportunities to build reliable systems, capable of processing high-load operations.&nbsp;
<h5>Cloud Computing</h5>
As more and more companies are moving online, the cloud becomes a helpful tool in digital transformation and software modernization. The capability to store corporate data securely on someone else&rsquo;s device, without the need to keep it on your own computer, allows for better synchronization.&nbsp;
Cloud services have been listed among the top software development trends for several years, and continue to occupy a position as one of the most demanded technologies on the market in 2021.&nbsp;
<h5>Multi-cloud Infrastructures</h5>
If you haven&rsquo;t heard about multi-cloud infrastructure yet, you probably will in 2021. The release of <a href="https://aws.amazon.com/ru/blogs/containers/introducing-amazon-ecs-anywhere/">Amazon ACS Anywhere</a> next year will mark a prominent event in the software development industry.&nbsp;
In addition to AWS-managed infrastructure, users will be able to store whole data centers in the cloud without fear of missing important information. Even when connectivity is lost, the infrastructure will continue running on the customer premises.&nbsp;
Tech behemoths have already caught up with this software engineering trend. A number of big corporations, such as Google and Facebook, are investing in technologies capable of building reliable serverless and microservices applications.&nbsp;
<a href="https://aws.amazon.com/ru/blogs/containers/introducing-amazon-ecs-anywhere/">Quarkus</a> and <a href="https://micronaut.io">Micronaut </a>were designed to support a majority of cloud features, including Kubernetes and Eureka. They eliminate dependence on third-party services and provide support for AWS Lambda, which makes it possible to build innovative and scalable serverless apps in no time.&nbsp;
Implementing new technologies in software development will enable companies to improve their data flow, launch solutions that better fit market demand, and accelerate the development of more flexible and agile software systems.&nbsp;
<h5>Cross-platform Development</h5>
When listing the latest software development trends, we can&rsquo;t neglect to mention cross-platform development. The euphoria about native applications has come to an end. Modern multi-platform technologies, such as React Native or Flutter, simplify the creation of innovative applications with an appealing design that run seamlessly on any platform and provide an exceptional user experience.
Such software also enables businesses to reach a wider audience, which opens up more opportunities for marketing and promotion. Opting for cross-platform development may become the key software engineering trend in 2021.
<h5>Progressive Web Applications</h5>
Progressive web apps or PWA are not new to the market. PWAs have been on the rise for several years due to their potential to provide a near-native experience.&nbsp;
In 2019, more than<a href="https://www.statista.com/statistics/568684/e-commerce-website-visit-and-orders-by-device/"> half of online shopping orders</a> came from mobile traffic, which means optimizing your website for mobile users will be a must in 2021. Progressive web apps allow your customers to visit the website from any device without downloading a special application, which removes extra barriers to purchasing products in your store.&nbsp;
&nbsp;
When every business moves online, having cost-effective software that can be built within tight deadlines is paramount. Thus, PWA will definitely be among the top software industry trends in 2021.

<h5>Conclusion</h5>
Now when you&rsquo;re aware of the upcoming software development trends that will dominate the industry in 2021, it&rsquo;s the right time to act! <a href="https://fasterthanlight.me/services">Faster Than Light</a> has a professional team of software engineers who will analyze your request and introduce the latest technology solutions to your business.

8 Software Development Trends to Implement in 2021

How to get 100% of Lighthouse Performance score for React.js and Next.js apps: basic metrics and hacks

Increasing Performance in React/Next.js apps for Google Lighthouse

Performance is highly important for each website. Only if your website quickly responds, is optimized, loads fast, and so on, in most cases, these will be taken for granted by users. Your designers can do incredible work and make your website sweet like candy, but if it loads slowly, believe me, the user will notice it first and leave with an unpleasant aftertaste.

<h2>Lighthouse Performance</h2>
Google is aware of user's preferences and therefore performance is one of the most important metrics it uses to decide which search page your site is shown on. To determine such indicators, Google has its own Lighthouse service. At the moment, the current version is v8, but some Google documentation already mentions the ninth version. While Lighthouse defines metrics like performance, accessibility, SEO, best practices, PWA, performance is where the most contentious issues arise.
The performance by itself is determined by several sub-metrics &ndash; TBT (Total blocking time), LCP (Largest contentful paint), CLS (Cumulative layout shift), TTI (Time to interactive), FCP (First contentful paint), Speed index. I&rsquo;m listing them in order of performance impact. We will practically not talk about the Speed index, since this is a very difficult metric to understand and change on the part of a programmer.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdWNDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--dc89604f8e2438f1248a403dae4b627955192eb1/unnamed.png" alt="" width="883" height="402" />
Lighthouse has two verification options: for desktop and mobile devices. During testing on mobile devices, performance metrics will always be lower. Let's be honest, we are looking for information using our phones more and more often. So you can't just ignore that fact. Your application should run fast enough on any device.
There is another metric that we have not mentioned yet, but it is extremely important. This is the time to the first bit (Time To First Byte &ndash; TTFB). TTFB measures the duration between an HTTP request and the beginning of the server's response. Back-end specialists have more opportunities to influence it. However, frontenders can at least avoid requesting unnecessary data, which is especially true if you are using GraphQL.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdWtDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--12b50a2a43a0c04bc83e94de3459ddff376ab10a/unnamed%20(2).png" alt="" width="891" height="280" />

<h2>TOTAL BLOCKING TIME &lt;300ms for mobile devices</h2>
This is the time between the first rendering of site content and the moment your application becomes fully interactive. And, no&hellip; Your application does not immediately become interactive as soon as you see its first elements. There is a short period when the main thread is blocked and does not respond to any user reactions. How long it will be blocked, entirely is up to you. Each time the main thread encounters a task that takes over 50 milliseconds, that task is automatically considered as too long and the thread is considered as blocked. Fortunately, TBT takes into account only the time greater than 50ms. So, if you have a long-lasting task that takes 53 ms, then TBT will be only 3 ms. But if there are several tasks like this, the extra execution time will be summed up.

<h2>TIME TO INTERACTIVE &lt;5s</h2>
This is the time on the scale between the first rendering of content and the so-called &ldquo;quiet window&rdquo; of 5 seconds. This is the 5 seconds when there are no long-lasting tasks for execution. Server rendering can cause a page to look interactive but it's not actually interactive due to blocking the main thread. Hereby, you see the button, but nothing happens when you click it. It infuriates users, as Google informs that your site is slow. It can lead to unexpected page jumps, so don't be surprised if you don't rank on the first page.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdW9DIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7aff266fa51783ebde738f39d89c83e20826ba56/unnamed%20(3).png" alt="" width="894" height="507" />
<h2><img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdXNDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--09bc2982c3bc0a9123b6bc0ec86e6812cef8d9a1/unnamed%20(4).png" alt="" width="892" height="237" /></h2>

<h2>How to optimize TTI and TBT</h2>
As you can see, these indicators are interconnected. Therefore, you can optimize the application for both at once.&nbsp;
<ul>
<li style="font-weight: 400;" aria-level="1">You should reduce the impact of libraries that are being loaded and processed at that time. For example, Google Analytics. It is often forgotten to turn it off when the business no longer needs it.</li>
<li style="font-weight: 400;" aria-level="1">All blocks that do not have the highest priority for the user, and are not on the first screen, can be loaded dynamically via lazy loading, as well as imported dynamically.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Minimize the duration of the main thread. If you have a lot of different animation &ndash; you should not place them on a large number of layers. In order for your browser to understand at all that you want to animate some elements, you should add the will-change CSS property to them. The browser will already notice that this is an animation, but it will be easier for it to find such elements, which will speed up loading. Don't forget to use debounce for your event handlers. Styling inputs inside event handlers also loads the main thread very heavily. Try not to do it.</li>
<li style="font-weight: 400;" aria-level="1">Decrease the Javascript timeout so that it takes less than 2 seconds. This is easy to do by avoiding unnecessary renderers. Try to keep your event handlers as simple as possible. For example, don't write inside the if-else handler, use different handlers for different conditions inside the if-else. Split your code and try to diminish the bundle size.</li>
</ul>

<h2>First Contentful Paint &lt;3s</h2>
The first thing a user sees on a page when it loads. According to Lighthouse, it can be any image, not a white &lt;canvas&gt;, as well as SVG elements on the page. The important thing is that everything inside the iframe is not counted. It's also text, and therefore fonts, so make sure they're displayed. Add a property font-display: swap; to your @font-face. This is the fastest way to resolve the issue.

<h2>Largest Contentful Paint &lt;2.5s</h2>
This is the largest element in the viewport. Usually, people are used to thinking that this is an image because often the biggest element on the first screen is the cover image or image slider, but this is not always the case. For example, here on our site, this is the h1 heading.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdXdDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--ae9464e13b221baefda2ba3749d54a02fac17aa5/unnamed%20(5).png" alt="" width="894" height="856" />
LCP can be:
<ul>
<li style="font-weight: 400;" aria-level="1">&lt;img&gt; elements, including Next.js &lt;Image&gt;</li>
<li style="font-weight: 400;" aria-level="1">Block element with text. Text can be not only symbols but also any inline elements, for example, emojis.</li>
<li style="font-weight: 400;" aria-level="1">&lt;image&gt; inside SVG &ndash; they should be large enough and it is better not to do this at all, but as an option &ndash; it is possible.</li>
<li style="font-weight: 400;" aria-level="1">background-image inside CSS, which is specified via url(&ldquo; &ldquo;)</li>
</ul>
&nbsp;
<h3>How to improve the LCP performance</h3>
<ul>
<li style="font-weight: 400;" aria-level="1">Upload the main image in advance</li>
<li style="font-weight: 400;" aria-level="1">Optimize all your images (tinyPNG, SVGOMG, etc.)</li>
<li style="font-weight: 400;" aria-level="1">Optimize fonts</li>
<li style="font-weight: 400;" aria-level="1">Optimize CSS</li>
<li style="font-weight: 400;" aria-level="1">Optimize Javascript on the client.&nbsp;</li>
</ul>

<h2>Cumulative Layout Shift &lt;0.25</h2>
Have you ever visited a site, clicked on any button or product, and as a result, another element appeared on the top? And it turns out that you clicked on a completely different block or even on an advertising banner? Users do not like this and Google, accordingly, too. Block size jumps like this increase the value of the CLS factor, which is bad for performance.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdTBDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--8435fc27072b835a7f3ec6243ec9e4e9ae28cec8/unnamed%20(7).png" alt="" width="889" height="398" />
<h3>How to avoid and reduce the CLS:</h3>
<ul>
<li style="font-weight: 400;" aria-level="1">Reserve space and set a fixed height for blocks that will be loaded dynamically. Or you can use skeleton to improve your UX even more.</li>
<li style="font-weight: 400;" aria-level="1">Track which device the user came from to show him the correct blocks of the correct size right away. You can do this in native ways with cookies, or you can use ready libraries.</li>
</ul>

<h2>Let&rsquo;s hack it?</h2>
<h3>Documentation to help</h3>
The easiest way is to read carefully the Next.js documentation, which developers update periodically. There you can find out that:
<ul>
<li style="font-weight: 400;" aria-level="1">By adding the "priority" property to the next &lt;Image/&gt; you can improve the value of the LCP</li>
<li style="font-weight: 400;" aria-level="1">All links in next.js have prefetch=true by default. Thus, next trying to preload information for pages on the links. But it takes time and resources. Set prefetch=false to at least those links that users rarely click on, such as the privacy policy.</li>
<li style="font-weight: 400;" aria-level="1">You can change the script loading order for the &lt;Script/&gt; component yourself using the strategy property. It can take the values beforeInteractive (for bot detectors, cookies confirmation), afterInteractive (tag managers, Google Analytics), lazyOnLoad (social media widgets, chats support).</li>
</ul>
&nbsp;
<h3>Bundle master</h3>
To make it easier to keep track of the bundle size, there are several tools:
<ul>
<li style="font-weight: 400;" aria-level="1">Import Cost is an extension for VS Code that tells you how much each imported element takes.</li>
<li style="font-weight: 400;" aria-level="1"><a href="https://packagephobia.com/">Package Phobia</a>/<a href="https://bundlephobia.com/">Bundle Phobi</a>a are services that will show how much your library has, what libraries it pulls along with it, and also what other analogues you can use.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1"><a href="https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer">Webpack Bundle Analyzer</a> is a webpack plugin, which visualizes the look of your bundle, showing its structure. A tutorial on how to use it can be found <a href="https://flaviocopes.com/nextjs-analyze-app-bundle/">here</a>.</li>
</ul>
&nbsp;
<h3>Shallow Routing</h3>
There is such an interesting feature in Next.js as shallow routing. This is one of the options you may see when using router.push or router.replace. The default is false. But if set to true, then the whole page will not be reloaded when the URL changes and getServerSideProps will not work and will not load new data again. Be careful, the rerender may not be noticeable in local development, but it will definitely show up in production. If you're using filters based on URL query parameters, it's better to track that the URL has changed and load the data in useEffect again just for the desired block.&nbsp;
&nbsp;
<h3>SWR &ndash; what is and where</h3>
Use SWR to load data on the client instead of useEffect. It was specially created by Next.js. It automatically caches and revalidates data, and also allows you to request data from the server at regular intervals.&nbsp;
<h3>Mobile Detect</h3>
There are times when you need to load different components depending on the width of the window. If you use conditional rendering and hooks like useWindowSize for this, rather than CSS styles, FCP loading may differ from the final result. In this case, the CLS will be huge, and the user will see a very jumping page at the beginning. This can be avoided if you determine which device and what sizes the user uses on the Next.js server. Package <a href="https://www.npmjs.com/package/mobile-detect">mobile-detect </a>will help you a lot with this and will allow you to reduce CLS to zero.
<h3>The most cheating and effective hack</h3>
To significantly improve the FCP and LCP values, and with them the rest of the indicators, you need to replace the NextScript import in the custom document _document.js/.ts. Replace it with <a href="https://gist.githubusercontent.com/bravetheheat/d0eeb93c15d689d769b3194629ce36ab/raw/f570d6488b5cdbca59e755881b42080946103620/DeferNextScript.tsx">this file</a>, which have been posted by incredible <a href="https://gist.github.com/bravetheheat/">David Zhao</a>. This hack saved me when I was struggling with huge FCP and LCP stats for days and added about 30 points to my Lighthouse Performance score.&nbsp;
But we will not mindlessly copy-paste, so I will briefly tell you how it works. Remember how we usually load scripts using pure JS, HTML, CSS? We add them either in the head before the body, or at the end. Only in this case, we already have some kind of layout, the elements are mostly displayed, but interactivity is achieved through JS. So we can afford asynchronous loading of scripts after layout.
However, when we use frameworks like Next.js, we have JS that creates the entire page. That is to say, the script will always be in the head. But inside it also loads the scripts of the libraries, Next.js itself. We saw above that we can change the way some scripts are loaded using the Script component. But with internal scripts and node modules, this will not work.
By default, NextScript loads scripts onto the page using the async property. Thus, HTML is parsed first and the script is loaded. Then you have to wait until the script completes and only then continue parsing HTML.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdklDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--75030bbb3da6332f25def58cdc51884243af3d8f/unnamed%20(8).png" alt="" width="884" height="374" />
If we use the defer property, then we get a situation where HTML is parsed first and scripts are asynchronously loaded in parallel, but we do not have to wait until they work to finish parsing HTML. Since most of the scripts are really not needed for the first render, this makes the page loading much faster.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdkFDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f241ff676c4f5346eace9abd7cd901e63b2ebdb4/unnamed%20(9).png" alt="" width="879" height="440" />

A framework that helps to set up objectives(goals) that really matter and It could be used at the corporation/company level or event for your personal life

OKR stands for Objectives and Key Results

OKR is a framework that helps to set up objectives(goals) that really matter for you/company and define concrete measurable steps(key results) to achieve objectives.
It could be used at the corporation/company level or even for your personal life.
Let's dive into it.
OKR was introduced in the 1970s by Andrew Grove and later picked up by such companies as Google, LinkedIn, Zynga, Twitter, Microsoft, GitLab, and many others.

<h2 style="text-align: justify;">Concepts</h2>
Objective.
An objective is a clear statement of what you want to achieve.
&nbsp;

<h2 style="text-align: justify;">Key Results:</h2>
Measurable success criteria. Their purpose - definitely say if the objective has been achieved or not.
&nbsp;
Interesting that framework rules are different for each company and it is a continuous process of self-improvement.
You have to define your framework rules and overview them after some period of time.
Some general requirements(could be customized by your needs):
- Specify Time Period: Quarter/Year - Define 3-5 high-level objectives for the company(O). - For each objective define 3-5 measurable results(KRs). - At the end of the time period, each key result could be 1 or 0. - Objective is completed when KeyResults rate &gt; 75% - If the objective was completed by 100% - your objective was not enough ambitious.
&nbsp;
Sample 1:
Objective: Enhance your communication with customers
Key Results:
- Host 7 webinars related to your product/service. Ensure that the webinars have at least 50 participants. - Release 5 new press publications twice a week. - Create a design book for all your assets - Increase your community size from 3000 to 5000
&nbsp;
Sample 2:
Objective: Get Prepared for the AWS Certification
Key Results:
- Go through the Udemy course - Read AWS whitepaper documents - Pass 7 test exams with a rate &gt; 80% - Complete 20 hands-on labs
&nbsp;
Sample 3:
Objective: Lose weight by 10kg
Key results:
- Avoid sugar - Complete 30 workout sessions at the GYM - Run/walk 100km/20 hours
&nbsp;
Sample 4:
Objective: become a better father for your kids
Key results:
- Take them to a coffee shop, buy their favorite donuts with chocolate - Go fishing with your son - Buy an LoL doll for your daughter - Read an interesting book together

<h2 style="text-align: justify;">OKR Pros:</h2>
- Focus on priorities - Defined steps(roadmap) - Transparent indicators - Concentrate company resources on the most valuable goals
When you're starting your working quarter/month/week/day you will always know what your real goals are

<h2 style="text-align: justify;">OKR Cons:</h2>
- OKRs should be approved on the company's high level - Avoid using OKRs as a control Instrument - To many Objectives will bring a chaos - Without a global goal - key results are nothing - Requires activities and time (brainstorming, planning, 1 on 1 check-ins etc ) - Requires company flexibility

<h2 style="text-align: justify;">How to manage OKR</h2>
1. Intro(Icebreaker)
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdVVFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1a26df53a4aeda6cbaacb3c27b282a18d33732c1/unnamed.png" alt="" width="573" height="756" />
-make a team meeting/call -get your team members familiar

2. Define Objectives
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdVlFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e1ecb7c6d0771113b32ac1d9c3f8952fdbde266/unnamed%20(1).png" alt="" width="595" height="527" />
- brainstorm objectives - write down the most valuable

3. Key Results
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdWNFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e8e0944ed8750013a22aedd731baf7c731ce034f/unnamed%20(2).png" alt="" width="589" height="460" />
- brainstorm key results for each objective - write down the most valuable

4. Overview
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdWdFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7312a7920165f26c3736248565689295df8aef23/unnamed%20(3).png" alt="" width="790" height="350" />
Create a diagram/visualization of your objectives and key results.

<h2 style="text-align: justify;">Best practies:</h2>
1. Less is more (define a small set) 2. Crawl-walk-run (start from pilot team(s) than scale) 3. Outcomes, not output (focus on Result, not on Amount of delivered work) 4. OKRs are not everything 5. The only way to learn OKRs is to do OKRs.
I wish you to set up ambitious objectives and always reach them!

With a mission to lead our partners to digital brilliance, we can’t help but feel exhilaration whenever we receive a brand new review on Clutch.

Faster Than Light Earns 5-Star Review for Ongoing Development

The development of your site&rsquo;s frontend has a significant impact on your product&rsquo;s performance. Of course, people with extensive experience in development know that the backend is as important. But for many users, the frontend is what dictates their impression of the program.
&nbsp;
In 2021, there are <a href="https://medium.com/geekculture/top-front-end-development-trends-you-should-follow-in-2021-64d7129fc066">different techniques and technologies</a> that developers utilize to innovate their frontend development. But if you&rsquo;re looking to substantially improve your project, having a dedicated team of developers is an advantageous option. Here at Faster Than Light, we&rsquo;ll help you turn your concepts into an outstanding digital product. As an extension of your team, our design and development geniuses will provide you with one-of-a-kind solutions to your project.
&nbsp;
With a mission to lead our partners to digital brilliance, we can&rsquo;t help but feel exhilaration whenever we receive a brand new review on Clutch. Here&rsquo;s the latest addition to our collection of feedback: <img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBa2NDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e8922e2385eb70128364c80666f4507db478c6f7/Screenshot%202021-08-10%20at%2011.02.20.png" alt="" width="850" height="458" /> 
To explain, Clutch is an established platform in the heart of Washington, DC, committed to helping small, mid-market, and enterprise businesses identify and connect with the service providers they need to achieve their goals. Their team of analysts interview service providers&rsquo; clients to collect client feedback, analyze industry data, and compare competitors in a specific market to arm businesses with the information they need to connect with the right service providers. The platform is invested in publishing in-depth client reviews, data-driven content, and vetted market leaders that businesses can access for free.
&nbsp;
Like Clutch, The Manifest, its sister platform, is another effective resource for businesses when looking to hire the <a href="https://themanifest.com/ua/software-development/companies/kiev?page=1#fasterthanlight">best companies</a> in an industry or location. We&rsquo;re proud to be on The Manifest&rsquo;s list of Top 100 Software Development Companies in Kyiv.
&nbsp;
In their interview with Clutch, our partner, Papaya Inc. described the hiring process and the solutions they need from us in our ongoing engagement.
&nbsp;
&ldquo;We&rsquo;re building a plant-based restaurant platform... Faster Than Light assists us with full-stack software development, but mainly in frontend development. We are working together on two websites.&rdquo;
&nbsp;
&mdash; Edoe Cohen, CEO, Papaya, Inc.
&nbsp;
While the project is still underway, we&rsquo;re honored to be recognized by the client for the quality of our work thus far.
&nbsp;
&ldquo;I feel that I have their attention and that I&rsquo;m in good hands.&rdquo;
&nbsp;
To learn more about our work, feel free to <a href="https://clutch.co/profile/faster-than-light?sort_by=date_DESC&amp;project_cost=&amp;service_provided=&amp;review_type=">visit us on Clutch</a>.
 Or find out how we can help you realize your development vision by <a href="https://www.fasterthanlight.me/book-denis" target="_blank" rel="noopener">connecting with our CEO</a>.

Our blog

Stay in touch