Speed Matters: Measuring Time to First Byte and Other Key Metrics in VueJS Components Frameworks

Abstract

The web development community has witnessed an influx of various frontend frameworks designed to simplify web development. This study compares the performance metrics of three popular front-end frameworks - Buefy, Vuetify, and BootstrapVue. The study evaluates several key performance metrics, including First Contentful Paint, Largest Contentful Paint, Speed Index, Time to Interactive, Total Blocking Time, Connect Duration, Backend Duration, First Paint, DOM Loaded, DOM Interactive, Onload Time, and Fully Loaded Time. The results show that Buefy outperforms Vuetify and BootstrapVue in most of the performance metrics evaluated. Buefy has the fastest First Contentful Paint, Largest Contentful Paint, Speed Index, Total Blocking Time, and Backend Duration. In contrast, BootstrapVue has the slowest performance in most of the metrics. Vuetify's performance is in the middle range, with some metrics performing better than BootstrapVue but worse than Buefy. Based on the study's results, web developers should consider Buefy when choosing a front-end framework for their projects, as it offers the best performance. However, developers should also consider other factors such as ease of use, community support, and available documentation when choosing a framework for their projects.