# Preload Key Scripts and Stylesheets by Handle

> Adds preload hints for the enqueued scripts and stylesheets you name, so the browser fetches files that are discovered late (such as a slider script or icon font CSS) right at the start of the page load.

- Type: PHP
- Runs: Frontend only
- Category: [Performance](https://wpide.com/library/category/performance/)
- Tags: preload, scripts, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/perf-preload-key-assets/

## Code

```php
// Handles to preload: 'script' or 'style'.
$wpide_preload_handles = array(
    'swiper'       => 'script',
    'font-awesome' => 'style',
);

add_filter( 'wp_preload_resources', function ( $resources ) use ( $wpide_preload_handles ) {
    foreach ( $wpide_preload_handles as $handle => $type ) {
        $registry = 'script' === $type ? wp_scripts() : wp_styles();

        if ( empty( $registry->registered[ $handle ] ) || ! in_array( $handle, $registry->queue, true ) || ! $registry->registered[ $handle ]->src ) {
            continue;
        }

        $item = $registry->registered[ $handle ];
        $src  = $item->src;

        if ( ! preg_match( '#^(https?:)?//#', $src ) ) {
            $src = $registry->base_url . $src;
        }

        $ver = $item->ver ? $item->ver : $registry->default_version;
        $resources[] = array(
            'href' => add_query_arg( 'ver', $ver, $src ),
            'as'   => 'script' === $type ? 'script' : 'style',
        );
    }

    return $resources;
} );
```

## Notes

Only handles that are actually enqueued on the current page are preloaded; preloading too much slows down more important files.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Preload Key Scripts and Stylesheets by Handle" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/