Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-End Optimization

Zac Gordon
October 24, 2013

Front-End Optimization

Presentation given at 2013 MakingWeb Conference in Norway

Zac Gordon

October 24, 2013
Tweet

More Decks by Zac Gordon

Other Decks in Programming

Transcript

  1. Front-End Optimization - Making the Web - 2013.10.24 Optimizing Images

    @zgordon TYPE SIZE TRANSPARENCY COLORS LOSSY USE GIF S DITHER 256 NO MEMES JPG M NONE 16M YES PHOTOS PNG L ALPHA 16M NO ALL ELSE? Image Properties
  2. Front-End Optimization - Making the Web - 2013.10.24 Hosting Audio

    and Video @zgordon • Even if Site is Optimized it Seems Slow • Server Bandwidth • Slow-Loading or Unexpected Pauses • File Size Limits and Storage Space • Multiple Formats • Varying Quality Across Browsers • Video Players • Piracy Reasons to Host Media with 3rd Parties
  3. CDN

  4. Front-End Optimization - Making the Web - 2013.10.24 Content Delivery

    Networks @zgordon Content Delivery Networks serve assets for your site from fast, distributed servers. Takes the load off of your server Likely run faster than your server Special deals with ISP Examples: Amazon S3, jQuery
  5. Front-End Optimization - Making the Web - 2013.10.24 CSS Specificity

    @zgordon CSS Specificity follows a point system based on elements, classes and ids
  6. Front-End Optimization - Making the Web - 2013.10.24 CSS Specificity

    @zgordon When writing CSS selectors, keep the points as low as possible.
  7. Front-End Optimization - Making the Web - 2013.10.24 CSS Specificity

    @zgordon To help with performance keep the specificity as general as possible section#page nav.main ul li a.active { do: it; } #main a.active { do: it; } a.active { do: it; } $('section#page nav.main ul li a.active').doIt();
  8. Front-End Optimization - Making the Web - 2013.10.24 • Combines

    CSS background images into a single image • Use CSS Background position to display correct image • Cuts down on number of requests • Ensure all images are optimized CSS Sprites @zgordon
  9. Front-End Optimization - Making the Web - 2013.10.24 CSS Sprites

    @zgordon Sprite Cow: Step 2 - Select Images
  10. Front-End Optimization - Making the Web - 2013.10.24 CSS Sprites

    @zgordon Sprite Cow: Step 3 - Add CSS to Your Code .logo { background: url('imgs/v2_ed256a38.png') no-repeat -890px -141px; width: 180px; height: 62px; }
  11. Front-End Optimization - Making the Web - 2013.10.24 Minifying is

    the processes of removing all unnecessary characters from your code Minification @zgordon
  12. Front-End Optimization - Making the Web - 2013.10.24 Minifying is

    the processes of removing all unnecessary characters from your code Minification - CSS Example @zgordon
  13. Front-End Optimization - Making the Web - 2013.10.24 Minifying is

    the processes of removing all unnecessary characters from your code Minification - JS Example @zgordon 93k 273k
  14. Front-End Optimization - Making the Web - 2013.10.24 Minification Tools

    - JS @zgordon With GZIP the server sends compressed files that the client unpacks and displays
  15. Front-End Optimization - Making the Web - 2013.10.24 Asset concatenation

    combines groups of similar files into a single file. Asset Concatenation @zgordon Reduces calls to the server Order of your files and code matters Options: copy and paste v. run script on server
  16. Front-End Optimization - Making the Web - 2013.10.24 Minify PHP

    Library and W3 Total Cache Asset Concatenation @zgordon
  17. Front-End Optimization - Making the Web - 2013.10.24 Browser Caching

    @zgordon Browser Caching tell the client how long to cache files and assets for
  18. Front-End Optimization - Making the Web - 2013.10.24 Browser Caching

    - HTML + PHP @zgordon Browser Caching tell the client how long to cache files and assets for <META HTTP-EQUIV="EXPIRES" CONTENT="Dec, 21 Jul 2013 11:11:11 GMT"> HTML <?php header('Expires: Fri, 26 Jul 2013 05:00:00 GMT'); ?> PHP
  19. Front-End Optimization - Making the Web - 2013.10.24 Browser Caching

    - .htaccess @zgordon Browser Caching tell the client how long to cache files and assets for <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/png "access plus 7015 days" ExpiresByType text/css "access plus 2 weeks" ExpiresByType text/x-javascript "modification 1 month" ExpiresDefault "modification 2 days" </IfModule> .htaccess
  20. Front-End Optimization - Making the Web - 2013.10.24 Browser Caching

    - Oh No!!! @zgordon If you cache into the distant future there is no real way to stop it. <script type="text/javascript" src="/js/main.js?v=1"></script> So... <script type="text/javascript" src="/js/main.js?v=2"></script> <img src="/img/logo.png?v=2" alt="New logo"> Eh?