JavaScript affects the critical rendering path.

OUR MOBILE-SPEED PRESCRIPTION: Designed for code-free mobile speed. Included in both SmooshKit and SpeedHospital SuperBundle.

Instant-jQ

Instant-jQ lets you use faster universal cached resources for better speed. WordPress theme developers normally use the resident jQuery included with WordPress. It reloads fresh every time someone visits your site. This is inefficient.

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.

Lightweight: 4.2 millisecond load time. 2.1k package size.

jQuery is a big chunk of WordPress code.

jQuery is a free, open-source, cross-platform JavaScript library. It deserves special attention and treatment. This library is used in 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 “always on.” jQuery activation is optional – such is the case in the GeneratePress v2.0 theme and other fast loading themes. jQuery activation isn’t the default with these speed 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 Pingdom.com or WebPagetest.org.

For example, the GeneratePress theme is fast but if you add a jQuery-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.

Google’s jQuery is cached in every browser on the planet.

You can change the WordPress code to substitute Google’s CDN hosted jQuery. But there’s an easier way. Just use Instant jQ plugin. 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.

Instant jQ plugin has a failsafe or fallback. If Google jQuery doesn’t respond, the plugin just loads the slower, local WordPress version.

Potential performance benefits for mobile speed.

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 Pingdom.com or WebPagetest.org.

Some claim the Instant jQ 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 2M to 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.

BEFORE

Load time of WordPress resident Gzipped jQuery files before adding Instant jQ plugin. Two files: 97 milliseconds and 55 milliseconds loaded in parallel.

AFTER

Two minified files are loaded when using Instant jQ plugin. One from Google, the other from CloudFlare CDN. There’s a high probability they’re already in the browser cache. Each file loads in 5 milliseconds in parallel with other assets. The page weight is the same but delivery is faster.

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 Instant jQ plugin.

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.

Other SpeedHospital Proceedures

SmooshStatic SmooshStatic automatically resizes huge image uploads. Resizing that is more reasonable for display in browser. Yet still more than…

TourniKit For ages we’ve wanted the ability to switch off FontAwesome icon font. We see it as unnecessary baggage many…

SmooshPix Speed up your pages. If your photograph images weigh 500k to 1M, this is the fastest way to fix…

LongCache We demonstrate a common but little understood speed problem usually labeled as Leverage Browser Caching. Various tests report this…

Instant-jQ Instant-jQ lets you use faster universal cached resources for better speed. WordPress theme developers normally use the resident jQuery…

SpeedXray WordPress works fine. But you need plugins to add extra features and functionality. Without plugins, WordPress is not-worth-as-much. Plugins…

KrunchKore Extra collection of 8 discrete plugins to strip or disable unneeded and unused baggage. Instruction video included. WordPress non-features…

SpeedSwitch Loading plugins redundantly and globally decreases the speed of your pages. It’s best to deactivate heavy plugins on pages…

Optimize images for mobile speed with SmooshStatic plugin.

OUR MOBILE-SPEED PRESCRIPTION: SmooshStatic is a component plugin. It’s part of the SmooshKit image optimization module.

SmooshStatic

SmooshStatic automatically resizes huge image uploads. Resizing that is more reasonable for display in browser. Yet still more than large enough for typical website use. The plugin is configurable with a max width, height and quality. When a contributor uploads an image that is larger than the configured size, SmooshStatic will automatically scale it down to the configured size and replace the original image.

Lightweight 4.2 millisecond load time. 2.1 kilobytes zip folder.

SmooshStatic also provides a bulk-resize feature to selectively resize previously uploaded images to free up disk space – and make backups use fewer server resources. This keeps your server fast.

This plugin is ideal for sites that don’t require hi-resolution original images to be stored. Or semi-skilled site contributors don’t understand how to scale images before uploading.

SmooshStatic plugin is one of our secret weapons for image optimization on client sites. The other plugin we love for cleaning up a poorly optimized image media library is SmooshPix plugin. Both these plugins allow retroactive reprocessing of media library images for speed.

SmooshStatic is not a paid subscription service (API) like other image optimization plugins. For example: 3,000 EWWW plugin’s compressed images cost about 9 dollars – their smallest order size. You pay in advance with prepaid credits.

We don’t sell plugins that cost repeat annual or usage fees. We call that *rent*.

For SmooshStatic plugin, processing is on your host server using WordPress features. Default JPEG quality is 82 to match the WordPress default. This is proven to be the equivalent of a Photoshop compression quality setting of 50. Images with this setting pass the WebPagetest.org criteria for speed optimization.

WordPress has automatic image optimization features. But not for original images, only resized images. If it optimized images upon upload, no optimization plugin would be needed.

SmooshStatic is an automation plugin to resize images in your WordPress media library. It can adjust the dimensions if they are larger than width and height settings. That is a unique feature. Optimization plugins like free Smush (1 million+ active installs) do not resize image automatically. They only change the compression.  And it isn’t lossy compression. It’s lossless. That sounds like a good thing but it’s not. It only compresses images by about 10 percent. Whereas, visually-lossless or lossy compression reduces image weight by 70 percent. Smush plugin is the worst choice for speed.

Activating SmooshStatic plugin doesn’t alter existing archived images. SmooshStatic only resizes images when uploaded. But you can retrofit with a “Bulk Image Resize” feature in the settings. The “Bulk Image Resize” feature allows you to resize all existing images in the media library.

SmooshStatic doesn’t search your file system to find large files. Instead it looks at the “metadata” in the WordPress media library database. To override this behavior, enable deep scanning in the plugin settings.

