Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chfoidl/typo3-assetloader
Pagespeed friendly asset loader.
https://github.com/chfoidl/typo3-assetloader
assets composer frontend pagespeed php typo3 typo3-extension
Last synced: about 6 hours ago
JSON representation
Pagespeed friendly asset loader.
- Host: GitHub
- URL: https://github.com/chfoidl/typo3-assetloader
- Owner: chfoidl
- License: gpl-3.0
- Created: 2017-04-30T17:07:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-06T08:51:15.000Z (over 6 years ago)
- Last Synced: 2023-07-15T22:06:58.202Z (over 1 year ago)
- Topics: assets, composer, frontend, pagespeed, php, typo3, typo3-extension
- Language: PHP
- Homepage:
- Size: 181 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TYPO3 Extension ``assetloader``
[](https://travis-ci.org/Sethorax/typo3-assetloader)
[](https://styleci.io/repos/89864781)
[](https://packagist.org/packages/sethorax/typo3-assetloader)
[](https://packagist.org/packages/sethorax/typo3-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 `` and before ``
- 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 ``.
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 ``.
> includeJSInline
All entries within that setting will be included as a `script` tag in the ``.
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 ``.
> 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.