BestHub
Sign in
Tag

lighthouse

0 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 28, 2024 · Frontend Development

Performance Optimization of a Vue2 + ElementUI Cloud Management Platform

This article describes how a legacy Vue2‑based cloud management system was profiled with Lighthouse and webpack‑bundle‑analyzer, then optimized through static asset compression, dead‑code removal, tree‑shaking, code‑splitting, async loading and server tweaks, achieving a three‑fold reduction in bundle size and a 13.6‑second improvement in first‑contentful‑paint time.

VueWebpackcode-splitting
0 likes · 11 min read
Performance Optimization of a Vue2 + ElementUI Cloud Management Platform
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 12, 2024 · Frontend Development

Why Lighthouse Dropped Time to Interactive (TTI) and What Replaced It

This article explains why Lighthouse removed the Time to Interactive (TTI) metric after version 10, describes how TTI was calculated, discusses its inaccuracies, and introduces the more reliable replacement metrics such as Total Blocking Time (TBT), First Input Delay (FID) and Interaction to Next Paint (INP) for assessing web performance.

FIDINPTBT
0 likes · 13 min read
Why Lighthouse Dropped Time to Interactive (TTI) and What Replaced It
Xianyu Technology
Xianyu Technology
Mar 22, 2023 · Frontend Development

TypeScript Mapping Types, Custom Lighthouse Audits, and React Portal Tips

This newsletter issue teaches frontend developers how to simplify TypeScript typings with mapped and index types, extend Chrome Lighthouse by adding custom gatherers and audits for static resources, and effectively use React portals for modals and other UI elements while handling events and styling correctly.

PortalReactTypeScript
0 likes · 11 min read
TypeScript Mapping Types, Custom Lighthouse Audits, and React Portal Tips
DataFunTalk
DataFunTalk
Feb 4, 2023 · Big Data

Design and Practice of Tencent Lighthouse Fusion Analysis Engine

This article presents the design and implementation of Tencent Lighthouse's Fusion Analysis Engine, covering its background, challenges, fusion architecture, kernel optimizations, acceleration techniques, practical outcomes, and future evolution directions for high‑performance data access.

Big DataFusion EngineMaterialized Views
0 likes · 12 min read
Design and Practice of Tencent Lighthouse Fusion Analysis Engine
JD Retail Technology
JD Retail Technology
Jun 24, 2022 · Frontend Development

Understanding and Optimizing H5 Page Performance: Metrics, Detection, and Best Practices

This article explains the core H5 page performance metrics such as FCP, LCP, CLS, TTI, and TBT, describes how to measure them with Lighthouse, and provides comprehensive network‑ and rendering‑layer optimization techniques along with real‑world case studies from the PLUS team to improve user experience.

H5MetricsOptimization
0 likes · 12 min read
Understanding and Optimizing H5 Page Performance: Metrics, Detection, and Best Practices
政采云技术
政采云技术
Jun 15, 2022 · Frontend Development

Applying Data Statistics to Frontend Performance Detection and Optimization

This article explains how a self‑built performance testing platform leverages data‑statistical models, such as scoring and interval models based on normal distribution and percentile analysis, to quantify web‑page metrics, guide automated and semi‑automated optimizations, and integrate with CI/CD workflows for frontend development.

OptimizationPuppeteerdata-statistics
0 likes · 24 min read
Applying Data Statistics to Frontend Performance Detection and Optimization
php中文网 Courses
php中文网 Courses
May 5, 2022 · Frontend Development

Web Performance Optimization Guide: Lighthouse Metrics and Vue‑Specific Techniques

This article explains how to use Google Lighthouse to measure key frontend performance metrics such as FCP, LCP and Speed Index, and provides practical optimization strategies—including reducing unused JavaScript, lazy‑loading images, using async/defer, code splitting, and Vue‑specific tricks like functional components and virtual scrolling—to improve scores on both local and production environments.

OptimizationVuefrontend
0 likes · 14 min read
Web Performance Optimization Guide: Lighthouse Metrics and Vue‑Specific Techniques
Ctrip Technology
Ctrip Technology
Feb 10, 2022 · Frontend Development

Web Performance Optimization Practices for Trip.com Flight Site

This article presents a comprehensive guide to improving web performance for Trip.com’s flight pages, covering user‑centric metrics, measurement methods, and practical optimization techniques such as package size reduction, resource hints, lazy loading, server‑side rendering, long‑task mitigation, and React‑specific improvements, ultimately raising the PageSpeed score from around 30 to over 80.

Reactfrontend optimizationlighthouse
0 likes · 20 min read
Web Performance Optimization Practices for Trip.com Flight Site
360 Quality & Efficiency
360 Quality & Efficiency
Jun 11, 2021 · Frontend Development

How Front-End Developers Can Check and Implement On-Page SEO

This guide explains what SEO is, why it matters, how front‑end developers can audit on‑page SEO using Chrome Lighthouse, and provides practical recommendations for writing title, description, keywords, semantic HTML, CSS, and image alt attributes to improve search engine visibility.

Front-End DevelopmentHTML SemanticsMeta Tags
0 likes · 7 min read
How Front-End Developers Can Check and Implement On-Page SEO
DeWu Technology
DeWu Technology
Jun 4, 2021 · Mobile Development

Page Performance Optimization for Mobile App Webview

The DeWu app boosted WebView H5 page load speed by combining native‑level tactics—static JS/CSS bundling, HTML preloading—and web‑only strategies such as SSR, WebP image conversion, unused‑component removal, on‑demand lodash loading, and off‑screen image lazy‑loading, raising second‑open rates from ~5% to ~40%, improving Lighthouse scores by over 20% and cutting transferred bytes by roughly 20%, delivering an overall ~10% performance gain.

