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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

  • By
    MooTools Font-Size Scroller with Cookie Save

    Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why...

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!