good better best website performance optimization
TRANSCRIPT
![Page 1: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/1.jpg)
Good, Better, Best Website Performance Optimization
Brian McKeiver
![Page 2: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/2.jpg)
#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
![Page 3: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/3.jpg)
#404conference
“One of the most important factors that can affect customer experience is the overall speed of web page loading time.”
- Kissmetrics
Speed Chart
![Page 4: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/4.jpg)
#404conference
Why So Hard?
![Page 5: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/5.jpg)
#404conference
My Point
According to pingdom.com Top 5 slowest sites (by size):
http://www.tmz.com/
![Page 6: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/6.jpg)
#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
![Page 7: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/7.jpg)
#404conference
Real World
![Page 8: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/8.jpg)
#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
![Page 9: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/9.jpg)
#404conference
The Slow Down…After content was loaded:Tab Name Image
CountFeatures 56Materials 64Image Gallery 60Installation Shots
63243 images
![Page 10: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/10.jpg)
#404conference
Initial Page Load Time
Over 30 seconds…
![Page 11: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/11.jpg)
#404conference
We Asked Why?
![Page 12: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/12.jpg)
#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
![Page 13: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/13.jpg)
#404conference
Caching• Enable IIS Dynamic / Static
Compression
• Utilize Web.config Client Caching
![Page 14: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/14.jpg)
#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
![Page 15: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/15.jpg)
#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.
![Page 16: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/16.jpg)
#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>
![Page 17: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/17.jpg)
#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>
![Page 18: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/18.jpg)
#404conference
Putting it Together
Demo
![Page 19: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/19.jpg)
#404conference
The ResultLess than 3 seconds…
![Page 20: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/20.jpg)
#404conference
Questions
![Page 21: Good Better Best Website Performance Optimization](https://reader034.vdocuments.net/reader034/viewer/2022051404/587698991a28abab2f8b752b/html5/thumbnails/21.jpg)
#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