Today’s web pages contain a mountain of content: text, rich media, PDFs, forms—you name it. Considering responsive design and multiple image sizes, devices, and resolutions, a page that used to load in no time now takes five, 10, even 20 seconds. If you can’t use a different design or approach, you have to start optimizing your website performance. Join Brian as he shows you how to identify what to attack. He’ll tell you about some server-side caching and client-side optimization techniques to deliver what a browser needs when it needs it—and about the time he and his team took a 30-second load time down to two.

1. Good, Better, Best Website
Performance Optimization
Brian McKeiver

2. #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

3. #404conference
“One of the most important factors that can affect customer
experience is the overall speed of web page loading time.”
- Kissmetrics
Speed Chart

4. #404conference
Why So Hard?

5. #404conference
My Point
According to pingdom.com
Top 5 slowest sites (by size):
http://www.tmz.com/

6. #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

7. #404conference
Real World

8. #404conference
Content Matters
Originally 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

9. #404conference
The Slow Down…
After content was loaded:
Tab Name Image Count
Features 56
Materials 64
Image Gallery 60
Installation Shots 63
243 images

10. #404conference
Initial Page Load Time
Over 30 seconds…

11. #404conference
We Asked Why?

12. #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

13. #404conference
Caching
• Enable IIS Dynamic / Static
Compression
• Utilize Web.config Client Caching

14. #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

15. #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.

16. #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>

17. #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>

18. #404conference
Putting it Together
Demo

19. #404conference
The Result
Less than 3
seconds…

20. #404conference
Questions

21. #404conference
Brian McKeiver
Co-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