Optimizing Your Frontend Performance - Presentation Transcript
Optimizing Your
Frontend Performance
Thomas Weinert
About Me
Application Developer
▹ PHP
▹ XSLT/XPath
▹ (some) Javascript
papaya CMS
▹ PHP based Content Management System
▹ uses XSLT for Templates
Thomas Weinert, papaya Software GmbH
How to scale you webpage?
Hardware
Backend
Frontend
Thomas Weinert, papaya Software GmbH
Hardware
More hardware
Better hardware
Moores Law
▹ Transistors doubling every 18 months
▹ Transistors != Performance
Distributed systems are complex
Think about environment
Thomas Weinert, papaya Software GmbH
Backend
External data sources are slow
▹ SQL
▹ Files
▹ Network
Locking is slower
Memory is faster
▹ but less secure
Thomas Weinert, papaya Software GmbH
Mini/Micro Optimisations
Myths
▹ echo vs. print
▹ ' vs. \"
Objects vs. functions vs. linear source
Template systems
Thomas Weinert, papaya Software GmbH
Mini/Micro Optimisations
DON'T DO IT
Thomas Weinert, papaya Software GmbH
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/
Thomas Weinert, papaya Software GmbH
Results
80% of the end-user response time is spent on
the front-end.
Thomas Weinert, papaya Software GmbH
CSS Sprites
Elements with fixed size
Background image
Disable repeat
Negative positions
Thomas Weinert, papaya Software GmbH
CSS Icons
Raster of icons
No repeat
Fixed size
<div> or <span>
Thomas Weinert, papaya Software GmbH
CSS Backgrounds
Gradient
Repeat in one
direction
Thomas Weinert, papaya Software GmbH
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/
Thomas Weinert, papaya Software GmbH
#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
Thomas Weinert, papaya Software GmbH
Headers
Expires
Cache-Control
▹ Session-Management
304 Not Modified
Thomas Weinert, papaya Software GmbH
Expires
Apache mod_expire
<IfModule mod_expires.c>
ExpiresDefault \"access plus 1 month\"
ExpiresActive on
</IfModule>
Thomas Weinert, papaya Software GmbH
Cache-Control
nocache
▹ no caching
▹ default for sessions
private
▹ cacheable in browser cache
public
▹ cacheable in browser cache and proxies
Thomas Weinert, papaya Software GmbH
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
Thomas Weinert, papaya Software GmbH
HTTPFox
Firefox Extension
Log of all HTTP requests
Not only displayed content
Thomas Weinert, papaya Software GmbH
Gzip Components
Gzip != Zip
▹ only compression
▹ no packaging
▹ tar.gz
Good browser support
▹ Accept-Encoding: gzip, deflate
▹ Content-Encoding: gzip
Thomas Weinert, papaya Software GmbH
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
Thomas Weinert, papaya Software GmbH
Gzip In PHP 5
<?php
ob_start('ob_gzhandler');
...
Thomas Weinert, papaya Software GmbH
Gzip In PHP 5
<?php
if (function_exists('ob_gzhandler')) {
ob_start('ob_gzhandler');
}
...
Thomas Weinert, papaya Software GmbH
Configure ETags
Browser still asks webserver
Server specific
▹ CDN
▹ Load balancer with multiple servers
Apache
▹ FileETag none
IIS
▹ http://support.microsoft.com/?id=922733
Thomas Weinert, papaya Software GmbH
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
Thomas Weinert, papaya Software GmbH
Reduce DNS Lookups
DNS maps host names to ips
Needs time
▹ 20-120 milliseconds
Cached in browser
Thomas Weinert, papaya Software GmbH
Avoid Redirects
Obviously additional requests
Only cached with explicit headers
▹ depends on webserver configuration
http://www.domain.tld
▹ http://www.domain.tld/
Thomas Weinert, papaya Software GmbH
Put Stylesheets at the Top
Progressive display of the page
Page appears to load faster
W3C specifications
Thomas Weinert, papaya Software GmbH
Put Scripts at the Bottom
Scripts block parallel downloads
▹ defer attribute in MSIE
onload() event
▹ used by most libraries
Problem: document.write()
▹ Counter
▹ Banners
Thomas Weinert, papaya Software GmbH
JavaScript And CSS Files
Do not embed JS/CSS in your pages
▹ No <script>...</script>
▹ No <style>...</style>
Separate caching headers
Revision parameter (style.css?rev=1234)
▹ Get parameter
▹ Unique URL for browser
Thomas Weinert, papaya Software GmbH
Remove Duplicate Scripts
Team size
Standard scripts
▹ XMLRPC, JQuery, Prototype
Script module for your template system
$templatesystem->addScript('foo.js');
Thomas Weinert, papaya Software GmbH
Make Ajax Cacheable
Often AJAX applications avoid caching
▹ http://some.domain.tld/ajax.file?t=randomvalue
A lot of requests
Use more static URLs
Thomas Weinert, papaya Software GmbH
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
Thomas Weinert, papaya Software GmbH
0 comments
Post a comment