Introduction
A single Dev To comparison shows two identical pages—one loaded instantly, the other lagged—revealing four tiny HTML attributes as the secret sauce.
Section I: The `loading` Attribute
- default fetches all resources immediately
- lazy defers off-screen resources
- eager loads above-the-fold content
- never lazy-load LCP images
- always set width/height to avoid CLS
Section II: The `fetchpriority` Attribute
Even hero images are low-priority by default; marking them high forces the browser to prioritize them, shaving seconds off LCP.
- default low priority for non-critical resources
- high priority moves critical resources to front
- low priority deprioritizes scripts and fonts
- full browser support as of Oct 2024
Section III: The `autocomplete` Attribute
Beyond simple on/off, 50+ specific values map fields to browsers’ autofill engines, speeding form entry and reducing errors.
- given-name family-name for name fields
- street-address postal-code for addresses
- cc-number cc-exp for payment info
- current-password new-password for login flows
- one-time-code for OTP fields
- integrates with iOS SMS autofill
Section IV: The `inputmode` Attribute
Control the mobile virtual keyboard without altering the input’s validation type, ensuring the right key set for each data entry.
- numeric for digits only
- decimal for numbers with dot
- tel for telephone keypad
- email for email keyboards
- url for URL keyboards
- search for search-optimized keyboards
Section V: Synergizing All Four Attributes
Combine loading, fetchpriority, autocomplete, and inputmode in a credit-card form and OTP field to achieve seamless UX and measurable performance gains.
Metrics to Measure Impact
- LCP seconds saved
- CLS score improvement
- MB bandwidth saved per load
- form completion rate increase percentage
- mobile keyboard switch reduction
Conclusion & Actionable Takeaways
Add these four attributes in under 10 minutes, audit existing pages, and reference the WHATWG Living Standard for the full autocomplete list.
