• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » Defer Parsing of Javascript in WordPress : Snippets and Plugins

By Abhishek Ghosh April 4, 2014 5:42 am Updated on October 14, 2016

Defer Parsing of Javascript in WordPress : Snippets and Plugins

Advertisement

Defer Parsing of Javascript in WordPress to Increase PageSpeed Score, with Snippets, You can Customize For Your Own WordPress Installation. Most of us have various Javascript which are necessary plugins for our specific WordPress domains, and we know where in the php file it is taking the origin. We are talking about a measure which we can take to speed up page loading times, and pass every speed test on the web that says to defer Javascripts if possible. We are not using W3 Total Cache but we are using Redis for WordPress.

Update on 14th Oct, 2016.

Quick info on Defer Parsing of Javascript in WordPress:

This is non-blocking way for individual CSS :

Vim
1
<link rel="stylesheet" href="https://cdn.domain.com/my.css" media="none" onload="if(media!='all')media='all'">

Why, that is explained in How to Load CSS Without Blocking Rendering.

This is non-blocking way for individual Js :

Vim
1
<script type='text/javascript' src='https://cdn.domain.com/my.js' async defer>execOnReady(function(){execOnReady(function(){});});</script>

 

Defer Parsing of Javascript in WordPress : Basics

 

Probably you have read about the defer=’defer’ and the async functions in javascript and but most don’t understand how defer parsing of Javascript in WordPress can be realized.

Those who are looking for some plugins to solve the issue; we will suggest to read our previous guide – Eliminate Render-blocking Javascript and CSS WordPress Reloaded and Older version of the article on the same topic – Eliminate Render-blocking Javascript and CSS. This will cover over 80% of the nomad users with a custom theme with or without much complexity. So, Plugins part is done; you can read the older articles and install the Plugin. Now we will come towards the snippet part.

Advertisement

---

 

Defer Parsing of Javascript in WordPress : Snippets

 

Defer parsing of Javascript in WordPress via plugin, in many cases is not possible to actualize because of various reasons.
wp_print_scripts() calls WP_Scripts->do_items() ; WP_Scripts->do_item() uses esc_url()which does offer a filter named clean_url.

Defer Parsing of Javascript in WordPress

So, we can actually write a small Plugin only for one (or multiple) known other Plugin which is inserting the Javascript from Theme’s functions.php (or whatever) file :

Vim
1
2
3
4
5
6
7
8
9
add_filter( 'clean_url', function( $url )
{
    if ( FALSE === strpos( $url, '.js' ) )
    { // not our file
        return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}, 15, 5 );

This is one way, specially useful if you target one Javascript. Here is a kind of Plugin out of this method.

An universal way from Theme’s functions.php will be :

Vim
1
2
3
4
5
6
7
8
9
10
function add_async_forscript($url)
{
    if (strpos($url, '#asyncload')===false)
        return $url;
    else if (is_admin())
        return str_replace('#asyncload', '', $url);
    else
        return str_replace('#asyncload', '', $url)."' async='async";
}
add_filter('clean_url', 'add_async_forscript', 11, 1);

We actually can async with wp_enqueue_script ( read here for reference and here for using with Rackspace Cloud Files ) too :

Vim
1
wp_enqueue_script('dcsnt', '/path/to/go/javascript-name.min.js#asyncload' )

Let us clean it to full working thing :

Vim
1
2
3
4
5
6
7
8
9
10
11
wp_register_script( 'menu', get_template_directory_uri() . '/js/script.js?defer', array('query'), '1.0', true );
if ( FALSE === strpos( $url, '.js?defer' ))
add_filter( 'clean_url', function( $url )
{
    if ( FALSE === strpos( $url, '.js?defer' ) )
    { // not our file
    return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}, 11, 1 );

Another method is by using Javascript function, which is already written by Brian :

Vim
1
http://www.designerzblog.com/2013/12/speedup-wordpressite-load-javascript-asynchronisely.html

Tagged With Defer parsing of JavaScript , Defer parsing of JavaScript wp , Defer parsing JavaScript plugins wordpress , how to Defer Parsing of Javascript in WordPress , Deferre JavaScripts wordpress plugin , DEFER PARSING OF JAVASCRIPT WORDRESS , defer parsing of javascript wordpress plugin , defer parsing of javascript wordpress , defer parsing of javascript without using a WordPress plugin , wordpress plugin to defer parsing of javascript

This Article Has Been Shared 801 Times!

Facebook Twitter Pinterest
Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Defer Parsing of Javascript in WordPress : Snippets and Plugins

  • Cloud Computing and Virtualization : Hardware Requirements

    Cloud Computing and Virtualization has specific hardware requirements. Trends are changing and various companies are offering tailored hardwares.

  • Dropbox Cloud Storage : Turning 360 Degree Towards Social Network

    Dropbox Cloud Storage changing their strategies is nothing new news. With huge user base, Dropbox Cloud Storage is shifting slowly towards a different model. We previously wrote about the Dedicated Music Service by Dropbox Cloud. Last week a new feature for Dropbox Cloud Storage added the feature of online preview of the documents placed inside […]

  • How to set VNC up on A Linux Server With Rackspace Cloud

    How to set VNC up on a Linux Server with Rackspace Cloud Unmanaged Server plus tips on suitable Linux distro, which clients to use – all in one compact article.

  • TLS False Start : Exactly How to Get With Nginx

    TLS False Start on Nginx Appears Black Magic to Many New Server Admins. Here is How to Exactly How to Get it With Nginx in Easy Language.

  • Easy Steps To Setup Let’s Encrypt on Ubuntu 16.04, Nginx

    Here Are Easy Steps To Setup Let’s Encrypt on Ubuntu 16.04, Nginx With HSTS, ALPN on HTTP/2, OCSP Stapling, Public Key Pinning (HPKP), Cipher.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (22.1K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • How Telecoms Can Use The Cloud To Power Their 5G Network June 24, 2022
  • A Beginner Guide to Cloud Computing for Development June 22, 2022
  • 5 Benefits of Using a Virtual Data Room Today June 19, 2022
  • Top System Administration Courses 2022 June 18, 2022
  • The Best Business VPNs for 2022 June 17, 2022

About This Article

Cite this article as: Abhishek Ghosh, "Defer Parsing of Javascript in WordPress : Snippets and Plugins," in The Customize Windows, April 4, 2014, June 25, 2022, https://thecustomizewindows.com/2014/04/defer-parsing-javascript-wordpress-snippets-plugins/.

Source:The Customize Windows, JiMA.in

This website uses cookies. If you do not want to allow us to use cookies and/or non-personalized Ads, kindly clear browser cookies after closing this webpage.

Read Privacy Policy.

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2022 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy