👀 Live Preview
Typical preload hint in the document <head>:
<link rel="preload" href="app.js" as="script">
The browser fetches app.js early with script-level priority.
HTML as Attribute
Overview
Introduction
The as attribute is a versatile feature in HTML that allows developers to specify the expected media type or file type of a resource. This attribute is commonly used in conjunction with the <link> element—especially with rel="preload"—to provide additional information to browsers and optimize resource loading.
What You’ll Learn
Resource Hints
Preload & prefetch.
Valid Values
script, style, font.
link Element
Where as applies.
Priority
Browser optimization.
JavaScript
Set as dynamically.
Performance
Faster page loads.
Fundamentals
Purpose of as
The primary purpose of the as attribute is to provide a hint to the browser about the type of content it should expect when fetching a resource. This can help browsers optimize the loading process, improve performance, and provide a better user experience.
Required for preload
When using rel="preload", the as attribute is required. It tells the browser how to prioritize and store the resource correctly.
Foundation
📝 Syntax
Add as to a <link rel="preload"> element with a valid resource type keyword:
as.html
<link rel="preload" href="styles.css" as="style">Syntax Rules
- Used on
<link>withrel="preload",rel="prefetch", or similar. - Value must match the actual resource type (e.g. do not use
as="script"for a CSS file). - Font preloads typically need
crossoriginin addition toas="font". - Not used on regular
rel="stylesheet"or<script>tags.
Reference
💎 Values
The as attribute accepts various values to indicate different resource types. Some common values include:
- audio — Specifies that the linked resource is an audio file.
- document — Indicates that the linked resource is a document, such as an HTML page.
- font — Specifies that the linked resource is a font file.
- image — Indicates that the linked resource is an image file.
- script — Specifies that the linked resource is a script file.
- style — Indicates that the linked resource is a stylesheet.
- video — Specifies that the linked resource is a video file.
as-values.html
<link rel="preload" href="app.js" as="script">
<link rel="preload" href="hero.webp" as="image">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>Cheat Sheet
⚡ Quick Reference
| Resource | as Value | Notes |
|---|---|---|
| CSS file | style | Use with rel="preload" |
| JavaScript file | script | Classic scripts |
| Web font | font | Add crossorigin |
| Image | image | Hero images, icons |
| HTML document | document | Prefetch next page |
| Applicable element | <link> | With preload/prefetch |
Scope
Applicable Elements
| Element | Supported? | Notes |
|---|---|---|
<link rel="preload"> | Yes (required) | Primary use case |
<link rel="prefetch"> | Yes | Low-priority future resources |
<link rel="stylesheet"> | No | Does not use as |
<script> | No | Use type="module" instead |
Hands-On
Examples Gallery
Preload stylesheets, dynamic JavaScript updates, and font preloading with crossorigin.
Example
Here’s a simple example of using the as attribute with the <link> element:
as.html
<link rel="preload" href="styles.css" as="style">How It Works
In this example, the as attribute is set to style, providing a hint to the browser that the linked resource is a stylesheet. This helps browsers prioritize and optimize the loading of stylesheets for improved performance.
Dynamic Values with JavaScript
You can also dynamically set the as attribute using JavaScript. This can be useful when you need to adjust resource hints based on certain conditions or user interactions. Here’s a brief example:
dynamic-as.html
<link rel="preload" href="demo.js" as="script" id="dynamicLink">
<script>
document.getElementById("dynamicLink").setAttribute("as", "script");
</script>How It Works
In this script, the as attribute is set on a preload <link> with the id dynamicLink. Set resource hints before the browser fetches the file for best results. For ES modules, use rel="modulepreload" instead of changing as to an invalid value.
Example — Preload Font
Font files require as="font" and the crossorigin attribute:
font-preload.html
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>How It Works
Without the correct as value and CORS mode, font preloads may be discarded or fail to match the font request later.
A11y
♿ Accessibility
- Indirect benefit — Faster loading of styles and fonts can reduce layout shifts that affect readability.
- Do not preload everything — Over-preloading can slow down critical content for all users.
- Prioritize visible content — Preload hero images and fonts that affect above-the-fold text.
- Test on slow connections — Ensure preloads help, not hurt, users on limited bandwidth.
🧠 How as Works
1
Author adds preload link
Set rel="preload", href, and as.
Markup
2
Browser reads as hint
Applies correct fetch priority and storage bucket.
Hint
3
Resource fetched early
File is ready when CSS, JS, or fonts are needed.
Fetch
=
Faster, smoother page load
Critical resources arrive sooner with correct browser handling.
Compatibility
Browser Support
The as attribute with rel="preload" is supported in all modern browsers. Some older browsers ignore preload hints gracefully.
HTML Living Standard · Widely supported
Modern resource hint attribute
All major browsers honor as on preload and prefetch links.
97% Browser support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer Not supported
No preloadOpera Fully supported
Full supportas attribute (preload) 97% supported
Bottom line: Use as with confidence on preload links in all modern browsers.
Pro Tips
💡 Best Practices
✅ Do
- Use
aswithrel="preload"for critical resources - Match
asto the actual file type - Add
crossoriginfor font and CORS resources - Preload only resources used on the current page
- Use
rel="modulepreload"for ES module scripts
❌ Don’t
- Put
ason regularrel="stylesheet"links - Use invalid values like
modulefor theasattribute - Preload every asset on the page
- Mismatch
asand the actual resource type - Forget to test on slow networks and mobile devices
Wrap Up
Conclusion
The as attribute is a valuable tool in HTML for optimizing the loading of linked resources. By leveraging this attribute with rel="preload", developers can enhance performance and provide a smoother user experience on their websites.
Always pair as with the correct resource type and use it selectively for files that truly benefit from early fetching.
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about as
Bookmark these before adding preload hints.
5
Core concepts 01
Resource Hint
Type for preload.
Basics 02
link Element
Not on script.
Scope 03
Valid Keywords
script, style, font.
Values 04
JavaScript
setAttribute()
Dynamic 05
Performance
Early fetching.
Speed❓ Frequently Asked Questions
It tells the browser what type of resource is being preloaded so it can apply the correct priority and caching rules.
The
<link> element, typically with rel="preload" or rel="prefetch".Yes. A preload link without a valid
as value may be ignored by the browser.No. Use
rel="preload" with as="style" to fetch CSS early, then apply it with a separate stylesheet link.Yes. Set it on link elements via
setAttribute("as", "script") or when creating preload links in script.All modern browsers support
as with preload. Internet Explorer does not support preload.Speed up your page loads
Practice the as attribute with preload examples in the Try It editor.
About the author
5 people found this page helpful