WordPress Header Optimization and Dead Code Elimination

If you were interested in WordPress code optimization, you must have met various tips on editing the header.php file of the theme or the wp_head action in that file. It generates various tags for the HEAD of the website pages.

The simplest recommendations were to replace standard function calls. However, later it turned out that the performance gain during these actions is not that great. Today's tips on how to improve the WordPress header will be much more useful and effective.

Let's take a closer look at the source code in HEAD of a regular page/post and at the same time compare it with the header.php file in the WordPress template. Obviously, apart from a couple of parameters, CSS resulting HTML contains many other additional lines. They are automatically generated while using different plugins on your website. Sometimes the final code is very large.

Of course, many of these functions are vital for the correct operation of the modules, but there are also some that can be eliminated. The simplest example is using the jQuery library. Some plugins, just like the system itself, insert the code of its call into the WordPress header. Consequently, you may have several duplicate scripts loaded, not even with the most current version.

The second example is well seen for WP-PageNavi plugin (blog splitting into pages). During its work, the module places its CSS in a website's header, although it will be more effective to transfer all the styles in the basic style.css of the theme. To get rid of the module code is not that easy, only its deactivation will help (which, of course, is not an option).

WordPress Header Basic Optimization

Most of the "additional inserts" of the HEAD are implemented by the system with the help of hooks for wp_head. If you look at the header.php file code in the WordPress template, you will probably find it there. You won't be able to just remove the function call, as it will result in removing not only "unnecessary inserts" but also important code without which a website won't work.

