Reduce the HTML of your WordPress to lower the weight of the page

The public part of a web or otherwise expressed, what the browser paints, is nothing more than an HTML document, where we will find tags of all kinds: imgs, links, sections, articles, headers, footers, etc … A rough way Something like:

<!DOCTYPE html>
<html lang="en-us" class="no-js no-svg">
<head>
    /* A lot of goals, title, links, scripts, styles... */
</head>

<body class="home blog hfeed has-header-image has-sidebar colors-light">
<div id="page" class="site">
    <header id="masthead" class="site-header" role="banner">
        /* Header elements, logos, menus, social network icons, search engine.... */
    </header><!-- #masthead -->

    <div class="site-content-contain">
        /* What's New, sidebars, articles, asides, etc... */
    </div><!-- .site-content-contain -->
</div><!-- #page -->
<script type='text/javascript' src='http://wptest.dev/wp-content/themes/twentyseventeen/assets/js/skip-link-focus-fix.js?ver=1.0'></script>
<script type='text/javascript' src='http://wptest.dev/wp-content/themes/twentyseventeen/assets/js/navigation.js?ver=1.0'></script>
<script type='text/javascript' src='http://wptest.dev/wp-content/themes/twentyseventeen/assets/js/global.js?ver=1.0'></script>
<script type='text/javascript' src='http://wptest.dev/wp-content/themes/twentyseventeen/assets/js/jquery.scrollTo.js?ver=2.1.2'></script>
<script type='text/javascript' src='http://wptest.dev/wp-includes/js/wp-embed.min.js?ver=4.7.4'></script>
</body>
</html>

This is the HTML (I’ve reduced some things) that paints the theme twentyseventeen of WordPress based on the initial installation, without plugins and only with the sample page and the entry Hello World. Physically it occupies  12,124 bytes. Let’s see what we can do to reduce the size of the HTML that is generated in the public part of a WordPress.

 

Clean the HTML of the WordPress header

In the <head> header a series of tags like wlwmanifest, generator, emojis (script and css), etc. are loaded which you probably will not use and will only take up space and generate more unneeded http requests. We can add a function in our functions.php to clean the header:

 

// Removes some links from the header
function remove_headlinks_and_emojis() {
    remove_action( 'wp_head', 'wp_generator' );
    remove_action( 'wp_head', 'rsd_link' );
    remove_action( 'wp_head', 'wlwmanifest_link' );
    remove_action( 'wp_head', 'start_post_rel_link' );
    remove_action( 'wp_head', 'index_rel_link' );
    remove_action( 'wp_head', 'wp_shortlink_wp_head' );
    remove_action( 'wp_head', 'adjacent_posts_rel_link' );
    remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
    remove_action( 'wp_head', 'parent_post_rel_link' );
    remove_action( 'wp_head', 'feed_links', 2 );
    remove_action( 'wp_head', 'feed_links_extra', 3 );
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
    remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
    remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
}
add_action( 'init', 'remove_headlinks_and_emojis' );

Our header would go from having all this HTML code:


