DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

TYPO3 Extension `assetloader`¶

This extension enables you to conveniently add inline CSS and JS, deferred CSS and JS and Webfonts to your project.The goal of this extension is to improve the overall pagespeed by how those assets are loaded.

Features¶

Extension is entirely configured via typoscript
Enables including inline CSS and JS in both <head> and before </body>
Enables including CSS and JS files but with deferred loading
Enables including google fonts and custom fonts via the webfontloader
All included assets can be minified and concatenated

Usage¶

Installation¶

Installation using Composer

It is recommended to install this extension via composer.To install it just do composer require sethorax/typo3-assetsloader

This extension can also be installed traditionally via the TYPO3 Extension Repository (TER).

TypoScript Setup¶

Every aspect of this extension is configurable via typoscript setup.

Example typoscript setup:¶

plugin.tx_assetsloader {
    concatenateCSS = 1
    concatenateJS = 1
    minifyCSS = 1
    minifyJS = 1

    includeCSSInline {
        critical = body {background-color: black; min-height: 100vh;}          
    }
    includeCSSInlineFooter {
        styles = EXT:my_page_extension/Resources/Public/styles/styles.css
        styles.file = 1
    }
    includeJSInline {
        app = fileadmin/app.js
        app.file = 1
    }
    includeJSInlineFooter {
        script = console.log('Hello World!');
    }
    includeCSSDeferred {
        deferred = fileadmin/style.css
        deferred2 = fileadmin/style2.css
        deferred3 = fileadmin/style2.css
        deferred3.excludeFromConcatenation = 1
    }
    includeJSDeferred {
        app = fileadmin/app.js  
    }

    fontloader {
        googleFonts {
            roboto = Roboto:400,500,500i
            opensans = Open Sans:400
        }
        customFonts {
            families {
                fa = FontAwesome  
            }
            urls {
                fa = https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
            }
        }
    }
}

All settings are configured in plugin.tx_assetsloader

Typoscript Settings¶

concatenateCSS

If enabled all CSS files will be concatenated. Concatenation is only supported by includeCSSDeferred and includeJSDeferred.Single files can be excluded from concatenation by setting excludeFromConcatenation = 1 in the files settings.

concatenateJS

Same as concatenateCSS but for JS.

minifyCSS

If enabled all CSS code will be minified. Minification is supported by all CSS and JS related settings.

minifyJS

Same as minifyCSS but for JS.

includeCSSInline

All entries within that setting will be included as a style tag in the <head>.It can also include file contents as inline CSS. To do so, set file = 1 for that entry.Supports minification.

includeCSSInlineFooter

Same as includeCSSInline but includes the style tag before </body>.

includeJSInline

All entries within that setting will be included as a script tag in the <head>. It can also include file contents as inline JS. To do so, set file = 1 fot that entry.Supports minification.

includeJSInlineFooter

Same as includeJSInline but includes the script tag before </body>.

includeCSSDeferred

All entries within that setting will be loaded deferred via a small inline loading script.The default loading script can be overwritten in settings.deferredCssLoadingScript.Accepts only files.Supports minification and concatenation.Single files can be excluded from concatenation by setting excludeFromConcatenation = 1 in the files settings.

includeJSDeferred

All entries within that setting will be included as a script tag with the async and defer attribute.Accepts only files.Supports minification and concatenation.Single files can be excluded from concatenation by setting excludeFromConcatenation = 1 in the files settings.

fontloader.googleFonts

All google font families within that setting will be loaded with the webfontloader.The content of a font family must be the font family string from Google Fonts!

fontloader.customFonts

Allows you to load custom font families with the webfontloader.

fontloader.customFonts.families

Add the font family names here.

fontloader.customFonts.urls

The urls to the font family.

Overwriting default settings¶

All default settings are set in settings

settings.deferredCssLoadingScript

This setting contains the loading script to defer load CSS files.This script must contain two markers wich will be replaced later:

|Marker|Description| |:---|:---| |###CSSFILE####|This marker will be replaced by the full path of the css file.| |###SCRIPTNAME###|This marker will be replaced by a generated hash to create a unique loading function.|

settings.WFLLoadingScript

This setting contains the loading script to load the webfontloader.

TYPO3 Extension assetloader¶