Games, Programming, Web
Web
Understanding WebKit composite layers and iOS Safari performance
Jul 24th
I’ve made a video showing how Webkit handles animating of CSS3 transforms very differently from animating of CSS position (left, top) or margin. The are several different conditions that will trigger the browser to use a “composite layer” which minimizes repaints and allows for hardware-accelerated composting. The benefits are especially dramatic in iOS Safari.
- Try the example and compare the behavior in your browser’s inspection tools
- A tweaked example for iOS that makes the performance difference very obvious: chrisdanford.com/public/transform/
This Chromium document explaining composite layers says that the following conditions all trigger a separate composite layer:
- Layer has 3D or perspective transform CSS properties
- Layer is used by video element using accelerated video decoding
- Layer is used by a canvas element with a 3D context
- Layer uses a CSS animation for its opacity or uses an animated webkit transform
- Layer has a descendant that has a compositing layer
- Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer)
See Rich Bradshaw’s awesome CSS3/Transforms page for some great examples.
HTML5 DOM and CSS3 performance
Jul 16th
I ran across an awesome presentation by Paul Irish discussing DOM and CSS3 performance issues:
The video: http://www.youtube.com/watch?v=q_O9_C2ZjoA
The slides: http://dl.dropbox.com/u/39519/talks/gperf/index.html
The blog post: http://paulirish.com/2011/dom-html5-css3-performance/
The top tips that were new to me:
- how to not trigger unnecessary layout/reflow
- iOS Safari: get massive compositing performance improvement by using CSS3′s translate3d(0,0,0) instead of translate(0,0)
- jsperf.com to conduct JavaScript profiling experiments: example
New Firebug feature: console.timeStamp
Jul 14th
Firebug recently added an awesome new API; console.timeStamp lets you to create named “events” in the Net panel:
This technique requires manual instrumentation and isn’t as detailed as the Timeline panel in Chrome/Safari or a heavy-weight tool like dynaTrace, but it’s a nice, simple, uncluttered view compared to those other tools.
I used it today on a machine where I couldn’t install dynaTrace, I’ll surely be using it again. Unfortunately it isn’t supported in Firefox 3.6 and older.
Optimal Apache compression and expire settings
Mar 20th
Below are compression and expiration settings for Apache that I’ve found optimal for StepMania. You can paste them into your .htaccess file.
- Don’t mess with PHP’s ob_gzhandler. The settings below enable compression at the Apache module level, are the cleanest way to handle compression of non-PHP types, and are better performing to boot.
- If your PHP application has a option for compression (it’ll be using ob_gzhander), turn that off in favor of these settings.
- Web-Sniffer is useful for testing whether your compression and cache-control settings are taking effect. It’s also useful for troubleshooting HTTP error responses that Firefox and Chrome hide with pretty error pages.
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-httpd-fastphp AddOutputFilterByType DEFLATE application/x-httpd-eruby </IfModule> <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/x-icon "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType audio/x-wav "access plus 1 month" ExpiresByType audio/mpeg "access plus 1 month" ExpiresByType video/mpeg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/quicktime "access plus 1 month" ExpiresByType video/x-ms-wmv "access plus 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType text/css "access plus 1 hour" ExpiresByType text/javascript "access plus 1 hour" </IfModule>
Rules for optimal web site performance
Nov 13th
I’ve been working to improve the performance a large site at Amazon. Steve Souders has written two excellent books that explain browser/http best practices. A few of the rules were new to me and very helpful (flushing/mod_deflate settings, different browser techniques to defer Javascript). The important take-away is that only a small fraction of typical page load time is bottlenecked by the server generation of a page.
| High Performance Web Sites (companion site)
|
Even Faster Web Sites (companion site)
|
My first round of optimizations just went into production and our metric that measures “time from click until critical feature shows up in the browser” dropped from 5.25s to 3.5s. It’s neat to multiply the savings and see that many weeks of end-user browser load time are saved each day.
Free year of EC2 hosting on AWS
Oct 22nd
I put together my own co-located server for ChartPT, and I’ve been regretting it more and more each time AWS releases new features and drops prices. They just announced a new Free tier today.
- 750 hours of Amazon EC2 Linux Micro Instance usage (613 MB of memory and 32-bit and 64-bit platform support) – enough hours to run continuously each month*
- 750 hours of an Elastic Load Balancer plus 15 GB data processing*
- 10 GB of Amazon Elastic Block Storage, plus 1 million I/Os, 1 GB of snapshot storage, 10,000 snapshot Get Requests and 1,000 snapshot Put Requests*
- 5 GB of Amazon S3 storage, 20,000 Get Requests, and 2,000 Put Requests*
- 30 GB per of internet data transfer (15 GB of data transfer “in” and 15 GB of data transfer “out” across all services except Amazon CloudFront)*
- 25 Amazon SimpleDB Machine Hours and 1 GB of Storage**
- 100,000 Requests of Amazon Simple Queue Service**
- 100,000 Requests, 100,000 HTTP notifications and 1,000 email notifications for Amazon Simple Notification Service**
I use S3 and CloudFront as an edge cache for StepMania.com. I’m waiting just a little longer for the transfer costs to drop so that I can move all of the file downloads to S3 (my current S3 bill would be ~$500/mo according to the AWS calculator).
Cross-posting between WordPress, Facebook fan pages, and Twitter
May 18th
I tried several different desktop clients, Facebook apps, WordPress plug-ins, and status relay services. This is system I ended up using:
- Sign up for a Ping.fm account. Add your Facebook account, fan pages, and Twitter account.
- From WordPress: Download, install, and activate the Shorten2ping plug-in. In Shorten2ping’s settings page, set “Send Notification to Ping.fm”.
- Go to the Ping.fm Dashboard, click “Application Keys”, copy your API key, go to and paste it into Shorten2ping’s settings page and paste it into “Ping.fm API Key”.
WordPress now cross-posts to Facebook and Twitter, but you’re also free to do smaller status updates that bypass WordPress by initiating it on the Ping.fm site or directly on a particular service.
Automatic installations from WordPress hosted on Pair Networks
May 17th
If you run WordPress on Pair Networks, automatic installations probably prompt you for FTP connection info. The problem is that WP wants to modify files as the owner of the WP directory. Follow Pair’s instructions to set up php-cgiwrap, and WordPress automatic installations will work.
cp /usr/www/cgi-bin/php5.cgi ~/public_html/cgi-bin/
chmod 755 ~/public_html/cgi-bin/php5.cgi
Edit .htaccess in your WordPress directory:
Action application/x-pair-sphp5 /cgi-sys/php-cgiwrap/USERNAME/php5.cgi
AddType application/x-pair-sphp5 .php
