Optimasi micro frontend website untuk meningkatkan load times: teknik, tantangan, dan best practice

In recent years, there has been an increasing popularity of the micro frontend architecture due to its implementation by large companies such as IKEA, Starbucks, and Amazon. Due to its  characteristics that similar to microservices, this architecture started to be implemented by various companies to improve their developer experience. However, this architecture has some issues, one of which is the performance of page load time. The objective of this research is to find and determine the best practices for optimizing the page load time of micro frontend applications and to identify the challenge involved. The research is conducted by implementing optimization techniques such as code splitting, lazy loading, tree shaking, minification, and utility modules to micro frontend website. After that, the website is tested with a sample size of 200 which determined by using Lemeshow formula. The research is conducted in both local and server environments using the Google Chrome browser and used "fully loaded" metric. The research use a simple Enterprise Resource Planning (ERP) application consisting of five micro frontends built with React, Vue, and Angular frameworks. The experimental results show that implementing all of the optimization techniques on all micro frontends can improve the application's page load time performance by 31.79% in the local and 47.5% in the server environment.Dalam beberapa tahun terakhir, terjadi peningkatan popularitas dari arsitektur micro frontend dikarenakan mulai diimplementasikan oleh perusahaan besar seperti IKEA, Starbucks, dan Amazon. Karakteristiknya yang menyerupai microservice membuat arsitektur ini mulai banyak diterapkan untuk meningkatkan developer experience. Namun, arsitektur ini memiliki beberapa masalah, salah satunya adalah performa page load time yang rendah. Tujuan dari dilakukannya penelitian ini adalah untuk menentukan bagaimana best practice dalam mengoptimasi performa page load time dari aplikasi micro frontend. Penelitian dilakukan dengan mengimplementasikan teknik optimasi seperti code splitting, lazy loading, tree shaking, minification, dan utility module kepada setiap micro frontend yang dimiliki oleh suatu website, kemudian dilakukan pengujian sebanyak 200 kali yang didapatkan menggunakan formula Lemeshow di local dan server environment menggunakan browser Google Chrome dengan metrik fully loaded, yaitu ukuran waktu yang dibutuhkan suatu website untuk memuat seluruh resources yang digunakan oleh website tersebut. Penelitian dilakukan pada aplikasi Enterprise Resources Planning (ERP) yang terdiri dari lima micro frontend dengan framework React, Vue, dan Angular. Hasil eksperimen yang dilakukan menunjukkan bahwa mengimplementasikan setiap teknik optimasi pada seluruh micro frontend dapat meningkatkan performa page load time aplikasi sebesar 31,79% pada local dan 47,5% pada server environment

adPerf: Characterizing the Performance of Third-party Ads

Monetizing websites and web apps through online advertising is widespread in the web ecosystem. The online advertising ecosystem nowadays forces publishers to integrate ads from these third-party domains. On the one hand, this raises several privacy and security concerns that are actively studied in recent years. On the other hand, given the ability of today's browsers to load dynamic web pages with complex animations and Javascript, online advertising has also transformed and can have a significant impact on webpage performance. The performance cost of online ads is critical since it eventually impacts user satisfaction as well as their Internet bill and device energy consumption. In this paper, we apply an in-depth and first-of-a-kind performance evaluation of web ads. Unlike prior efforts that rely primarily on adblockers, we perform a fine-grained analysis on the web browser's page loading process to demystify the performance cost of web ads. We aim to characterize the cost by every component of an ad, so the publisher, ad syndicate, and advertiser can improve the ad's performance with detailed guidance. For this purpose, we develop an infrastructure, adPerf, for the Chrome browser that classifies page loading workloads into ad-related and main-content at the granularity of browser activities (such as Javascript and Layout). Our evaluations show that online advertising entails more than 15% of browser page loading workload and approximately 88% of that is spent on JavaScript. We also track the sources and delivery chain of web ads and analyze performance considering the origin of the ad contents. We observe that 2 of the well-known third-party ad domains contribute to 35% of the ads performance cost and surprisingly, top news websites implicitly include unknown third-party ads which in some cases build up to more than 37% of the ads performance cost

What-If Analysis of Page Load Time in Web Browsers Using Causal Profiling

Web browsers have become one of the most commonly used applications for desktop and mobile users. Despite recent advances in network speeds and several techniques to speed up web page loading such as speculative loading, smart caching, and multi-threading, browsers still suffer from relatively long page load time (PLT). As web applications are receiving widespread attention owing to their cross-platform support and comparatively straightforward development process, they need to have higher performance to compete with native applications. Recent studies have investigated the bottleneck of the modern web browser's performance and conclude that network connection is not the browser's bottleneck anymore. Even though there is still no consensus on this claim, no subsequent analysis has been conducted to inspect which parts of the browser's computation contribute to the performance overhead. In this paper, we apply comprehensive and quantitative what-if analysis on the web browser's page loading process. Unlike conventional profiling methods, we applycausal profiling to precisely determine the impact of each computation stage such as HTML parsing and Layout on PLT. For this purpose, we develop COZ+, a high-performance causal profiler capable of analyzing large software systems such as the Chromium browser. COZ+ highlights the most influential spots for further optimization, which can be leveraged by browser developers and/or website designers. For instance, COZ+ shows that optimizing JavaScript by 40% is expected to improve the Chromium desktop browser's page loading performance by more than 8.5% under typical network conditions

Aplicación móvil de seguridad ciudadana para la Policia Nacional del Perú de la Ciudad de Abancay, 2017

El presente trabajo de investigación se realizó con el objetivo de desarrollar un aplicativo móvil, como una herramienta alternativa para reportar incidentes relacionados a la inseguridad ciudadana a cargo de la Policía Nacional del Perú, de la Ciudad de Abancay. El tipo de investigación del trabajo es aplicada, el método de investigación es hipotético deductivo, con un diseño descriptivo, Se utilizó la metodología ágil XP (Extreme Programming) para el desarrollo de la app y los resultados del aplicativo móvil se validaron con un QUIS. La muestra estuvo conformada por 35 usuarios. El app cuenta con funcionalidades para el ciudadano, para el policía y el administrador. El ciudadano al hacer uso del aplicativo móvil puede realizar cualquier tipo de reporte de un incidente relacionado con un hecho ilícito por medio de un video, audio, fotografía o texto. Los resultados fueron: El análisis de requisitos de usuario y la metodología XP, mejoran el desarrollo de la aplicación móvil, la validación de la aplicación móvil, a través del instrumento validado QUIS, indica un porcentaje de 86.72% de aceptación del aplicativo. Finalmente, la conclusión fue: El desarrollo de la aplicación móvil mejora el control de incidencias de la Policía Nacional PerúTesi