SlideShare a Scribd company logo
Fast and Beautiful: Serving High Quality Photos at
Scale on Flickr
Presented by Hugo Haas, Distinguished Architect, Yahoo | Tech Planet 2015, Seoul, South Korea | October 7, 2015
Copyright © 2015 Yahoo. All rights reserved. No reproduction or distribution allowed
without express written permission.
One destination for photo and video
uploading, organizing, editing and
sharing for free
BUILDING DELIGHTFUL
USER EXPERIENCES
Building Flickr as a great product with great content
Content delivered with high fidelity
v15ben • Gongeuptap Rotary.
Fast
Pablo Fernández • Speed up
PUTTING MY
TECHNOLOGIST
HAT ON
What does beautiful mean?
What does fast mean?
 API responses
 Photo serving
 Screen loads
 Frame rate
 Lag between
tap/click and action
Server side
User interaction
Challenges: designs are more immersive
2009
2015
Challenges: higher resolutions
2560 x 1440 (Quad HD)
… and getting higher
Source: Wikipedia - display resolution
… but bandwidth is very disparate and not as high
Source: Akamai Q414 Asia mobile connectivity report
4-8 seconds to
transfer 4K
image
The equation
Lots of
pixels
Limited
bandwidth
As fast as
possible
High user
expectations
METHODICALLY
GETTING TO A
SOLUTION
First things first: instrumentation!
stratman² (2 many pix!) • Paradise by the dashboard lights
Instrument all the layers
Click
Tap /
swipe
Analyze, analyze, analyze
§ Worst case, average
case, best case
§ Good connection vs. bad
connection
§ Geographical:
●Country
●City
§ Download time, render
time
§ First byte, last byte
§ …
Server-side and latency
Slowness creeps in over time
160 ms
Client Server
SSL handshake
HTTP request
Server-side processing
Data transmission
500+ ms
User sees a fraction
of the server-side
improvements:
Example: Photo processing
tuning
- 15-40% improvements
on server
- 5-10% improvements
on image download in
Brazil
Where do we spend time when getting media?
connection & request response transfer
server
processing
large payload sent
Can we send less bytes?
x * y pixelsy
x
Encoding & compressing… with care
Quan H. KIM • Sunset Beach ujeon, sinan, Korea
600 kB
85 kB
S
M
L
Optimize compression without visual impact
Up 50% size
gain achievable
with additional
processing
but it’s
expensive
Pregenerated sizes:
The importance of latency
Source: Latency: The New Web Performance Bottleneck - Ilya Grigorik
Downloading an image stored in the US from Singapore:
360kB → 3.7s
120kB → 2.9s
Lowering the latency: bring content closer to the user
Geographical affinity is tough for an interest-based graph
It’s hard to replicate 15B images globally
Image store
Regional cache
Regional caches & CDNs to the rescue
Tallying the results
Starting point Total benefits Can we do
better?
Client is the best place to make things faster
Next resultPrevious result
Make the client smart
§ Use a local cache
§ Opportunistic prefetching
§ But not too aggressively:
●Beware of bandwidth consumption
●Prioritize requests
⇒ 50-70% gains in certain regions
TAKE AWAYS
flickr.com/jobs
followtheseinstructions • balancing
Exciting balancing act:
● Measure
● Experiment
● Look at all layers of the stack

More Related Content

Similar to Fast and Beautiful: Serving High Quality Photos at Scale on Flickr

Its timetostopstalling androidcork
Its timetostopstalling androidcorkIts timetostopstalling androidcork
Its timetostopstalling androidcork
Doug Sillars
 
Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]
Jakob
 
Going Cloud Native with IBM Cloud and NetflixOSS for Dev@Pulse
Going Cloud Native with IBM Cloud and NetflixOSS for Dev@PulseGoing Cloud Native with IBM Cloud and NetflixOSS for Dev@Pulse
Going Cloud Native with IBM Cloud and NetflixOSS for Dev@Pulse
aspyker
 
