Front-End Optimization

Presentation given at 2013 MakingWeb Conference in Norway

Transcript

1. Front-End Optimization zacgordon.com
2. About Me
3. Front-End Optimization - Making the Web - 2013.10.24 Zac Gordon @zgordon
4. Front-End Optimization
5. Front-End Optimization - Making the Web - 2013.10.24 Front-End Optimization @zgordon TCP/IP DNS Download HTML CSS JS MEDIA
6. Front-End Optimization - Making the Web - 2013.10.24 Tools - Inspector @zgordon
7. Front-End Optimization - Making the Web - 2013.10.24 Tools - Inspector @zgordon
8. Front-End Optimization - Making the Web - 2013.10.24 Tools - Inspector @zgordon
9. Front-End Optimization - Making the Web - 2013.10.24 Tools - Pingdom @zgordon
10. Front-End Optimization - Making the Web - 2013.10.24 Tools - Pingdom @zgordon
11. Front-End Optimization - Making the Web - 2013.10.24 Tools - Pingdom @zgordon
12. Front-End Optimization - Making the Web - 2013.10.24 Tools - Pingdom @zgordon
13. Front-End Optimization - Making the Web - 2013.10.24 Tools - Pingdom @zgordon
14. Media
15. 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
16. Front-End Optimization - Making the Web - 2013.10.24 Optimizing Images @zgordon
17. Front-End Optimization - Making the Web - 2013.10.24 Optimizing Images @zgordon
18. Front-End Optimization - Making the Web - 2013.10.24 Optimizing Images @zgordon Image Optimization Tools
19. 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
20. Front-End Optimization - Making the Web - 2013.10.24 3rd Party Media Hosts @zgordon
21. CDN
22. 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
23. CSS (jQuery) Specificity
24. Front-End Optimization - Making the Web - 2013.10.24 CSS Specificity @zgordon CSS Specificity follows a point system based on elements, classes and ids
25. Front-End Optimization - Making the Web - 2013.10.24 CSS Specificity @zgordon When writing CSS selectors, keep the points as low as possible.
26. 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();
27. CSS Sprites
28. 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
29. Front-End Optimization - Making the Web - 2013.10.24 CSS Sprites @zgordon
30. Front-End Optimization - Making the Web - 2013.10.24 CSS Sprites @zgordon
31. Front-End Optimization - Making the Web - 2013.10.24 CSS Sprites @zgordon
32. Front-End Optimization - Making the Web - 2013.10.24 CSS Sprites @zgordon Sprite Cow
33. Front-End Optimization - Making the Web - 2013.10.24 CSS Sprites @zgordon Sprite Cow: Step 1 - Upload
34. Front-End Optimization - Making the Web - 2013.10.24 CSS Sprites @zgordon Sprite Cow: Step 2 - Select Images
35. 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; }
36. Minification
37. Front-End Optimization - Making the Web - 2013.10.24 Minifying is the processes of removing all unnecessary characters from your code Minification @zgordon
38. 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
39. 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
40. Front-End Optimization - Making the Web - 2013.10.24 Minification Tools - CSS @zgordon
41. 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
42. Asset Concatenation
43. 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
44. Front-End Optimization - Making the Web - 2013.10.24 Minify PHP Library and W3 Total Cache Asset Concatenation @zgordon
45. Browser Caching
46. 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
47. 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
48. 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
49. 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?
50. Front-End Optimization zacgordon.com