JavaScript: grunt-contrib-uglify and gulp-uglifyĬSS: grunt-contrib-cssmin and gulp-minify-css Desktop Apps If you're using Grunt or Gulp as part of your workflows, there are lots of plugins out there to "uglify" and minify. Check your framework's documentation to see if it has something like this built in. If you're using an application framework like Ruby on Rails or Django, you might already have a minification tool on board. Enough great tools are here to help us when it comes to "minifying" our resources. Luckily for us, we don't have to re-educate ourselves to write our JavaScript and CSS without white space or comments. And they aim for one goal: less characters and therefore smaller file sizes, a cornerstone metric for fast-loading web pages.
Taken together, all of these (and a couple more) measures are referred to as " minification". While comments are a very obvious example, optimizing CSS and JavaScript for the browser goes a lot farther than this: we could go without white space and new line characters we could shorten variable names we could combine duplicate CSS selector rules. They are simply a superfluous burden that makes files larger than they have to be. The browser's JavaScript interpreter, however, doesn't care about these. For example, for us as developers it makes a lot of sense to have comments in our JavaScript files. Human-readable text and optimized text are really two kinds of things. Have a look at our chapter on Combining CSS and JavaScript earlier. When it comes to CSS and Javascript, there are lots of preprocessing tools that allow you to combine multiple source files into a single (or at least fewer) output files.
Include prepros js file how to#
Have a look at our chapter on HTTP caching for details on how to establish an effective caching strategy.Īlso in the spirit of keeping HTTP requests at a minimum, keep in mind that you should deliver as few files as possible.
Only then can they be cached effectively. Therefore, instead of including CSS and JavaScript in the page's HTML, we are better off delivering them as separate resources. With such a strategy, you would completely miss out on the merits of caching. However, there's a big catch: we would have to transfer these contents to the user on every subsequent page load, again.
Include prepros js file code#
Wouldn't it be logical, then, to put all of your CSS and JavaScript inline into the source code of the HTML page that needs it? The obvious benefit would be that we'd save some HTTP requests, since CSS and JavaScript wouldn't have to be downloaded separately anymore.
Previously, we talked about how important it is to reduce HTTP requests if you want to have fast-loading web pages. Optimizing CSS & JavaScript CSS and JavaScript in External Files