<![CDATA[Modern web interface development requires a balance between development speed and the technical performance of digital assets. This study is motivated by the optimization challenges of Shuttersport.id, a visual asset management platform that requires a lightweight yet flexible front-end infrastructure. A technical debate exists regarding the efficiency of the component-based paradigm represented by Bootstrap and the utility-first paradigm represented by Tailwind CSS. This study aims to analyze the comparative development efficiency of the two frameworks based on file size (payload), code complexity (Lines of Code), and access performance measured using First Contentful Paint (FCP) and Largest Contentful Paint (LCP). A controlled experimental method was employed by developing two identical interface prototypes for the Shuttersport.id platform using the respective frameworks. Data were quantitatively measured using Google Lighthouse for performance evaluation and static analysis for code complexity assessment. The experimental results show that Tailwind CSS outperformed Bootstrap, reducing the payload size by up to 80.1% and decreasing code complexity by 33.1% through shifting a portion of the complexity into the markup. In terms of performance, Tailwind CSS reduced Largest Contentful Paint (LCP) by 31.7% and First Contentful Paint (FCP) by 6.7%. In conclusion, the utility-first paradigm proved to be considerably more efficient for an asset-intensive visual platform such as Shuttersport.id because it minimizes rendering overhead. The practical implication of this study recommends adopting Tailwind CSS in the production stage to maximize bandwidth allocation for primary image assets.]]>
Copyrights © 2026
