Tidy Assets
A plugin to rearrange Zenphoto resources
What it does, How it works, What it takes, License, Installation, Download, Contribute, Credits.
What it does
Tidy Assets shifts all Zenphoto JavaScript items to the bottom of the body element, including inline scripts and optionally CSS resources as well. This can improve the user experience on their first visit to your site by delaying render-blocking resources.
It also offers the option to remove the jQuery Migrate plugin, which is included with Zenphoto since v1.6 to ensure compatibility with older themes and plugins.
Both of the above features could have a positive SEO impact, since the loading speed of a page is one of the parameters involved in determining its ranking. TL;DR
Attributes other than rel=“stylesheet” of moved elements are not reflected in the output. In most cases, these are attributes that are not actually needed, such as type=“text/javascript” and type=“text/css”, unnecessary in HTML5, or async and defer, which lose their importance after the resources have been moved to the bottom of the body element.
In addition to the CSS and JavaScript elements, the remaining HTML is also cleaned up slightly, removing blanks from the edges of lines and replacing multiple instances of white spaces or tabs with a single white space. Spaces and tabs within <pre> tags are not changed, to preserve the original formatting. Empty class attributes of HTML elements are dropped too.
How it works
Tidy Assets collects the most part of the Zenphoto’s PHP output, starting from the first line printed by the theme_head registered filters and stopping at the position where the theme_body_close register is placed in the theme scripts, which is just before the closing body tag. To do so, the filters of this plugin are registered with a priority of 99999. The collected output is then parsed into JS, CSS and Other Items. CSS and JS file references with duplicate base names, if any, are reduced to just the first instance (paths are ignored). The inline JS is consolidated into one script tag only, and can be optionally minified “on the fly”, with JShrink or JSqueeze. At this point, the Other Items are printed first, followed by the CSS file references, the JS file references and finally the consolidated inline script.
That said, if any plugin sets a priority greater than 99999 for its theme_head filter, its output will of course not get processed. The reverse happens for the theme_body_close filter, so the output of filters with a priority lower than 99999 (all of them, I hope) will be excluded from processing, leaving the order of its items unchanged. This allows themes and other plugins to pass variables from PHP to JavaScript if they use theme_body_close for their JS resources.
Elements belonging to groups to be moved, which must instead remain in their original positions for important reasons (i.e. some CSS needed at the top of head section or some analytical JS), can be kept apart from processing, by using a filter option filled with suitable identification strings.
What it takes
All of the above comes at a very low cost in terms of processing time, which with default options is less than one millisecond on both my local server and my live server. Enabling the inline JS minification, processing time rises to ∼ 2 - 15ms, depending on the number of plugins enabled, the server CPU speed/load and the algorithm chosen for minification. By removing unnecessary characters, JShrink reduces JS size by approximately 20%. It’s a bit faster than JSqueeze, which also performs some further optimizations in return saving up to 30% of the original size. In my tests, without any pretense of completeness, the difference in processing time between the two algorithms seems very similar to the difference in compression ratios.
Keep in mind, however, that this “on the fly” minification, once the inline code has already been shifted at the bottom of the DOM, is almost always useless, when it is not counterproductive, for SEO/performance optimization purposes, especially if gzip compression is enabled on the server.
License
Tidy Assets for Zenphoto is licensed under the GPL-2.0 License or later, Copyright (c) 2021 Antonio Ranesi.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
Installation
- download the zip file below and extract the content
- use an FTP client to upload only the tidy-assets folder and the tidy-assets.php file into the plugins folder of your ZP installation
- activate tidy-assets from Admin > Plugins > Seo tab
- visit the plugin options page to set them according to your needs
Download
See the Changelog for more info about different versions. The section Unreleased, when present, lists any changes not yet released but already made and available on GitHub.
- tidy-assets-1.1.zip (51.35 kB) - 176 downloads
- tidy-assets-1.0.0.zip (82.08 kB) - 1610 downloads
Contribute
If you wish to contribute, report a bug or provide a translation other than Italian, already included, please visit the Tidy Assets repository on GitHub.
Following Zenphoto guidelines, Multiverse is translatable by configuring a Poedit catalogue with the keywords gettext_pl, ngettext_pl:1,2. Be sure to uncheck the box Also use default keywords... in your catalogue properties, so that you don’t have to translate strings already managed by Zenphoto translators, but just the plugin specific ones.
Credits
This plugin has been developed starting from headConsolidator v1.4.3 by Stephen Billard (sbillard).
It includes JShrink and JSqueeze for optional “on the fly” minification. Refer to their sites for licensing information.
Special thanks to acrylian for suggestions and support.
Published on: 27 Jan 2021
Last update:
