DIY Website Performance Authored by Pierre Lermant with contributions and delivered at Akamai Toronto Tech Day on May 6, 2015 by Desmond Tam.

1. ©2015 AKAMAI | FASTER FORWARDTM
Technology Day
Toronto 2015

2. ©2015 AKAMAI | FASTER FORWARDTM
Agenda 09:00 AM Welcome and Executive Greeting / Breakfast Steve Stierer
09:15 AM RWD & Measured vs Perceived Performance Steve Scian
10:00 AM How to scale a business from zero to Petabytes Augusto Rosa from Shomi_
10:45 AM Break
11:00 AM Best ways to analyze the performance of your
website
James Lunan and Boris
Livshutz
11:45 AM Attack War stories Dennis Birchard
12:30 PM Lunch
01:30 PM {OPEN} APIs Workshop Kirsten Hunter
02:15 PM DIY Website performance assessment Desmond Tam
03:00 PM Break
03:15 PM Akamai Cloudlets Anthony Larkin
04:00 PM Interconnecting security and performance Eugene Zhang
04:45 PM Raffle!
05:00 PM Happy Hour Bar @ The Delta Hotel

3. ©2015 AKAMAI | FASTER FORWARDTM
Grow revenue opportunities with fast, personalized
web experiences and manage complexity from peak
demand, mobile devices and data collection.
DIY: Web Performance
Desmond Tam
Senior Enterprise Architect
dtam@teraweb.ca

4. ©2015 AKAMAI | FASTER FORWARDTM
Yes, Performance can be Hard Work

5. ©2015 AKAMAI | FASTER FORWARDTM
What Contributes Most to Latencies?
Front-End
Back-End
Middle Mile

6. ©2014 AKAMAI | FASTER FORWARDTM
How Do We Fix All Of
This?
Let’s Get To Work!

7. Edge Caching: Still Best ROI

8. ©2015 AKAMAI | FASTER FORWARDTM
● Use Akamai Pragma Request Headers
○ akamai-x-get-true-cache-key,akamai-x-
check-cacheable, akamai-x-get-cache-
key.
● Look at Response Headers:
How to Determine Edge Caching TTL
Edge
Server+Cache
Configuration file
from Luna Control
Center
Akamai
Intelligent
Platform

9. ©2015 AKAMAI | FASTER FORWARDTM
Maximize caching and offload at the Edge
○ Challenge “We can’t cache our home page”
○ Understand the power of DPC (Next Slide)
○ Cache redirects (301, 302?)
○ Cache font files (.eot, .woff, .svg, …)
○ Use Best Practices
Edge Caching To Do List

10. ©2015 AKAMAI | FASTER FORWARDTM
Dynamic Page Caching
Incoming
Request
Network
HTTP
Headers
URL
EdgeScape
IP
Conn. Type
Geolocation
Path
Query parameters
User
Agent
Cookies
Other
Device
Character.
Device Size, Resolution
Client (Browser)
Many other ...
HTTP Method /Protocol HTTP Method/Protocol
Cookies
Other Headers
Cache Keys
*
*
* Ion Features

11. ©2015 AKAMAI | FASTER FORWARDTM
See Blog
Edge Purge/Invalidation vs. Short TTL

12. ©2015 AKAMAI | FASTER FORWARDTM
Most efficient, but cannot be undone!
○ Be conservative
○ Set it thru Akamai configuration file
○ Use Best Practices
Don’t forget Client Caching

13. Truly Dynamic Content

14. ©2015 AKAMAI | FASTER FORWARDTM
● Make them non-blocking (see SPOF)
○ Enforce small time-outs
● Leverage prefetching
● Other Best Practices
API / AJAX Calls

15. ©2015 AKAMAI | FASTER FORWARDTM
● They manifest in long TTFB
(Time to First Byte)
Origin Content Generation Issues
Origin Infrastructure
Application
code
Feeds Database
CMS
Content
generation

16. ©2015 AKAMAI | FASTER FORWARDTM
● Verify that Pcon set > 5 min
● Set SLA for external content (e.g. feeds)
○ Use placeholders when SLA not met
● Tune your DB (e.g. Index)
● Try FEO EdgeStart for long origin latencies
Origin Content Generation: To-do
Origin Infrastructure
Application
code
Feeds Database
CMS
Content
generation

