Jump to content
David Karich

Module: AIOM+ (All In One Minify) for CSS, LESS, JS and HTML

Recommended Posts

Hey guys, 

first, ProcessWire is a great piece of software. Thanks for that and the great community behind that. So, i'm realy new to ProcessWire, but i will present you my first module for SEO- and performance optimizing: AIOM+ (All In One Minify).

AIOM+ (All In One Minify) for CSS, LESS, JS and HTML

AIOM+ (All In One Minify) is a module to easily improve the performance of your website. By a simple function call Stylesheets, LESS and Javascript files can be parsed, minimized and combined into one single file. This reduces the server requests, loading time and minimizes the traffic. In addition, the generated HTML source code can be minimized and all generated files can be loaded over a cookieless domain (domain sharding).

Install AIOM+

  1. Download current release (link below)
  2. Extract and copy the files for this module to /site/modules/AllInOneMinify/
  3. Login to PW backend and go to Modules > Check for new modules
  4. Install Module > AIOM+ (All In One Minify) for CSS, LESS, JS and HTML

Alternative in ProcessWire 2.4

  1. Login to PW backend and go to Modules
  2. Click tab "new" and enter Module Class Name: "AllInOneMinify"
  3. Click "Download and Install"

Features

  • Combining stylesheets / LESS files or JavaScripts
  • Minimize the combined files
  • No change to the .htaccess necessary (except for the domain sharding)
  • Server-side LESS parsing without plugins
  • HTML source code minimization
  • Cookieless domain / domain sharding
  • Automatic cache management (With changes to the source file, the cache is rebuilt)
  • Configurable via the backend
  • Automatic rewriting the paths in the stylesheet and LESS files. No changes are needed
  • Optional developer mode (combining, but no minimize and browser cache prevention)
  • Clear the cache on the backend
  • Conditional loading for CSS, LESS and JS (since Version 3.1.1)

How to use

Minimize multiple stylesheet or LESS files into one file. You can even mix stylesheet and LESS files in parsing and combining process!

<link rel="stylesheet" href="<?php echo AIOM::CSS(array('css/file-1.css', 'css/file-2.less', 'css/file-3.css', 'css/file-4.less')); ?>"> 

Minimize multiple javascript files into one file.

<script src="<?php echo AIOM::JS(array('js/file-1.js', 'js/file-2.js', 'js/file-3.js', 'js/file-4.js')); ?>"></script>

Conditional loading (same with Javascripts)

<?php $stylesheets  = array('css/reset.css',
                            'css/main.less',
                            array('loadOn'  => 'id|template=1002|1004|sitemap', // PW API selector
                                  'files'   => array('css/special.css', 'css/special-theme.less'))); ?>

<link rel="stylesheet" type="text/css" href="<?php echo AIOM::CSS($stylesheets); ?>" /> 

More Information, Documentation and Download

So, I hope you can do something with this module. :)

Dave

post-1973-0-08441200-1393031073_thumb.pn

  • Like 26

Share this post


Link to post
Share on other sites

Welcome to processwire cmp* and the forum David. And thanks for making your aiom+ module.

Looking at that module you must already be an experienced coder and so you don't need much

introduction to the how's and what's. But maybe you still may find something usefull in this channel:

http://processwire.com/talk/topic/4173-grouped-forum-posts-links-articles-tutorials-code-snippets/

(* = content management potential)

Share this post


Link to post
Share on other sites

Looks interesting Dave - I will play with it later! (after some gardening...)

Share this post


Link to post
Share on other sites

I really like all the minify and less support. Actually I use the Spex-Module from Jonathan. With the next project I want to use AIOM+.

Looks good. I really like the idea of domain sharding built in.

 
Only one question for me is if it is an improvement to use domain sharding today. Before 2010, max 2 simultaneous connections was allowed. Today 6-8 are allowed/used. Without images you may need 1 html + 1 css + 1 js + 1 optional for Fonts = 4
 
related article: http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/

Share this post


