Skip to main content

Performance

  • Minify and compress CSS, JavaScript, and HTML files.

  • Use <link rel="preconnect" href="https://fonts.googleapis.com" to optimize font loading.

  • Add <link rel="preload"> for critical assets like fonts and images.

  • Defer non-critical JavaScript using defer or async attributes:

    <script src="main.js" defer></script>

  • Use a Content Delivery Network (CDN) for static assets.

Audit - Google Lighthouse​

“Efficiently encode images” and “Properly size images” audits,​

Google Lighthouse flags images and videos as large and potentially slow-loading based on specific criteria from its performance audits. For images, Lighthouse considers an image large if its actual file size exceeds the rendered size by at least 4 KiB after compression (set to a quality level of 85 for JPEGs/BMPs). This typically applies to images larger than needed for the user’s screen resolution, often exceeding hundreds of KiB (e.g., 421.3 KiB was flagged in one audit, with 317.6 KiB savable by resizing). For videos, Lighthouse doesn’t specify an exact size threshold but flags unoptimized or large video files under audits like “Efficiently encode images” or “Avoid enormous network payloads,” recommending modern formats like WebM to reduce size. Videos are considered large if they contribute to a total page payload exceeding 1,600 KiB, as this impacts Time to Interactive on a 3G connection. To avoid slow loading, optimize images to match the rendered resolution (e.g., 1080x1080px for a 360x360px viewport on a 3x DPR device) and compress videos to minimize bandwidth usage.developer.chrome.comdeveloper.chrome.comdeveloper.chrome.com

Page Weight (in KB)Percentile
Below 650 KB10%
------
Below 1.45 MB25%
Below 2.86 MB50% (Median)
Below 5.72 MB75%
Below 11.97 MB90%

Tools

Performance & Accessibility Testing Tools:​

  1. axe DevTools (Chrome Extension)

    • Accessibility testing tool to identify and fix ARIA and other a11y issues.
    • Free version available via Chrome and Firefox extensions.
    • Download: axe DevTools

  2. Wave Accessibility Tool (Chrome Extension)

    • Tests for accessibility issues, including ARIA compliance.
    • Provides a detailed visual overlay of issues directly on your website.
    • Download: WAVE Web Accessibility Tool

  3. Pa11y

    • Open-source accessibility testing framework.
    • Includes a CLI for automation and a dashboard for visualizing results.
    • Supports ARIA compliance testing.
    • More info: Pa11y

  4. Siteimprove Accessibility Checker (Chrome Extension)

  5. Accessibility Insights for Web (Chrome/Edge Extension)

    • Free tool from Microsoft for identifying accessibility issues, including ARIA compliance.
    • Provides step-by-step guidance for fixing issues.
    • Download: Accessibility Insights for Web

  6. GTmetrix

    • Tests performance metrics like speed, page size, and requests.
    • Free tier available online, with detailed reports and suggestions.
    • More info: GTmetrix

  7. Tenon.io

    • Online accessibility testing platform for ARIA and a11y compliance.
    • Free tier available for basic testing.
    • More info: Tenon.io

Build Automation Tools​

Vite, Parcel, Webpack​

Task Runners​

  • Gulp, Grunt

Task Automation​

vs code extension for common new file creation tasks automation