Gentics Portal.Node PHP GuideGentics Portal.Node PHP Guide: JavaScript and CSS files compressing

1 Introduction

The best way to make your web page faster is to minimize the number of files and size of files that must be downloaded when the page is loaded.

There are a number of reasons why compressing JavaScript and CSS files is a good idea:

Quicker download times for your users.
Reduced bandwidth consumption of your website.
Reduced number of HTTP requests on your server when combining many javascript files into one compressed file, thus reducing the server load and allowing more visitors to access your website.
Comments and whitespace are not needed for JavaScript execution; Removing them will speed up script execution times.

That’s why Gentics Portal.Node PHP supports JavaScript and CSS files compression out of the box.

2 How it works

The class which is responsible for compression is named ExtendedClientScript. It uses public libraries for compression css and js

2.1 Used in CMS pages

In CMS pages CSS and JavaScript scripts are included not by using HTML-tags <script> <styles> but by using special PHP methods in publish mode.

This allows to track all JS/CSS files on page and compress & merge them before sending a response to the client browser.

For including JavaScript files in a CMS page use this method:


<?php $this->getJs('<node jsfile>', '<node jsfile.edittimestamp>', $combine = true)?>

For including CSS files in a CMS page use this method:


<?php $this->getCss($file, $timestamp = null, $combine = true, $media = 'media')?>

$file (string) – file URL
$timestamp (int) – timestamp of the last modification of this file. If it is null, modification will not be tracked.
$combine (bool) – if it is ‘true’, then the file should be merged into one big file together with other JS files or just compressed and not merged
$media (string) – define CSS media type. If files are merged, it is not used.

2.2 Outside CMS pages:

To include JS files in a page:


Yii::app()->clientScript->registerScriptFile($file,
        $position = self::POS_HEAD, $timestamp = null,
        $combine = true, $gccFile = false, $force = false
    );

$file – file URL
$position – position in HTML page. Not used if $combine = true. Can be:
- POS_HEAD – The script is rendered in the head section right before the title element.
- POS_BEGIN – The script is rendered at the beginning of the body section.
- POS_END – The script is rendered at the end of the body section
- POS_LOAD – The script is rendered inside window onload function.
- POS_READY – The body script is rendered inside a jQuery ready function.
$timestamp – timestamp of the last modification of this file.
$combine – merged into one big file or not
$gccFile – flag which indicates that file will come from Gentics Content Connector (GCC)
$force – flag which forces inclusion of script in page. Used to disable all core YII scripts

To include CSS file:


Yii::app()->clientScript->registerCssFile($file,
    $media = '', $timestamp = null, $combine = true,
    $gccFile = false, $force = false
);

Params:

$media – CSS media type, for example “print”

3 Splitting js/css files across domains

Splitting components allows you to maximize parallel downloads. Make sure you’re using not more than 2-4 domains because of the DNS lookup penalty.

For example, you can host your HTML and dynamic content on www.example.org and split static components between static1.example.org and static2.example.org

4 Configuration

Options:

disableRegisterFile – disable file publishing and registering.
compressCombinedJs – compress all Javascript files with JSMin. JSMin must be installed as an extension in $jssminPath.
compressCombinedCss – compress all CSS files with CssMin. CssMin must be installed as an extension in $cssMinPath. Specific browser hacks will be removed, so don’t add them in to be compressed CSS files.
combineJs – combine all non-remote JS files into one.
combineCss – combine all non-remote CSS files into one. Be careful with relative paths in CSS.

Options that change is not desirable:

combineFiles – combine all JS and CSS files into one. Be careful with relative paths in CSS.
filePath – path where the combined/compressed file will be stored. Will use coreScriptUrl if not defined.
splitDomainName – domain for splitting js/css files across domains.
fileUrl – relative Url where the combined/compressed file can be found.
basePath – path where files can be found.
ttlDays – Used for garbage collection. If not accessed during that period: remove.
prefix – prefix for the combined/compressed files.
jsMinPath – path to JsMin.
cssMinPath – path to CssMin.


'clientScript' => array(
      'combineCss' => true,
      'compressCombinedCss' => true,
      'combineJs' => true,
      'compressCombinedJs' => true,
      'splitDomainName' => 'static.gpn.com'
),

‘compressCombinedCss’ => false – Disable CSS compression
‘combineCss’ => false – Disable CSS merging
‘compressCombinedJs’ => false – Disable JS compressing
‘combineJs’ => false – Disable JS merging
‘splitDomainName’ – domain for splitting js/css files across domains

Gentics Portal.Node PHP Guide