Script To Remove Type Attribute in Javascript and CSS in WordPress

Posted Monday, January 28th, 2019 - 7,215 views

If you provide SEO services to your customers, you obviously ensure its error free as much as you can. Some of us are such perfectionists and will do everything we can do ensure a WordPress site is error free according to the W3C and other standards, no matter what it takes.

With that said there’s one error (or warning) that WordPress generated HTML5 documents get that just gets under the skin of many SEOs and has to be dealt with, it’s the following error:

Warning: The type attribute is unnecessary for JavaScript resources.

What this error/warning is saying is that the following is not necessary when referring to a script: “type=’text/javascript’.

These days browsers loading HTML5 documents are smart enough to run a javascript or CSS file, and can determine it’s type without being told what type of files they are. According to w3.org we should not use the language or type attribute and are obsolete:

Authors should not specify a language attribute on a script element. If the attribute is present, its value must be an ASCII case-insensitive match for the string “JavaScript” and either the type attribute must be omitted or its value must be an ASCII case-insensitive match for the string “text/javascript”. The attribute should be entirely omitted instead (with the value “JavaScript”, it has no effect), or replaced with use of the type attribute.

According to the Mozilla Developer site, we’re advised to omit the attribute rather than provide a redundant MIME type:

Omitted or a JavaScript MIME type: For HTML5-compliant browsers this indicates the script is JavaScript. HTML5 specification urges authors to omit the attribute rather than provide a redundant MIME type. In earlier browsers, this identified the scripting language of the embedded or imported (via the src attribute) code. JavaScript MIME types are listed in the specification.

It’s simple. If you’re developing HTML5 sites, it’s advised that you refrain from adding the type attribute to your javascript and CSS file references, and remove them wherever or however you can.

Here’s how to remove the type attribute

Open of your functions.php file in your WordPress theme directory and add the following code. Once you’ve added it, test and check your page source to ensure it’s work as it should and that the type attribute is removed:

add_filter( 'script_loader_tag', 'clean_script_tag'  );
function clean_script_tag( $input ) {
    $input = str_replace( "type='text/javascript' ", '', $input );
    return str_replace( "'", '"', $input );
}

add_filter( 'style_loader_tag',  'clean_style_tag'  );
function clean_style_tag( $input ) {
    $input = str_replace( “type=’text/css’ “, ”, $input );
    return str_replace( "'", '"', $input );
}

Once you’ve added the above code and saved, the type attributes should be gone. Note the above script will not work or be applied to style and javascript references that you have added yourself. In such cases you can manually remove the attributes yourself.

How does this attribute get added?

There are two ways the type attribute gets added to javascript and css reference code; one is by previous developers, and the other is through plugins. WordPress plugin developers sometimes decide to still add the type attribute to their scripts because they know some developers may not be writing HTML5 websites so they choose to add it. Other plugin developers write strictly for HTML5 documents and leave them out all together.

In either case, if you’re doctype is HTML5, it’s better to get the type attribute out of there!

Removing the type attribute increases site speed

Removing the type attribute from your script and style references won’t bring your site up to 100% in Google’s page speed testing tool, doing so will still increase the speed at which your pages load because you’re reducing the number of bytes it takes to display your site. That, combined with the vast array of other things you can do to increase the speed of your site including adding this code into your .htaccess file, will only help your site load faster in the long run.

Will you lose rankings with this attribute present?

You will not lose rankings by keeping this attribute present, and nor will you directly increase rankings by removing it. Keep in mind, the faster your website is, the better  it will do in the search results over time, and the better the user experience will be.

You make the choice as to whether you want to make this adjustment to your code or not but as mentioned in the outset of this article, if you’re a coding-perfectionist you might as well do it and from an SEO perspective doing so can provide you with long term (although minimal) benefits.