<!DOCTYPE html>
<html lang="en-US" class="no-js no-svg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E(function(html)%7Bhtml.className%20%3D%20html.className.replace(%2F%5Cbno-js%5Cb%2F%2C'js')%7D)(document.documentElement)%3B%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<title>wptest – Another site made with WordPress</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link href='https://fonts.gstatic.com' crossorigin rel='preconnect' />
<link rel="alternate" type="application/rss+xml" title="wptest » Feed" href="http://wptest.dev/feed/" />
<link rel="alternate" type="application/rss+xml" title="wptest » RSS of comments" href="http://wptest.dev/comments/feed/" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20window._wpemojiSettings%20%3D%20%7B%22baseUrl%22%3A%22https%3A%5C%2F%5C%2Fs.w.org%5C%2Fimages%5C%2Fcore%5C%2Femoji%5C%2F2.2.1%5C%2F72x72%5C%2F%22%2C%22ext%22%3A%22.png%22%2C%22svgUrl%22%3A%22https%3A%5C%2F%5C%2Fs.w.org%5C%2Fimages%5C%2Fcore%5C%2Femoji%5C%2F2.2.1%5C%2Fsvg%5C%2F%22%2C%22svgExt%22%3A%22.svg%22%2C%22source%22%3A%7B%22concatemoji%22%3A%22http%3A%5C%2F%5C%2Fwptest.dev%5C%2Fwp-includes%5C%2Fjs%5C%2Fwp-emoji-release.min.js%3Fver%3D4.7.4%22%7D%7D%3B%0A%20%20%20%20!function(a%2Cb%2Cc)%7Bfunction%20d(a)%7Bvar%20b%2Cc%2Cd%2Ce%2Cf%3DString.fromCharCode%3Bif(!k%7C%7C!k.fillText)return!1%3Bswitch(k.clearRect(0%2C0%2Cj.width%2Cj.height)%2Ck.textBaseline%3D%22top%22%2Ck.font%3D%22600%2032px%20Arial%22%2Ca)%7Bcase%22flag%22%3Areturn%20k.fillText(f(55356%2C56826%2C55356%2C56819)%2C0%2C0)%2C!(j.toDataURL().length%3C3e3)%26%26(k.clearRect(0%2C0%2Cj.width%2Cj.height)%2Ck.fillText(f(55356%2C57331%2C65039%2C8205%2C55356%2C57096)%2C0%2C0)%2Cb%3Dj.toDataURL()%2Ck.clearRect(0%2C0%2Cj.width%2Cj.height)%2Ck.fillText(f(55356%2C57331%2C55356%2C57096)%2C0%2C0)%2Cc%3Dj.toDataURL()%2Cb!%3D%3Dc)%3Bcase%22emoji4%22%3Areturn%20k.fillText(f(55357%2C56425%2C55356%2C57341%2C8205%2C55357%2C56507)%2C0%2C0)%2Cd%3Dj.toDataURL()%2Ck.clearRect(0%2C0%2Cj.width%2Cj.height)%2Ck.fillText(f(55357%2C56425%2C55356%2C57341%2C55357%2C56507)%2C0%2C0)%2Ce%3Dj.toDataURL()%2Cd!%3D%3De%7Dreturn!1%7Dfunction%20e(a)%7Bvar%20c%3Db.createElement(%22script%22)%3Bc.src%3Da%2Cc.defer%3Dc.type%3D%22text%2Fjavascript%22%2Cb.getElementsByTagName(%22head%22)%5B0%5D.appendChild(c)%7Dvar%20f%2Cg%2Ch%2Ci%2Cj%3Db.createElement(%22canvas%22)%2Ck%3Dj.getContext%26%26j.getContext(%222d%22)%3Bfor(i%3DArray(%22flag%22%2C%22emoji4%22)%2Cc.supports%3D%7Beverything%3A!0%2CeverythingExceptFlag%3A!0%7D%2Ch%3D0%3Bh%3Ci.length%3Bh%2B%2B)c.supports%5Bi%5Bh%5D%5D%3Dd(i%5Bh%5D)%2Cc.supports.everything%3Dc.supports.everything%26%26c.supports%5Bi%5Bh%5D%5D%2C%22flag%22!%3D%3Di%5Bh%5D%26%26(c.supports.everythingExceptFlag%3Dc.supports.everythingExceptFlag%26%26c.supports%5Bi%5Bh%5D%5D)%3Bc.supports.everythingExceptFlag%3Dc.supports.everythingExceptFlag%26%26!c.supports.flag%2Cc.DOMReady%3D!1%2Cc.readyCallback%3Dfunction()%7Bc.DOMReady%3D!0%7D%2Cc.supports.everything%7C%7C(g%3Dfunction()%7Bc.readyCallback()%7D%2Cb.addEventListener%3F(b.addEventListener(%22DOMContentLoaded%22%2Cg%2C!1)%2Ca.addEventListener(%22load%22%2Cg%2C!1))%3A(a.attachEvent(%22onload%22%2Cg)%2Cb.attachEvent(%22onreadystatechange%22%2Cfunction()%7B%22complete%22%3D%3D%3Db.readyState%26%26c.readyCallback()%7D))%2Cf%3Dc.source%7C%7C%7B%7D%2Cf.concatemoji%3Fe(f.concatemoji)%3Af.wpemoji%26%26f.twemoji%26%26(e(f.twemoji)%2Ce(f.wpemoji)))%7D(window%2Cdocument%2Cwindow._wpemojiSettings)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</p>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Aimg.wp-smiley%2C%0Aimg.emoji%20%7B%0A%20%20%20%20display%3A%20inline%20!important%3B%0A%20%20%20%20border%3A%20none%20!important%3B%0A%20%20%20%20box-shadow%3A%20none%20!important%3B%0A%20%20%20%20height%3A%201em%20!important%3B%0A%20%20%20%20width%3A%201em%20!important%3B%0A%20%20%20%20margin%3A%200%20.07em%20!important%3B%0A%20%20%20%20vertical-align%3A%20-0.1em%20!important%3B%0A%20%20%20%20background%3A%20none%20!important%3B%0A%20%20%20%20padding%3A%200%20!important%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<p>
<link rel='stylesheet' id='twentyseventeen-fonts-css' href='https://fonts.googleapis.com/css?family=Libre+Franklin%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C800%2C800i&subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='twentyseventeen-style-css' href='http://wptest.dev/wp-content/themes/twentyseventeen/style.css?ver=4.7.4' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyseventeen-ie8-css' href='http://wptest.dev/wp-content/themes/twentyseventeen/assets/css/ie8.css?ver=1.0' type='text/css' media='all' />
<![endif]-->
<!--[if lt IE 9]>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D'text%2Fjavascript'%20src%3D'http%3A%2F%2Fwptest.dev%2Fwp-content%2Fthemes%2Ftwentyseventeen%2Fassets%2Fjs%2Fhtml5.js%3Fver%3D3.7.3'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D'text%2Fjavascript'%20src%3D'http%3A%2F%2Fwptest.dev%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%3Fver%3D1.12.4'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D'text%2Fjavascript'%20src%3D'http%3A%2F%2Fwptest.dev%2Fwp-includes%2Fjs%2Fjquery%2Fjquery-migrate.min.js%3Fver%3D1.4.1'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<link rel='https://api.w.org/' href='http://wptest.dev/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://wptest.dev/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://wptest.dev/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.7.4" />
</p>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E.recentcomments%20a%7Bdisplay%3Ainline%20!important%3Bpadding%3A0%20!important%3Bmargin%3A0%20!important%3B%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<p>
</head>

