DevBlog

Coding my way

10 months ago in PHP, Javascript, Laravel · 2 MIN READ

Optimize your Visitor experience

Delivering a web application be it a simple landing page or a webshop, you'll have to spend some time optimizing the assets for your site. Under assets I mean the nasty JS and CSS stuff, most back-end developers would like to forget.

Thankfully Laravel ships with a tool called Elixir. This is a wrapper for the popular task runner called Gulp, and simplifies a lot of things. If you spent a few hours configuring webpack and then fail, you'll know what I mean. You can read about Elixir and how to use it at the documentation site.

Setup

To get up and running with Elixir, you only have to run npm install or yarn from your Laravel project folder, and then open you Gulpfile.js. For large projects the laravel-elixir-group package is helpful as it can break down the tasks in smaller groups. To use it, just type npm i laravel-elixir-group --save-dev.

Building the CSS

It's always a good idea to optimize and cache your CSS, and for the best results you should use SASS or LESS. They are CSS pre-processors and can help to create more maintainable stylesheets.

I would recommend using SASS as it's rapidly becoming more widely adopted, also people are loosing interest in LESS.

I usually create only one entry in the gulpfile per CSS file I want to create, then import that page's dependencies. If there are global dependencies it can be a good idea to create _vendor_global.scss file, and import that into each page. At this point it's good to remember how SASS works. It concatenates all the imports into one virtual file and then transliterates into CSS, so all your variable declarations will remain in effect, and there is no need to import anything twice.

Here's an example:

Gulpfile.js

elixir(mix => {
        mix.sass('app.scss');
});

app.scss

@import "variables";
@import "../../../node_modules/font-awesome/scss/font-awesome";

This way you don't have to add each and every vendor dependency to your gulpfile and if it uses SASS as FontAwesome does, you can make adjustments to the generated CSS as well. You can also use any dependency manager you'd like, as the paths to the SASS files are relative from the app.scss file.

Building the JS

The concept is the same with with the JS parts of the site, but you don't have to resort to ES6 if you don't want to.

Gulpfile.js

elixir(mix => {
    mix.webpack('app.js');
});

app.js

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;
require('izimodal/js/iziModal');

In the example above, Elixir uses WebPack to transform our js file into something most of the browsers can stomach, and as you can see the ES6 style import, and the Node style require() also works in this environment.

Getting it into production

With elixir, getting everything into production is an easy task, just run gulp --production to have everything minified.

If you want to squeeze everything out of it, you can also use the Critical CSS package for Laravel found at https://github.com/kalfheim/critical-css. It can create a CSS excerpt for your most popular resolution. It will bridge the time from the loading of the page and the loading of the full CSS file, as these files can easily become bloated if you use a framework like bootstrap, or foundation.

···

Miklós Galicz

I'm a hobbyist who managed to become a professional web developer who specializes in Laravel and Vue.js, also the Spice must flow.
comments powered by Disqus


© 2017 DevBlog