Fortunately, you can safely deactivate some of the consequences of calling wp_head. You can get rid of unnecessary elements (that you don't plan to use) and optimize WordPress code using hacks for functions.php. Open the function file and write the following code there:

remove_action('wp_head', 'feed_links_extra', 3); // removes links to rss categories
remove_action('wp_head', 'feed_links', 2); // minus links to the main rss and comments
remove_action('wp_head', 'rsd_link'); // Really Simple Discovery service
remove_action('wp_head', 'wlwmanifest_link'); // Windows Live Writer
remove_action('wp_head', 'wp_generator'); // hide the wordpress version

You can also hide different links when displaying blog posts (next, previous, short URL).

remove_action('wp_head','start_post_rel_link',10,0);
remove_action('wp_head','index_rel_link');
remove_action('wp_head','adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action('wp_head','wp_shortlink_wp_head', 10, 0 );

Removal of JSON API links:

remove_action( 'wp_head', 'rest_output_link_wp_head');
remove_action( 'wp_head', 'wp_oembed_add_discovery_links');
remove_action( 'template_redirect', 'rest_output_link_header', 11, 0 );

As I mentioned above about jQuery, the library can be called several times in the page code (together with other modules) + the version being used is not the most actual. It will not be possible to remove the script from WordPress header through remove_action, but there is another method. To remove the script call you will need this code:

if ( !is_admin() ) { 
         wp_deregister_script('jquery'); 
}

In this case, the hack works only for the website (front end), without affecting the admin panel. If you call the wp_deregister_script function without IF, different drop-down menus and some other options will stop working in the WordPress dashboard. This code should be put in functions.php file.

Important: Use it only when your website doesn't have any JavaScript action or interaction. It might break some functionality if you have plugins using jQuery.

One more thing: you should disable Emoji. A short version of the code can be found below.

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

You can also use our simple plugin Falcon to do all the jobs above:

Falcon – WordPress Optimizations & Tweaks

Author(s): eLightUp

Current Version: 2.8.3

Last Updated: May 17, 2024

falcon.2.8.3.zip

100%Ratings 2,000+Installs WP 5.9+Requires

Dead Plugin and Theme Code Elimination

In addition to the system itself, different modules are added to the HEAD. Sometimes disabling this feature is in the plugin settings, but unfortunately, most developers do not provide such flexibility for their solutions. Therefore, in order to change the WordPress header, you can try some algorithm.

First of all, you should carefully look at the main PHP file of the plugin which hooks you are going to deactivate. There should be construction by type:

add_action('wp_head', 'plugin_function_here');

Found it? - OK. Now, to get rid of the function call, add the following line to the functions.php file:

remove_action('wp_head', 'plugin_function_here');

Save it and check what happened. Below I have collected some hack samples for different plugins. Perhaps you will need something.

WP-Syntax

The function below allows you to remove the connection of styles to highlight the syntax of the program code in the text. The content of the wp-syntax.css file itself is small, so you can simply add it to the standard style.css.

remove_action( 'wp_head', 'wp_syntax_head');

qTranslate-X

The module adds version information to the WordPress header that can be hidden.

remove_action('wp_head','qtranxf_wp_head_meta_generator');

Contacts Form 7

This super popular contact form plugin output its style in the HEAD. The solution is a little more complex. It is logical that you do not need to call the plugin on pages where this very form does not exist. It only creates an additional load. Let's fix the situation and optimize WordPress code with the help of the following lines:

// Deregister Contact Form 7 styles
add_action( 'wp_print_styles', 'aa_deregister_styles', 100 );
function aa_deregister_styles() {
    if ( ! is_page( get_theme_mod( "header_contacts") ) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}

// Deregister Contact Form 7 JavaScript files on all pages without a form
add_action( 'wp_print_scripts', 'aa_deregister_javascript', 100 );
function aa_deregister_javascript() {
    if ( ! is_page( get_theme_mod( "header_contacts") ) ) {
        wp_deregister_script( 'contact-form-7' );
    }
}

WP-PageNavi

There are unique cases when using remove_action for wp_head does not work. Like, e.g., with the same WP-PageNavi where there is no explicit function call in wp_head, but the plugin still loads its styles' file. If you look carefully at the source code of wp-pagenavi.php, you will find a function "Enqueue PageNavi Stylesheets" which adds styles through add_action. Accordingly, we place a line in the functions.php file to stop this call:

remove_action('wp_print_styles', 'pagenavi_stylesheets');

Yet Another Related Posts Plugin

Styles of similar YARPP plugin posts can be included in style.css, removing the loading of several extra files. Hack gets rid of the module code in the header and footer: widget.css, related.css and yarpp-thumbnails-yarpp-thumbnail style files are eliminated.

add_action( 'wp_print_styles', 'tj_deregister_yarpp_header_styles' );
function tj_deregister_yarpp_header_styles() {
   wp_dequeue_style('yarppWidgetCss');
   // The following line is needed if related.css is loaded in the header and disabled in the footer
   wp_deregister_style('yarppRelatedCss'); 
}
add_action( 'wp_footer', 'tj_deregister_yarpp_footer_styles' );
function tj_deregister_yarpp_footer_styles() {
   wp_dequeue_style('yarppRelatedCss');
   wp_dequeue_style('yarpp-thumbnails-yarpp-thumbnail');
}

For templates / themes

If you need to remove unnecessary styles or scripts from the header, you can use the functions wp_dequeue_style and wp_deregister_script. Below is an example of code that helped me solve the corresponding task. I have found the names of scripts in the final HTML and different template files.

add_action( 'wp_enqueue_scripts', 'remove_some_stylesheet', 20 );
function remove_some_stylesheet() {
    wp_dequeue_style('flexslider');
    wp_dequeue_style('owl-carousel');
    wp_dequeue_style('owl-theme');
    wp_dequeue_style('font-awesome');
    wp_dequeue_style('wp-pagenavi');
    wp_deregister_script('flexslider');
    wp_deregister_script('googlemapapis');
    wp_deregister_script('easing');
    wp_deregister_script('jflickrfeed');
    wp_deregister_script('playlist');
    wp_deregister_script('jplayer');
}

Now, you should have noticed some global principle of working with "unnecessary calls" for wp_head - find an appropriate plugin/theme function and then disable it. With the help of different hacks in functions.php, you can change the WordPress header to:

1. Get rid of unnecessary functionality.
2. Remove duplicate strings and optimize the WordPress site code.

If you know any additional hacks or you have comments on the current one, you are more than welcome to leave comments.

> Read more: PHP Techniques to Write Clean and Readable Code.

Also for optimization purposes, you can refer to this series, it's useful for the speed of your website.