DOCSEARCHbyAlgolia
Submit Docs

Awesome WPO

repository·main·Indexed 27 days ago

https://github.com/davidsonfellipe/awesome-wpo

A curated collection of resources for Web Performance Optimization (WPO). It includes tools, articles, books, and case studies for improving website speed and user experience. The repository covers Core Web Vitals (LCP, INP, CLS), browser APIs (Navigation Timing, Resource Timing), image optimization, CDN options, bundle analysis, and performance benchmarking for JavaScript, PHP, and CSS.

Tokens
5K
Snippets
0
Records
34
Agent score
94%

What's inside awesome-wpo

  1. Use performance bookmarklets

    main

    Inject scripts into the browser to analyze the current page:

    • PerfMap: Create a frontend performance heatmap using the Resource Timing API.
    • DOM Monster: Analyze DOM health and other page features.
    • Performance-Bookmarklet: Analyze page via Resource Timing, Navigation Timing, and User-Timing APIs.
    • CSS Stress: Stress testing and profiling for CSS.

  2. Run performance benchmarks

    main

    Tools for creating test cases and comparing implementations:

    • JavaScript:
      • Benchmark.js: Robust library with high-resolution timers.
      • JSBench: Browser-based tool for creating/sharing tests.
      • JSlitmus: Lightweight ad-hoc tests.
      • Stats.js: Simple info box for monitoring code performance.
      • Memory-stats.js: Monitor JS Heap Size.
    • PHP:
      • php-bench: Profile PHP code blocks.
      • PHPench: Graphical output for PHP benchmarks using GnuPlot.
    • CSS:
      • CSS-perf: Testing CSS architecture and strategies.

  3. Analyze web performance with Analyzers

    main

    Use various tools to diagnose and visualize web performance issues:

    • Request Map: Visualize first- and third-party request dependencies.
    • Web.dev & PageSpeed Insights: Get guidance and diagnostics for Core Web Vitals (CWV).
    • PageGym: Advanced analysis for technical SEO and performance.
    • DebugBear: Lighthouse-based site monitoring to track metric changes over time.
    • Dareboost & Screpy: Multi-audit tools for performance, SEO, and security.
    • YSlow: Rule-based performance improvement suggestions.
    • Yellow Lab Tools: Audits frontend bad practices and profiles JavaScript.
    • Waterfall Tools: View network request waterfalls for HAR, WPT JSON, and Chrome traces.
    • Redirect Checker: Analyze HTTP redirect chains and loops.

  4. Monitor application performance (APM)

    main

    Implement Application Performance Monitoring to track uptime and distributed tracing:

    • Datadog APM: End-to-end distributed tracing correlated to all telemetry.
    • BetterUptime, Pingdom, UptimeRobot, StatusList: Tools for website uptime monitoring and status pages.

  5. Implement Real User Monitoring (RUM)

    main

    Monitor actual user experiences using RUM tools:

    • Catchpoint RUM: Core Web Vitals and third-party impact analysis (OpenTelemetry-based).
    • Atatus: Full-stack observability including session replay and OpenTelemetry.
    • Datadog RUM: Browser/mobile RUM with session replay and Core Web Vitals.
    • New Relic Browser Monitoring: Distributed tracing to backend and deployment markers.
    • SpeedCurve: Combines synthetic testing, RUM, and performance budgets.
    • Boomerang (Open Source/Akamai mPulse): Akamai-maintained library for monitoring user interactions.

  6. Analyze JavaScript and asset bundles

    main

    Use these tools to manage and inspect bundle sizes and contents:

    • Bundlesize: Enforce bundle size limits.
    • source-map-explorer: Debug bundle space usage via source maps.
    • Bundlephobia: Predict the impact of adding an npm package to your bundle.
    • Webpack bundle analyzer: Interactive treemap visualization of Webpack bundle content.
    • Compression Webpack plugin: Prepare compressed assets for Content-Encoding.
    • BundleStats: Generate and compare bundle reports between builds.

  7. Minify web assets (HTML, JS, CSS, SVG)

    main

    Use these tools to reduce file sizes for faster delivery:

    HTML Minification

    • HTMLCompressor: Java library with a CLI.
    • Django-htmlmin: Python/Django/Flask support.
    • HTMLMinifier: Highly configurable JavaScript-based minifier.
    • Koa HTML Minifier: Koa middleware (requires explicit option configuration).
    • Minimize: Node-based, server-side minifier.
    • Html-minifier: Windows CLI tool for HTML and Razor views.

    JavaScript Minification

    • UglifyJS2: Parser, minifier, and compressor toolkit.
    • Terser: Modern successor to UglifyJS with ES6+ support.
    • SWC: Extremely fast Rust-based compiler and minifier.
    • JShrink: PHP class for minification.
    • JSCompress: Minimalist online tool.

    CSS Minification

    • CSSO: Performs structural optimization in addition to minification.
    • Clean-css: Fast and efficient Node.js minifier.
    • CSSshrink: Focuses on reducing CSS size for the critical path.
    • Prettyugly: Can strip spaces (uglify) or add consistent spaces (prettify).

    SVG Optimization

    • SVGO: Node.js-based optimizer.
    • SVG OMG: GUI for SVGO configuration.
    • Scour: Python script for aggressive cleaning.
    • SVG Cleaner: Threaded batch cleaner for SVG files.

    Build Tool Plugins

    • Grunt: grunt-contrib-htmlmin, grunt-htmlcompressor, grunt-contrib-concat, grunt-contrib-uglify, grunt-contrib-cssmin, grunt-svgmin, grunt-cssshrink.
    • Gulp: gulp-htmlmin, gulp-cssshrink, gulp-svgmin, gulp-uncss.
    • Django: django-compressor (concatenates JS/CSS), django-pipeline (asset packaging).

  8. Monitor web performance metrics

    main

    The following tools can be used to collect, monitor, and analyze web performance metrics:

    • Phantomas: PhantomJS-based metrics collector.
    • Bench: Uses Phantomas to benchmark pages and store results in MongoDB.
    • Keepfast: Monitors web page performance indicators.
    • GTmetrix: Uses Lighthouse to score pages and provide optimization recommendations.
    • Pingbreak.com: Monitors site and SSL response times with alerting (Slack, Twitter, Discord, etc.).
    • Pingdom site Speed Test: Analyzes load times and identifies bottlenecks.
    • Dotcom-tools: Analyzes speed from 20 global locations.
    • WebPageTest: Provides rich diagnostic info (waterfall charts, Page Speed checks) using real browsers and connection speeds.
    • Sitespeed.io: Open-source tool using the Navigation Timing API; outputs XML and HTML reports.
    • Perfjankie: Runtime Browser Performance regression suite.
    • BrowserView Monitoring: Continually checks load times in IE, Chrome, and Firefox globally.
    • DareBoost: Real Browser Monitoring using YSlow and Page Speed.
    • Perfume.js: Tiny library to collect Core Web Vitals from real users.
    • puppeteer-webperf: Collects metrics within Puppeteer scripts.
    • Telescope: Playwright-based CLI/library that collects HAR, Web Vitals, resource timing, and screenshots across multiple browsers.
    • WebPerformance Report: Weekly email reports including Core Web Vitals.

    Automation & Integration:

    • Grunt-phantomas: Grunt plugin for Phantomas.
    • WebPageTest API Wrapper for Node.js: npm package and CLI tool for the WebPageTest API.

  10. Optimize layout and rendering performance

    main

    Use these libraries to improve user experience and rendering efficiency:

    • Fontaine: Automatically provides font fallbacks based on metrics to reduce Cumulative Layout Shift (CLS).
    • Critical: Extracts and inlines Critical-path CSS into HTML pages.
    • Lazysizes: High-performance lazy loader for images, iframes, and scripts (no configuration required).
    • react-virtualized: React components for efficient rendering of large lists/tables via row virtualization.
    • uCSS: Crawls sites to identify unused CSS selectors.
    • Fontaine: Reduces CLS by using font metrics for fallbacks.
    • TMI (Too Many Images): Tool to discover image weight on a website.

  11. Explore Agent Skills for Web Quality Audits

    main

    Use these specialized skill sets to guide web quality audits and optimization workflows:

    • web-quality-audit: Comprehensive quality review across all categories.
    • core-web-vitals: Focuses on LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift) optimizations.
    • accessibility: Focuses on WCAG compliance, screen reader support, and keyboard navigation.
    • performance: Focuses on loading speed, runtime efficiency, and resource optimization.
    • best-practices: Focuses on security, modern APIs, and code quality patterns.