Angular Universal: Faster Loading, Happier Users, Better Search Ranking

Imagine you're looking for something online and click on a link. Instead of seeing content right away, you stare at a blank screen for a few seconds. Frustrating, right? That's what happens with some web applications built with a technology called Single-Page Applications (SPAs).  

Angular Universal is a solution to this problem. It helps web pages built with SPAs load faster, which makes for a smoother experience for users and helps the website rank higher in search results.  

How Does Angular Universal Work? 

Single-Page Applications are great – when they are fully loaded. SPAs improve the experience of web applications by utilizing HTML5 and JavaScript (JS) to deliver everything on one page. SPAs dynamically update when users interact with it. And users don’t have to wait for pages to refresh, even for complex applications.  

But when SPAs are rendered on web browsers, users see nothing but a blank screen until all the framework and application code are downloaded and put together. For very simple SPAs, the blank screen will be almost imperceptible. But for larger, more complex applications, users could be staring at nothing for quite some time. A solution to those problems emerged in the form of Angular Universal Server-Side Rendering (SSR), which makes the page look like it’s loading faster.  

Angular Universal does the work on the server-end of the process before sending the page to the client’s web browser by rendering what the page is supposed to look like, then sending HTML/CSS code, and then loading the JS code. Users see a basic version of the page almost instantly, even on slower connections.

Why Use Angular Universal? 

The improved performance is really a matter of perception. Angular Universal sends information rapidly but in stages, which allows the user to receive a rendered view of the page more quickly. It first sends a shell, which effectively is a static version of the landing page to hold the user's attention. At the same time, the Angular application is getting loaded in the background. The user perceives near-instant performance from the landing page and gets the full interactive experience after the full application loads.  

Angular Universal believes displaying the first page quickly is critical for user engagement. Data from Google shows 53% of mobile site visits are abandoned if pages take longer than three seconds to load. With Angular Universal, pages are visible in a little over a second, even using a slow connection. However, users won’t be able to interact until the full page is built. 

Key Benefits for SEO 

Another key benefit of using Angular Universal is that it improves web crawler support for enhanced Search Engine Optimization (SEO). Google is able to load SPAs on their servers and then utilize the information in search results. But if a user tries to reference a SPA from Facebook or LinkedIn, or if they use one of the other search engines to index it, the results are poor. Angular Universal gives these search engines and social media sites something to utilize when referencing a website. 

Also, when web pages are built with traditional SPAs, page-specific data (image, title, desc) may not show up, depending on the search engine or social media being used. Since the full page is being rendered in its entirety, the metatags could be inserted dynamically with Angular Universal. When a web crawler ‘pings’ the page, it will be created with all the information and images the web crawler is looking for.  

Web applications built using Angular Universal are also beneficial for users with lower-powered devices which is especially important for mobile users with slow devices.  

Potential Drawbacks  

There are potential drawbacks that have been encountered when using Angular Universal and which should be taken into consideration when deciding to use it for projects. Some of the issues involve common elements of traditional client-side rendered applications that are absent in server-side rendered applications.  

• JS is not immediately available: Angular Universal can generate a static version of web applications without JavaScript.
  • Once the initial shell appears, developers who are dealing with large bundles may notice that it takes a long time for the application to load.
  • That is especially true if they are not using practices like lazy loading that will keep the bundle size down.
  • If the application takes a long time to load and people start to interact, the site is not going to work.

• No Document Object Model (DOM): If application components use DOM, the application will not work as expected.
  • The application may not function at all when the user starts working with it.

• Angular Universal requires an actual server.
  • A static server will not work, which may or may not add complexity.

• Doubling-up on calls: Developers must be careful to avoid redundant server calls that negatively impact performance and user experience.

 All these situations involve extra work for the developer. These factors can shift the way the original work on the project was set up.

To Recap  

The perceived performance benefits associated with Angular Universal for server-side rendering deliver an improved user experience along with SEO benefits. But as with any project, be sure to account for all aspects of the technology stack being considered so that the optimum result can be realized.