Link to post
Share on other sites

Yep, easily one of the most useful PW modules around. It fits great into my workflow, and now with version 3.0 and the added LESS support it gets even better. Keep up the good work!

PS Have you guys considered adding Autoprefixer support to the module (maybe as an option)? I'm not sure if this is easy to implement but it saves people the hassle of writing all kinds of vendor prefixes in their CSS, and instead just automatically takes care of this.

  • Like 2

Share this post


Link to post
Share on other sites

Thank you guys, for this great feedback. That make me happy. :)

Yep, easily one of the most useful PW modules around. It fits great into my workflow, and now with version 3.0 and the added LESS support it gets even better. Keep up the good work!

PS Have you guys considered adding Autoprefixer support to the module (maybe as an option)? I'm not sure if this is easy to implement but it saves people the hassle of writing all kinds of vendor prefixes in their CSS, and instead just automatically takes care of this.

I do not think it's the best way, to integrate Autoprefixer in AIOM+. I think it's not good when the module changes the generated code, which can be difficult to understand. Makes it difficult for the troubleshooting. But I'll be looking at Autoprefixer. Maybe I can port the code to PHP.

Currently i use LESS for that: 

.transition(@style) {
    -webkit-transition: @style;
    -moz-transition: @style;
    -o-transition: @style;
    -ms-transition: @style;
    transition: @style;
}

#element {
    .transition(all 0.2s ease);
}

Thank you very much for the module, it is one of my favorites. I have started a topic on github suggesting the use of conditional loading for files using the ID of the page.

I did not know existed the PHP official version of LESS, although I had already used to using koala (http://koala-app.com/) :)

Excellent suggestion! I'm still thinking about the syntax, but definitely write this function on the To-Do. Thank you.

Share this post


Link to post
Share on other sites

I really like all the minify and less support. Actually I use the Spex-Module from Jonathan. With the next project I want to use AIOM+.

Only one question for me is if it is an improvement to use domain sharding today. Before 2010, max 2 simultaneous connections was allowed. Today 6-8 are allowed/used. Without images you may need 1 html + 1 css + 1 js + 1 optional for Fonts = 4

related article: http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/

I think for websites and applications that are designed for desktop systems, domain sharding is still acute and helpful. For mobile-optimized sites, it is counterproductive. 
 
The DNS overhead, is however, in my experience, not in comparison with the cookie data. For large news portals I continued domain sharding in use.
  • Like 1

Share this post


Link to post
Share on other sites

AIOM+ now in Version 3.0.1 with a little but recommended fix in the Less parser. If a large LESS file is split by the parser, the following error occurs: 

Error: Class 'Less_Exception_Parser' not found (line 8795 of /site/modules/AllInOneMinify/lib/Less/Less.php)

Issue found and submited by Ryan Pierce. Thanks.

Share this post


Link to post
Share on other sites

Hey David, really like AIOM. I would usually use Assetic for that, and I think you might want to look at integrating that code. Could save you a few headaches.  :)

Share this post


Link to post
Share on other sites

Hey David, really like AIOM. I would usually use Assetic for that, and I think you might want to look at integrating that code. Could save you a few headaches.  :)

Hey Pierre, 

I'm not really happy with Assetic for several reasons: 

  • Too many dependencies.
  • Java-based YUI integeration. Many shared hosting do not offer Java support.
  • Depending on the Google Closure API. I don't wanted to integrate any third party service.
  • Node.js for LESS parser, because the PHP-ported version in Asettic is outdated and is no longer developed and supported.

In summary, you could not just use AIOM+ as it is now – install and use. AIOM+ requires only PHP and is not dependent on another service or special server requirements. :)

  • Like 1

Share this post


Link to post
Share on other sites

So, just before the weekend, I've uploaded a new version (3.1.1) that supports a new feature: Conditional loading. You can now assign CSS, LESS or JS files with an API-selector a condition at which they should be loaded. For example: 

