Your site can experience a 27% higher conversion rate by improving page speed by 1 second. Or read about these stories; and consider that Google ranks your page higher on search engine results the faster it loads. No matter what your website, you want people to use it. The slower it loads, the less patient people are going to be waiting around for the content.
Minification is just one of the ways you can make your website more accessible to others, besides other options like adding a load balancer to help distribute network traffic or upgrading to the latest and greatest version of your framework (which you SHOULD do if you are using .NET Core). Thankfully, minification is easy and this library aims to give you the biggest possible performance improvement for your .cshtml/html files.
Why not use another minification library that's recommended by Google? That library only works on HTML files, but rest assured, we are taking heavy inspiration from this library in order to make use of the same minification techniques for .cshtml files. In case our library's approach of using gulp to minify your .cshtml does not work for you, I would recommend an .exe in order to minify your .cshtml and steer you away from options like this if you can help it. (Minifying at runtime incurs a performance penalty).
This minification library works by taking the biggest offenders to page weight and nullifies them. We reduce the number of bytes your .cshtml/html is made of, which makes it quicker to send the page to the end user. What do we do exactly? The list isn't comprehensive (and more features are being added), but here is what we have right now:
- Removes leading/trailing whitespace
- Removes HTML/Razor/CSS comments
- Minifies inline
<script>blocks with uglify-js - Minifies inline
<style>blocks with clean-css - Remove optional closing tags
- Collapse whitespace within tag attributes
- Remove quotes around eligible tag attribute values
- Remove optional closing slashes on void elements
- Remove url schemes
npm install gulp-cshtml-minify
var minifyCshtml = require('gulp-cshtml-minify'),
gulp = require('gulp');
gulp.src("test.cshtml")
.pipe(minifyCshtml())
.pipe(gulp.dest("result"));
You can pass in a number of options into the function to customize what options are turned on and off. The values shown below are the default options and will be set as such if you do not pass in any custom options when running the library (as seen in the above example).
var minifyCshtml = require('gulp-cshtml-minify'),
gulp = require('gulp');
gulp.src("test.cshtml")
.pipe(minifyCshtml({
removeHtmlComments: true,
removeRazorComments: true,
removeCssComments: true,
minifyCss: true,
minifyJs: true,
collapseWhitespace: false, /* collapses whitespace to one space */
optionalClosingTags: true, /* removes optional tags */
urlSchemes: true, /* https:// -> // */
uglifyjsOptions: {}, /* options for uglifyjs */
cleancssOptions: {} /* options for cleancss */
}))
.pipe(gulp.dest("result"));
Note - Collapsing whitespace can cause issues if you are relying on spacing to display inline elements.
Note - Removing optional closing tags in seldom circumstances may lead to unexpected behavior.
Note - Shortening the url schemes may cause problems if you load resources over https when your page is loaded over http, which should no longer apply to the majority (but may apply to you).
I have taken random pages from different websites to show you the performance of this library. This will be built into a nice command you can run on your own in the package at a later date but for now will remain solely as text. Please note - that these numbers are not taking into account GZIP, which on its own can reduce text content by 60-88%. But don't just gzip and not minify, read here, here or here why you should be doing both.
| Url | Original | Minified | Savings |
|---|---|---|---|
| MDN | 112.9KB | 97KB | 15% |
| Vox | 157.5KB | 138KB | 12.4% |
| Food Network | 151.8KB | 126.2KB | 17% |
| Olive Garden | 620.1KB | 536.9KB | 14% |