To be reduced to this:

 


CTYPE html>
<html lang="en-US" class="no-js no-svg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E(function(html)%7Bhtml.className%20%3D%20html.className.replace(%2F%5Cbno-js%5Cb%2F%2C'js')%7D)(document.documentElement)%3B%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<title>wptest – Another site made with WordPress</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link href='https://fonts.gstatic.com' crossorigin rel='preconnect' />
<link rel='stylesheet' id='twentyseventeen-fonts-css' href='https://fonts.googleapis.com/css?family=Libre+Franklin%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C800%2C800i&subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='twentyseventeen-style-css' href='http://wptest.dev/wp-content/themes/twentyseventeen/style.css?ver=4.7.4' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyseventeen-ie8-css' href='http://wptest.dev/wp-content/themes/twentyseventeen/assets/css/ie8.css?ver=1.0' type='text/css' media='all' />
<![endif]-->
<!--[if lt IE 9]>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D'text%2Fjavascript'%20src%3D'http%3A%2F%2Fwptest.dev%2Fwp-content%2Fthemes%2Ftwentyseventeen%2Fassets%2Fjs%2Fhtml5.js%3Fver%3D3.7.3'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D'text%2Fjavascript'%20src%3D'http%3A%2F%2Fwptest.dev%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%3Fver%3D1.12.4'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D'text%2Fjavascript'%20src%3D'http%3A%2F%2Fwptest.dev%2Fwp-includes%2Fjs%2Fjquery%2Fjquery-migrate.min.js%3Fver%3D1.4.1'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<link rel='https://api.w.org/' href='http://wptest.dev/wp-json/' />
</p>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E.recentcomments%20a%7Bdisplay%3Ainline%20!important%3Bpadding%3A0%20!important%3Bmargin%3A0%20!important%3B%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<p>
</head>

The total weight of HTML would be reduced to  9,171 bytes .

 

