performance

Make WordPress Load Fast in a Few Clicks

Recognized as the most powerful caching plugin by WordPress experts

Minimal Configuration, Immediate Results

Don’t waste your time struggling with complex plugin settings. WP Rocket launches upon activation.

Load Google Fonts Asynchronously For Page Speed

Any file that the browser needs to render the page, where it will not show the page without it, is known as part of the critical path. Normally, any CSS file is part of this critical rendering path.

Though Page Speed Insights is a good tool, remember that Google still uses what real users see as a metric for judging page speed and user experience.

The Web Font Loader uses a little sleight-of-hand to make site visitors feel like the page is rendering faster.

CSS blocks the rendering of the page, which gives impression of slower page speed. What the Web Font Loader does is defer the loading of Google Fonts until after other parts of the page have started to render.

How To Use the Web Font Loader

In your page, include a link to the Web Font Loader script. You can set this link to load the latest version, but for performance, it is better if you link to a specific version of the script.

Then, indicate what font families you would like to load from which font service.This is what the code looks like on this very site (We’re using Google Fonts.)


<span class="token markup"><span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><span class="token markup"><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span></span>
<span class="token markup"><span class="token tag"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span></span>
 WebFont<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    google<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      families<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Source Sans Pro:400,600,700,400italic,700italic'</span><span class="token punctuation">,</span> <span class="token string">'Roboto Condensed:400,700'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token markup"><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span></span>

There are different methods for Typekit, Fontdeck, and Fonts.com. You can consult the documentation on Git Hub for the Web Font Loader project for specific instructions.

Another way you can use the Web Font Loader is in the head of your pages. This method uses JavaScript to load fonts ansynchronously. Google will show you this method when you go to use Google Fonts if you click on the JavaScript tab.

JavaScript Google Fonts Asynchronous Code

This is what this script looks like. (It is similar to the previous script, but utilized a different way.)


<span class="token markup"><span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
  WebFontConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
    google<span class="token punctuation">:</span> <span class="token punctuation">{</span> families<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'Roboto+Condensed:400,700:latin'</span><span class="token punctuation">,</span> <span class="token string">'Source+Sans+Pro:400,600,400italic,700italic,700:latin'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> wf <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'script'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    wf<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token string">'https:'</span> <span class="token operator">==</span> document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>protocol <span class="token operator">?</span> <span class="token string">'https'</span> <span class="token punctuation">:</span> <span class="token string">'http'</span><span class="token punctuation">)</span> <span class="token operator">+</span>
      '<span class="token punctuation">:</span><span class="token comment" spellcheck="true">//ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';</span>
    wf<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">'text/javascript'</span><span class="token punctuation">;</span>
    wf<span class="token punctuation">.</span>async <span class="token operator">=</span> <span class="token string">'true'</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> s <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'script'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    s<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>wf<span class="token punctuation">,</span> s<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token markup"><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span></span>

In my own testing, this method seemed a little slower than what I am using, putting the former script in the footer. Either way is a compromise. You must test for yourself and decide what works for your site.

More: JavaScript Font Loader Code

Make Your Site Faster with Async and Deferred JavaScript: Introducing script_loader_tag

Today I’m going to discuss a new, and very nice, site speed improvement that became possible in WordPress 4.1. What changed? The introduction of a new filter, script_loader_tag. This filter lets us easily change the HTML markup of enqueued script elements—that is, of JavaScript files that were correctly added into a WordPress site using WordPress’s wp_enqueue_script function.

With script_loader_tag, we can now easily fix a problem that can significantly impact page speed: lots of render-blocking JavaScript.

The Problem: Render-Blocking JavaScript

Long JavaScript files in your head can delay your browser from displaying page content, because its default behavior is first to interpret the JS files themselves.

Properly enqueued JavaScript shows up in the head section of your HTML document. On the internet as in nature, the main thing about a head is that it’s above a body—and this means something fairly serious for site speed, because JavaScript can be render-blocking.

“Render-blocking” comes from a web browser’s default behavior: It wants to completely receive and process everything that’s come higher up in the page, before it moves any further down.

This means that long JavaScript files in your head can actually delay your browser from displaying the page content in the body, because its default behavior is first to interpret the JS files themselves. In other words, JS is blocking the browser’s crucial function of rendering the page out for the user to actually see. The result can be slow sites and frustrated users.

.. The Fix: Defer and Async your JavaScript

The first thing to understand is the alternatives to render-blocking JS: defer and async. We’ll explain the difference, but both work similarly: They let the browser load a JS resource “as time permits,” while attending to other things (like page rendering) as well. This means that you can’t rely on a deferred or asynced JavaScript file being in place prior to page render, as you could without these attributes—but the advantage is that the file won’t slow the speed at which the page becomes visible to users.

Those are concepts—now for code. (The full code is available on GitHub.)

.. 2. Deferring and Asyncing Render-Blocking JavaScript

We found that we needed to use defer and not async for WPShout, so I’ll walk through the defer code. Most of the heavy lifting here is from an article by Scott Nelle; thanks, Scott!
add_filter( 'script_loader_tag', 'wsds_defer_scripts', 10, 3 );
function wsds_defer_scripts( $tag, $handle, $src ) {

	// The handles of the enqueued scripts we want to defer
	$defer_scripts = array( 
		'prismjs',
		'admin-bar',
		'et_monarch-ouibounce',
		'et_monarch-custom-js',
		'wpshout-js-cookie-demo',
		'cookie',
		'wpshout-no-broken-image',
		'goodbye-captcha-public-script',
		'devicepx',
		'search-box-value',
		'page-min-height',
		'kamn-js-widget-easy-twitter-feed-widget',
		'__ytprefs__',
		'__ytprefsfitvids__',
		'jquery-migrate',
		'icegram',
		'disqus',
	);

 if ( in_array( $handle, $defer_scripts ) ) {
 return '<script src="' . $src . '" defer="defer" type="text/javascript"></script>' . "\n";
 }
 
 return $tag;
} 
The add_filter line tells us that this code should run anytime an enqueued JavaScript file is about to be printed onto the page as an HTML script element. Letting us filter that HTML is what script_loader_tag is for. (If you need an update on filters and WordPress’s hooks system in general, start here!)

GitHub project:

How To Fix Defer Parsing of Javascript in WordPress (5 Ways)

As somebody who is trying to understand how to defer parsing of Javascript, we believe you have a problem. You own or have visited a website of somebody you know (maybe a client?) and it takes forever to load. And when you ran it through website speed testing tools, you got a recommendation which you’re not sure how to implement.

In this article, we’re going to share several ways of how to fix this warning and ultimately, make the website load faster, without throwing this error!

If you’re short on time, here are some quick actions you can do:

Instructions for How To Defer Parsing of JavaScript

Download the Async plugin here.

Click on Plugins > Add New > Upload plugin and select the file you have just downloaded.

Click on Activate of the installed plugin.

Go to Plugins and click on Settings for the Async plugin you have just installed.

Clicking on Enable Async Javascript, or Apply Async as two of the most common ways to apply the fix.

Test your website, to see that everything is still working well.

More:

How to Defer Parsing of JavaScript in WordPress (4 Methods)

How to Defer Javascript with WordPress for Faster Load Times

Make Your Site Faster with Async and Deferred JavaScript: Introducing script_loader_tag