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

By  on  

Velocity Conference

Alright conference-lovers:  I've got something awesome for you.  O'Reilly's Velocity Conference 2014 is coming up on June 24th-26th in Santa Clara, CA, USA and if you can go, you probably should.  Check out the list of speakers you'll see over those few days:

  • Lara Swanson - Etsy Developer Boss
  • Pamela Fox - Kahn Academy
  • Stoyan Stefanov - Facebook
  • Jeff Dean - Google
  • Ilya Grigorik - Google
  • Tammy Everts - Radware
  • ...and many more!

You can even build your own agenda or check out a list of featured tutorials!

Conference Passes Giveaway!

I have two glorious, shiny, and rare golden tickets to Velocity Conference 2014 that I'm dying to give away.  Want to win one?  I could just say that you need to leave your name and email in a comment but that's far too easy -- I want something out of this too.  In addition to leaving your real name and real email address, I want you to share one client side speed tip you've used to speed up your sites.  Bonus points for including a code sample, and massive bonus points for a link to a bonus test!

Hint hint:  the more you provide, the better chance you have to go!

20% Conference Discount Code:  WALSH20

If you don't end up winning or want to get your registration in early, you can use the WALSH20discount code to get 20% off of your registration fee.  That's a good amount to put toward travel, food, drinks, or bribing one of the speakers to get you a job!

Good luck everyone!  I can't wait to be the Willy Wonka to these golden tickets!  Show me the perf!

Recent Features

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

Discussion

  1. 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. 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. 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. 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. 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!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!