white opt

Save the Internet from WordPress speed abuse.

Updated: October 2017

5 minute read

Some WordPress themes load fast because they don’t activate jQuery JavaScript functions. External JavaScript calls temporarily block web page rendering. Google Chrome is working to remedy this by moving JavaScript. This future feature is like deferred, lazy-loading images that appear below the web page fold. But that addition to browsers isn’t here yet.

One of the faster free themes we’ve experimented with and reviewed is Frank Theme. It uses the “Don’t use jQuery” speed strategy. The same goes for the Sobe theme.

Note: We did two of our experimental theme case studies using the fast Frank theme: One and Two.

JavaScript affects the critical rendering path.

Before a browser can make a page, it builds the HTML markup. If the browser encounters a CSS script or JavaScript, it must wait for the scripted resource to download. That pause increases latency for page rendering.

JavaScript is a client-side, dynamic-scripting, program language. Web programmers use it to alter displayed page content. JavaScript is one alternative to using server-side PHP scripting language.

jQuery is usually one of the biggest chunks of WordPress code. It deserves special attention and treatment.

jQuery is a free, open-source, cross-platform JavaScript library. This library facilitates the creation of dynamic web pages and web applications. WordPress theme developers normally use the resident jQuery included with WordPress. But just because it’s there doesn’t mean it’s “on.” jQuery activation is optional – such is the case in the Frank theme and other fast themes.

Optional WordPress plugins may use jQuery for animation like sliders or other interactive elements. So the theme may not use jQuery but a plugin might. You can know for certain by testing with Yslow or WebPageTest.org.

For example, the Frank theme is fast but if you add a j Query-activating slider plugin, suddenly all site pages will slow down. It defeats the purpose of using themes that don’t use JavaScript. The same thing will happen if you use the popular Contact Form 7 plugin. JQuery is then loaded globally for every page, not just your Contact page. Other contact forms, like Very Simple Contact Form plugin, do not require jQuery.

One of the bigger benefits of using jQuery is the seamless handling of cross-browser issues. JavaScript usage differs among browsers and can cause difficulty. The authors of jQuery have made JavaScript programming work much easier.

Almost every browser on the planet already has Google’s jQuery CDN address loaded in cache.

You can change the WordPress code to substitute Google’s CDN hosted jQuery. But there’s an easier way. Just use WP jQuery Plus. It’s a WordPress plugin that loads jQuery from Google’s free Content Distribution Network (CDN). Users geographically far from you can download jQuery faster. The Google version of jQuery is also Gzip compressed and minified for fastest page loading. Yet, even though Google’s CDN servers are fast, it’s still not the biggest motivating gain.

Note: An alternative Use-Google-Libraries plugin exists but WP jQuery Plus is better because it has a failsafe or fallback. If Google jQuery doesn’t respond, the plugin just loads the slower, local WordPress version.

Potential performance benefits:

Using the Google Library CDN eliminates some HTTP requests from your site. This allows more of your local content to downloaded in parallel. It doesn’t make a gigantic difference for users with a modern six-concurrent connection browser. But for those still running older browsers, the difference is noticeable.

The greatest benefit of using Google’s CDN is that your users may not need to download jQuery at all. The chance is high that a user already has these files cached for up to one year.

No matter how well optimized your site is, if you’re using a local WordPress jQuery then it must be downloaded at least once. If forced this way, the user’s browser ignores dozens of identical copies of cached jQuery.

CDN-hosted  jQuery references refer to the exact same file. The browser trusts those files are identical and won’t waste time re-requesting the cached file. Thus, the browser uses only a single copy that’s cached on-disk, regardless of which site the CDN references appear on.

Google’s CDN serves the jQuery file with headers that cache the file for up to one year. This creates a potent effect of “cross-site caching.”

The most trafficked sites on the Internet already use the Google CDN to serve jQuery. Many users will never have to make a single HTTP request for jQuery. It only needs downloading once before.

Letting Google handle part of your site’s JavaScript footprint free of charge is too good to pass up. It’s an easy optimization because Google CDN has a vast caching advantage.

Note: If your theme and a plugin both use jQuery, your pages may end up with jQuery loaded twice causing even slower pages. The only way to know for certain is to check using Yslow or WebPagetest.org.

Some claim the WP jQuery Plus plugin isn’t a “real” speed fix because it’s small and inconsequential. jQuery by itself is 91KB when it’s minified and further optimized to 33k with Gzip compression. For many, this 33k footprint left by jQuery is insignificant when the average homepage is a heavy 1.3M page weight. But if page weight is efficient (around 100k, for example) jQuery weight becomes one-third of the page weight. That’s significant overhead. Plus, do you know how to minify and Gzip your site? If not, this is a easy solution to reduce a 97k load by over 70 percent.

Increased parallelism is sometimes argued as an invalid benefit of Google CDN since there’s a WordPress-coding workaround: Just load jQuery in the footer rather than the header. This way pages load scripts faster. For WordPress, it’s done by editing the functions.php header code. But there’s no plugin for this code change. It requires some bravery and skill. We just don’t recommend it – even if it makes the plugin unnecessary.

The genius for this speed strategy is the pervasive ubiquity of the Google CDN address in browser caches. We recommend you try out the WP jQuery Plus plugin and test if it speeds up your page load times.

Note: A rebuttal/rant about this approach is explained in the article, “Why Loading Your Own jQuery is Irresponsible” Be sure to read the comments. They explain why “The WordPress Way” isn’t always the right way.

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"Your site is the only one I've found that seems to take a serious approach to making a WordPress site fast. Everyone talks about the Yoast plugin, fast hosting, CloudFlare, but I haven't read about time to first byte, image compression or similar subjects elsewhere." medium.com/@nathanpen Texas, USA

by - Nathan Pennington