good better best website performance optimization
TRANSCRIPT
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: [email protected]
@mcbeev
www.linkedin.com/in/brianmckeiver
www.mcbeev.com