preload
Teaches resource preloading to prioritize critical assets. Use when critical resources like fonts, hero images, or key scripts are discovered late in the loading waterfall.
What this skill does
# Preload
## Table of Contents
- [When to Use](#when-to-use)
- [When NOT to Use](#when-not-to-use)
- [Instructions](#instructions)
- [Details](#details)
- [Source](#source)
[Preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) (`<link rel="preload">`) is a [browser optimization](https://web.dev/uses-rel-preload/) that allows critical resources (that may be discovered late) to be requested earlier. If you are comfortable thinking about how to manually order the loading of your key resources, it can have a positive impact on loading performance and metrics in the [Core Web Vitals](https://web.dev/vitals). That said, preload is not a panacea and requires an awareness of some trade-offs.
## When to Use
- Use this when critical resources (fonts, scripts, images) are discovered late in the loading process
- This is helpful for improving Time To Interactive (TTI) and Largest Contentful Paint (LCP)
## When NOT to Use
- For non-critical resources — preloading too many assets delays the resources that actually matter for initial render
- When resources are already discovered early by the browser's preload scanner (e.g., inline `<script>` tags in `<head>`)
- When overuse leads to browser warnings about unused preloaded resources, indicating wasted bandwidth
## Instructions
- Use `<link rel="preload">` for resources needed immediately on the current page
- Be careful not to delay First Contentful Paint by preloading too many resources
- Use `as` attribute to specify the resource type (script, style, font, image)
- For fonts and other CORS-fetched resources, set `crossorigin` on the preload to match the eventual request mode
- Only preload resources that must be visible within ~1 second of initial render
## Details
```html
<link rel="preload" href="emoji-picker.js" as="script">
...
</head>
<body>
...
<script src="stickers.js" defer></script>
<script src="video-sharing.js" defer></script>
<script src="emoji-picker.js" defer></script>
```
When optimizing for metrics like [Time To Interactive](https://web.dev/tti) or [First Input Delay](https://web.dev/fid), preload can be useful to load JavaScript bundles (or chunks) that are necessary for interactivity. Keep in mind that great care is needed when using preload as you want to avoid improving interactivity at the cost of delaying resources (like hero images or fonts) necessary for [First Contentful Paint](https://web.dev/fcp) or [Largest Contentful Paint](https://web.dev/lcp).
If you are trying to optimize the loading of first-party JavaScript, you can also consider using `<script defer>` in the document `<head>` vs. `<body>` to help with early discover of these resources.
### Preload in single-page apps
While **prefetching** is a great way to cache resources that may be requested some time soon, we can **preload** resources that need to be used instantly. Maybe it's a certain font that is used on the initial render, or certain images that the user sees right away.
Say our `EmojiPicker` component should be visible instantly on the initial render. Although it should not be included in the main bundle, it _should_ get loaded in parallel. Just like _prefetch_, we can add a magic comment in order to let Webpack know that this module should be preloaded.
```js
const EmojiPicker = import(/* webpackPreload: true */ "./EmojiPicker");
```
> Webpack 4.6.0+ allows preloading of resources by adding `/* webpackPreload: true */` to the import. In order to make preloading work in older versions of webpack, you'll need to add the [`preload-webpack-plugin`](https://github.com/GoogleChromeLabs/preload-webpack-plugin) to your webpack config.
After building the application, we can see that the `EmojiPicker` will be preloaded.
```
Asset Size Chunks Chunk Names
emoji-picker.bundle.js 1.49 KiB emoji-picker [emitted] emoji-picker
vendors~emoji-picker.bundle.js 171 KiB vendors~emoji-picker [emitted] vendors~emoji-picker
main.bundle.js 1.34 MiB main [emitted] main
Entrypoint main = main.bundle.js
(preload: vendors~emoji-picker.bundle.js emoji-picker.bundle.js)
```
The actual output is visible as a `link` tag with `rel="preload"` in the `head` of our document.
```html
<link rel="preload" href="emoji-picker.bundle.js" as="script" />
<link rel="preload" href="vendors~emoji-picker.bundle.js" as="script" />
```
The preloaded `EmojiPicker` could be loaded in parallel with the initial bundle. Unlike `prefetch`, where the browser still had a say in whether it thinks it's got a good enough internet connection and bandwidth to actually prefetch the resource, a **preloaded** resource will get preloaded no matter what.
Instead of having to wait until the `EmojiPicker` gets loaded after the initial render, the resource will be available to us instantly! As we're loading assets with smarter ordering, the initial loading time may increase significantly depending on your users device and internet connection. Only preload the resources that have to be visible ~1 second after the initial render.
### Preload + the `async` hack
Should you wish for browsers to download a script as high-priority, but not block the parser waiting for a script, you can take advantage of the preload + async hack below. The download of other resources may be delayed by the preload in this case, but this is a trade-off a developer has to make:
```html
<link rel="preload" href="emoji-picker.js" as="script">
<script src="emoji-picker.js" async>
```
### Font preloads must use `crossorigin`
Fonts are fetched as CORS resources, even when they are self-hosted on the same origin. This means the preload request and the eventual `@font-face` request need to use the same fetch mode, or the preload cannot be reused.
If you preload a font **without** `crossorigin`, the browser will typically make a `no-cors` preload request and later a separate `cors` request when CSS discovers the font. That leads to a double fetch of the same file and wastes bandwidth.
**Avoid:**
```html
<link rel="preload" href="/fonts/inter-roman.woff2" as="font" type="font/woff2">
```
**Prefer:**
```html
<link
rel="preload"
href="/fonts/inter-roman.woff2"
as="font"
type="font/woff2"
crossorigin
>
```
And make sure the `@font-face` matches the same resource:
```css
@font-face {
font-family: "Inter";
src: url("/fonts/inter-roman.woff2") format("woff2");
font-display: swap;
}
```
This same rule applies more broadly: if the eventual consumer fetches a resource with CORS semantics, the preload should match that mode too.
### Preload in Chrome 95+
Thanks to some [fixes](https://twitter.com/patmeenan/status/1436374668450177026) to preload's [queue-jumping](https://docs.google.com/document/d/1ZEi-XXhpajrnq8oqs5SiW-CXR3jMc20jWIzN5QRy1QA/edit?usp=sharing) behavior in Chrome 95+, the feature is slightly safer to use more broadly. Pat Meenan of Chrome's new recommendations for preload suggest:
- Putting it in HTTP headers will jump ahead of everything else
- Generally, preloads will load in the order the parser gets to them for anything >= Medium so be careful putting preloads at the beginning of the HTML.
- Font preloads are probably best towards the end of the head or beginning of the body
- Import preloads should be done after the script tag that needs the import (so the actual script gets loaded/parsed first)
- Image preloads will have a low priority and should be ordered relative to async scripts and other low/lowest priority tags
### Conclusions
Again, use preload sparingly and measure its impact in production. If the preload for your image is earlier in the document than it is, this can help browsers discover it (and order relative to other resources). When used incorrectly, preloading can cause your image to delay First Contentful Paint (e.g CSS, Fonts) - the opposite of what you want. Also note that for suRelated in General
modeling-omnistudio-epc-catalog
IncludedSalesforce Industries CME EPC product-modeling skill for Product2-based catalog creation. Use when creating EPC products, configuring product attributes, building offer bundles with Product Child Items, or reviewing EPC DataPack JSON metadata for product catalog changes. TRIGGER when: user creates or updates Product2 EPC records, AttributeAssignment payloads, AttributeMetadata/AttributeDefaultValues, Offer bundles, or ProductChildItem relationships. DO NOT TRIGGER when: designing OmniScripts/FlexCards/Integration Procedures (use building-omnistudio-omniscript, building-omnistudio-flexcard, or building-omnistudio-integration-procedure), implementing Apex business logic (use generating-apex), or troubleshooting deployment pipelines (use deploying-metadata).
relationship-science-coach
IncludedUse this skill for direct, practical adult relationship coaching: couples conflict, repair, trust, marriage, dating, flirting, attachment patterns, emotional connection, sex, desire differences, eroticism, kink negotiation, affection, love languages, breakups, and long-term passion. Draw on Gottman, EFT and Hold Me Tight, attachment science, modern sex research, Perel, Nagoski, Kerner, Schnarch, Love and Stosny, and flexible love-language tools. Be concrete and low-hedge. Redirect only for imminent danger, abuse, coercive control, minors, non-consent, self-harm, stalking, or medical/legal/psychiatric decisions.
building-sf-integrations
IncludedSalesforce integration architecture and runtime plumbing with 120-point scoring. Use this skill to set up Named Credentials, External Credentials, External Services, REST/SOAP callout patterns, Platform Events, and Change Data Capture. TRIGGER when: user sets up Named Credentials, External Services, REST/SOAP callouts, Platform Events, CDC, or touches .namedCredential-meta.xml files. DO NOT TRIGGER when: Connected App/OAuth config (use configuring-connected-apps), Apex-only logic (use generating-apex), or data import/export (use handling-sf-data).
venue-templates
IncludedAccess comprehensive LaTeX templates, formatting requirements, and submission guidelines for major scientific publication venues (Nature, Science, PLOS, IEEE, ACM), academic conferences (NeurIPS, ICML, CVPR, CHI), research posters, and grant proposals (NSF, NIH, DOE, DARPA). This skill should be used when preparing manuscripts for journal submission, conference papers, research posters, or grant proposals and need venue-specific formatting requirements and templates.
let-fate-decide
IncludedDraws the 12 Houses of the Zodiac Tarot spread to inject entropy into planning when prompts are vague, ambiguous, or casually delegated. Interprets the spread to guide next steps. Use when the user says 'let fate decide', 'YOLO', 'whatever', 'idk', or other nonchalant phrases, makes Yu-Gi-Oh references, or when you are about to arbitrarily pick between multiple reasonable approaches. Prefer over ask-questions-if-underspecified when the user's tone is casual or playful rather than precision-seeking.
net-ops
IncludedCross-platform network troubleshooting (Windows, macOS, Linux) via local or remote shell. Use for: DNS broken, can't resolve hostnames, nslookup/dig works but apps fail, NRPT, WFP, scutil, /etc/resolver, systemd-resolved, /etc/resolv.conf, NetworkManager, VPN DNS leak residue (ProtonVPN/Mullvad/WireGuard/AnyConnect), AV/firewall blocking DNS or DoH, Tailscale DNS interaction, intermittent connectivity, remote diagnostics over SSH.