Tackling some of the key SEO challenges in Angular applications

Introduction

In the ever-evolving digital landscape, having a robust online presence is crucial for businesses and individuals alike. A significant aspect of this presence is the website's URL structure, which directly impacts search engine optimization (SEO) and user experience. Leveraging the power of Angular, a popular front-end framework, businesses have found a way to achieve over 95% quality URLs through Google Search Console. In this blog post, we will delve into how this achievement was accomplished, the role of Core Web Vitals, and the benefits it brings.

The Power of Angular in Web Development

Angular is a widely-used JavaScript framework developed by Google for building dynamic web applications. Its versatility and robust features have made it a favorite among developers. Angular's ability to create single-page applications (SPAs) allows for smoother navigation and enhanced user experiences. But how does this relate to URL quality and SEO?

Angular and SEO: A Historical Challenge

In the past, Angular-based applications faced challenges in terms of SEO. Traditional web crawlers struggled to interpret the dynamic content generated by Angular applications, resulting in incomplete indexing and poor search engine rankings. This posed a considerable hurdle for businesses using Angular to create their websites.

Overcoming SEO Challenges with Angular

1. Server-Side Rendering (SSR): One of the most effective solutions to improve SEO for Angular applications is implementing Server-Side Rendering. SSR pre-renders the web page on the server, providing search engines with static HTML content that is easily crawlable and indexable.
2. Angular Universal: Angular Universal is a technology that enables developers to perform SSR with ease. By rendering Angular applications on the server, developers can ensure that search engines receive fully-rendered HTML pages, greatly enhancing the chances of successful indexing.
3. Optimized Routing: Angular's powerful routing capabilities allow developers to create user-friendly, meaningful URLs. Properly structured URLs improve user experience and contribute to better SEO rankings.
4. Lazy Loading: Angular's lazy loading feature helps improve page loading times by loading only the necessary components when users navigate to different sections of the website. This enhances the overall user experience and indirectly affects SEO.

Achieving Over 95% Quality URLs with Search Console

1. Implementation of SSR: By integrating Angular Universal into the application architecture, the dynamic content generated by Angular is pre-rendered on the server. This ensures that search engine crawlers receive fully-rendered HTML, improving the chances of proper indexing.
2. Optimized Routing and URL Structure: The team focuses on creating a meaningful and structured URL hierarchy using Angular's routing capabilities. This not only aids in SEO but also enhances user experience by providing intuitive navigation.
3. Regular Monitoring and Maintenance: Achieving and maintaining over 95% quality URLs requires ongoing efforts. The development team consistently monitors the website's performance through Google Search Console, addressing any crawl errors or indexing issues promptly.
4. Content Updates and Freshness: Regularly updating the content on the website keeps it relevant and engaging. Fresh content encourages search engines to crawl the site more frequently, improving its visibility in search results.

Understanding Core Web Vitals

Google's Core Web Vitals are a set of user-centric metrics that measure key aspects of a website's performance. These metrics include Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Core Web Vitals aim to assess loading performance, interactivity, and visual stability, all of which significantly impact user experience and SEO.

The Role of Core Web Vitals

1. Loading Performance: Core Web Vitals, a set of metrics designed by Google, emphasize loading performance. One of these metrics is Largest Contentful Paint (LCP), which measures how quickly the largest element in the viewport becomes visible. Proper SSR implementation in Angular addresses this metric, as pre-rendered pages lead to faster loading times and improved LCP scores.
2. Interactivity: Another Core Web Vitals metric is First Input Delay (FID), which assesses the time it takes for a page to become interactive. Lazy loading in Angular contributes to reduced FID, as it ensures that only necessary components are loaded initially, allowing users to interact with the page sooner.
3. Visual Stability: Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures the visual stability of a page. Properly structured Angular applications with optimized routing and layout management contribute to a lower CLS, as the page's layout remains consistent during navigation.

Although we diligently implemented a spectrum of industry best practices to enhance our web performance, we encountered a specific challenge with our Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) scores. Despite our efforts, these metrics have not achieved the desired levels of excellence we aimed for. However, it's worth noting that our First Input Delay (FID) scores have consistently excelled, demonstrating that user interactivity remains a strong suit in our website's overall performance.

Addressing LCP Challenges

Among the Core Web Vitals, Largest Contentful Paint (LCP) measures how quickly the largest element in the viewport becomes visible. Achieving optimal LCP scores can be challenging, especially in dynamic applications like those built with Angular.

During the implementation, the development team encountered challenges related to image loading efficiency and bundle size optimization. Despite pre-rendering content, there were instances when images loaded slowly, resulting in higher LCP scores. Large bundles containing unused JavaScript and CSS can result in slower page loading times, which negatively affects LCP scores. To address this issue, the development team employed creative strategies.

Leveraging Base64 Images for Improved LCP

To control image loading times, the team experimented with using base64-encoded images. By converting images to base64 format and embedding them directly into the HTML, the need for additional HTTP requests was reduced. This approach significantly improved LCP scores and contributed to a more seamless user experience.

Bundle Optimization for Improved LCP

To address LCP challenges, the team embarked on a bundle optimization initiative. This involved identifying and eliminating unnecessary JavaScript and CSS code that contributed to larger bundle sizes. By streamlining the codebase and reducing the overall payload, the team significantly improved page loading times, positively impacting LCP scores. our development team embarked on a bundle size optimization initiative. Here are the steps we followed:

1. Auditing Dependencies: We began by thoroughly auditing the dependencies within our application. This step involved identifying and evaluating each library and module to determine if it was essential for the website's core functionality. Unnecessary or redundant dependencies were flagged for removal.
2. Tree Shaking: Leveraging Angular's built-in tree shaking capabilities, we ensured that only the code necessary for the application's functionality was included in the final bundle. This technique automatically eliminates unused code paths, significantly reducing bundle size.
3. Code Splitting: We strategically employed code splitting to break down the application into smaller chunks. Each chunk contained only the code required for specific sections of the website. This approach optimized initial loading times by reducing the amount of code fetched upfront.
4. Lazy Loading: We embraced Angular's lazy loading feature to load components and modules only when users accessed specific routes. This approach minimized the initial payload, allowing the application to load faster. It also reduced the size of the initial bundle, contributing to improved LCP scores.
5. Minification and Compression: We implemented minification and compression techniques to further reduce the size of JS and CSS files. Minification removes unnecessary whitespace and renames variables, while compression techniques like Gzip and Brotli significantly decrease file sizes for faster transmission over the network.
6. Third-Party Libraries: For third-party libraries, we diligently assessed the necessity of each library and opted for smaller alternatives where feasible. Additionally, we explored the potential of using Content Delivery Networks (CDNs) to serve popular libraries, reducing the need to include them in our bundles.
7. Performance Budgets: To ensure ongoing optimization, we established performance budgets that set limits on bundle sizes. These budgets acted as benchmarks, guiding our development to make conscious choices to keep our application lightweight and efficient.
8. Continuous Monitoring: After implementing bundle size optimization techniques, we closely monitored their impact on performance metrics, including LCP and overall page loading times. Regular performance audits allowed us to identify any potential regressions and fine-tune our strategies.

By diligently implementing these steps, we succeeded in optimizing the size of our JavaScript and CSS bundles. This effort translated into improved loading times, enhanced LCP scores, and an overall smoother browsing experience for our users. Our commitment to optimizing bundle sizes remains an ongoing practice as we strive to provide the best possible performance.

Tackling CLS Challenges with Collaborative Efforts

Cumulative Layout Shift (CLS) gauges the visual stability of a web page. Unexpected layout shifts can occur as page elements load, causing a negative impact on user experience. Collaborative efforts between development and design teams were instrumental in optimizing CLS scores.

Collaboration with Design Team

To minimize layout shifts and ensure visual consistency, the development team collaborated closely with the design team. By establishing guidelines for element dimensions and placements, the teams worked in tandem to create a cohesive user experience. As a result, the likelihood of sudden shifts in content during navigation was reduced, leading to improved CLS scores.

Benefits of Achieving High-Quality URLs

1. Improved SEO Rankings: Websites with properly indexed and crawlable URLs are more likely to rank higher in search engine results, driving organic traffic and increasing visibility.  

2. Enhanced User Experience: A well-structured URL hierarchy contributes to a seamless browsing experience, helping visitors find the information they need quickly and easily.

3. Increased Website Traffic: Higher search engine rankings and improved user experience translate to increased website traffic, potentially leading to higher conversions and business growth.

Conclusion

In the dynamic realm of web development, achieving over 95% quality URLs through Google Search Console using Angular is a testament to the power of innovation and dedication. By implementing server-side rendering, optimizing routing, and maintaining a vigilant eye on website performance, businesses can overcome the historical challenges associated with Angular and SEO. The integration of Core Web Vitals further ensures that loading performance, interactivity, and visual stability are prioritized, contributing to a holistic and high-quality user experience. The result is a well-rounded online presence that not only impresses search engines but also offers a seamless and engaging experience for users.

Additional info:-
Here are some of the blogs our team has published, each providing detailed information about how we achieved 95% good URLs with Search Console. Please feel free to explore these blogs to gain deeper insights:

1. Angular Standalone Components Unleashed: Exploring the Magic of a World Without NgModule
2. Angular Strict Mode: Improving Performance and Reducing Errors
3. Advanced Angular Concepts Used in Halodoc
4. Staying Updated with Angular
5. Performance Optimization Practices at Halodoc
6. Angular Best Practices
7. Web Performance Budget Tracking
8. Powering Server-Side Rendering by Offloading Static Assets to CDN for Angular Apps
9. Performance Monitoring Web Apps

Join us

Scalability, reliability and maintainability are the three pillars that govern what we build at Halodoc Tech. We are actively looking for engineers at all levels and  if solving hard problems with challenging requirements is your forte, please reach out to us with your resumé at careers.india@halodoc.com.

About Halodoc

Halodoc is the number 1 all around Healthcare application in Indonesia. Our mission is to simplify and bring quality healthcare across Indonesia, from Sabang to Merauke. We connect 20,000+ doctors with patients in need through our Tele-consultation service. We partner with 3500+ pharmacies in 100+ cities to bring medicine to your doorstep. We've also partnered with Indonesia's largest lab provider to provide lab home services, and to top it off we have recently launched a premium appointment service that partners with 500+ hospitals that allow patients to book a doctor appointment inside our application. We are extremely fortunate to be trusted by our investors, such as the Bill & Melinda Gates Foundation, Singtel, UOB Ventures, Allianz, GoJek, Astra, Temasek, and many more. We recently closed our Series D round and in total have raised around USD$100+ million for our mission. Our team works tirelessly to make sure that we create the best healthcare solution personalised for all of our patient's needs, and are continuously on a path to simplify healthcare for Indonesia.