help centre
For more info visit status.atmail.com

How can we help?


Search our knowledge base for answers to
common questions and latest updates.



My activities New request

Follow

Minify JS and CSS files to improve performances

Stewart -

PROBLEM

How can I improve performance by reducing asset size and number?

ENVIRONMENT

  • On-Premise Server + WebMail Installations: Version 7.5.1 > Current Version
  • Webmail Only Installations: Version 7.5.1 > Current Version

CAUSE

Performance improvement requirement.

RESOLUTION

Atmail 7.5.x
If you are upgrading from 7.5.x please ensure that you have cleared cached minify files from your installation.

To find minify cache path:

Config file: /library/Composer/vendor/mrclay/minify/min/config.php
Param: $min_cachePath
Default value: $min_cachePath = sys_get_temp_dir(); // usually /tmp

Once cache directory is found, remove all files where the file names starts with "minify_"

Use minification tools in order to reduce asset (CSS, JS) size and number, so that UI performance and maintainability of WebMail, admin and mobile interfaces can be improved.

Minification itself takes care of reducing asset size by compacting them through getting rid of selected characters such as white spaces, line breaks and others.
Concatenation combines multiple files into single ones which are then cached on both backend and frontend sides.

To achieve those tasks and many more, Google Minify library has been brought into the product as of release 7.5.1 and has been installed through composer under:

  • APP_ROOT/webmail/library/Composer/vendor/mrclay/minify

An endpoint for minifying assets has been created in:

  • APP_ROOT/mail/index.php/index/minify?b=ASSET_DIR&f=ASSET_FILE1,ASSET_FILE2..

Also, a helper has been created to make minification simple and can be used like the following:

    <!-- CSS MINIFICATION EXAMPLER -->
    <?php echo $this->minifier(array(
        'language' => 'CSS',
        'directory' => 'css',
        'sourcesPaths' => array(
            'ui.css',
            'calendar.css',
            'webmail.css',
            'admin.css',
            'themes/fresh/ui.css',
            'leaflet.css'
    )));
    ?>

Where these params are mandatory:

    'language' //string CSS|JS
    'directory' //string
    'sourcesPaths' //array

For more information, please see:

  • webmail/library/Atmail/View/Helper/Minifier.php

As described above, once minified & concatenated the assets then combined into a single files which are cached both on backend and frontend sides.

For advanced configuration such as cache lifetime, cache directory and others please see:

Notes:

  • In order to have minificication for CSS files to work properly from the created end point, image's relative uris are rewritten during the process. Absolute uris are not modified.

Examples:

How to add custom assets to an existing minification block

For example in: webmail/application/modules/mail/views/scripts/global/header.phtml

To add a custom CSS or replace an existing ones, this can be achieved by the following:

    <!-- CSS MINIFICATION EXAMPLE -->
    <?php echo $this->minifier(array(
        'language' => 'CSS',
        'directory' => 'css',
        'sourcesPaths' => array(
            'ui.css',
            'calendar.css',
            'webmail.css',
            'admin.css',
            'themes/fresh/ui.css',
            'leaflet.css',
            'CUSTOM_CSS.css', // you can leave the extra comma without any issues
    )));
    ?>

To achieve the same but with JS files, see the following example:

     <!-- JS MINIFICATION EXAMPLE -->
     <?php echo $this->minifier(array(
        'language' => 'JS',
        'directory' => 'js',
        'siteBaseUrl' => $this->siteBaseUrl,
        'sourcesPaths' => array(
            'atmail/mail/mail.js',
            'atmail/mail/viewmessage.js',
            'atmail/mail/punycode.js',
            'atmail/abook/abook.js',
            'atmail/calendar/calendarCache.js',
            'atmail/calendar/quickview.js',
            'atmail/calendar/calendar.js',
            'atmail/calendar/fullcalendar.js',
            'atmail/calendar/minicalendar.js',
            'atmail/calendar/edit_calendar.js',
            'atmail/files/files.js',
            'CUSTOM_JS.js', // you can leave the extra comma without any issues
        )));
    ?>
Have more questions? Submit a request

Comments


Contact our support team


+61 (7) 5357 6605       support@atmail.com