ShowNTell: An easy-to-use tool for answering students’ questions with voice-o...
ShowNTell: An easy-to-use tool for answering students’ questions with voice-o...ShowNTell: An easy-to-use tool for answering students’ questions with voice-o...
ShowNTell: An easy-to-use tool for answering students’ questions with voice-o...
Anand Bhojan
 
Cloudflare Speed Week Recap
Cloudflare Speed Week RecapCloudflare Speed Week Recap
Cloudflare Speed Week Recap
Cloudflare
 
Images blast off at the speed of Jamstack! - Alba Silvente Fuentes
Images blast off at the speed of Jamstack! - Alba Silvente FuentesImages blast off at the speed of Jamstack! - Alba Silvente Fuentes
Images blast off at the speed of Jamstack! - Alba Silvente Fuentes
Wey Wey Web
 
BassMaster Webinar hosted by Acquia
BassMaster Webinar hosted by AcquiaBassMaster Webinar hosted by Acquia
BassMaster Webinar hosted by Acquia
Phase2
 
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow
Doug Sillars
 
IBC Content Everywhere Hub Presentation: HTML5 And Fastest Encoding
IBC Content Everywhere Hub Presentation: HTML5 And Fastest EncodingIBC Content Everywhere Hub Presentation: HTML5 And Fastest Encoding
IBC Content Everywhere Hub Presentation: HTML5 And Fastest Encoding
Bitmovin Inc
 
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스
Amazon Web Services Korea
 
Praxistaugliche notes strategien 4 cloud
Praxistaugliche notes strategien 4 cloudPraxistaugliche notes strategien 4 cloud
Praxistaugliche notes strategien 4 cloud
Roman Weber
 
Delivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern WebDelivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern Web
Joshua Marantz
 
Its timetostopstalling cambridgemot
Its timetostopstalling cambridgemotIts timetostopstalling cambridgemot
Its timetostopstalling cambridgemot
Doug Sillars
 
When dispatcher caching is not enough... (extended version)
When dispatcher caching is not enough... (extended version)When dispatcher caching is not enough... (extended version)
When dispatcher caching is not enough... (extended version)
Jakub Wadolowski
 
When dispatcher caching is not enough by Jakub Wądołowski
When dispatcher caching is not enough by Jakub WądołowskiWhen dispatcher caching is not enough by Jakub Wądołowski
When dispatcher caching is not enough by Jakub Wądołowski
AEM HUB
 
Keynote: Faster, Better, Cheaper: Pick all Three! By Miles Ward of Google
Keynote: Faster, Better, Cheaper: Pick all Three! By Miles Ward of GoogleKeynote: Faster, Better, Cheaper: Pick all Three! By Miles Ward of Google
Keynote: Faster, Better, Cheaper: Pick all Three! By Miles Ward of Google
ETCenter
 
Supercharging Optimizely Performance by Moving Decisions to the Edge
Supercharging Optimizely Performance by Moving Decisions to the EdgeSupercharging Optimizely Performance by Moving Decisions to the Edge
Supercharging Optimizely Performance by Moving Decisions to the Edge
Optimizely
 
AWS Summit London 2014 | Dynamic Content Acceleration (300)
AWS Summit London 2014 | Dynamic Content Acceleration (300)AWS Summit London 2014 | Dynamic Content Acceleration (300)
AWS Summit London 2014 | Dynamic Content Acceleration (300)
Amazon Web Services
 
How and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfHow and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdf
Andrea Verlicchi
 
PAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark TomlinsonPAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark Tomlinson
Neotys
 

Similar to Fast and Beautiful: Serving High Quality Photos at Scale on Flickr (20)

Its timetostopstalling androidcork
Its timetostopstalling androidcorkIts timetostopstalling androidcork
Its timetostopstalling androidcork
 
Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]
 
