.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =========================================== Merging and compressing external CSS and JS =========================================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: Clemens Mach :Changed: 2009-10-16T11:24:43.920000000 :Classification: queo_speedup :Description: The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags ---- :Keywords: css, javascript, compression, merging, speed, faster, reduction, forDevelopers, forIntermediates, forAdvanced :Author: Michael Grundkötter :Email: typo3@queo-flow.com :Info 4: :Language: en |img-1| |img-2| Merging and compressing external CSS and JS - queo\_speedup .. _Merging-and-compressing-external-CSS-and-JS: Merging and compressing external CSS and JS =========================================== Extension Key: queo\_speedup Language: en Keywords: css, javascript, compression, merging, speed, faster, reduction, forDevelopers, forIntermediates, forAdvanced Copyright 2000-2008, Michael Grundkötter, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- `Merging and compressing external CSS and JS 1 <#1.Merging%20and%20compressing%20external%20CSS%20and%20JS|outline>`_ **`Introduction 3 <#1.1.Introduction|outline>`_** `What does it do? 3 <#1.1.1.What%20does%20it%20do_|outline>`_ `Screenshots 3 <#1.1.2.Screenshots|outline>`_ **`Users manual / Administration 4 <#1.2.Users%20manual%20/%20Administration|outline>`_** `FAQ 4 <#1.2.1.FAQ|outline>`_ **`Configuration 5 <#1.3.Configuration|outline>`_** `TS-Options 5 <#1.3.1.TS-Options|outline>`_ **`Known problems 6 <#1.4.Known%20problems|outline>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This extension takes all CSS and JS files which you have defined in page.includeCSS and page.includeJS and merges them into one file each. It additionally compresses these files, you can choose from different compression types. The created files are deleted when the cache is cleared. If you like your benchmark the improvement, install Firebug and YSlow or PageSpeed. Those extensions will tell you, that your page speed has improved! You will save a lot http requests and also the overall file size of the included CSS and JavaScript will decrease (only if you use compression). .. _Screenshots: Screenshots ^^^^^^^^^^^ This is a screen shot of the included files before usage of queo\_speedup: |img-3| This is the same page after queo\_speedup has been installed: |img-4| .. _Users-manual-Administration: Users manual / Administration ----------------------------- Install the extension Look into TS config of the extension. You can set compression type there and some other stuff needed for YUICompressor Insert TS to your configuration. example: page = PAGE page.10 < styles.content.get \# you just need to add this line page.20 < plugin.tx\_queospeedup\_pi1 Clear cache Reload your page, now you should have just one CSS file (or two if you use \_CSS\_DEFAULT\_STYLES in your other extensions) and one JS file. Target group: Administrators or Developers .. _FAQ: FAQ ^^^ Q: The speedup\_\* files are empty, now my site looks weird and no JS functionality is working any more, what happened? A: You probably used the default config, which needs java installed and executable. Maybe you just need to configure the executable path, maybe you have to set another compression type which does not use java (which is everything except YUI), but PHP instead. Q: There is no such speedup\* file included in my source code. Why? A: You have to include those files via page.includeCSS / page.includeJS! Other included files or code parts are NOT merged and packed. So please check if other extensions add code via additionalHeaderData. .. _Configuration: Configuration ------------- You just need to install the extension, then the default config will be loaded automatically. You only need to adjust something if the default does not work for you. .. _TS-Options: TS-Options ^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _csscomp: csscomp """"""" .. container:: table-row Property csscomp Data type string Description This sets the compression type for CSS files. Possible values are:"none", "minify" and "yuicss", where “none” means just merging and no compression Default yuicss .. _jscomp: jscomp """""" .. container:: table-row Property jscomp Data type string Description This sets the compression type for JS files. Possible values are:"none", "jsmin", "jsminplus" and "yuijs", where “none” means just merging and no compression Default yuijs .. _The-following-options-are-only-used-if-YUICompressor-is-set-in-one-of: The following options are only used if YUICompressor is set in one of """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" .. container:: table-row Property The following options are only used if YUICompressor is set in one of the above options. .. _tmpdir: tmpdir """""" .. container:: table-row Property tmpdir Data type string Description This is the temporary directory for the YUICompressor process. The file there will be created and deleted via PHP, so make sure it is writeable by this user (same as webserver)! Default /tmp .. _javapath: javapath """""""" .. container:: table-row Property javapath Data type string Description This is the path to your java executable. Might be /usr/bin/java or something else. Just “java” is only working if this path has been added to your systems path variable! Default java .. _jarpath: jarpath """"""" .. container:: table-row Property jarpath Data type string Description This is the location of the YUICompressor jar file. If it resides in a global path on your server, you can set this here. If it is somewhere inside your TYPO3 installation, please check the isRelative option (below)! Default /typo3conf/ext/queo\_speedup/res/yuicompressor-2.4.2.jar .. _jarpath-isrelative: jarpath.isrelative """""""""""""""""" .. container:: table-row Property jarpath.isrelative Data type boolean Description If set to 1, the absolute path to your TYPO3 installation is added to the value you specified as path. Thus you can use a relative path and don't need to know the full path of your TYPO3. Possible values are 0 and 1 Default 1 .. ###### END~OF~TABLE ###### .. _Known-problems: Known problems -------------- - You need installed java executable on your webserver to use YUI compression type! So if you selected YUI (which is default) and your compressed files are empty, you most likely have no java or your executable path has to be set. - JSMin+ consumes a lot of memory, you have to use JSMin if PHP crashes - Different encodings might cause problems if merged to one file. Please use just one encoding for all files of a type! 6 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 175 .. :id: Grafik1 .. :name: Grafik1 .. :width: 669 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 42 .. :id: Grafik3 .. :name: Grafik3 .. :width: 669