<?php $stylesheets  = array('css/reset.css',
                            'css/main.less',
                            array('loadOn'  => 'id|template=1002|1004|sitemap', // PW API selector
                                  'files'   => array('css/special.css', 'css/special-theme.less'))); ?>

<link rel="stylesheet" type="text/css" href="<?php echo AIOM::CSS($stylesheets); ?>" /> 
  • Like 10

Share this post


Link to post
Share on other sites

Hi, one quick question: Is there a way to set it up that it cleans the HTML but leaves the line breaks intact?

So I see a clean, neat website source code without spaces and comments but the code is not squeezed into one single endless line?

Share this post


Link to post
Share on other sites

Hi, one quick question: Is there a way to set it up that it cleans the HTML but leaves the line breaks intact?

So I see a clean, neat website source code without spaces and comments but the code is not squeezed into one single endless line?

Doesn't this kind of defeat the purpose of minimizing your html? If you want to look at nicely formatted source every browser nowadays has a good or decent devtools/inspector.

  • Like 2

Share this post


Link to post
Share on other sites

I do not think those extra few carriage returns matter too much.

Planning the "presentation" of source code is for psychological reasons: e.g. if 3rd parties (clients?) look at the code.

So, the "purpose" of minimizing html may vary from user to user. :-)

Share this post


Link to post
Share on other sites

What's stopping a client from opening devtools? If clients care enough to look at source code and actually base an opinion (negative or positive) on that, i think they are well aware of optimizations like minimize and they actually applaud you for that, or you could tell them: "we minimize (and concatenate) the output for optimal performance, especially on mobile". Keeping cr/lf in there seems an in-between, for no real reason. To me minimize means minimize, but to each it's own i guess.

  • Like 3

Share this post


Link to post
Share on other sites

Hi, one quick question: Is there a way to set it up that it cleans the HTML but leaves the line breaks intact?

So I see a clean, neat website source code without spaces and comments but the code is not squeezed into one single endless line?

Hi ceberlin, 
 
no, there is no option, because this ist not the target of a minimization. Every browser has an inspector or dev-tools in which you or your client can see the restructured DOM.

Share this post


Link to post
Share on other sites

Hi David,

I've been playing around with bower to manage third party libraries, bower puts files in a directory called bower_components and my first instinct was to put that directory right in "site/". In _getFileInfoArray any attempt to reference a file outside the templates directory gets thwarted, is there a security concern here?

Share this post


Link to post
Share on other sites

I read the module description and it looks like a great minify solution! Is there an overhead because of caching and cache rebuild? For example with a slow first page load or will the cache created prior to the first visitor? How do you monitor file changes?

I'll try AIOM+ soon to minify html, css and js with a new PW website :)

Share this post


Link to post
Share on other sites

Hi David,

I've been playing around with bower to manage third party libraries, bower puts files in a directory called bower_components and my first instinct was to put that directory right in "site/". In _getFileInfoArray any attempt to reference a file outside the templates directory gets thwarted, is there a security concern here?

Hi Jonathan , 

yes, in this function paths are filtered to prevent directory traversal attacks. AIOM+ loads only allowed files that are located in the template folder. I think about it, in one of the upcoming versions, introduce a whitelist for asset folder.

For a workaround change the following line (749) in AllInOneMinify.module

$_path  = str_ireplace(array('../', './', '%2e%2e%2f', '..%2F'), '', (wire('config')->paths->templates.$_file));

to 

$_path  = wire('config')->paths->templates.$_file; 

I have not tested it and I can not recommend it too.

  • Like 1

Share this post


Link to post
Share on other sites

I read the module description and it looks like a great minify solution! Is there an overhead because of caching and cache rebuild? For example with a slow first page load or will the cache created prior to the first visitor? How do you monitor file changes?

I'll try AIOM+ soon to minify html, css and js with a new PW website :)

Hi pwFoo, 

