Remove cookies from static resources

When the browser requests a static resource such as an image, a stylesheet, or a script, it sends to the server all the cookies, and it does it at every request.
If your page requests 10 scripts, then it sends 10 times the cookies.
As you have probably heard, a way to solve this issue is to serve the static resources from a cookies-free subdomain.
This is a possible solution, but sometimes you have no wish to create a subdomain only for the static assets and give instructions to WordPress for fetching them from the subdomain.
Let’s be honest, who does that?

Why this issue shouldn’t be addressed directly with the browser?
Why is the browser so stupid? Why it has to send every time the cookies for static resources?
Is there a way to solve this problem at the root?

Yes, there is, but the solution will work only with modern browsers that support the crossorigin attribute. They are also the most used browsers, so the situation is not so bad.

The idea is simply adding crossorigin=”anonymous” to all the requested scripts, links, and images. Nothing else.

Let’s translate this idea to code that works with our WordPress site.

add_action( 'wp_head','eos_rcfsr_ob_start',0 );
add_action( 'wp_footer','eos_rcfsr_ob_start',0 );

function eos_rcfsr_ob_start(){
    ob_start();
}

add_action( 'wp_head','eos_rcfsr_add_crossorigin_to_head_and_footer',PHP_INT_MAX );
add_action( 'wp_footer','eos_rcfsr_add_crossorigin_to_head_and_footer',PHP_INT_MAX );

function eos_rcfsr_add_crossorigin_to_head_and_footer(){
    $html = ob_get_clean();
    $html = eos_rcfsr_add_crossorigin_to_tag( $html,array( 'script','link' ) );
    echo $html;
}

add_filter( 'the_content',function( $content ){
    $content = eos_rcfsr_add_crossorigin_to_tag( $content,array( 'img' ) );
    return $content;
} );

function eos_rcfsr_add_crossorigin_to_tag( $html,$tags ){
    foreach( $tags as $tag ){
        $pattern = in_array( $tag,array( 'script' ) ) ? sprintf( '/<%s((?!crossorigin).)+%s>/i',$tag,$tag ) : sprintf( '/<%s((?!crossorigin).)+>/i',$tag );
        preg_match_all( $pattern,$html,$arr );
        if( $arr && is_array( $arr ) && isset( $arr[0] ) ){
            foreach( $arr[0] as $l ){
                if( false !== strpos( $l,'src' ) || false !== strpos( $l,'href' ) ){
                    $nl = str_replace( '<'.$tag,'<'.$tag.' crossorigin="anonymous"',$l );
                    $html = str_replace( $l,$nl,$html );
                }
            }
        }
    }
    return $html;
}

After adding the code above all the images, scripts, and links to external resources will have the crossorigin attribute as shown in the picture.

Remove cookies from static resources with the crossorigin attribute

This solution will not work for all those resources that are added with JavaScript, or CSS.

You should see an improvement in performance in the case of many HTTP requests to static resources with much data stored in the cookies.
In all other cases, you don’t need to remove the cookies from static resources, as you would not need to serve static resources from a cookies-free domain.
Removing cookies from static resources is not always the performance saver that some people think. This is totally not true in many cases.
In most cases, the cookies aren’t the cause of bad performance, but the resources themselves. In those cases, it would be more effective totally remove the resources that you don’t need everywhere with Freesoul Deactivate Plugins.

Of course, removing cookies from static resources improves also the privacy of your visitors, so you may want to do it for that reason.

If you want you can use the plugin Remove Cookies From Static Resources.
The plugin is just a container of the code presented in this post.
It has no settings, adds no HTTP requests, and no database queries.
You will find in the plugins page of your backend if you look for Remove Cookies From Static Resources.

Download Remove Cookies From Static Resources
All categories