Video training for your plugins

Although I am thinking of Hummingbird today, this question could apply to most of your plugins. I was searching all over hoping to find a video tutorial on configuring the various Hummingbird tools. I mean a total walk-through of the specific plugin and the options and most importantly what they mean. I have a lot of experience front end development, but not so much back end, so some of the concepts are things I have just a shallow understand of. For example, minify - apparently that's not just compression because it's talking about moving scripts from head to foot. So that's news. But I don't understand my choices for each file: include, minify, combine, and some position thing. I have no idea what to choose or how I would determine what to choose. A tutorial would be great!

  • Adam Czajczyk

    Hello Dandellion,

    I hope you're well today and thank you for your question!

    Currently there's no such video but one of my colleagues had created a basic video guide on on how to test minification settings "one file at the time":

    https://premium.wpmudev.org/forums/topic/is-there-a-tutorial#post-1189218

    It's quite simple video but I think it's worth checking. There's also an official written docs for Hummingbird here:

    https://premium.wpmudev.org/project/wp-hummingbird/#product-usage

    As for "Minification" feature specifically, let me add a basic explanation of available options.

    There are four "toggle switches" for each file listed on "Minification" page: "Include", "Minify", "Combine" and "Position". After you enable "Minification" for the first time they got automatically set up and there's actually no need to touch them if the site works well, unless you want/need to further tweak performance but I'll get to it again below (see "Position" switch description).

    "Include" switch

    That one shouldn't be usually touched at all and should be switched on (green) in 99,99% of cases. Switching it off tells WordPress not to load particular file at all so any CSS/JS file with "Include" switch "grayed out" will not be used. That's sometimes handy but I think it would be best to treat that as a "support staff use only" option rather than play with it :slight_smile:

    "Minify" switch

    That's the "main" part of "Minification" feature. It enables/disables "compression" of JS/CSS files. This is the switch that sometimes must be switched off. For example, if after enabling minifcation you notice that your Font Awesome fonts are not working on site anymore, you would want to find font awesome related CSS file on the list and toggle "Minify" switch for the off. Usually that helps.

    "Combine" switch

    By default each JS/CSS file that's added to the site by theme and active plugins is a separate file and is loaded separately. With "combine" switches enabled for these files, Hummingbird will attempt to combine most of these files (as many as possible) into one file. As a result instead of loading i.e 20 JS/CSS files your site may end-up loading just 2 or 3 of them. They'll be a bit bigger as they'll include content of those other files but as a result performance should be better. However, if site breaks there also might be a need to switch off "combine" option for some of the files (see "Minify" switch above).

    "Position" switch

    That's one of the most advanced but also one of the most "fragile" option. By default that switch is always set to "Original" position. That means that it doesn't affect anything and your site loads JS/CSS files exactly the way they are introduced by WP core itself, the theme and active plugins.

    However, if you got suggestions to "reduce render blocking resources" that switch might come in handy. It allows you to move loading of files to "footer" - that means that any file that's moved to the footer will be loaded "at the end of page loading process". In other words, the page will be loaded, then the file will be loaded and applied. Usually that significantly helps with "render blocking resources" but it may also result in break of the site so again - files might need to be moved "one by one" to see if it works well. If you e.g. move 3 files to footer and that works fine and then moving 4th breaks the site you would want to set that most recently moved file back to "Original" position and skip to the next one.

    If you have additional questions, let me know please.

    Best regards,
    Adam

  • Dandelion

    Adam,

    Your reply was super helpful and I had several "ah ha!" moments while reading it. Thank you so much for taking the time to share these resources and this information. I've already bookmarked the documentation file for future reference I thought the video looked very helpful, but there was no audio. Should there have been audio? I don't have mine turned off, but it seemed like it should have had it.

    Thank you again and have a great weekend!

  • Adam Czajczyk

    Hello Dandelin!

    I'm glad I could help! Unfortunately, it seems there is no audio there - it's rather a simple and basic video - but even though with usage guide and my previous post in mind I believe you should get a grasp of basic ideas. In case you had any further/additional questions, please don't hesitate to ask and I'll be happy to assist!

    Have a great weekend too :slight_smile:
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.