OAP – now evolved to RC-status
(While the OAP-plugin was stil in Beta)
[UPDATED 01/22/21]
“Don’s Optimization Anthology Plugin” – OAP, which I’ve previously posted about on this website, has now evolved development-wise, so it will be moving from being in Beta, to becoming a “Release Candidate” (abbrev.: “RC”).
With the exception of two functions (listed with italics; more on this later), the OAP-plugin can be installed and quietly perform the following optimizations:
- Remove (unecessary) code and -functions in the header
- Making the RECAPTCHA- and WPCF7-code show and function exclusively on the contact page
- Links commonly-used jQuery-libs to a CDN (here: cdnjs.com)
- Removing versions + params (scopes) on URI’s
- Sharpen resized image files
- Deferring/async js-files
- Embedding “Above The Fold” Critical Path CSS, “defering” CSS-files () and moving js from head to the footer
- Minifying all HTML-used, by stripping line-breaks and unnecessary white-spaces
AFAIK, the OAP-plugin plays well with the majority of plugins and (new) themes out there; furthermore, this plugin is “PHP 8”-ready, as I gave it a go on a server running PHP 8, and the plugin performed without any warnings or errors.
CORRECTED: The bullet-point in italics is the only “movable-/user-operable-parts”; first of all, the “TwentyTwentyone”-theme doesn’t need nor use jQuery for it’s front-end (on my current WordPress-installation, at least) – nor do any of the active plugins that my WordPress uses!.
As jQuery is (apparently) a standard-installed library in WordPress, I have (re-) activated it in the OAP-plugin (as for the jQuery-Migrate plugin, too); the re-acivation of these two jQuery-libraries hasn’t really hurt the load-times in any way, when subsequently measured and displayed on my client’s DEV-tools (Lighthouse) – nor what’s showed up GTMetrix’ results for the site.
The code provided on the GitHub-repository and/or github.io-site has been updated.
Therefore, I’ve commented out the code that registers and loads the jQuery-library (from cdnjs.com); so if you install/use a plugin that requires jQuery, then it’s up to you to remove the related commenting, so the plugin becomes active. Use first your DEV-tools (and/or similar) to first determine, if the core jQuery-plugin is required for your specific installation or not.
As I understand it, from WordPress 5.5 jQueryMigrate is no longer used nor required; but if you’re using an “older” theme and/or plugin that requires jQueryMigrate, I’ve added some code that – after removing the here specific commenting – handles the registering and loading of the most recent version of jQueryMigrate-library.
If there are any other jQuery-libraries, you need to load, the use the following code that looks similar to this (mind, you have to change things yourself accordingly):
function function's_name(){ wp_enqueue_script('handler_name',"URI to the jQuery-library",array(),'version',true); wp_script_add_data( 'handler_name', array( 'integrity', 'crossorigin' ) , array( 'SRI-hash', 'anonymous' )); } add_action( 'wp_enqueue_scripts','function's_name');The (remaining) bullet-point in italics in list above pertains to finding and inserting the “Above The Fold” Critical CSS Path and insert the generated CSS-selectors into the plugin’s code.
Here’s what you have to do:
1. Find the Critical Path CSS-selectors by using the online tool at either:
https://jonassebastianohlsson.com/criticalpathcssgenerator/
or:
2. Follow the instructions on whichever website, you choose, and copy and paste the generated string into the file (OAP_plugin.php; line 158 – or thereabouts) between the marked “style”-tags (look for these, along with the identifiying comment:
“/* INSERT GENERATED “ABOVE THE FOLD” CRITICAL PATH CSS-STRING HERE – EITHER UNDER THIS LINE OR BY REPLACING THIS LINE WITH THE GENERATED STRING…! */ “);
You can either use your webhost’s online-editor or (and be carefull doing so!!!) WordPress´ own plugin-editor to perform this operation.
It’s no secret that if I can implement an easier way to integrate the Critical CSS Path, it’ll happen ASAP!
That being said/written, since there are probably a “quadzillion” WordPress-themes and-plugins out there, so there’s no way that I can – or will – guarantee that th OAP-plugin works seemlessly and flawlessy with everything WordPress out there!
Which is why, the plugin is now out there as a “Release Candidate” to find out how well (and with little- to no-fuss), it integrates with whatever WordPress-installations out there: in short – to find out if this plugin is bug-ridden and/or viable, in general.
The planned road-map is that the plugin will be released as a RC until the 3/1-2021 (that’s the 1st of March), and if I haven’t received any intel regarding bugs or any other irritating issues, it’ll get formally released.
If this plugin is bug-ridden and/or plagued by all sorts of issues, the plugin will either move over to a “RC-2”-status, and if it turns out that this plugin is just a totally lost cause, then it’ll probably get pulled altogether.
As this plugin is out there as open-source (CC 4.0 Attribution-NonCommercial-ShareAlike), if you can find someway to either remove or expand functionalities to improve on things, then you’re welcome to do so (and please remember to tell me, and keep me in the loop).
Last but not least, here’s some visual documentation of how well this plugin works:
Without the OAP-plugin installed/activated:
And here are the results with the OAP installed and activated:
Q.E.D.? I think so…
Thanks for reading this!
https://github.com/donvoorhies/oap | https://donvoorhies.github.io/oap/
P.S. There other features/functionalities that I’d have loved to add to this plugin, such making added video-iframes reponsive and adding a resposive mixcloud-/soundcloud-/spotify-/”whatever”-player – “the easy way” and from the get-go, but the newer themes’ builtin-editor handles such functions and features quite nicely already, as it is!
But a simplified insertion of the Critical Path CSS, is the next development priority!
And maybe a more flexible, easier handling of the various jQuery-libraries, regarding their addition and activation to the plugin (as well as the opposite, too!)…