Clean classes we do not use in body, articles and menus

We can observe in several tags that WordPress paints a series of classes in order to give us the option to customize a specific template, or a post, or even the post belonging to a category or label, etc … Example:

<Body> tag :

 



<body class="home blog hfeed has-header-image has-sidebar colors-light">

Menu Tags ( <ul> <li> ):

 



</p>
<ul id="top-menu" class="menu">
    </p>
<li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5"><a href="http://wptest.dev/Page-example/">Example page</a></li>
<p>
    </p>
<li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-4"><a href="http://wptest.dev/2017/06/11/hello-world/">Hello World</a></li>
<p>
</ul>
<p>

<Article> tag :

 



</p>
<article id="post-1" class="post-1 post type-post status-publish format-standard hentry category-no-category">

If you are not going to use these classes to layout or style parts of your web, better eliminate them. Mind you, you may want to keep some, in the examples below we will create white lists.

To remove the classes from the body tag we will use the body class filter. This filter paints a series of classes depending on the template we are in (for example: home, error404, category…):

 



// Delete classes from the body
function remove_body_classes($classes) {
    // List of classes generated by WordPress allowed
    $whitelist = array( 'home', 'error404' );

    // We only stayed with the allowed classes
    $wp_classes = array_intersect( $classes, $whitelist );

    return $wp_classes;
}
add_filter( 'body_class', 'remove_body_classes');

The same for the classes added to the articles, but this time using the post_class filter:

 


// Delete classes from article
function remove_post_classes($classes) {
    // List of classes generated by WordPress allowed
    $whitelist = array( 'post' );

    // We only stayed with the allowed classes
    $wp_classes = array_intersect( $classes, $whitelist );

    return $wp_classes;
}
add_filter( 'post_class', 'remove_post_classes');

It is not much but we have gone from 9,171 bytes to 8,868 bytes. I remember that it is a basic initial installation, the gain would be greater in a real environment with more posts, more menu items, etc…

 

Delete the query strings version parameter

WordPress usually adds to the URL of the CSS and JS files a parameter at the end with the version number, for example: ? Ver = 4.7.4 . To delete it, simply add this function:

 


// Delete the versions of the parameters in the URLs
function remove_version_params( $src ){
    $parts = explode( '?ver', $src );

    return $parts[0];
}
add_filter( 'script_loader_src', 'remove_version_params', 15, 1 );
add_filter( 'style_loader_src', 'remove_version_params', 15, 1 );

In this example it appears in 10 occasions, eliminating it we managed to reduce the HTML to 8,775 bytes. In addition, some performance analyzers such as Pingdom Tools or GT Metrix recommend you remove them because with each version change the cache would be “nullified”, and the client would have to download again the resource that is probably the same.

Minimize the HTML to finish

Most cache plugins offer the possibility to minify HTML. Minimizing HTML means eliminating all spaces, tabs, line breaks, comments, etc… leaving all HTML in a single line, leaving you something as ugly as the cover image of this post.

In our example we lowered the weight to 7,758 bytes. Since the  initial 12,124  bytes, all these actions have resulted in an improvement of 4,366 bytes. It’s not much, but keep in mind that this example is solely and exclusively with the content generated in a clean installation of WordPress.

In real life, with plugins installed and considerably more content the upgrade can be several KB. Still little, but still with this example will always load faster than 7.7 KB than 12.1 KB, even if they are only a few thousandths imperceptible to the human eye.

These techniques need to be focused in the sense that they are a bit more sand that will help us to perform better. If instead of a cache plugin, you want to venture to do it by hand and have control of how to minify HTML, I invite you to visit this post by Ahmad where he explains how to do it.

A reflection to finish: In lists of posts where we can show the last 10 posts, if each post has an image, a title, a link, a button, an extract, etc… and reduce the listing to the last 8, Not only will it be smaller, the query is faster and there are also fewer http requests for example to the images, in addition to avoiding loading these two images themselves.

Written by
Am horla

Have your say!

0 0

Lost Password

Please enter your username or email address. You will receive a link to create a new password via email.

Reduce the HTML of your WordPress to lower the weight of the page

by Horla
Turn up.. Let's be friends on social networks also