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.
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.
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.
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.
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.