Prestbury Web Services

Prestbury Web Services

01625 820 339

Clean up The WordPress Header


WordPress header

Clarify & declutter the wp_head

This is the second instalment of my guide to optimising and streamlining WordPress Theme builds. In part one we looked at the more complex subject of Open Graph and ld+json markup for SEO and social share.

This time, we are going to look at the WordPress header, or more specifically, the wp_head part of the template or theme.

This is a part of the theme that is inserted into the header.php file and populates it with dynamically generated tags and file requests that go between the <head> </head> section of the page. All the meta tags and most of the enqueued CSS and JS files etc. The ones that are specifically enqueued for the head and not the footer of course.

Most of the content that appears in this part of the theme is generated in the functions.php file or similar files that are installed with plugins.

Out the box, WordPress will populate the head with a lot of stuff that is often considered superfluous and which just adds unnecessary bloat to your site. I’m going to provide a comprehensive list of all of the items that I like to remove. This is a very personal thing and some of you may have your own preferences. For example, I don’t see any point in having a tag in the header to say which version of WordPress I am running? I also like to get rid of the large block of JSON markup for WordPress emojis as I don’t need to use this on many of my sites.

I like to remove the type attribute from CSS and JS file calls as this is no longer required and will fire off a warning when validating pages with the W3C checker.

Cleaning up the header is simply just a case of adding some filters, rules and “de-queues” to our functions file. Below is the full markup that I use on virtually all of my themes and projects including this site.

De-cluttering the header makes the job of theme building a little less complex as it helps to clarify the head section.

The Code for functions.php

/*CLEAN UP WP HEADER*/

//Remove emoji
remove_action("wp_head", "print_emoji_detection_script", 7 );
remove_action("wp_print_styles", "print_emoji_styles" );
add_filter('emoji_svg_url', '__return_false');

//Remove DNS Prefetch explainer
remove_action('wp_head', 'wp_resource_hints', 2);

//Remove RSD link
remove_action ('wp_head', 'rsd_link');

//Remove generator – wordpress version link
remove_action('wp_head', 'wp_generator');

//Remove Windows Live Writer link
remove_action('wp_head', 'wlwmanifest_link');

//Disable REST API link tag
remove_action('wp_head', 'rest_output_link_wp_head', 10);

// Disable oEmbed Discovery Links
remove_action('wp_head', 'wp_oembed_add_discovery_links', 10);

// Disable REST API link in HTTP headers
remove_action('template_redirect', 'rest_output_link_header', 11, 0);

// Remove TYPE attribute JS scripts & CSS
add_action( 'template_redirect', function(){
ob_start( function( $buffer ){
$buffer = str_replace( array( 'type="text/javascript"', "type='text/javascript'" ), '', $buffer );
$buffer = str_replace( array( 'type="text/css"', "type='text/css'" ), '', $buffer );
return $buffer;
});
});

// Dequeue jQuery Migrate script
function isa_remove_jquery_migrate( $scripts) {
if(!is_admin()) {
$scripts->remove( 'jquery' );
$scripts->add( 'jquery', false, array( 'jquery-core' ), '1.12.4' );
}
}
add_filter( 'wp_default_scripts', 'isa_remove_jquery_migrate' );

//Remove Block Library CSS
add_action( 'wp_enqueue_scripts', 'wps_deregister_styles', 100 );
function wps_deregister_styles() {
wp_dequeue_style('wp-block-library' );
wp_deregister_style( 'wp-block-library' );
}

/*End of CLEAN UP WP HEADER*/

An explanation of the items that we are removing :-

  1. Remove Emoji – this removes a large block of json markup in the header which enables WordPress emojis on blog posts and comments. For many commercial sites this may not be required.
  2. Remove DNS prefetch to cdnjs.cloudflare.com – only do this if your theme / installation is not using a CDN (content delivery network) method for sourcing external resources such as bootstrap etc. I like to have everything, including jQuery and Google fonts, on my local server if possible. But that is just me.
  3. Remove RSD Link – Really Simple Discovery is only required if you plan on using Windows Live Writer to publish content to your WP site or blog.
  4. Remove Generator – This creates a meta tag to describe the version of WordPress in use. Rarely of any value and can also pose a minor security risk.
  5. Remove Windows Live Writer – Again, this is not required unless you use Live Writer to edit publish your WP blog.
  6. Disable Rest API – This is not required unless you intend to integrate the site with complex external functions or applications. Rest API is primarily the domain of advanced WordPress development across multiple platforms.
  7. Disable oEmbed Discovery Links – This is to enable embedding of content from your site in third party sites. It works in a similar way to Open Graph tagging which we have already implemented. Personally, I prefer not to allow oEmbed functionality and it is not recommended for sites hosting intellectual property where copyright is enforced.
  8. Remove Rest API Link in HTTP headers – again, this is not required unless you are developing complex multi-platform integrations.
  9. Remove TYPE attribute from JS scripts & CSS – This removes the type=’text/javascript’ part from src links to javascript files. This attribute is no longer required and will prevent a site from passing a w3c markup validation test.
  10. Dequeue jQuery Migrate script – Important; only remove the migrate script if you are running an up to date version of WordPress with up to date plugins as this script helps to enable bidirectional compatibility with legacy components.
  11. Remove block library CSS – This is a large CSS file with selectors relating to the WordPress Gutenberg block library.
«   |  

Category: code, Technology   Tags: , ,

03-Jan-2021