O’Reilly Velocity Conference: Discount Code and 2 Free Passes!

Discussion

1. Robert Visser

   Not exactly client-side, but utilizing cache control via htaccess is far too often over looked.

   ExpiresActive on
   
   # Perhaps better to whitelist expires rules? Perhaps.
   ExpiresDefault "access plus 1 month"
   
   # cache.appcache needs re-requests 
   # in FF 3.6 (thx Remy ~Introducing HTML5)
   ExpiresByType text/cache-manifest "access plus 0 seconds"
   
   # Your document html
   ExpiresByType text/html "access plus 0 seconds"
   
   # Data
   ExpiresByType text/xml "access plus 0 seconds"
   ExpiresByType application/xml "access plus 0 seconds"
   ExpiresByType application/json "access plus 0 seconds"
   
   # RSS feed
   ExpiresByType application/rss+xml "access plus 1 hour"
   
   # Favicon (cannot be renamed)
   ExpiresByType image/x-icon "access plus 1 week"
   
   # Media: images, video, audio
   ExpiresByType image/gif "access plus 1 month"
   ExpiresByType image/png "access plus 1 month"
   ExpiresByType image/jpg "access plus 1 month"
   ExpiresByType image/jpeg "access plus 1 month"
   ExpiresByType video/ogg "access plus 1 month"
   ExpiresByType audio/ogg "access plus 1 month"
   ExpiresByType video/mp4 "access plus 1 month"
   ExpiresByType video/webm "access plus 1 month"
   
   # HTC files  (css3pie)
   ExpiresByType text/x-component "access plus 1 month"
   
   # Webfonts
   ExpiresByType font/truetype "access plus 1 month"
   ExpiresByType font/opentype "access plus 1 month"
   ExpiresByType application/x-font-woff   "access plus 1 month"
   ExpiresByType image/svg+xml "access plus 1 month"
   ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
   
   # CSS and JavaScript
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType application/javascript "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
      
   
   Header append Cache-Control "public"
   
2. Jake Smith

   My performance improvement is more theory, but I believe it’s sound.

   A lot of people are spending time trying to optimize the “critical path” with their CSS. My idea is to have a separate stylesheet dedicated to Box Model properties, any thing that would cause a reflow. Then on page load or deploy run the views/templates through “premailer” to inline the box model properties. This should improve mobile “perceived” load by a good amount.
3. Mike Vysocka

   When you have a group of images that aren’t initially shown on a page, maybe they are way below the fold (or they are part of some kind of image slideshow or rotating feature), I like to send those images to the client as and then on page load (or some other event) fire off the ajax calls to swap the actual src attribute with the data-fetch-src. You really don’t even need the class names here, you could select these images with an attribute selector like img[data-fetch-src], but a class name is faster. Chris Coyier has described a similar technique here: http://css-tricks.com/snippets/javascript/lazy-loading-images/ notice how he also adds the width/height attributes to prevent reflows when the real images return. This is only important if the images you’re replacing are already visible on the page.
4. Eric Higginson

   On one of my sites I needed the ability to quickly load and search through ~80,000 items on the client because the database was horrendously slow for more than 1000 items. A script would process the data on a set schedule and create files with chunks of JSON data. There are 12 files to download in this case, so I timestamped them to take advantage of caching from page to page. To get the quickest results without the browser blocking the requests, I took advantage of multiple domains and called them all at once. This allows the script to be called on any page, and have a cache available by the time the user reaches the search.

   # Live/Code Sample #

   I’d rather not post the code directly here, but you can see it in action @ ( http://www.coridian.com/Search-Results ).
5. Pawan Chopra

   We are working on JavaScript apps for Mobile environment. We kind of followed basic rules like embedded images, less number of network calls. But what really worked for us is stopping layout thrashing. Heard this idea many times but then I saw source code of React JS. They make all the changes in dom nodes in javascript and then push it once to browser. We used it all over the apps and it works perfectly to speed up the app.
6. Amanda Harlin

   “Lara Swanson – Etsy Developer Boss”

   so true. she’s awesome.

   her talk on designing for performance is great. #likeaboss :-)
7. Rasmus Fløe

   I built a PhantomJS script to inline critical path CSS: https://github.com/drdk/dr-css-inliner

   It let’s you inline the needed CSS for the entire page – or – just for a specific viewport size. It has lots of features :)

   Non-blocking critical path CSS FTW!