STUDY OF THE IMPLEMENTATION OF AUTOMATIC CODE SPLITTING FROM NEXT.JS FRAMEWORK ON THE WEB CVSCREENING SYSTEM ON INCREASING CORE WEB VITALS

• Main Author: Erwin Fattah, Muhammad
• Format: Final Project
• Language: Indonesia
• Online Access: https://digilib.itb.ac.id/gdl/view/76862
• Institution: Institut Teknologi Bandung

This Final Project explores the implementation of automatic code splitting at the component level of the Next.js framework to enhance the performance of the web- based CV screening system, with the aim of improving user experience. To assess the implications of automatic code splitting on web performance, two versions of the system were developed: one implementing automatic code splitting at the component level and the other without this implementation. This study focuses on analyzing the impact of automatic code splitting implementation on Core Web Vitals, comprising three performance metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Pre-measurement analysis of the impact of implementing automatic code splitting at the component level on Core Web Vitals reveals that automatic code splitting has the potential to positively affect LCP, FID, and CLS metrics. However, the impact on CLS appears to be less significant and depends on the specific implementation concerning component dimensions. Measurement results indicate that the implementation of automatic code splitting at the component level negatively affects LCP scores for all pages of the web-based CV screening system. Meanwhile, the influence on FID and CLS tends to remain unchanged. Despite the decline in LCP, the majority of pages in the CV screening system meet the Core Web Vitals standards, except for the talent pool and archive pages, which exhibit high CLS values. In conclusion, the implementation of automatic code splitting does not automatically enhance the performance of Core Web Vitals. To improve the effectiveness of automatic code splitting, attention should be given to component size, configuration of component loading priorities, and specific optimization for dynamic loading. Addressing these issues will ensure that the implementation of automatic code splitting at the component level becomes more effective.