Assets Optimization Overview

Aug 19 2017- POSTED BY projecth 0 Comment

Images

Images are almost always the biggest use of bandwidth.

  • Use sprite maps to combine images into one large image.
  • Convert bitmap images to SVG images whenever possible. SVGs are small in file size and they can cover large areas of the screen using just a few vector points.
  • Bitmap images that can’t be converted to SVG should be sized and compressed properly.
  • Bitmap images also should have 200% their original resolution, for Retina displays:
    Photoshop: Save For Web / JPG Quality: from 50 to 75
    Photoshop: Save For Web / Progressive: checked

 

CSS

  • CSS files should be loaded inside the head element.
  • Avoid using @import rule inside CSS files, because a new HTTP request is needed for each @import rule. Instead, move all the code in the CSS files into one CSS file.
  • Use hosted services like Google Fonts when using web fonts. Using hosted services is better for speed and reliability, for additional parallel HTTP connections, and for better caching.
  • Pick only the font variations you need for each font to reduce the web page load.
  • Minify you code automatically using a task runner, or manually as follows:
    • Visit: http://cssminifier.com
    • Copy the code in your CSS files in order appearing in your HTML/CSS document into the CSS Minifier’s Input area.
    • Click Minify
    • Paste the all of the minified code into one CSS master file.
    • Replace all old CSS files with that master file.

 

SVG Sprites

1. Create svg-defs.svg sprite map file
2. Embed the code of the svg map file as is inside the HTML doc right after the <body> element.
3. Use the <use> element to reference an SVG sprite sheet.

Sprite Code

Where each symbol has different size and viewbox. Embedded in the HTML document right after <body>:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 <symbol id="phone" viewBox="0 0 161.4 188.9">
   <path fill="#a6a6a6" d="M44.7 0l15.7 49-17.7 15.7s-5.3 17.3 .... 25z"/>
 </symbol>
 ...
 <symbol id="twitter-icon" viewBox="0 0 123 200">
   <path fill="#a6a6a6" d="M44.7 0l15.7 49-17.7 15.7s-5.3 17.3 .... 25z"/>
 </symbol>
</svg>

Use Code

<svg>
 <use xlink:href="#icon-med-intestine" />
</svg>

NOTES:

  • Placing the viewbox, width and height on the <svg> tag or the <symbol> tag may affect responsiveness.
  • Instead of #a6a6a6, use currentColor as an attribute value.

 

Javascript

  • Javascript files should be loaded at the end of the <body> tag.
    This is because a JavaScript file will block any further rendering until the JavaScript has finished being loaded and parsed.
  • Use hosted Javascript libraries for better speed and reliability.
    Check: http://developers.google.com/speed/libraries/
  • Minify your code automatically using a task runner, or manually as follows:

 

Minification – The process of reducing the file size of JavaScripts and CSS by removing spaces, line breaks, comments, long variable names, and via other optimizations.
Minification generally cannot be undone, so it’s important to keep a copy of the original file for modification later.