@ulpi/browse 1.3.2 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -0
- package/dist/browse.cjs +7788 -148
- package/package.json +1 -1
- package/skill/SKILL.md +14 -0
package/README.md
CHANGED
|
@@ -320,6 +320,87 @@ browse react-devtools context <sel> # Context values
|
|
|
320
320
|
browse react-devtools disable # Disable
|
|
321
321
|
```
|
|
322
322
|
|
|
323
|
+
### Performance Audit
|
|
324
|
+
|
|
325
|
+
```bash
|
|
326
|
+
browse perf-audit [url] # Full performance audit with actionable report
|
|
327
|
+
browse perf-audit [url] --no-coverage # Skip JS/CSS coverage (faster)
|
|
328
|
+
browse perf-audit [url] --no-detect # Skip stack detection
|
|
329
|
+
browse perf-audit [url] --json # Structured JSON output
|
|
330
|
+
browse detect # Tech stack fingerprint (frameworks, SaaS, CDN, infra)
|
|
331
|
+
browse coverage start # Start JS/CSS code coverage collection
|
|
332
|
+
browse coverage stop # Stop and report per-file used/unused bytes
|
|
333
|
+
browse initscript set <code> # Inject JS before every page load
|
|
334
|
+
browse initscript show # Show current init script
|
|
335
|
+
browse initscript clear # Remove init script
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
`perf-audit` runs a complete performance analysis in one command:
|
|
339
|
+
|
|
340
|
+
- **Core Web Vitals** — LCP, CLS, TBT, FCP, TTFB, INP with Google's good/needs-improvement/poor thresholds
|
|
341
|
+
- **LCP Analysis** — identifies the LCP element, its network entry, render-blocking chain, and critical path
|
|
342
|
+
- **Layout Shift Attribution** — each shift traced to font swap, missing image dimensions, or dynamic content
|
|
343
|
+
- **Long Task Attribution** — maps blocking JS to source scripts and domains with per-domain TBT
|
|
344
|
+
- **Resource Breakdown** — JS/CSS/images/fonts/API categorized with sizes and largest files
|
|
345
|
+
- **Render-Blocking Detection** — sync scripts and blocking stylesheets in `<head>`
|
|
346
|
+
- **Image Audit** — format (JPEG vs WebP), missing dimensions, missing lazy-load, missing fetchpriority, oversized images, srcset usage
|
|
347
|
+
- **Font Audit** — per-font font-display value, preload status, FOIT/FOUT risk
|
|
348
|
+
- **DOM Complexity** — node count, max depth, largest subtree (flags >1,500 and >3,000 thresholds)
|
|
349
|
+
- **Stack Detection** — 108 frameworks (React, Vue, Angular, Next.js, Nuxt, Laravel, WordPress, Magento, etc.), 55 SaaS platforms (Shopify, Wix, Squarespace, etc.), CDN, protocol, compression, caching
|
|
350
|
+
- **Third-Party Impact** — per-domain inventory with size, request count, and category (analytics/ads/social/chat/monitoring)
|
|
351
|
+
- **Coverage** — per-file JS/CSS used vs unused bytes
|
|
352
|
+
- **Correlation Engine** — connects LCP to blocking CSS, Long Tasks to scripts, CLS to font swaps, fonts to FCP blocking
|
|
353
|
+
- **Recommendations** — prioritized, data-driven action items (platform-specific when SaaS detected)
|
|
354
|
+
|
|
355
|
+
```bash
|
|
356
|
+
$ browse perf-audit https://example.com --no-coverage
|
|
357
|
+
|
|
358
|
+
Core Web Vitals:
|
|
359
|
+
TTFB 580ms good
|
|
360
|
+
FCP 696ms good
|
|
361
|
+
LCP 696ms good
|
|
362
|
+
CLS 0.015 good
|
|
363
|
+
TBT 599ms needs improvement
|
|
364
|
+
|
|
365
|
+
LCP Analysis:
|
|
366
|
+
Element: <img src='hero.webp'>
|
|
367
|
+
Critical path: TTFB(580ms) -> CSS(styles.css) -> JS(vendor.js) -> Image(hero.webp) -> LCP(696ms)
|
|
368
|
+
|
|
369
|
+
DOM Complexity:
|
|
370
|
+
Total nodes: 4,476
|
|
371
|
+
WARNING: exceeds 3,000 threshold (poor)
|
|
372
|
+
|
|
373
|
+
Top Recommendations:
|
|
374
|
+
1. Add fetchpriority="high" to LCP image
|
|
375
|
+
2. Add font-display:swap to fallback fonts (FOIT risk)
|
|
376
|
+
3. Lazy-load YouTube embeds (click-to-play facade)
|
|
377
|
+
|
|
378
|
+
Audit completed in 13.2s (reload: 10.0s, settle: 3.0s, collect: 41ms, detection: 75ms)
|
|
379
|
+
```
|
|
380
|
+
|
|
381
|
+
`detect` gives a quick stack fingerprint without the full audit:
|
|
382
|
+
|
|
383
|
+
```bash
|
|
384
|
+
$ browse detect
|
|
385
|
+
|
|
386
|
+
Stack:
|
|
387
|
+
meta-framework Next.js (production), router: app, rsc: true
|
|
388
|
+
css-framework Tailwind CSS
|
|
389
|
+
build-tool Turbopack
|
|
390
|
+
|
|
391
|
+
Infrastructure:
|
|
392
|
+
CDN: Amazon CloudFront
|
|
393
|
+
Protocol: h2 (64%)
|
|
394
|
+
Cache rate: 74% (134/180)
|
|
395
|
+
DNS origins: 24 unique (15 missing preconnect)
|
|
396
|
+
DOM: 4,476 nodes, depth 23
|
|
397
|
+
|
|
398
|
+
Third-Party (4.4MB total):
|
|
399
|
+
www.youtube.com 3.0MB 45 reqs video
|
|
400
|
+
www.googletagmanager.com 331KB 3 reqs analytics
|
|
401
|
+
connect.facebook.net 214KB 2 reqs ads
|
|
402
|
+
```
|
|
403
|
+
|
|
323
404
|
### Handoff (Human Takeover)
|
|
324
405
|
|
|
325
406
|
```bash
|