17. ©2015 AKAMAI | FASTER FORWARDTM
● Use SureRoute most effective for far-away users
Dynamic Content: SureRoute

18. ©2015 AKAMAI | FASTER FORWARDTM
Front-End (= Client browser)

19. ©2015 AKAMAI | FASTER FORWARDTM
● Accounts for up to 80% of total time!
○ Critical for Mobile experiences: Higher
latencies, smaller CPU/Memory
Front-End Optimization
Browser Rendering Engine
analytics
images
fonts
socialframework
html

20. ©2015 AKAMAI | FASTER FORWARDTM
● Put them in your document head
● Maximum 5 CSS files
○ They can be downloaded in parallel
with html base page
○ Consider merging them and/or in-
lining them if small
Front-end: CSS Files

21. ©2015 AKAMAI | FASTER FORWARDTM
● Ensure they are not SPOF
○ If they are, take action
● Prioritize their execution
○ Must-have, like privacy notice or ads. Make “async”
○ Not required for proper navigation however should not block the
onload event, e.g. Analytics beacons: Use “async” with js to
prevent onload blocking
○ Non essential for proper function e.g. social widgets, below the
fold: Defer after onload
● Do you really need all of them anyway?
Front-end: Third Party Content

22. ©2015 AKAMAI | FASTER FORWARDTM
● Cache them at the Edge and Client (3 months)
● Compress them (except for .woff v2)
● Are they needed for small devices?
● If you think Fonts are a no-brainer, read this
Front-end Web Fonts: .woff, .eot, .svg, .ttf, .otf ...

23. ©2015 AKAMAI | FASTER FORWARDTM
● They make up the bulk of webpage sizes
○ Usually lots of room for improvement!
Front-end: Images
Source: httparchive.org

24. ©2015 AKAMAI | FASTER FORWARDTM
● Remove unneeded metadata
○ Shrink size without any quality loss
○ Many free UI and command line tools
● Consider lowering resolution without
impacting perceived quality (.jpg)
● Look at this great graphic on image
types
Images: Compress

25. ©2015 AKAMAI | FASTER FORWARDTM
● Resize according to actual display viewport
○ Resizing on device wastes bandwidth and
can cripple a Mobile CPU.
○ If RWD is used: Implement Responsive
Images, per the performance bible and
associated presentation
● Leverage Akamai offering:
○ Image Converter
○ Adaptive Image Compression
○ Edge Device Detection
Images: Scale to Display Size

26. ©2015 AKAMAI | FASTER FORWARDTM
● Avoid downloading images not shown!
○ Use lazy-loading for below the fold items
○ Leverage ajax for carousel-type of display
● If RWD is used:
○ Avoid css:hidden/none downloads, per the RWD
performance bible and associated presentation
○ Leverage Akamai FEO
Images: Not Shown = or != Not Downloaded?

27. ©2015 AKAMAI | FASTER FORWARDTM
If “not DIY” then “FEO (Ion)”
VS.

28. ©2015 AKAMAI | FASTER FORWARDTM
Akamai Improves Performance By Optimizing The Front-End

29. ©2015 AKAMAI | FASTER FORWARDTM
● Additional gains with more advanced
techniques:
○ Content assembly at the Edge (ESI)
○ NetStorage for static content serving
○ GTM for performance load-balancing
○ JS conditional loading (RWD)
○ … list is almost endless, consult with us
What Else Can We Do?

30. ©2015 AKAMAI | FASTER FORWARDTM
Thank You!
Let us know
how we did
today!

31. ©2015 AKAMAI | FASTER FORWARDTM
Continue the Conversation
at the Akamai Community!
http://akamai.me/1FadnS5
The Akamai Community is
Available to all Akamai Customers!
You can access the community:
Luna
NAP Portal
https://community.akamai.com
Search for
Customer Technology Day
New York Spring 2015
The Akamai Community will enable Akamai customers, partners
and employees to collaborate online, share ideas and best
practices, and facilitate self-service through knowledge sharing.

32. ©2015 AKAMAI | FASTER FORWARDTM
Be Social!
https://twitter.com/AkamaiPS
https://www.facebook.com/AkamaiTechnologies