Ordering getters and setters so only one style recalculation and layout happens on init. Added $.throttle / $.debounce and more function comments.

_scss/shuffle-styles.scss

@@ -44,6 +44,15 @@ $itemHeight: 220px;
   }
 }
 
+/*
+  Shuffle needs either relative or absolute positioning on the container
+  It will set it for you, but it'll cause another style recalculation and layout.
+  AKA worse performance - so just set it here
+ */
+.shuffle--container {
+  position: relative;
+}
+
 .shuffle--fluid .shuffle__sizer {
   position: absolute;
   opacity: 0;

css/shuffle-styles.css

@@ -26,6 +26,14 @@
   .picture-item .picture-item__tags {
     margin: 0; }
 
+/*
+  Shuffle needs either relative or absolute positioning on the container
+  It will set it for you, but it'll cause another style recalculation and layout.
+  AKA worse performance - so just set it here
+ */
+.shuffle--container {
+  position: relative; }
+
 .shuffle--fluid .shuffle__sizer {
   position: absolute;
   opacity: 0;

index.html

@@ -54,7 +54,7 @@ extraJS: [ "homepage.js" ]
   </div>
 
   <div class="container-fluid">
-    <div id="grid" class="row-fluid shuffle--fluid">
+    <div id="grid" class="row-fluid shuffle--container shuffle--fluid">
       {% for item in site.items %}
           {% assign item = item %}
           {% include picture-item.html %}