You can re-name your original image file and add “-noresize” to the filename. For a file name of “photo.jpg,” you can rename it “photo-noresize.jpg.” Then SmooshStatic will ignore it, allowing you to upload the unchanged full-sized image. That will protect an image if needed.

Photos from modern cameras and cellphones are too large for full-size browser display. DSLR camera photos are for high-quality printing. They’re oversized for web page display. They turn your site into a slug for speed.

SmooshStatic allows you to set a size limit. That constrains all uploaded images to a reasonable size. They will still be large enough for typical website needs.

SmooshStatic changes happen immediately upon image upload, but before WordPress processing occurs. WordPress behaves exactly the same as always. If a contributor uploads oversized images, SmooshStatic scales it and replace the original.

SmooshStatic uses a configurable size limit. The default value is large enough to fill a typical web screen without scaling.

Don’t use SmooshStatic for the following:

  • Stock art download sites.
  • Providing high-resolution print images.
  • Storing a high-resolution photo archive.

WordPress onboard image processing – without plugin assistance – includes poor features for resource consumption.

During upload WordPress keeps the original full-size image in the media library. Depending on the original size, WordPress creates up to 4 smaller-sized file copies:

  • Large
  • Medium-Large
  • Medium
  • Thumbnail

These are for embedding on your pages and posts. The original usually sits on the server unused, taking up server disk space. That usually isn’t a big issue. But we’ve seen exceptions. These can make website backup with normal plugin methods impossible if your media library grows too large to handle.

Other SpeedHospital Proceedures

SmooshStatic SmooshStatic automatically resizes huge image uploads. Resizing that is more reasonable for display in browser. Yet still more than…

LongCache We demonstrate a common but little understood speed problem usually labeled as Leverage Browser Caching. Various tests report this…

KrunchKore Extra collection of 8 discrete plugins to strip or disable unneeded and unused baggage. Instruction video included. WordPress non-features…

Instant-jQ Instant-jQ lets you use faster universal cached resources for better speed. WordPress theme developers normally use the resident jQuery…

SpeedXray WordPress works fine. But you need plugins to add extra features and functionality. Without plugins, WordPress is not-worth-as-much. Plugins…

TourniKit For ages we’ve wanted the ability to switch off FontAwesome icon font. We see it as unnecessary baggage many…

SmooshPix Speed up your pages. If your photograph images weigh 500k to 1M, this is the fastest way to fix…

SpeedSwitch Loading plugins redundantly and globally decreases the speed of your pages. It’s best to deactivate heavy plugins on pages…

Convert wrong-format images and create optimum compression.

SmooshPix

Speed up your pages. If your photograph images weigh 500k to 1M, this is the fastest way to fix them. You want skinny lossy formats, not fat lossless images.

Lossy photos are 70 to 80 percent smaller file sizes. Lossy doesn’t mean bad or lousy. Fix your entire media library. There is no loss of visual quality. Unneeded data is removed. Lessen the photo size with unnoticeable removal of information. Use this plugin for media library repair and maintenance.

Lightweight: 2.0 millisecond load time. 8.5k package size.

Image optimization opportunities are small.

Sometimes there’s an opportunity in converting non-transparent PNG images to JPEG format. You can compress JPEGs at a quality between 70 and 82. 82Q is the WordPress default. And it is SmooshPix plugin default, too. It’s the same as a Photoshop compression of 50Q. That “grade” passes the WebPagetest.org criteria of “goodness.” It’s a good benchmark. This will reduce page weight. Page weight reduction isn’t always proportionate to speed improvement. We measure speed in milliseconds.

Convert non-transparent PNGs to JPEGs to the WordPress 82-quality setting default.

Converting non-transparent PNGs to JPEGs (lossy-quality setting of 82) reduces the page weight. This classic error of choosing the wrong image file format is novice. But it happens all the time. PNG to JPEG image optimization changed a 6.5M, 15-second page into a 2.6M, 8.5-second page. Is that good? Hardly! Not when your goal is 2 seconds.

SmooshPix plugin needs cautious use or you can ruin many things. Our advice is: after using the plugin on the media library, disable it. That will prevent any slow down. This is the same thing to do for any plugin that’s used for maintenance. They don’t have to be chugging server resources all the time.

Of the page weight, often 88 percent is images. All sites are image intensive. The average is 55 percent of weight is images. So you’d think, “Let’s optimize images and get better results.”

Does image optimization always make a speed difference? No. The needle mat not move. Image weight becomes transparent and gets a boost from browser parallel loading. Yet, we always do image optimization with SmooshPix and it’s companion plugin SmooshStatic.

Other SpeedHospital Proceedures

TourniKit For ages we’ve wanted the ability to switch off FontAwesome icon font. We see it as unnecessary baggage many…

Instant-jQ Instant-jQ lets you use faster universal cached resources for better speed. WordPress theme developers normally use the resident jQuery…

SmooshPix Speed up your pages. If your photograph images weigh 500k to 1M, this is the fastest way to fix…

SpeedSwitch Loading plugins redundantly and globally decreases the speed of your pages. It’s best to deactivate heavy plugins on pages…

SpeedXray WordPress works fine. But you need plugins to add extra features and functionality. Without plugins, WordPress is not-worth-as-much. Plugins…

KrunchKore Extra collection of 8 discrete plugins to strip or disable unneeded and unused baggage. Instruction video included. WordPress non-features…

LongCache We demonstrate a common but little understood speed problem usually labeled as Leverage Browser Caching. Various tests report this…

SmooshStatic SmooshStatic automatically resizes huge image uploads. Resizing that is more reasonable for display in browser. Yet still more than…