Introduction

Google PageSpeed suggests to inline assets https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example and there is no simple way to do so in OctoberCMS (|theme filter generates URL for remote assets access).

This plugin provides easy way to include inlined assets in your code:

Usage

CSS

Instead of:

<link href="{{ [ 'scss/styles.scss' ]|theme }}" rel="stylesheet">

Use:

<style>{{ [ 'scss/styles.scss' ]|inline }}</style>

JavaScript

Instead of:

<script src="{{ [
    '@jquery',
    '@framework',
    '@framework.extras',
    'assets/javascript/app.js'
]|theme }}"></script>

Use:

<script>{{ [
    '@jquery',
    '@framework',
    '@framework.extras',
    'assets/javascript/app.js'
]|inline }}</script>

And that's all. :)

Summary

Standard OctoberCMS's asset minifier is used internally so there are no additional considerations on how to organize your JS, CSS assets (also all OctoberCMS configuration options also apply here: https://octobercms.com/docs/markup/filter-theme). You can just switch from |theme to |inline without modifying your asset's code.