CSS Optimization

Aug 19 2017- POSTED BY projecth 0 Comment

The goals when writing performance CSS is to accomplish your desired styling with as less code as possible. Use CSS shorthands, reduce number of selectors, combine similar style rules, etc.

Gulp Modules

Gulp is a popular automated process pipeline tool written in JavaScript. An automated process pipeline is a script that executes a series of process aimed at preparing code for production.

deployment

Module Name Module Keyword Role
Basic Gulp Script ‘gulp’ Basic definitions.
Post CSS Module ‘gulp-postcss’ Pipes CSS through several plugins, but parse CSS only once.
Auto Prefixer Module ‘autoprefixer’ Adds vendor prefixes when necessary.
Post CSS Z Index ‘postcss-zindex’ Rearrange z-index values.
Concat Module ‘gulp-concat’ Combine CSS files.
Clean CSS Module ‘gulp-clean-css’ Minify CSS, combine media queries, removes useless code.
Inline Source Module ‘gulp-inline-source’ Adds AtF necessary inline CSS.
Wait Module ‘gulp-wait’ Waits till certain files are created before continuing.

To unminify a certain minified CSS file, run the following script:

> cssunminifier prod.min.css

Inline CSS Critical to HTML Doc.
Adding inline CSS reduces an HTTP request which will reduce any latency that may impede your first load.
The best way to get your CSS inline with your HTML is use a Gulp build pipeline with gulp-inline-source.

  1. Determine core CSS critical only for AtF content (e.g. layout, header, main typography, etc.)
  2. Place them all in a separate CSS file
  3. Link the CSS file in the <head> with a custom attribute: inline
    <link href="/css/core.css" rel="stylesheet" inline>

 

Gulp: CSS Optimization File

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var postcssZindex = require('postcss-zindex');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var inlinesource = require('gulp-inline-source');
var wait = require('gulp-wait');

gulp.task('process-css', function() {
  var plugins = [
    autoprefixer({
      browsers: ['last 3 version']
    }),
    postcssZindex({startIndex: 1})
  ];
  return gulp.src('./styles/*.css')
    .pipe(postcss(plugins))
    .pipe(cleanCSS({
      level: {
        1: {},
        2: {}
      }
    }))
    .pipe(concat('prod.min.css'))
    .pipe(gulp.dest('./dist'));
});

gulp.task('inlinesource', function () {
    return gulp.src('*.html')
        .pipe(wait(100))
        .pipe(inlinesource())
        .pipe(gulp.dest('./dist'));
});

gulp.task('default', ['process-css', 'inlinesource']);
Add Optimized CSS to HTML Code
<html>
 <head>
   <link inline rel="stylesheet" type="text/css" href="dist/prod.min.css" />
 </head>
 <body>
 </body>
</html>

CSS Shorthand – CSS properties that let a developer set the values of multiple properties within a single CSS rule
Vendor prefix – a tool that allows browser developers to release new CSS features before they have been standardized