Frontend
191 items tagged with "frontend"
Best Practices17
Google Web Vitals
Core performance metrics (LCP, FID, CLS, INP) for measuring real-world user experience.
Backends for Frontends (BFF)
An architecture pattern that gives each frontend client its own tailored backend service, instead of forcing web, mobile, and other clients to share one general-purpose API.
Progressive Enhancement
A frontend strategy that builds a baseline experience with semantic HTML first, then layers CSS and JavaScript so the site works for every browser and device.
WCAG 2.2 Accessibility Compliance
The W3C Web Content Accessibility Guidelines 2.2 define testable success criteria across four principles so web content is perceivable, operable, understandable, and robust.
Performance Budgets
A performance budget sets quantitative limits on metrics like page weight, request count, and load timings, enforced in development and CI to stop regressions.
Mobile-First Design
An approach that designs the smallest-screen experience first, then progressively adds layout and features for larger viewports, prioritizing content and performance.
Image Optimization Best Practices
Techniques to reduce image bytes and improve loading using modern formats, responsive sizing, compression, lazy loading, and CDNs without sacrificing visual quality.
Atomic Design
A methodology by Brad Frost for building UI from five composable levels: atoms, molecules, organisms, templates, and pages, giving design systems a consistent structure.
Component-Driven Development
A development approach that builds UIs bottom-up from isolated, reusable components, developed and tested independently before assembly into pages and apps.
Design Systems
A design system is a single source of truth combining reusable components, design tokens, patterns, and guidelines that keep products consistent and faster to build.
Micro-Frontends
An architecture that splits a web app into independently developed and deployed frontend pieces owned by separate teams, then composes them into one experience.
Progressive Web Apps (PWA)
Web apps that use service workers, a manifest, and HTTPS to deliver installable, offline-capable, app-like experiences from a single codebase across platforms.
Responsive Web Design
An approach by Ethan Marcotte that uses fluid grids, flexible media, and media queries so one layout adapts seamlessly across screen sizes and devices.
Lazy Loading and Code Splitting
Techniques that defer loading of non-critical code and assets and split bundles by route or component, reducing initial payload and speeding up first load.
Frontend Internationalization (i18n)
Designing and building UIs so they can adapt to multiple languages, regions, and formats without code changes, separating translatable text from logic.
The Testing Trophy
A testing model that weights integration tests most heavily, balancing static analysis, unit, integration, and end-to-end tests by confidence-per-cost.
Visual Regression Testing
Automated testing that captures screenshots of UI states and compares them against baselines to detect unintended visual changes.
Patterns11
Static Content Hosting
Serve static assets from storage or a CDN instead of application servers to cut load, latency, and cost.
Container/Presentational Pattern
Separates components that fetch and manage data (containers) from components that only render UI from props (presentational), improving reuse and testability.
Higher-Order Component (HOC)
A function that takes a component and returns a new component with added behavior, enabling cross-cutting concerns to be shared without inheritance.
Render Props
A component shares logic by accepting a function prop that it calls with internal state, letting the caller control rendering while reusing behavior.
Custom Hooks
Extracts reusable stateful logic from React function components into named hook functions, sharing behavior without wrapper components or prop drilling.
Compound Components
A set of components that work together and share implicit state through context, giving consumers a flexible, declarative API for a composite widget.
Provider Pattern
Distributes shared state or services to a component subtree through context, avoiding prop drilling and centralizing access to cross-cutting data.
Model-View-Controller (MVC)
Separates an application into a model (data and rules), a view (presentation), and a controller (input handling), decoupling concerns for maintainability.
Model-View-ViewModel (MVVM)
Separates UI from logic via a view-model that exposes bindable state and commands, with two-way data binding keeping the view and view-model in sync.
Micro Frontend
Decomposes a web frontend into independently developed and deployed pieces owned by separate teams, then composes them into one application at runtime or build time.
Island Architecture
Renders a page as mostly static HTML with isolated interactive 'islands' that hydrate independently, minimizing JavaScript shipped to the browser.
Anti-Patterns2
Magic Pushbutton
Putting business logic directly in UI event handlers, so a single button click handler holds validation, rules, and persistence with no separation of concerns.
Smart UI
Concentrating business logic, data access, and rules inside the presentation layer, fusing UI and domain so neither can change or be tested independently.
Tutorials6
Converting React Class Components to Hooks
Master the conversion of React class components to functional components with hooks
Migrating to Next.js App Router
Upgrade your Next.js application from Pages to App Router
Migrating to Tailwind CSS
Convert your existing CSS to Tailwind utility classes
How to host a static site on Amazon S3 with CloudFront
Serve a static website from an S3 bucket behind the CloudFront CDN with HTTPS and global caching.
How to host a static site on Azure with Front Door
Serve static content from Azure Blob Storage behind Azure Front Door for global delivery and HTTPS.
How to build a CRUD app on Google Cloud Firestore
Model collections and perform CRUD operations and queries against Google Cloud Firestore from a web app.
Blueprints19
jQuery to React Blueprint
Frontend modernization from jQuery to React component architecture
AngularJS to React Blueprint
Migration guide from AngularJS to React with TypeScript
React Class to Hooks Blueprint
React class components to functional components with hooks
Redux to Zustand Blueprint
State management migration from Redux to Zustand
AngularJS to Angular Blueprint
Migrate a legacy AngularJS (1.x) application to modern Angular using a hybrid ngUpgrade bridge, component-by-component.
jQuery to Vue Blueprint
Replace imperative jQuery DOM manipulation with a declarative Vue 3 component architecture, island by island.
Client-Rendered SPA to Next.js SSR Blueprint
Convert a client-rendered React SPA to server-side rendering with the Next.js App Router for faster loads and better SEO.
Vue SPA to Nuxt SSR Blueprint
Convert a client-rendered Vue 3 SPA to server-rendered Nuxt 3 for improved performance, SEO, and routing conventions.
Monolith UI to Micro-Frontends Blueprint
Decompose a large frontend monolith into independently deployable micro-frontends using Module Federation and a shell app.
Separate iOS and Android to React Native Blueprint
Consolidate separate native iOS (Swift) and Android (Kotlin) apps into one React Native codebase with native modules where needed.
Separate iOS and Android to Flutter Blueprint
Merge separate native iOS and Android apps into a single Flutter codebase using add-to-app and platform channels.
Oracle Forms to Web Application Blueprint
Modernize Oracle Forms and Reports applications into a modern web app with a REST API over the existing Oracle Database.
Visual Basic / WinForms to Web Application Blueprint
Modernize legacy VB6 or .NET WinForms desktop apps into a browser-based web application with a modern API backend.
Silverlight / Flash to HTML5 Blueprint
Replace end-of-life Silverlight and Flash applications with modern HTML5, CSS, and JavaScript using web-standard APIs.
WCAG 2.2 Accessibility Remediation Blueprint
Remediate a web application to meet WCAG 2.2 AA through audit, prioritized fixes, automated testing, and governance.
Desktop App to Progressive Web App Blueprint
Convert a legacy desktop application into an installable, offline-capable Progressive Web App backed by a modern API.
AngularJS to React Blueprint
Migrate a legacy AngularJS (1.x) application to React, replacing it route-by-route behind a routing proxy or shell.
jQuery to React SPA Blueprint
Replace a jQuery-driven multi-page or hybrid frontend with a structured React single-page application.
ASP.NET Web Forms to Blazor Blueprint
Modernize a legacy ASP.NET Web Forms application to Blazor on .NET, replacing postback pages with components and an API.
Migrations13
Angular 17 to Angular 19 Migration
Upgrade Angular 17 to 19 with new control flow and improved signals
AngularJS to Angular Migration
Major migration from AngularJS (1.x) to modern Angular with TypeScript
Create React App to Next.js Migration
Migrate a CRA app to Next.js with SSR/SSG options, routing changes, and data fetching updates
Create React App to Vite Migration
Migrate a CRA React app to Vite with updated env vars, build config, and tooling
jQuery to React Migration
Replace jQuery-driven UI with React components, routing, and state management
Next.js 13 to Next.js 15 Migration
Upgrade Next.js from 13 to 15 with App Router and React 19 support
Nuxt 2 to Nuxt 3 Migration
Migration from Nuxt 2 to Nuxt 3 with Vue 3 and Nitro server
React 18 to React 19 Migration
Upgrade to React 19 with Server Components, Actions, and use() hook
React Class Components to Hooks Migration
Convert React class components to functional components with hooks and Server Components
React Router v5 to v6 Migration
Upgrade routing from React Router v5 to v6 (Routes, element prop, navigate APIs, relative routing)
Svelte 4 to Svelte 5 Migration
Migrate to Svelte 5 with runes and improved reactivity
TypeScript 4 to TypeScript 5 Migration
Upgrade TypeScript from 4.x to 5.x and resolve type-checking and build-tool compatibility issues
Vue 2 to Vue 3 Migration
Migrate from Vue 2 Options API to Vue 3 Composition API with improved TypeScript support and performance enhancements
Products8
JavaScript
High-level, dynamic programming language for web development
React
JavaScript library for building user interfaces
Angular
Platform for building mobile and desktop web applications
Vue.js
Progressive JavaScript framework for building user interfaces
Svelte
Cybernetically enhanced web apps with compile-time framework
SolidJS
Declarative JavaScript library for building user interfaces
htmx
High power tools for HTML with minimal JavaScript
Alpine.js
Lightweight JavaScript framework for composing behavior
Reference Architectures9
Jamstack Static Site with Edge Functions
Pre-rendered static front end served from a global CDN, with dynamic behavior handled by edge functions and serverless APIs.
Server-Side Rendered Web App (Next.js) on Cloud
A Next.js application rendered on the server and streamed to the browser, backed by managed compute, caching, and a relational database.
Micro-Frontends Platform
Independently built and deployed front-end modules composed at runtime into a single web app, each owned by a separate team.
Progressive Web App (PWA)
An installable, offline-capable web app using service workers, a cache strategy, and push notifications to behave like a native app.
Headless CMS Content Architecture
A content repository exposing structured content over APIs to multiple front ends, decoupling authoring from presentation.
Edge-Rendered Web Platform
A web app rendered at CDN edge locations using lightweight serverless runtimes for low-latency dynamic pages worldwide.
Backend-for-Frontend API Aggregation Platform
Per-client backend-for-frontend services and a GraphQL gateway that aggregate microservices into tailored, efficient API responses.
Single-Page Application with API Backend
A client-rendered SPA served from a CDN that talks to a stateless REST API, with token-based auth and a managed database.
Headless Commerce on Edge
A composable storefront where a static or edge-rendered front end consumes headless commerce, search, and payment APIs over a CDN.
Playbooks16
Frontend Modernization Playbook
Guide for modernizing legacy frontend applications
AngularJS to Modern Framework Program Playbook
A phased program for migrating legacy AngularJS (1.x) applications to a modern, component-based framework while keeping the product shippable throughout.
Micro-Frontends Adoption Program Playbook
A program for decomposing a frontend monolith into independently deployable micro-frontends owned by autonomous teams.
Server-Side Rendering Migration Program Playbook
A program for migrating a client-rendered single-page app to server-side rendering for better performance, SEO, and core web vitals.
Design System Rollout Program Playbook
A program for building and rolling out a shared design system across multiple product teams to enforce consistency and speed up delivery.
Cross-Platform Mobile Migration Program Playbook
A program for consolidating separate native iOS and Android apps onto a single cross-platform codebase to cut duplication and speed releases.
Native to React Native or Flutter Program Playbook
A program for migrating an existing native iOS or Android app to React Native or Flutter incrementally, embedding the new stack inside the native shell.
Oracle Forms to Web Program Playbook
A program for migrating legacy Oracle Forms and Reports applications to a modern web stack with a service API over the existing database.
WCAG 2.2 Accessibility Program Playbook
A program for bringing a product portfolio into WCAG 2.2 AA conformance through audit, remediation, and embedded accessibility governance.
Desktop to Web Program Playbook
A program for migrating a legacy desktop application to a browser-based web app while preserving offline capability and workflow productivity.
Frontend Performance Program Playbook
A program for systematically improving frontend performance and core web vitals across a product through budgets, optimization, and continuous monitoring.
Frontend Monolith Decomposition Program Playbook
A program for breaking a large single-page-app monolith into modular, independently maintainable boundaries without a full rewrite.
ASP.NET WebForms to ASP.NET Core Program Playbook
A program for migrating a legacy ASP.NET WebForms application to ASP.NET Core, replacing the page-lifecycle model with modern web patterns.
jQuery to Modern SPA Program Playbook
A program for migrating a jQuery-driven legacy web frontend to a component-based single-page application incrementally.
Progressive Web App Adoption Program Playbook
A program for upgrading an existing web app into an installable, offline-capable progressive web app with reliable performance.
Xamarin to .NET MAUI Program Playbook
A program for migrating a legacy Xamarin.Forms mobile app to .NET MAUI, the supported cross-platform successor, before Xamarin end of support.
Checklists17
Frontend Modernisation Checklist
Checklist for modernizing frontend applications and UI frameworks
Frontend Framework Migration Readiness Checklist
Verify your team, codebase, and tooling are ready before migrating a frontend application from one framework or major version to another.
Micro-Frontends Rollout Checklist
Validate architecture, ownership, and runtime integration before rolling out a micro-frontends architecture across teams.
Server-Side Rendering Migration Checklist
Confirm rendering, data fetching, caching, and SEO are ready before migrating a client-rendered app to server-side rendering.
Design System Adoption Checklist
Ensure tokens, components, governance, and migration paths are in place before rolling a shared design system across product teams.
Mobile App Store Release Checklist
Confirm builds, metadata, privacy disclosures, and rollout controls are ready before submitting a mobile app to the App Store and Play Store.
Native to Cross-Platform Mobile Migration Checklist
Assess feasibility, parity, and performance before migrating native iOS and Android apps to a cross-platform framework.
WCAG 2.2 Accessibility Audit Checklist
Audit a web application against WCAG 2.2 AA success criteria across perceivable, operable, understandable, and robust requirements.
Core Web Vitals Performance Review Checklist
Review a web application against Core Web Vitals to improve loading, interactivity, and visual stability for real users.
Progressive Web App Readiness Checklist
Verify installability, offline behavior, performance, and security before shipping a Progressive Web App.
Legacy Browser EOL Migration Checklist
Plan the removal of support for end-of-life browsers and modernize a web app's baseline without breaking key users.
React Class to Hooks Migration Checklist
Verify patterns, testing, and incremental rollout are ready before migrating React class components to function components with hooks.
jQuery to Modern SPA Migration Checklist
Plan a safe, incremental migration from a jQuery-based UI to a modern single-page-application framework.
Frontend Internationalization Readiness Checklist
Verify a web application is ready to support multiple languages, locales, and right-to-left layouts before internationalizing.
Frontend Monolith Decomposition Checklist
Plan the decomposition of a large frontend monolith into modular, independently maintainable parts before splitting it.
TypeScript Adoption Readiness Checklist
Verify tooling, configuration, and an incremental strategy are in place before adopting TypeScript in a JavaScript codebase.
Android Jetpack Compose Migration Checklist
Verify interop, performance, and incremental rollout are ready before migrating an Android app from XML Views to Jetpack Compose.
Regulations6
Americans with Disabilities Act
US civil rights law prohibiting disability discrimination; increasingly applied to website and digital service accessibility.
Section 508 of the Rehabilitation Act
US federal law requiring electronic and information technology procured or used by federal agencies to be accessible to people with disabilities.
European Accessibility Act
EU directive requiring a wide range of products and digital services to meet common accessibility requirements across member states.
Accessibility for Ontarians with Disabilities Act
Ontario law setting accessibility standards, including web accessibility, for public and private organizations in the province.
Equality Act 2010
UK law prohibiting discrimination that requires service providers to make reasonable adjustments, including for accessible digital services.
EU Web Accessibility Directive
EU directive requiring public-sector websites and mobile apps to be accessible and to publish accessibility statements.
Stacks39
JAMstack
JavaScript, APIs, Markup - Modern web architecture
Rust WASM Stack
Rust, WebAssembly, Yew - High-performance web apps
Flutter Firebase Stack
Flutter, Firebase, Cloud Functions - Cross-platform mobile
MEVN
A JavaScript fullstack combining MongoDB, Express, Vue, and Node.js for single-page web apps with one language end to end.
Next.js + Supabase
A fullstack pairing Next.js with Supabase for Postgres, auth, storage, and realtime, shipping production apps with minimal backend code.
Next.js + Prisma + Postgres
A typed fullstack of Next.js, the Prisma ORM, and PostgreSQL for SaaS apps with a hand-owned backend and end-to-end type safety.
Remix + Postgres
A web stack built on Remix's loader/action model over PostgreSQL, embracing web standards and progressive enhancement for fast, resilient apps.
SvelteKit Fullstack
A fullstack framework using SvelteKit for compiled, reactive UIs with server routes, ideal for fast, lightweight web applications.
Astro + Headless CMS
A content stack using Astro's island architecture with a headless CMS to ship fast, mostly-static sites with selective interactivity.
Nuxt + Strapi
A Vue-based stack pairing the Nuxt framework with the Strapi headless CMS for content-driven sites and apps with a customizable backend.
RedwoodJS
An opinionated fullstack JavaScript framework integrating React, GraphQL, and Prisma into one convention-driven project for startups.
Angular + NestJS
A TypeScript stack pairing the Angular front end with the NestJS backend, sharing patterns and types for structured enterprise apps.
SolidStart
A fullstack framework built on Solid's fine-grained reactivity, offering SSR, server functions, and high performance with a React-like API.
Blitz.js
A fullstack toolkit on top of Next.js that removes the API layer with typed server-side queries and mutations for rapid app building.
Vue + Nuxt + Pinia
A Vue-centric fullstack using Nuxt for SSR and server routes with Pinia for state management, for SEO-friendly interactive web apps.
JAMstack (Headless)
An architecture of pre-rendered markup, JavaScript, and APIs that decouples the front end from services for fast, secure, scalable sites.
Qwik City
A resumable fullstack framework using Qwik and Qwik City to deliver instant-loading apps with near-zero JavaScript via lazy execution.
Flutter + Firebase Stack
Cross-platform mobile stack: Flutter builds one Dart codebase for iOS, Android, and web, backed by Firebase for auth, database, storage, and serverless functions.
React Native + Expo Stack
Cross-platform mobile stack using React Native with the Expo framework for managed builds, OTA updates, and native APIs from one JavaScript/TypeScript codebase.
Native iOS (Swift + SwiftUI)
Apple-native mobile stack building iOS apps with Swift and the declarative SwiftUI framework, using Xcode and first-party Apple platform frameworks.
Native Android (Kotlin + Compose)
Google-native mobile stack building Android apps with Kotlin and the declarative Jetpack Compose UI toolkit, using Android Studio and Jetpack libraries.
Kotlin Multiplatform (KMP)
Shared-logic cross-platform stack: Kotlin Multiplatform shares business logic across iOS, Android, and more, while UIs stay native or use Compose Multiplatform.
Vue + Laravel SPA
A Vue single-page frontend talking to a Laravel JSON API, a common PHP full-stack pairing for content-heavy and SaaS applications.
React + Spring Boot
A React frontend backed by a Java Spring Boot REST API, a workhorse enterprise stack for large, long-lived business applications.
Angular + Spring Boot
An Angular frontend over a Spring Boot Java backend, a strongly opinionated, fully typed enterprise stack favored by large IT organizations.
React + Django REST Framework
A React frontend consuming a Django REST Framework API, a productive Python full-stack for data-rich and ML-adjacent web applications.
SvelteKit + Postgres
A full-stack SvelteKit application with server routes and a PostgreSQL database, delivering fast, lightweight web apps with minimal JavaScript.
Express + React + Postgres
A classic JavaScript full stack: an Express REST API on Node.js, a React frontend, and a PostgreSQL database, flexible and widely understood.
Gatsby + Headless CMS
A React-based static site generator that sources content from a headless CMS and APIs through GraphQL, producing fast, pre-built marketing and content sites.
Eleventy + Netlify
A lightweight, zero-runtime static site generator paired with Netlify hosting and functions, producing simple, fast sites with minimal JavaScript.
Hugo + CDN
A Go-powered static site generator known for extremely fast builds, paired with a global CDN to serve large content sites cheaply and quickly.
Ionic + Capacitor
A cross-platform mobile stack that builds native iOS, Android, and web apps from a single web codebase using Ionic UI components and Capacitor native runtime.
NativeScript
An open-source framework for building truly native iOS and Android apps from a single JavaScript or TypeScript codebase with direct access to native APIs.
.NET MAUI
Microsoft's cross-platform framework for building native mobile and desktop apps for iOS, Android, macOS, and Windows from a single C# and XAML codebase.
Xamarin (Legacy)
Microsoft's earlier cross-platform mobile framework using C# and Xamarin.Forms, now superseded by .NET MAUI but still present in many maintained codebases.
Expo Router + Supabase
A full-stack mobile stack pairing React Native via Expo with file-based Expo Router navigation and Supabase for auth, Postgres, storage, and realtime.
Flutter + Riverpod
A cross-platform stack pairing Google's Flutter UI toolkit with the Riverpod state-management library for type-safe, testable Dart apps across mobile, web, and desktop.
SwiftUI + Combine
Apple's modern native stack pairing the declarative SwiftUI framework with the Combine reactive framework for building iOS, macOS, watchOS, and tvOS apps.
Compose Multiplatform
JetBrains' declarative UI framework built on Kotlin Multiplatform, sharing UI and logic across Android, iOS, desktop, and web from one Kotlin codebase.
Comparisons20
Next.js vs Nuxt
Comparison of Next.js (React) and Nuxt (Vue) meta-frameworks
TypeScript vs Flow
Two static type systems for JavaScript: TypeScript is the de facto standard with a vast ecosystem, while Flow is a lighter type checker from Meta with declining adoption.
Swift vs Kotlin
The leading native mobile languages: Swift for Apple platforms and Kotlin for Android, both modern, safe, and increasingly used for cross-platform development.
React vs Angular
React is a flexible UI library you compose with your own tools; Angular is a complete, opinionated framework with batteries included.
Vue vs Svelte
Vue is a mature, progressive framework with a rich ecosystem; Svelte is a compiler that produces small, fast vanilla JavaScript with little runtime.
Next.js vs Remix
Next.js is the dominant React meta-framework with broad rendering options; Remix focuses on web standards, nested routing, and progressive enhancement.
Svelte vs SolidJS
Svelte compiles components to lean vanilla JS, while SolidJS uses fine-grained reactivity with a JSX syntax and no virtual DOM.
Astro vs Next.js
Astro is a content-first framework that ships zero JS by default; Next.js is a full React app framework with rich interactivity and rendering modes.
Angular vs Svelte
Angular is a full, opinionated enterprise framework; Svelte is a lean compiler that ships minimal runtime and concise components.
React vs SolidJS
React popularized component UI with a virtual DOM and huge ecosystem; SolidJS uses similar JSX but fine-grained signals and no virtual DOM.
React Native vs Flutter
React Native builds cross-platform apps with JavaScript and native UI; Flutter uses Dart and its own rendering engine for consistent, fast UIs.
Flutter vs Native Development
Flutter builds cross-platform apps from one Dart codebase; native development uses platform SDKs (Swift/Kotlin) for maximum integration and performance.
SwiftUI vs UIKit
SwiftUI is Apple's modern declarative UI framework; UIKit is the mature, imperative framework with deep control and the largest legacy footprint.
Jetpack Compose vs XML Views
Jetpack Compose is Android's modern declarative UI toolkit; XML Views is the traditional imperative system with the largest legacy codebase.
npm vs pnpm
npm is Node's default package manager; pnpm is a faster, disk-efficient alternative using a content-addressable store and strict dependency isolation.
pnpm vs Yarn
Both are alternative Node package managers. pnpm focuses on a strict, disk-efficient store; Yarn (Berry) offers Plug'n'Play and a flexible plugin architecture.
Webpack vs Vite
Webpack is a mature, highly configurable bundler; Vite is a faster modern build tool using native ESM in dev and Rollup for production builds.
ESLint vs Biome
ESLint is the established, plugin-rich JavaScript linter; Biome is a fast, Rust-based all-in-one linter and formatter with minimal configuration.
Jest vs Vitest
Jest is the established JavaScript testing framework; Vitest is a faster, Vite-native test runner with a Jest-compatible API and first-class ESM/TS support.
Playwright vs Cypress
Two leading end-to-end testing frameworks. Playwright offers broad multi-browser and language support; Cypress provides a polished, developer-friendly experience.
Benchmarks8
Core Web Vitals
Google's set of user-centric web performance metrics, LCP, INP, and CLS, that quantify loading, interactivity, and visual stability of real page loads.
Lighthouse Performance
Google's open-source web auditing tool that runs synthetic page loads and produces a 0-100 performance score from lab metrics like LCP, TBT, and CLS.
Mobile App Startup Time Benchmark
Measures how quickly a mobile app becomes usable, distinguishing cold, warm, and hot starts and the time to first frame and first interaction.
Mobile Frame Rate and Jank Benchmark
Measures UI rendering smoothness on mobile, quantifying dropped frames, jank, and frame-time consistency against the display refresh budget.
Mobile Battery Usage Benchmark
Measures the energy a mobile app consumes per task and over time, attributing drain to CPU, network, GPU, location, and wakelocks.
Mobile App Bundle Size Benchmark
Measures the download and installed size of a mobile app and its components, tracking size by architecture, resources, and code to control bloat.
Geekbench Mobile Benchmark
A cross-platform CPU and compute benchmark widely used to compare mobile device processor performance via standardized single- and multi-core workloads.
Lighthouse Accessibility Benchmark
Measures a web page's automated accessibility conformance using Lighthouse audits mapped to WCAG, producing a 0-100 accessibility score.