Frontend issues are a category of issues that are easily perceived by the users because they affect the way the user interacts with an application. For the sake of clarity here, when we say frontend of an enterprise web application, we are not only talking about its UI, we are also talking about the code and the templates that are there to render the required UI. Now, let's move on to understand what possible causes of frontend-specific issues are:

• Excessive amount of objects: In most of the dynamically populated templates that are responsible for rendering the frontend, the first problem comes with the rendering of an excessive amount of objects. When a lot of objects are passed to a template that needs to be rendered, the page response times tend to increase, causing an imminent slowdown in the process.

• Excessive includes: One of the major things that is focused on in software engineering is how to increase the modularity of the code base. The increase in modularity benefits in the increased reusability of the components. However, everything done in excess can be a signal of a major problem that might occur. When the frontend templates are modularized to an extent that goes beyond what is required, the rendering performance of the templates decreases. The reason for this is that for every include that is there, a new file needs to be loaded from the disk, which is an exceptionally slow operation.
  One of the counter points here could be that once the template is loaded with all it includes resolved, the rendering engine can cache the template and serve the later requests from the cache. However, most of the caching engines have a limit on how much level of included depth they can cache, beyond which the performance hit will be imminent.

• Unnecessary set of resources: Some of the frontends could have an unnecessarily large amount of resources being loaded that are not used anywhere on a particular page. This includes JavaScript files that contain functions that are executed only on a small set of pages. Every extra file that is being loaded not only adds to increased consumption of the bandwidth but also affects the loading performance of the frontend.

• Forcing the code to be loaded serially: Most modern browsers are now optimized to load a lot of resources in parallel to efficiently utilize the network bandwidth and to reduce the page loading times. However, at times, some of the tricks that we use to reduce the amount of code may force the page to get loaded sequentially instead of being loaded in parallel. One of the most common examples that may cause the page resources to be loaded in sequence is the use of CSS imports. Although CSS imports provide the flexibility of loading third-party CSS files directly inside another style sheet, it also reduces the ability of the browser to load the contents of the CSS file in parallel, hence increasing the time it takes to render a page.

This set of causes forms a non-exhaustive list of issues that can cause a slowdown in the page rendering time and hence provide an unpleasant experience to the user.

Now, let's take a look at how we can optimize our frontends to be responsive in nature and provide the best possible user experience.