Let me strongly recommend at least one additional next step you'll need to take before taking a project like this to production. It's imperative that you take time to optimize your images, CSS, and JavaScript. These steps are not difficult.
- Compressing images takes just a bit of time, and it addresses the single largest cause for large page footprints. I've already used the save to web process option of Photoshop, but chances are you can squeeze a few more bytes out.
- In addition, we badly need to remove unneeded Bootstrap LESS files from the import sequence in
__main.less, and then compress the resultingmain.cssfile. - Finally, we need to slim down our
plugins.jsfile by replacing Bootstrap's all-inclusivebootstrap.min.jsfile with compressed versions of only the three plugins that we're actually using:carousel.js,collapse.js, andtransitions.js. We then compress the finalplugins.jsfile.
Combined, these steps can cut the footprint of this website by roughly half. In an age where speed matters—both for user retention and for SEO ranking—that's a big deal. To help you in this task, I've included steps for optimizing this project in Appendix A, Optimizing Site Assets.
In addition, there are two other very sensible steps you may want to take.
First, we can implement a responsive images technique to further optimize our carousel images. Those images, as you'll recall, are too large (unnecessarily large) to send to small-screen devices. Conversely, if we want the images to look crisp on large retina screens, we might opt to provide higher-resolution versions for those displays. In Appendix B, Implementing Responsive Images, I'll walk you through the implementation of Scott Jehl's excellent Picturefill solution.
Second, we know that users of touch-enabled devices appreciate the ability to swipe their way forward and back through a carousel. In Appendix C, Adding Swipe to the Carousel, I'll show you how to use the excellent Hammer.js plugin to enable swipe interaction with our carousel in just a few steps.
But, for the present moment, let's stop and celebrate.