by
MD4.9.1 Brings Massive Scripts and CSS Optimization, Improved WebFont Loading
Marketers Delight 4.9.1 is the performance update, and is now available for immediate update from your WordPress dashboard. MD4.9.1 brings an optimized way of loading styles, an overhaul of MD’s JavaScript features, and improved custom web fonts loading.
One thing you’ll notice about sites running on Marketers Delight is how fast they load even while using custom designs. That’s because a great deal of care is put into every new release to ensure each feature of Marketers Delight uses fewer resources to do more.
In the site performance tips article I wrote a couple of weeks ago I mentioned the golden rule of web design that you should always bear in mind while building your own website:
Less is more.
However, after developing MD4.9.1 I’ve coined a new silver rule that suits MD perfectly and will be the theme for this new year as you watch Marketers Delight evolve into a powerhouse of a software seemingly over night:
Do MORE with LESS.
Yes, MD4.9.1 is all about LESS—a dramatic reduction in the amount of CSS and JavaScript required to load MD’s power features like popups, share buttons, footnotes, menu toggles, and other features which means faster loading times on every single page on your website.
Take a look around the web and site’s that have features like this—most seem slow. That’s because many are taped together with various plugins and libraries to make these same power features work, but all at the cost of performance.
Sure, in reality loading some libraries like jQuery library won’t be much of a performance hit and almost every site will inevitably load something like this to power certain features.
But why, when using a design system like MD, shouldn’t we shoot for something that can power itself in the most minimal way possible?
By removing “clutter” (compared to other themes, even MD’s baggage is blazing) and establishing a custom design system tailored to your site, these power features can not only exist in harmony but continue to be developed into something more powerful; all because of the solid foundation MD4.9.1 brings to the table.
Use MD’s Site Performance Panel to Manage CSS Files, Clean Up the WordPress <head>, and Add WebFont Loading
The Site Performance panel in MD has been silently improving in the past few updates, and Marketers Delight 4.9.1 really adds some great stuff to it to help you keep your website’s HTTP requests in check:
Site Performance #1: The CSS Manager
At the top of the Performance panel is the CSS Manager. These simple controls allow you to make powerful decisions about the way your site loads its styles.
Firstly, if you use a child theme you can enable the new combine child theme styles setting which will merge your child theme’s CSS file into the main MD stylesheet file.
The benefit here is simple—instead of loading two CSS files per page your entire website’s CSS will now be loaded in a single file download. The results of this will show up in any page speed test you take and the fewer files to download the better your results will be.
Note: Any CSS changes you make to your child theme’s style.css file after enabling this option will not show until you regenerate MD’s stylesheet by simply resaving the options panel. I recommend you only update this option after you have already made changes to your child theme’s stylesheet.
Note 2: If you are already using a child theme, go to your functions.php file and remove the enqueue calls to load MD’s stylesheet and your child theme’s style.css file—that is now handled for you by Marketers Delight (see image below)
Next, you can skip loading your CSS in a separate file and instead load it straight to your site’s <head> as inline CSS. This is for the more extreme performance nuts among you as loading your CSS directly inline is the fastest way possible for browser’s to download those styles.
In total, the entire Marketers Delight CSS stylesheet has been rewritten and optimized to require far less code. MD is a theme that is years old and this stylesheet, while always small, has had some clutter built up over the years.
It was good to finally take time to clean this out and I am happy to report that over 1,000+ lines of CSS have been removed (~15KB), making the overall CSS system of Marketers Delight leaner, cleaner, and adaptive to your own custom design changes.
Site Performance #2: Better WebFont Loading
Did you know that loading custom web fonts is one of the more challenging aspects of web design? Basically, any font that isn’t a system font (a font that comes with your computer) needs to take the extra time to download in order to display on your site.
That means loading a font from a third party service like Google Fonts or Typekit (both are built-in to Marketers Delight) can lead to weird font behavior, sometimes causing your fonts to become invisible until they can download!
This is a bad experience for your users as it can create an appearance that your website is broken and even instill some frustration into their minds.
To help combat this, MD has added an alternative way of loading custom fonts called the WebFont Loader, which instead of showing invisible text promises to show you a system font until the custom font has downloaded.
I won’t go into much more detail about how the WebFont Loader works as I already covered that in the performance article, but MD4.9.1 makes an important tweak to further improve font loading efficiency that you will absolutely want to update for to take advantage of.
Site Performance #3: Clean the WP <head>
In the past few major WordPress releases, more and more junk has been making its way into your site’s <head> which adds to the time it takes to load your pages. The sad part of this is most of these additions aren’t even needed for the majority of sites you make.
While MD already does a good job of cleaning out the useless junk in your site’s <head>, MD4.9.1 takes it a step further by giving you fine-tuned control over the WordPress resources you might need.
You can see in the last section of the Site Performance panel a few checkboxes that will remove the Blocks Library CSS file, WP Embed script, and WP JSON from your head.
The reason you have the ability to toggle these options are because the new Gutenberg Block editor and others Plugins may require these scripts and styles in order to work, but by disabling each one, you can save another HTTP request (you know how important that can be).
So play with these and make sure your site can run without them as there is a good chance you will not need any of these to run your MD powered website.
Site Performance #4: Better JavaScript Loading
As I mentioned already, all of the JavaScript in Marketers Delight has been rewritten to be as minimal and efficient as possible.
Instead of delivering the scripts required to power interactive features like popups, share buttons, footnotes, and others in multiple files (remember, HTTP requests!), Marketers Delight now deliver a single, highly-optimized JavaScript file weighing a mere 7KB in total!
This is an insanely small amount of JavaScript to load for such powerful features, and the best part is that they are powered completely without any external libraries like jQuery.
The reason JavaScript performance on your site is so important is because the more interactive you want your site to be, the more scripts you generally need to write. After images and fonts, these interactions are the most costly to your website’s performance.
Most theme developers who want to take a shortcut to develop similar features as MD will include the jQuery library—which is a 87KB download hit—onto every page of your site just to get started writing scripts.
By the time those features are replicated, you’ll be running at least 100KB or JavaScript (most of which you don’t need), where if you had just used MD you’d save a potentially huge performance hit by using its smart and lightweight scripts.
To me, this is the most exciting part of the MD4.9.1 for not only the performance gains but the way in which these scripts have been rewritten now allow for aggressive expansion in the very near future.
I hope that anyone reading this who have setup sites with tons of scripts can appreciate the brevity of these features.
How Much Does Performance Matter in Today’s Web? MD4.9.1 Shows You the Way
As the web grows we find ourselves wanting more powerful features to create better experiences for our users.
Whether it’s tools to build a newsletter, embed a YouTube gallery, or create a Stream of thought, these power features demand we use more efficient resources to power them.
The website of the future does MORE with LESS, and isn’t restricted from expanding by using outdated tools or overpowered new methods.
As our websites get visited more and more on mobile, and on oftentimes slower networks, the speed at which your pages load has never been more important. That is why MD4.9.1 so aggressively cuts down on resources, as every single request your site makes matters.
Consider the stage set with MD4.9.1, because what’s coming next will really take your website to the next level. Update your site now and bring yourself one step further into running a long-lasting, high-powered website of the future.