PerformanceOptimizationSPASSR
0 likes · 4 min read
Page Performance Optimization for Mobile App Webview
Tencent Cloud Developer
Tencent Cloud Developer
Jun 1, 2021 · Frontend Development

Front‑End Performance Monitoring: Metrics, Types, and Data Collection

Front‑end performance monitoring lets developers detect issues early, compare synthetic and real‑user approaches, track key metrics like LCP, FID, and CLS, and gather data via the web‑vitals library, Performance API, and error‑tracking hooks to systematically improve load speed, interactivity, and visual stability.

Error TrackingPerformance APIPerformance Monitoring
0 likes · 16 min read
Front‑End Performance Monitoring: Metrics, Types, and Data Collection
DeWu Technology
DeWu Technology
Apr 11, 2021 · Frontend Development

Front-End Performance Metrics and Optimization Strategies

The article compares client‑side and server‑side rendering, defines key user‑perceived metrics such as FCP, LCP and a custom weighted‑area FMP, explains how to measure them with MutationObserver and performance APIs, and outlines business‑ and page‑level analysis plus optimizations—including pre‑loading, WebP images, bundle trimming and SSR tweaks—that collectively boost Lighthouse scores by over 20% and reduce data transfer by roughly 20%.

FMPOptimizationSPA
0 likes · 13 min read
Front-End Performance Metrics and Optimization Strategies
vivo Internet Technology
vivo Internet Technology
Dec 2, 2020 · Frontend Development

Understanding Lighthouse 6.0 Performance Metrics: A Comprehensive Guide to Front-end Page Performance Scoring

The guide explains Google’s Lighthouse 6.0 scoring system, detailing the new core metrics—Largest Contentful Paint, Total Blocking Time, and Cumulative Layout Shift—their weightings alongside FCP, Speed Index, and Time‑to‑Interactive, and how developers can use them to scientifically assess and improve front‑end page performance.

CLSCore Web VitalsLCP
0 likes · 15 min read
Understanding Lighthouse 6.0 Performance Metrics: A Comprehensive Guide to Front-end Page Performance Scoring
政采云技术
政采云技术
Oct 29, 2020 · Frontend Development

How to Build a Custom Frontend Performance Testing System from Scratch

This article explains how to design and implement a bespoke performance testing platform for web pages using Lighthouse, Puppeteer, and Node.js, covering architecture, data collection, hook functions, gatherer modules, scoring logic, and automated weekly reporting.

Puppeteerfrontendlighthouse
0 likes · 18 min read
How to Build a Custom Frontend Performance Testing System from Scratch
Tencent Cloud Developer
Tencent Cloud Developer
Sep 1, 2020 · Frontend Development

Frontend Performance Analysis with Chrome DevTools: Lighthouse, Performance Panel, and Automation

The article explains how to diagnose and improve frontend performance using Chrome DevTools—particularly Lighthouse for synthetic audits and the Performance panel for runtime profiling—while covering key metrics, automation via the Chrome DevTools Protocol, and the distinction between synthetic monitoring and real‑user monitoring.

Chrome DevToolsautomationfrontend
0 likes · 12 min read
Frontend Performance Analysis with Chrome DevTools: Lighthouse, Performance Panel, and Automation
HelloTech
HelloTech
Jul 1, 2020 · Frontend Development

Developing a Lighthouse Plugin for Web and Mini‑Program Performance Monitoring

The article explains how Harbor Front‑End extends Lighthouse with a custom plugin—defining gatherers, audits, and categories—to uniformly monitor web pages and mini‑programs, illustrating setup, a sample native API‑call logger, and configuration steps that produce detailed performance reports alongside standard Lighthouse metrics.

JavaScriptlighthousemini-program
0 likes · 14 min read
Developing a Lighthouse Plugin for Web and Mini‑Program Performance Monitoring
政采云技术
政采云技术
Sep 3, 2019 · Frontend Development

Automated Web Performance Optimization Analysis System – “Baice” Overview

This article introduces the Baice web performance optimization platform built by the Zhengcai Cloud front‑end team, explaining synthetic and real‑user monitoring, the Lighthouse workflow, custom extensions using Puppeteer, metric weighting, detection models, scoring, optimization suggestions, and trend analysis for improving page speed and user experience.

Puppeteerfrontend optimizationlighthouse
0 likes · 10 min read
Automated Web Performance Optimization Analysis System – “Baice” Overview
UC Tech Team
UC Tech Team
Nov 1, 2018 · Frontend Development

Web Performance Optimization: Lessons from the Oodles Theater App

This article walks through practical web performance optimization techniques—such as removing unused resources, effective caching, code splitting, image compression, lazy loading, and resource hints—demonstrated on the Oodles Theater demo app, showing how Lighthouse audits guide measurable improvements.

Image Optimizationcode-splittingfrontend
0 likes · 23 min read
Web Performance Optimization: Lessons from the Oodles Theater App
UC Tech Team
UC Tech Team
Oct 22, 2018 · Frontend Development

Shining a Light on JavaScript Performance with Lighthouse

This article explains how Lighthouse can measure JavaScript execution time, reveal unused code through coverage, and offers practical steps—such as sending only needed scripts, minifying, and removing dead code—to reduce JavaScript overhead and improve user experience on web pages.

Code CoverageJavaScriptfrontend
0 likes · 4 min read
Shining a Light on JavaScript Performance with Lighthouse