Optimizing Your Frontend Performance
-
Upload
thomas-weinert -
Category
Self Improvement
-
view
3.246 -
download
2
description
Transcript of Optimizing Your Frontend Performance
![Page 1: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/1.jpg)
NRW08
Thomas WeinertOptimizing Your Frontend Performance
![Page 2: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/2.jpg)
About Me● Application Developer
– PHP– XSLT/XPath– (some) Javascript
● papaya CMS– PHP based Content Management System– uses XSLT for Templates
![Page 3: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/3.jpg)
How to scale you webpage?● Hardware● Backend● Frontend
![Page 4: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/4.jpg)
Hardware● More hardware● Better hardware● Moores Law
– Transistors doubling every 18 months– Transistors != Performance
● Distributed systems are complex● Think about environment
![Page 5: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/5.jpg)
Backend● External data sources are slow
– SQL– Files– Network
● Locking is slower● Memory is faster
– but less secure
![Page 6: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/6.jpg)
Mini/Micro Optimisations● Myths
– echo vs. print– ' vs. "
● Objects vs. functions vs. linear source● Template systems
![Page 7: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/7.jpg)
Mini/Micro Optimisations
DON'T DO IT
![Page 8: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/8.jpg)
Yahoo!● Yahoo!'s Exceptional Performance team
– Yahoo!'s Exceptional Performance team evangelizes best practices for improving web performance. They conduct research, build tools, write articles and blogs, and speak at conferences. Their best practices center around the rules for high performance web sites.
– http://developer.yahoo.com/performance/
![Page 9: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/9.jpg)
Results● 80% of the end-user response time is spent on
the front-end.
![Page 10: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/10.jpg)
Firebug● Firefox extension● Analyze and manipulate
– requests, page structure, CSS● Javascript debugger
![Page 11: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/11.jpg)
YSlow● Why (is your web page) slow● Set of rules● Firebug extension
![Page 12: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/12.jpg)
Yslow: Performance View
![Page 13: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/13.jpg)
Yslow: Stats
![Page 14: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/14.jpg)
Yslow: Components
![Page 15: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/15.jpg)
Yslow: Tools● Print View● JSLint
![Page 16: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/16.jpg)
Make Fewer HTTP Requests● Combined files
– CSS– JavaScript
● CSS sprites
![Page 17: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/17.jpg)
Combined files● Release process● CSS
– Consider URLs● JavaScript
– Minify– Obfuscate
![Page 18: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/18.jpg)
CSS Sprites● Elements with fixed size● Background image● Disable repeat● Negative positions
![Page 19: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/19.jpg)
CSS Icons● Raster of icons● No repeat● Fixed size
<div> or <span>
![Page 20: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/20.jpg)
CSS Backgrounds● Gradient● Repeat in one
direction
![Page 21: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/21.jpg)
Minify Javascript● Most JS libraries provide a minified version● YUI Compressor:
http://developer.yahoo.com/yui/compressor/– JS and CSS
● Packer– Webpage, .Net, Perl, PHP– http://dean.edwards.name/packer/
![Page 22: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/22.jpg)
#2 Use A CDN● Content Delivery Network
– Akamai Technologies– Mirror Image Internet– Limelight Networks
● Bring the content to your users– Geographic distance– Physics is still here
● Only for large sites● Dynamic content is complex
![Page 23: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/23.jpg)
Headers● Expires● Cache-Control
– Session-Management● 304 Not Modified
![Page 24: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/24.jpg)
Expires● Apache mod_expire●
● <IfModule mod_expires.c>● ExpiresDefault "access plus 1 month"● ExpiresActive on● </IfModule>
![Page 25: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/25.jpg)
Cache-Control● None
– no caching– default for sessions
● Private– cacheable in browser cache
● Public– cacheable in browser cache and proxies
![Page 26: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/26.jpg)
304 Not Modified● Send Etag and Modfication date
– Etag: "some hash"– Last-Modified: Thu, 12 Sep 2008 11:00:00 GMT
● Request headers– If-Modified-Since: Tue, 12 Sep 2008 11:00:00 GMT– If-None-Match: "some hash"
● Response headers– HTTP/1.1 304 Not Modified
![Page 27: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/27.jpg)
HTTPFox● Firefox Extension● Log of all HTTP requests● Not only displayed content
![Page 28: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/28.jpg)
Gzip Components● Gzip != Zip
– only compression– no packaging– tar.gz
● Good browser support– Accept-Encoding: gzip, deflate– Content-Encoding: gzip–
![Page 29: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/29.jpg)
Gzip in Apache● mod_gzip● mod_deflate
– filter chain, works on dynamic content, too●
– http://httpd.apache.org/docs/2.2/mod/mod_deflate.html
![Page 30: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/30.jpg)
Gzip In PHP 5● <?php● ob_start('ob_gzhandler');● ...
![Page 31: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/31.jpg)
Gzip In PHP 5● <?php● if (function_exists('ob_gzhandler')) {● ob_start('ob_gzhandler');● }● ...
![Page 32: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/32.jpg)
Configure ETags● Browser still asks webserver● Server specific
– CDN– Load balancer with multiple servers
● Apache– FileETag none
● IIS– http://support.microsoft.com/?id=922733
![Page 33: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/33.jpg)
Split requests across domains● HTTP 1.1 suggests 2 parallel requests per
domain● Separate content by function
– www.domain.tld– themes.domain.tld– usercontent.domain.tld (security)
● Optimisation tools change the option● Consider cookie domains
![Page 34: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/34.jpg)
Reduce DNS Lookups● DNS maps host names to ips● Needs time
– 20-120 milliseconds● Cached in browser
![Page 35: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/35.jpg)
Avoid Redirects● Obviously addition requests● Only cached with explicit headers●
● http://www.domain.tld– → http://www.domain.tld/
![Page 36: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/36.jpg)
Put Stylesheets at the Top● Progressive display of the page● Page appears to load faster● W3C specifications
![Page 37: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/37.jpg)
Put Scripts at the Bottom● Scripts block parallel downloads
– defer attribute in MSIE● onload() event
– used by most libraries●
● Problem: document.write()– Counter– Banners
![Page 38: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/38.jpg)
Avoid CSS Expressions● MSIE from version 5
– cross browser experience● JavaScript inside CSS● Evaluated
– page render– resize– scrolling– mouse movements (hover)
![Page 39: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/39.jpg)
JavaScript And CSS Files● Do not embed JS/CSS in your pages
– No <script>...</script>– No <style>...</style>
● Seperate caching headers● Revision parameter (style.css?rev=1234)
– Get parameter– Unique URL for browser
![Page 40: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/40.jpg)
Remove Duplicate Scripts● Team size● Standard scripts
– XMLRPC, JQuery, Prototype● Script module for your template system
● $templatesystem->addScript('foo.js');
![Page 41: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/41.jpg)
Make Ajax Cacheable● Often AJAX applications avoid caching
– http://some.domain.tld/ajax.file?t=randomvalue● A lot of requests● Use more static URLs
![Page 42: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/42.jpg)
Questions?
![Page 43: Optimizing Your Frontend Performance](https://reader034.fdocuments.in/reader034/viewer/2022051513/547ea34db4af9faf158b5676/html5/thumbnails/43.jpg)
References● Slides: http://www.abasketfulofpapayas.de/● Yahoo Performance Team
– http://developer.yahoo.com/performance/● JS minimize
– http://developer.yahoo.com/yui/compressor/– http://dean.edwards.name/packer/
● Apache GZIP– http://httpd.apache.org/docs/2.2/mod/mod_deflate.html
● No Etag in IIS– http://support.microsoft.com/?id=922733