Going Cloud Native with IBM Cloud and NetflixOSS for Dev@Pulse
Going Cloud Native with IBM Cloud and NetflixOSS for Dev@PulseGoing Cloud Native with IBM Cloud and NetflixOSS for Dev@Pulse
Going Cloud Native with IBM Cloud and NetflixOSS for Dev@Pulse
 
ShowNTell: An easy-to-use tool for answering students’ questions with voice-o...
ShowNTell: An easy-to-use tool for answering students’ questions with voice-o...ShowNTell: An easy-to-use tool for answering students’ questions with voice-o...
ShowNTell: An easy-to-use tool for answering students’ questions with voice-o...
 
Cloudflare Speed Week Recap
Cloudflare Speed Week RecapCloudflare Speed Week Recap
Cloudflare Speed Week Recap
 
Images blast off at the speed of Jamstack! - Alba Silvente Fuentes
Images blast off at the speed of Jamstack! - Alba Silvente FuentesImages blast off at the speed of Jamstack! - Alba Silvente Fuentes
Images blast off at the speed of Jamstack! - Alba Silvente Fuentes
 
BassMaster Webinar hosted by Acquia
BassMaster Webinar hosted by AcquiaBassMaster Webinar hosted by Acquia
BassMaster Webinar hosted by Acquia
 
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow
 
IBC Content Everywhere Hub Presentation: HTML5 And Fastest Encoding
IBC Content Everywhere Hub Presentation: HTML5 And Fastest EncodingIBC Content Everywhere Hub Presentation: HTML5 And Fastest Encoding
IBC Content Everywhere Hub Presentation: HTML5 And Fastest Encoding
 
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스
 
Praxistaugliche notes strategien 4 cloud
Praxistaugliche notes strategien 4 cloudPraxistaugliche notes strategien 4 cloud
Praxistaugliche notes strategien 4 cloud
 
Delivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern WebDelivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern Web
 
Its timetostopstalling cambridgemot
Its timetostopstalling cambridgemotIts timetostopstalling cambridgemot
Its timetostopstalling cambridgemot
 
When dispatcher caching is not enough... (extended version)
When dispatcher caching is not enough... (extended version)When dispatcher caching is not enough... (extended version)
When dispatcher caching is not enough... (extended version)
 
When dispatcher caching is not enough by Jakub Wądołowski
When dispatcher caching is not enough by Jakub WądołowskiWhen dispatcher caching is not enough by Jakub Wądołowski
When dispatcher caching is not enough by Jakub Wądołowski
 
Keynote: Faster, Better, Cheaper: Pick all Three! By Miles Ward of Google
Keynote: Faster, Better, Cheaper: Pick all Three! By Miles Ward of GoogleKeynote: Faster, Better, Cheaper: Pick all Three! By Miles Ward of Google
Keynote: Faster, Better, Cheaper: Pick all Three! By Miles Ward of Google
 
Supercharging Optimizely Performance by Moving Decisions to the Edge
Supercharging Optimizely Performance by Moving Decisions to the EdgeSupercharging Optimizely Performance by Moving Decisions to the Edge
Supercharging Optimizely Performance by Moving Decisions to the Edge
 
AWS Summit London 2014 | Dynamic Content Acceleration (300)
AWS Summit London 2014 | Dynamic Content Acceleration (300)AWS Summit London 2014 | Dynamic Content Acceleration (300)
AWS Summit London 2014 | Dynamic Content Acceleration (300)
 
How and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfHow and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdf
 
PAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark TomlinsonPAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark Tomlinson
 

Recently uploaded

Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 

Recently uploaded (20)

Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Artificial Intelligence and Electronic Warfare
Artificial Intelligence and Electronic WarfareArtificial Intelligence and Electronic Warfare
Artificial Intelligence and Electronic Warfare
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 

Fast and Beautiful: Serving High Quality Photos at Scale on Flickr