We are discussing optimizing the frontends. But what does an optimized frontend consist of? How can we decide whether a frontend is optimized or not? Let's take a look.

An optimized frontend has several components, where it is not compulsory that every component needs to be reflected from the frontend. These components are as follows:

• Quick rendering times: One of the first focuses of frontend optimization is to reduce the rendering time of the page. Although there is no predefined set of rendering times that can be considered good or bad, you can think that a good rendering time will be the one where the user does not have to wait too long for the page to load on a decent internet connection.
  Also, a decent rendering time is not only dependent upon the speed of the internet connection of the user—it also depends upon the complexity of the frontend code. For example, a page consisting of deep nesting of the HTML components will take a longer time to render than a page that has shallow nesting of the HTML components.

• Reduced data transfer: One of the major components of optimizing a frontend is the reduction in the amount of data that needs to be transferred between the server and the client while an operation is performed. As a matter of fact, when the amount of data that needs to be transferred reduces, the responsiveness of the frontend increases, resulting in a positive experience for the users of the application.

• Easy to navigate: An optimized frontend will provide the user with the power to reach any part of the application in no more than a few clicks. A frontend that has a very deeply nested navigation, where a user has to hop through several pages before they can achieve what they want to do, acts as a really negative experience for the user, and hence an optimized frontend tries to deal with these problems of content navigation.

These are only a small set of components that define an optimized frontend, and there are several more, as we will see in the upcoming sections. But before we go ahead and start optimizing a frontend, we need to understand what the possible causes of problems in a frontend are. So, let's take a look.