AIOM+ monitors each asset file on the modifikation time and generates a hash for the comparsion with the already cached files. If there exist no cached file, the first function call will trigger that process, but only for files, that are needed (first page load). The average overhead of an average webproject on shared hosting with 128 MB php_memory_limit are round 500 ms for generating, minimization, parsing and writing the cached files. That's at least my experience. The complete Bootstrap 3 source as LESS files is generated in under 3 seconds.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By David Karich
      ProcessWire InputfieldRepeaterMatrixDuplicate
      Thanks to the great ProModule "RepeaterMatrix" I have the possibility to create complex repeater items. With it I have created a quite powerful page builder. Many different content modules, with many more possible design options. The RepeaterMatrix module supports the cloning of items, but only within the same page. Now I often have the case that very design-intensive pages and items are created. If you want to use a content module on a different page (e.g. in the same design), you have to rebuild each item manually every time.
      This module extends the commercial ProModule "RepeaterMatrix" by the function to duplicate repeater items from one page to another page. The condition is that the target field is the same matrix field from which the item is duplicated. This module is currently understood as proof of concept. There are a few limitations that need to be considered. The intention of the module is that this functionality is integrated into the core of RepeaterMatrix and does not require an extra module.
      Check out the screencast
      What the module can do
      Duplicate a repeater item from one page to another No matter how complex the item is Full support for file and image fields Multilingual support Support of Min and Max settings Live synchronization of clipboard between multiple browser tabs. Copy an item and simply switch the browser tab to the target page and you will immediately see the past button Support of multiple RepeaterMatrix fields on one page Configurable which roles and fields are excluded Duplicated items are automatically pasted to the end of the target field and set to hidden status so that changes are not directly published Automatic clipboard update when other items are picked Automatically removes old clipboard data if it is not pasted within 6 hours Delete clipboard itself by clicking the selected item again Benefit: unbelievably fast workflow and content replication What the module can't do
      Before an item can be duplicated in its current version, the source page must be saved. This means that if you make changes to an item and copy this, the old saved state will be duplicated Dynamic loading is currently not possible. Means no AJAX. When pasting, the target page is saved completely No support for nested repeater items. Currently only first level items can be duplicated. Means a repeater field in a repeater field cannot be duplicated. Workaround: simply duplicate the parent item Dynamic reloading and adding of repeater items cannot be registered. Several interfaces and events from the core are missing. The initialization occurs only once after the page load event Changelog
      1.0.4
      Bug fix: Various bug fixes and improvements in live synchronization Bug fix: Items are no longer inserted when the normal save button is clicked. Only when the past button is explicitly clicked Feature: Support of multiple repeater fields in one page Feature: Support of repeater Min/Max settings Feature: Configurable roles and fields Enhancement: Improved clipboard management Enhancement: Documentation improvement Enhancement: Corrected few typos #1 1.0.3
      Feature: Live synchronization Enhancement: Load the module only in the backend Enhancement: Documentation improvement 1.0.2
      Bug fix: Various bug fixes and improvements in JS functions Enhancement: Documentation improvement Enhancement: Corrected few typos 1.0.1
      Bug fix: Various bug fixes and improvements in the duplication process 1.0.0
      Initial release Support this module
      If this module is useful for you, I am very thankful for your small donation: Donate 5,- Euro (via PayPal – or an amount of your choice. Thank you!)
      Download this module
      > Github: https://github.com/FlipZoomMedia/InputfieldRepeaterMatrixDuplicate
      > PW module directory: – soon –
    • By Robin S
      A community member raised a question and I thought a new sanitizer method for the purpose would be useful, hence...
      Sanitizer Transliterate
      Adds a transliterate method to $sanitizer that performs character replacements as defined in the module config. The default character replacements are based on the defaults from InputfieldPageName, but with uppercase characters included too.
      Usage
      Install the Sanitizer Transliterate module.
      Customise the character replacements in the module config as needed.
      Use the sanitizer on strings like so:
      $transliterated_string = $sanitizer->transliterate($string);
       
      https://github.com/Toutouwai/SanitizerTransliterate
      https://modules.processwire.com/modules/sanitizer-transliterate/
       
    • By dimitrios
      Hello,
      this module can publish content of a Processwire page on a Facebook page, triggered by saving the Processwire page.
      To set it up, configure the module with a Facebook app ID, secret and a Page ID. Following is additional configuration on Facebook for developers:
      Minimum Required Facebook App configuration:
      on Settings -> Basics, provide the App Domains, provide the Site URL, on Settings -> Advanced, set the API version to 2.10, add Product: Facebook Login, on Facebook Login -> Settings, set Client OAuth Login: Yes, set Web OAuth Login: Yes, set Enforce HTTPS: Yes, add "http://www.example.com/processwire/page/" to field Valid OAuth Redirect URIs. This module is configurable as follows:
      Templates: posts can take place only for pages with the defined templates. On/Off switch: specify a checkbox field that will not allow the post if checked. Specify a message and/or an image for the post.
      Usage
      edit the desired PW page and save; it will post right after the initial Facebook log in and permission granting. After that, an access token is kept.
       
      Download
      PW module directory: http://modules.processwire.com/modules/auto-fb-post/ Github: https://github.com/kastrind/AutoFbPost   Note: Facebook SDK for PHP is utilized.


    • By thomasaull
      I created a little helper module to trigger a CI pipeline when your website has been changed. It's quite simple and works like this: As soon as you save a page the module sets a Boolean via a pages save after hook. Once a day via LazyCron the module checks if the Boolean is set and sends a POST Request to a configurable Webhook URL.
      Some ideas to extend this:
      make request type configurable (GET, POST) make the module trigger at a specified time (probably only possible with a server cronjob) trigger manually Anything else? If there's interest, I might put in some more functionality. Let me know what you're interested in. Until then, maybe it is useful for a couple of people 🙂
      Github Repo: https://github.com/thomasaull/CiTrigger
    • By Robin S
      I created this module a while ago and never got around to publicising it, but it has been outed in the latest PW Weekly so here goes the support thread...
      Unique Image Variations
      Ensures that all ImageSizer options and focus settings affect image variation filenames.

      Background
      When using methods that produce image variations such as Pageimage::size(), ProcessWire includes some of the ImageSizer settings (height, width, cropping location, etc) in the variation filename. This is useful so that if you change these settings in your size() call a new variation is generated and you see this variation on the front-end.
      However, ProcessWire does not include several of the other ImageSizer settings in the variation filename:
      upscaling cropping, when set to false or a blank string interlace sharpening quality hidpi quality focus (whether any saved focus area for an image should affect cropping) focus data (the top/left/zoom data for the focus area) This means that if you change any of these settings, either in $config->imageSizerOptions or in an $options array passed to a method like size(), and you already have variations at the requested size/crop, then ProcessWire will not create new variations and will continue to serve the old variations. In other words you won't see the effect of your changed ImageSizer options on the front-end until you delete the old variations.
      Features
      The Unique Image Variations module ensures that any changes to ImageSizer options and any changes to the focus area made in Page Edit are reflected in the variation filename, so new variations will always be generated and displayed on the front-end.
      Installation
      Install the Unique Image Variations module.
      In the module config, set the ImageSizer options that you want to include in image variation filenames.
      Warnings
      Installing the module (and keeping one or more of the options selected in the module config) will cause all existing image variations to be regenerated the next time they are requested. If you have an existing website with a large number of images you may not want the performance impact of that. The module is perhaps best suited to new sites where image variations have not yet been generated.
      Similarly, if you change the module config settings on an existing site then all image variations will be regenerated the next time they are requested.
      If you think you might want to change an ImageSizer option in the future (I'm thinking here primarily of options such as interlace that are typically set in $config->imageSizerOptions) and would not want that change to cause existing image variations to be regenerated then best to not include that option in the module config after you first install the module.
       
      https://github.com/Toutouwai/UniqueImageVariations
      https://modules.processwire.com/modules/unique-image-variations/
×
×
  • Create New...