1.

How to improve performance by Minify & Compress Files

Answer»

Minification is the act to strip out unnecessary characters from code to reduce the size, and a minifier is the tool that does it. Most often, the term is applied to JavaScript, but as you shall see, the technique can also be used on JavaScript, CSS and HTML.

JavaScript Minification: JavaScript offers the most potential for minification. Aside from removing white spaces and comments, Windows-style line breaks (CRLF) can be converted to UNIX-style breaks (LF), and VARIABLE names can be shortened.

function toggle(elementID) {         if ( document.getElementById(elementID).style.display != 'none’ ) {           document.getElementById(elementID).style.display  = 'none';      } else {            document.getElementById(elementID).style.display = '';       }} function toggle(elementID) {    var el = document.getElementById(elementID);       if ( el.style.display != 'none' ) {                el.style.display = 'none’;     } else {         el.style.display = ''; }}

CSS Minification : Many of the minification techniques outlined for JavaScript minification are also applicable to CSS — the removal of extra whitespaces, removal of comments, and conversion of CRLF to LF.

.MYCLASS {                margin-left: 10px;               margin-right: 10px;            margin-bottom: 20px;            margin-top: 20px;} myclass { margin: 20px 10px;}

Html Minification: Html minification is newer and is still experimental. Following are the available options:

  • Remove comments.
  • Remove comments from JavaScript and CSS blocks.
  • Remove character data (CDATA) blocks from CSS and JavaScript.
  • Collapse whitespace.
  • Collapse boolean attributes (for example, selected="selected").
  • Remove attribute quotes (when it is SAFE to do so).
  • Remove redundant attributes (for example, language="JavaScript").
  • Use short doctype.
  • Remove empty attributes (for example, title="").
  • Remove optional closing tags.
  • Remove empty elements such as <p></p>.
  • Remove type="text/javascript" from INLINE script.

OPTIMIZING IMAGES: Implementing compression on an image with our impacting the quality can reduce the size of the image.  There are different ways to improve the performance of a web page when images are present.

  • Reduce the Image size
  • Eliminating the Http request for favicon instead use Data URI
  • Use Lazy loading
  • Avoid empty src attributes
  • Setting appropriate width and height attributes


Discussion

No Comment Found