diy website performance - akamai toronto tech day 2015
TRANSCRIPT
©2015 AKAMAI | FASTER FORWARDTM
Technology DayToronto 2015
©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
©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 PerformanceDesmond Tam
Senior Enterprise Architect [email protected]
©2015 AKAMAI | FASTER FORWARDTM
Yes, Performance can be Hard Work
©2015 AKAMAI | FASTER FORWARDTM
What Contributes Most to Latencies?
Front-End
Back-End
Middle Mile
©2014 AKAMAI | FASTER FORWARDTM
How Do We Fix All Of This?
Let’s Get To Work!
Edge Caching: Still Best ROI
©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 IntelligentPlatform
©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
©2015 AKAMAI | FASTER FORWARDTM
Dynamic Page Caching
IncomingRequest
Network
HTTPHeaders
URL
EdgeScapeIPConn. TypeGeolocation
Path Query parameters
User Agent
CookiesOther
Device Character.
Device Size, ResolutionClient (Browser)Many other ...
HTTP Method /Protocol HTTP Method/Protocol
CookiesOther Headers
Cache Keys
*
*
* Ion Features
©2015 AKAMAI | FASTER FORWARDTM
See Blog
Edge Purge/Invalidation vs. Short TTL
©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
Truly Dynamic Content
©2015 AKAMAI | FASTER FORWARDTM
● Make them non-blocking (see SPOF)○ Enforce small time-outs
● Leverage prefetching
● Other Best Practices
API / AJAX Calls
©2015 AKAMAI | FASTER FORWARDTM
● They manifest in long TTFB (Time to First Byte)
Origin Content Generation Issues
Origin Infrastructure
Applicationcode
Feeds Database
CMS
Contentgeneration
©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-doOrigin Infrastructure
Applicationcode
Feeds Database
CMS
Contentgeneration
©2015 AKAMAI | FASTER FORWARDTM
● Use SureRoute most effective for far-away users
Dynamic Content: SureRoute
©2015 AKAMAI | FASTER FORWARDTM
Front-End (= Client browser)
©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
analyticsimages
fonts
socialframework
html
©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
©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
©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 ...
©2015 AKAMAI | FASTER FORWARDTM
● They make up the bulk of webpage sizes ○ Usually lots of room for improvement!
Front-end: Images
Source: httparchive.org
©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
©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
©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?
©2015 AKAMAI | FASTER FORWARDTM
If “not DIY” then “FEO (Ion)”
VS.
©2015 AKAMAI | FASTER FORWARDTM
Akamai Improves Performance By Optimizing The Front-End
©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?
©2015 AKAMAI | FASTER FORWARDTM
Thank You!
Let us know how we did
today!
©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.
©2015 AKAMAI | FASTER FORWARDTM
Be Social!
https://twitter.com/AkamaiPS
https://www.facebook.com/AkamaiTechnologies