Passing Core Web Vitals

Project Overview

The constant Google algorithm updates were a struggle for the partner website, which took a huge hit any time a new algorithm was rolled out. Our team approached the challenge as an opportunity to improve their performance. They speculated that third-party JavaScript resources might be the root cause of the issue. Upon disabling them, they observed a significant improvement in the Core Web Vitals scores, confirming their suspicions. This led to a shift in their approach from quick fixes to a more comprehensive optimization plan aimed at uncovering the secrets to exceptional user experience and sustainable performance improvements.

Industry

Fintech

Problem Statement

The affiliate website was constantly having trouble optimizing for Core Web Vitals. Google's algorithm update has led to a deterioration in user experience and search engine rankings.

Execution

Team

Software engineer: 3

Software engineers in test: 1

Project Manager: 1

Timeline

2-3 months

Technology Used

The project leveraged Next.js as the core framework, focusing on achieving passing grades in key metrics like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).  

• Next.js Framework (Version 12 to 13 upgrade): Upgraded the core framework from Next.js version 12 to the latest version 13, incorporating the latest optimizations and features
• Image optimization techniques: Implemented advanced image optimization methods to reduce image sizes, ensuring faster page load times without compromising quality.
• Conditional rendering strategies: Employed measured conditional rendering approaches to enhance performance, focusing on rendering components based on specific conditions.

Challenges and Solutions

Upgrade to Next.js 13

Challenge: The upgrade was to bring significant improvements, like image and font optimization, improved script components, etc., but the challenge was staying up-to-date and navigating the complexities of integrating the latest optimizations and features seamlessly.

Solution: The team closely monitored Next.js updates and implemented the upgrade meticulously to leverage the latest enhancements seamlessly.

Image Optimization

Challenge: Reducing image sizes and optimizing loading were essential, but the challenge was finding the right balance between compression for size reduction and maintaining image quality. Exploring modern formats like WebP adds complexity for efficient compression.

Solution: The team navigated the challenge by implementing image optimization techniques. Integration of modern formats like WebP enhanced overall image loading efficiency.

Font Optimization

Challenge: Font optimization for a fast-loading page was vital. The challenge lay in utilizing the font-display property to control rendering and loading only necessary font variants and weights, balancing visual appeal with performance.

Solution: Intentional use of the font-display property and careful selection of font variants ensured optimal font rendering, striking the right balance between visual appeal and loading performance.

Minimize Unused JavaScript

Challenge: Removing unused JavaScript to reduce page weight was essential. The challenge involved using new tools and eliminating unused code.

Solution: The team employed tools like Webpack Bundle Analyzer to identify and eliminate unused JavaScript code, ensuring optimal page weight and overall performance.

Minimize Rerenders

Challenge: The team faced the task of reducing unnecessary renders for improved performance. The challenge involved assessing and restructuring component lifecycles, requiring finding a balance between minimizing renders and maintaining functionality.

Solution: Code refactoring and optimizations helped achieve the goal by implementing memoization and PureComponent techniques.

Decrease conditional renderings

Challenge: Reducing conditional renderings based on device detection was a smart move. The challenge was continuous code review and optimization to minimize unnecessary conditionals, especially those affecting the critical rendering path.

Solution: The team executed code reviews, systematically minimizing conditional renderings to enhance overall performance, particularly in critical rendering scenarios.

Preload Above-the-Fold Content

Challenge: Preloading above-the-fold content improved perceived performance. The challenge was confirming that critical resources like stylesheets, scripts, and images were preloaded to expedite loading during user navigation.

Solution: Preloading strategies' implementation ensured that essential resources were loaded in advance, enhancing perceived performance during user navigation.

Dynamic Imports and Lazy Loading

Challenge: Implementing dynamic imports and lazy loading for non-SEO-critical items required to address resource loading priorities. The team navigated the complexity of optimizing initial load times and ensuring elements were loaded based on user interactions, balancing performance and user experience.

Solution: The team implemented dynamic imports, which divided large JS files into smaller chunks loaded on relevant pages. Incorporating lazy loading for non-SEO-critical items also sped up the initial load of the page and load element, enhancing the overall user experience.

Mobile Usability and Accessibility

Challenge: Addressing mobile usability and accessibility was crucial. The challenge involved ensuring that all changes met diverse user needs, were accessible and validated through testing tools for mobile-friendly experiences.

Solution: The team implemented validation processes to ensure optimal mobile usability and accessibility of the website, providing a seamless experience across devices.

Inline Link Issues and SEO

Challenge: Fixing inline link issues for SEO was crucial. The challenge involved structuring links appropriately and ensuring the application adhered to SEO best practices, including meta tags, proper headings, and meaningful content.

Solution: SEO audits and adjustments were made to address inline link issues, ensuring that the website adhered to best practices and optimized its structure for search engine visibility.