good better best website performance optimization

Good, Better, Best Website Performance Optimization

Brian McKeiver

#404conference

Why Optimization matters• Not about which developers can

write the best code

• Not about saving on your hosting costs

• It is about your customer impact

#404conference

“One of the most important factors that can affect customer experience is the overall speed of web page loading time.”

- Kissmetrics

Speed Chart

#404conference

Why So Hard?

#404conference

My Point

According to pingdom.com Top 5 slowest sites (by size):

http://www.tmz.com/

#404conference

Damn You Apple!RETINA requires you provide 1.5 times or 2 times larger images to get that crisp high definition on phones / tablets / surfaces

#404conference

Real World

#404conference

Content MattersOriginally outlined to have about 6 - 12 items of content per tab (3 or 4 tabs)

18 – 48 total images

With 48 being the “very edge case” in most products

#404conference

The Slow Down…After content was loaded:Tab Name Image

CountFeatures 56Materials 64Image Gallery 60Installation Shots

63243 images

#404conference

Initial Page Load Time

Over 30 seconds…

#404conference

We Asked Why?

#404conference

Optimization to the rescue• Caching of images or

better yet CDN

• If a user can’t see it, don’t show it until its needed

• If a user can’t see it, don’t even load the content it in the first place

#404conference

Caching• Enable IIS Dynamic / Static

Compression

• Utilize Web.config Client Caching

#404conference

Content Delivery Network (CDN)Reverse Proxy CDN is simple to implement, inexpensive, and fast

Popular CDN’s:• Akamai• AWS Cloudfront• Cloudflare• Incapsula• Rack Space CDN• HighWinds

#404conference

How We Really Fixed It When design and content can’t be changed! JavaScript libraries to the rescue!

• Unveil (http://luis-almeida.github.io/unveil/) • Boosts performance by delaying loading of images in long web pages.• Images outside of viewport (visible part of web page) won't be loaded until

the user scrolls to them.

• Waypoints (https://github.com/imakewebthings/waypoints).• Waypoints is a library that makes it easy to execute a function whenever

you scroll to an element. 

#404conference

Unveil Code Example<div> <img src="" data-src="img1.jpg" /> <img src="" data-src="img2.jpg" data-src-retina="img2-retina.jpg" /> </div><script src="jquery.min.js"></script><script src="jquery.unveil.js"></script><script>$(document).ready(function() {   $("img").unveil();});</script>

#404conference

WayPoint Code Example<div id=“tab1”> <img src="" data-src="img2.jpg" data-src-retina="img2-retina.jpg" /> </div><script src="jquery.min.js"></script><script src="jquery.waypoints.min.js"></script><script>$(document).ready(function() { $(“tab1”).waypoint(function (direction) { if (direction == 'down') { console.log("waypoint! for element: " + $(this.element).attr('id')); } });});</script>

#404conference

Putting it Together

Demo

#404conference

The ResultLess than 3 seconds…

#404conference

Questions

#404conference

Brian McKeiverCo-Owner & Kentico MVP, BizStream Phone: (616) 481-1631 Web: www.bizstream.com Email: bmckeiver@bizstream.com

@mcbeev

www.linkedin.com/in/brianmckeiver

www.mcbeev.com