2017 © Pedro Peláez
 

typo3-cms-extension typo3-assetloader

Pagespeed friendly asset loader for TYPO3 CMS

image

sethorax/typo3-assetloader

Pagespeed friendly asset loader for TYPO3 CMS

  • Wednesday, June 6, 2018
  • by Sethorax
  • Repository
  • 1 Watchers
  • 1 Stars
  • 843 Installations
  • PHP
  • 0 Dependents
  • 0 Suggesters
  • 0 Forks
  • 0 Open issues
  • 7 Versions
  • 127 % Grown

The README.md

TYPO3 Extension assetloader

Build Status StyleCI Latest Stable Version License, (*1)

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., (*2)

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, (*3)

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

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

TypoScript Setup

Every aspect of this extension is configurable via typoscript setup., (*6)

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, (*7)

Typoscript Settings

concatenateCSS, (*8)

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., (*9)

concatenateJS, (*10)

Same as concatenateCSS but for JS., (*11)

minifyCSS, (*12)

If enabled all CSS code will be minified. Minification is supported by all CSS and JS related settings., (*13)

minifyJS, (*14)

Same as minifyCSS but for JS., (*15)

includeCSSInline, (*16)

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., (*17)

includeCSSInlineFooter, (*18)

Same as includeCSSInline but includes the style tag before </body>., (*19)

includeJSInline, (*20)

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., (*21)

includeJSInlineFooter, (*22)

Same as includeJSInline but includes the script tag before </body>., (*23)

includeCSSDeferred, (*24)

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., (*25)

includeJSDeferred, (*26)

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., (*27)

fontloader.googleFonts, (*28)

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!, (*29)

fontloader.customFonts, (*30)

Allows you to load custom font families with the webfontloader., (*31)

fontloader.customFonts.families, (*32)

Add the font family names here., (*33)

fontloader.customFonts.urls, (*34)

The urls to the font family., (*35)

Overwriting default settings

All default settings are set in settings, (*36)

settings.deferredCssLoadingScript, (*37)

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

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, (*39)

This setting contains the loading script to load the webfontloader., (*40)

The Versions

06/06 2018

dev-master

9999999-dev

Pagespeed friendly asset loader for TYPO3 CMS

  Sources   Download

GPL-3.0+

The Requires

 

The Development Requires

by Avatar Sethorax

css frontend typo3 cms assets js pagespeed

06/06 2018

0.9.5

0.9.5.0

Pagespeed friendly asset loader for TYPO3 CMS

  Sources   Download

GPL-3.0+

The Requires

 

The Development Requires

by Avatar Sethorax

css frontend typo3 cms assets js pagespeed

24/10 2017

0.9.4

0.9.4.0

Pagespeed friendly asset loader for TYPO3 CMS

  Sources   Download

GPL-3.0+

The Requires

 

The Development Requires

by Avatar Sethorax

css frontend typo3 cms assets js pagespeed

22/05 2017

0.9.3

0.9.3.0

Pagespeed friendly asset loader for TYPO3 CMS

  Sources   Download

GPL-3.0+

The Requires

 

The Development Requires

by Avatar Sethorax

css frontend typo3 cms assets js pagespeed

11/05 2017

0.9.2

0.9.2.0

Pagespeed friendly asset loader for TYPO3 CMS

  Sources   Download

GPL-3.0+

The Requires

 

The Development Requires

by Avatar Sethorax

css frontend typo3 cms assets js pagespeed

01/05 2017

0.9.1

0.9.1.0

Pagespeed friendly asset loader for TYPO3 CMS

  Sources   Download

GPL-3.0+

The Requires

 

The Development Requires

by Avatar Sethorax

css frontend typo3 cms assets js pagespeed

30/04 2017

0.9.0

0.9.0.0

Loads CSS and JS asynchronously to increase page performance.

  Sources   Download

GPL-3.0+

The Requires

 

The Development Requires

by Avatar Sethorax

css frontend typo3 cms assets js pagespeed