SlideShare a Scribd company logo
Frontend Caching


                              Helgi Þormar Þorbjörnsson
                            PHP Tek, Chicago, 26th May 2011

Thursday, 26 May 2011
Who am I?




Thursday, 26 May 2011
Who am I?

                        VP of Engineering at Orchestra.io




Thursday, 26 May 2011
Who am I?

                        VP of Engineering at Orchestra.io
                        Developer at PEAR




Thursday, 26 May 2011
Who am I?

                        VP of Engineering at Orchestra.io
                        Developer at PEAR
                        From Iceland




Thursday, 26 May 2011
Who am I?

                        VP of Engineering at Orchestra.io
                        Developer at PEAR
                        From Iceland
                        @h on Twitter



Thursday, 26 May 2011
Pareto Principle


                            20%   80%




Thursday, 26 May 2011
80 / 20 Rule


                  20%         80%
  20% of the population receives 80% of the income




Thursday, 26 May 2011
80 / 20 Rule


                            20%       80%
                20% of causes produce 80% of the effects




Thursday, 26 May 2011
80% of response time is
                        spent downloading resources




Thursday, 26 May 2011
4 Rules of Web
                         Performance


Thursday, 26 May 2011
Weight
                          Time
                        Processing
                        Perception

Thursday, 26 May 2011
Perception



Thursday, 26 May 2011
Make people think your site is fast




Thursday, 26 May 2011
When people can interact with the site




Thursday, 26 May 2011
Thursday, 26 May 2011
“It all depends on how we
                        look at things, and not how
                          they are in themselves.”
                                      - Carl G. Jung




Thursday, 26 May 2011
Perception


                        50% of users arrive
                             on an empty cache




Thursday, 26 May 2011
Perception

                         Empty Cache                    Full Cache
                        28.0K    1 HTML Document

                         1.9K    1 Style Sheet File

                        59.5K    4 Javascript Files   28.0K   1 HTML Document
                        78.7K    24 Images            0.1K    2 Images
                        168.1K   Total Size           28.1K   Total Size
                         30      HTTP Requests         3      HTTP Requests
                         2.4s    Response Time        0.9s    Response Time




Thursday, 26 May 2011
Weight



Thursday, 26 May 2011
HTTP Requests




Thursday, 26 May 2011
HTTP Requests

                         Less is more




Thursday, 26 May 2011
HTTP Requests

                         Less is more
                         Fewer HTTP Requests




Thursday, 26 May 2011
HTTP Requests

                         Less is more
                         Fewer HTTP Requests
                         Easy to improve on




Thursday, 26 May 2011
Cookies




Thursday, 26 May 2011
Cookies

                        Sent with static content




Thursday, 26 May 2011
Cookies

                        Sent with static content
                          Slow upstream speed




Thursday, 26 May 2011
Cookies

                        Sent with static content
                          Slow upstream speed
                                    Big cookies




Thursday, 26 May 2011
Experiment Time!
                                    Cookie Size     Response Time (Delta)
                          0 bytes                 78 ms ( 0 ms)
                          500 bytes               79 ms ( +1 ms)
                          1000 bytes              94 ms (+16 ms)
                          1500 bytes              109 ms (+31 ms)
                          2000 bytes              125 ms (+47 ms)
                          2500 bytes              141 ms (+63 ms)
                          3000 bytes              156 ms (+78 ms)




Thursday, 26 May 2011
Experiment Time!
                                    Cookie Size     Response Time (Delta)
                          0 bytes                 78 ms ( 0 ms)
                          500 bytes               79 ms ( +1 ms)
                          1000 bytes              94 ms (+16 ms)
                          1500 bytes              109 ms (+31 ms)
                          2000 bytes              125 ms (+47 ms)
                          2500 bytes              141 ms (+63 ms)
                          3000 bytes              156 ms (+78 ms)




Thursday, 26 May 2011
Experiment Time!
                                    Cookie Size     Response Time (Delta)
                          0 bytes                 78 ms ( 0 ms)
                          500 bytes               79 ms ( +1 ms)
                          1000 bytes              94 ms (+16 ms)
                          1500 bytes              109 ms (+31 ms)
                          2000 bytes              125 ms (+47 ms)
                          2500 bytes              141 ms (+63 ms)
                          3000 bytes              156 ms (+78 ms)




Thursday, 26 May 2011
Cookies




Thursday, 26 May 2011
Cookies




Thursday, 26 May 2011
Cookies
                        Remove unnecessary cookies




Thursday, 26 May 2011
Cookies
                        Remove unnecessary cookies
                        Appropriate domain level




Thursday, 26 May 2011
Cookies
                        Remove unnecessary cookies
                        Appropriate domain level
                        Keep size low




Thursday, 26 May 2011
Cookies
                        Remove unnecessary cookies
                        Appropriate domain level
                        Keep size low
                        Set Expires




Thursday, 26 May 2011
Parallel Downloads




Thursday, 26 May 2011
Parallel Downloads


                        Be aware of max connection limits




Thursday, 26 May 2011
Parallel Downloads




                        Borrowed from BrowserScope.org

Thursday, 26 May 2011
Parallel Downloads




                        Borrowed from BrowserScope.org

Thursday, 26 May 2011
Parallel Downloads


                        One domain = 2 Parallel connections




Thursday, 26 May 2011
Parallel Downloads
                        One domain = 2 Parallel connections

                         HTML
                         Image
                         Image
                         Image
                         Image
                         Image
                         Image
                         Image
                         Image

                                 0.4   0.8   1.2   1.6   2   2.4   Secs



Thursday, 26 May 2011
Parallel Downloads
                        Two domains = 4 Parallel connections

                          HTML
                         Image
                         Image
                         Image
                         Image
                         Image
                         Image
                         Image
                         Image

                                 0.4   0.8   1.2   1.6   2   2.4   Secs



Thursday, 26 May 2011
Parallel Downloads

                        Too many hostnames can cause complications




Thursday, 26 May 2011
Parallel Downloads

                        Too many hostnames can cause complications



                          2 – 4 sub domains is a good average




Thursday, 26 May 2011
Combine Files

                  Combining 6 scripts into 1 eliminates 5 requests




Thursday, 26 May 2011
Combine Files

                  Combining 6 scripts into 1 eliminates 5 requests

                        Challenges:
                          develop as separate modules
                          combinations vs. loading more than needed




Thursday, 26 May 2011
Javascript


                         Doesn’t comply with
                        parallel download rules




Thursday, 26 May 2011
Javascript
                               Doesn’t comply with
                              parallel download rules
                        HTML
                         JS
                        Image
                        Image
                        Image
                        Image
                        Image
                        Image
                        Image

                                0.4   0.8   1.2   1.6   2   2.4   Secs


Thursday, 26 May 2011
Javascript
                        script defer attribute is not a solution




Thursday, 26 May 2011
Javascript
                        script defer attribute is not a solution

                        Solution - move them as low in the
                                          page as possible




Thursday, 26 May 2011
Processing



Thursday, 26 May 2011
Processing




Thursday, 26 May 2011
Processing

                        Fake the delivery




Thursday, 26 May 2011
Processing

                        Fake the delivery
                        Lazy Loading




Thursday, 26 May 2011
Processing

                        Fake the delivery
                        Lazy Loading
                        Above the fold Loading




Thursday, 26 May 2011
Processing

                        Fake the delivery
                        Lazy Loading
                        Above the fold Loading
                        Delay Javascript Loading



Thursday, 26 May 2011
Processing




Thursday, 26 May 2011
Processing
                        Bonus - async attribute




Thursday, 26 May 2011
Processing
                        Bonus - async attribute


              http://www.appelsiini.net/projects/lazyload




Thursday, 26 May 2011
JS Minification




Thursday, 26 May 2011
JS Minification

                            Crushes the file
                           Strips out all cruft
                            Voodoo Magic!




Thursday, 26 May 2011
JS Minfication

                         UglifyJS
                         Google Closure
                         YUI Compressor




Thursday, 26 May 2011
JS Minfication

                           UglifyJS
                           Google Closure
                           YUI Compressor



                        http://bit.ly/compression-rates
Thursday, 26 May 2011
CSS Minification

                           YUI Compressor
                           minifycss.com
                           OOCSS




Thursday, 26 May 2011
GZip
                        GZip can be used on




Thursday, 26 May 2011
GZip
                        GZip can be used on
                            JS




Thursday, 26 May 2011
GZip
                        GZip can be used on
                            JS
                            CSS




Thursday, 26 May 2011
GZip
                        GZip can be used on
                            JS
                            CSS
                            XML




Thursday, 26 May 2011
GZip
                        GZip can be used on
                            JS
                            CSS
                            XML
                            JSON




Thursday, 26 May 2011
GZip
                        GZip should not be used on




Thursday, 26 May 2011
GZip
                        GZip should not be used on

                            Images




Thursday, 26 May 2011
GZip
                        GZip should not be used on

                            Images
                            Document formats




Thursday, 26 May 2011
GZip
                        GZip should not be used on

                            Images
                            Document formats
                            Already compressed




Thursday, 26 May 2011
404


                        robots.txt
                         favicon




Thursday, 26 May 2011
Images




Thursday, 26 May 2011
Images

                         favicon




Thursday, 26 May 2011
Images

                         favicon
                        CSS Sprites




Thursday, 26 May 2011
Images

                           favicon
                         CSS Sprites
                        inline base64




Thursday, 26 May 2011
Images

                           favicon
                         CSS Sprites
                        inline base64




Thursday, 26 May 2011
Images




Thursday, 26 May 2011
Images

                        Badly optimised




Thursday, 26 May 2011
Images

                        Badly optimised
                        Thumbnails




Thursday, 26 May 2011
Images

                        Badly optimised
                        Thumbnails
                        PNGs compressed up to 50%




Thursday, 26 May 2011
PNG Optimise

                            OptiPNG
                            pngwolf
                            pngcrush
                            jpegtran



Thursday, 26 May 2011
Time



Thursday, 26 May 2011
SSL




Thursday, 26 May 2011
SSL

                        Extra roundtrips




Thursday, 26 May 2011
SSL

                        Extra roundtrips
                        More resources for servers




Thursday, 26 May 2011
SSL

                        Extra roundtrips
                        More resources for servers
                        Worth it, tho!




Thursday, 26 May 2011
Tread the users’ path




Thursday, 26 May 2011
Tread the users’ path


                        Test on slower connections




Thursday, 26 May 2011
Tread the users’ path


                        Test on slower connections
                        Slow proxies




Thursday, 26 May 2011
Tread the users’ path




Thursday, 26 May 2011
Tread the users’ path

                        Tables / Phones




Thursday, 26 May 2011
Tread the users’ path

                        Tables / Phones
                        Airline connections




Thursday, 26 May 2011
Tread the users’ path

                        Tables / Phones
                        Airline connections
                        Public places




Thursday, 26 May 2011
CDN




Thursday, 26 May 2011
CDN

                        Single domain




Thursday, 26 May 2011
CDN

                        Single domain
                        Smart routing




Thursday, 26 May 2011
CDN

                        Single domain
                        Smart routing
                        Data is closer to end user




Thursday, 26 May 2011
CDN




Thursday, 26 May 2011
CDN




Thursday, 26 May 2011
CDN on a Budget




Thursday, 26 May 2011
CDN on a Budget


                             S3

Thursday, 26 May 2011
Query vs. Filename
                      revisions




Thursday, 26 May 2011
Query vs. Filename
                      revisions

                        Cache far in future




Thursday, 26 May 2011
Query vs. Filename
                      revisions

                        Cache far in future
                        Revisioning forces downloads




Thursday, 26 May 2011
Query vs. Filename
                      revisions

                        Cache far in future
                        Revisioning forces downloads




Thursday, 26 May 2011
Query revisions




Thursday, 26 May 2011
Query revisions

                        Easy and convenient




Thursday, 26 May 2011
Query revisions

                        Easy and convenient
                        Usually not recommended




Thursday, 26 May 2011
Query revisions

                        Easy and convenient
                        Usually not recommended
                        Bad proxies are a problem




Thursday, 26 May 2011
Filename revisions




Thursday, 26 May 2011
Filename revisions

                        Requires more work




Thursday, 26 May 2011
Filename revisions

                        Requires more work
                        Recommended




Thursday, 26 May 2011
Filename revisions

                        Requires more work
                        Recommended
                        During build, using md5 hash




Thursday, 26 May 2011
Compromise




Thursday, 26 May 2011
Compromise
                        Create a version function




Thursday, 26 May 2011
Compromise
                        Create a version function
                        Put on all resources




Thursday, 26 May 2011
Compromise
                        Create a version function
                        Put on all resources
                        mod_rewrite magic




Thursday, 26 May 2011
Compromise
                        Create a version function
                        Put on all resources
                        mod_rewrite magic



                        http://bit.ly/query_rev_comp
Thursday, 26 May 2011
Browser Tools




Thursday, 26 May 2011
Browser Tools

                         Firebug




Thursday, 26 May 2011
Browser Tools

                         Firebug
                         YSlow




Thursday, 26 May 2011
Browser Tools

                         Firebug
                         YSlow
                         PageSpeed




Thursday, 26 May 2011
Browser Tools

                         Firebug
                         YSlow
                         PageSpeed
                         Chrome Inspector



Thursday, 26 May 2011
Other Tools




Thursday, 26 May 2011
Other Tools

                        HTTPWatch.com




Thursday, 26 May 2011
Other Tools

                        HTTPWatch.com
                        WebPageTest.org




Thursday, 26 May 2011
Other Tools

                        HTTPWatch.com
                        WebPageTest.org
                        HTTPArchive.org




Thursday, 26 May 2011
Other Tools

                        HTTPWatch.com
                        WebPageTest.org
                        HTTPArchive.org
                        chartbeat.com


Thursday, 26 May 2011
Other Tools




Thursday, 26 May 2011
Other Tools

                        WonderProxy.com




Thursday, 26 May 2011
Other Tools

                        WonderProxy.com
                        BrowserScope.com




Thursday, 26 May 2011
Other Tools

                        WonderProxy.com
                        BrowserScope.com
                        html5boilerplate.com



Thursday, 26 May 2011
“Knowledge rests not upon truth
                          alone, but upon error also”
                                          - Carl G. Jung




Thursday, 26 May 2011
Questions?

                                   @h
                            helgi@orchestra.io




                        Joind.in: http://joind.in/3401
Thursday, 26 May 2011

More Related Content

More from Helgi Þormar Þorbjörnsson

Phar, The PHP .exe Format
Phar, The PHP .exe FormatPhar, The PHP .exe Format
Phar, The PHP .exe Format
Helgi Þormar Þorbjörnsson
 
Distribute the workload, PHPTek, Amsterdam, 2011
Distribute the workload, PHPTek, Amsterdam, 2011Distribute the workload, PHPTek, Amsterdam, 2011
Distribute the workload, PHPTek, Amsterdam, 2011
Helgi Þormar Þorbjörnsson
 
PEAR2 & Pyrus - The look ahead
PEAR2 & Pyrus - The look aheadPEAR2 & Pyrus - The look ahead
PEAR2 & Pyrus - The look ahead
Helgi Þormar Þorbjörnsson
 
Frontend Caching - The "new" frontier
Frontend Caching - The "new" frontierFrontend Caching - The "new" frontier
Frontend Caching - The "new" frontier
Helgi Þormar Þorbjörnsson
 
Caching for Cash, part 4 DPC 2009
Caching for Cash, part 4 DPC 2009Caching for Cash, part 4 DPC 2009
Caching for Cash, part 4 DPC 2009
Helgi Þormar Þorbjörnsson
 
Cashing For Cash, part 1 DPC 2009
Cashing For Cash, part 1 DPC 2009Cashing For Cash, part 1 DPC 2009
Cashing For Cash, part 1 DPC 2009
Helgi Þormar Þorbjörnsson
 
Website releases made easy with the PEAR installer, OSCON 2009
Website releases made easy with the PEAR installer, OSCON 2009Website releases made easy with the PEAR installer, OSCON 2009
Website releases made easy with the PEAR installer, OSCON 2009
Helgi Þormar Þorbjörnsson
 
Caching for Cash - Part 4
Caching for Cash - Part 4Caching for Cash - Part 4
Caching for Cash - Part 4
Helgi Þormar Þorbjörnsson
 
Caching for Cash - Part 1
Caching for Cash - Part 1Caching for Cash - Part 1
Caching for Cash - Part 1
Helgi Þormar Þorbjörnsson
 
Coping with Cyber Monday
Coping with Cyber MondayCoping with Cyber Monday
Coping with Cyber Monday
Helgi Þormar Þorbjörnsson
 
Website releases made easy with the PEAR installer - Barcelona 2008
Website releases made easy with the PEAR installer - Barcelona 2008Website releases made easy with the PEAR installer - Barcelona 2008
Website releases made easy with the PEAR installer - Barcelona 2008
Helgi Þormar Þorbjörnsson
 

More from Helgi Þormar Þorbjörnsson (11)

Phar, The PHP .exe Format
Phar, The PHP .exe FormatPhar, The PHP .exe Format
Phar, The PHP .exe Format
 
Distribute the workload, PHPTek, Amsterdam, 2011
Distribute the workload, PHPTek, Amsterdam, 2011Distribute the workload, PHPTek, Amsterdam, 2011
Distribute the workload, PHPTek, Amsterdam, 2011
 
PEAR2 & Pyrus - The look ahead
PEAR2 & Pyrus - The look aheadPEAR2 & Pyrus - The look ahead
PEAR2 & Pyrus - The look ahead
 
Frontend Caching - The "new" frontier
Frontend Caching - The "new" frontierFrontend Caching - The "new" frontier
Frontend Caching - The "new" frontier
 
Caching for Cash, part 4 DPC 2009
Caching for Cash, part 4 DPC 2009Caching for Cash, part 4 DPC 2009
Caching for Cash, part 4 DPC 2009
 
Cashing For Cash, part 1 DPC 2009
Cashing For Cash, part 1 DPC 2009Cashing For Cash, part 1 DPC 2009
Cashing For Cash, part 1 DPC 2009
 
Website releases made easy with the PEAR installer, OSCON 2009
Website releases made easy with the PEAR installer, OSCON 2009Website releases made easy with the PEAR installer, OSCON 2009
Website releases made easy with the PEAR installer, OSCON 2009
 
Caching for Cash - Part 4
Caching for Cash - Part 4Caching for Cash - Part 4
Caching for Cash - Part 4
 
Caching for Cash - Part 1
Caching for Cash - Part 1Caching for Cash - Part 1
Caching for Cash - Part 1
 
Coping with Cyber Monday
Coping with Cyber MondayCoping with Cyber Monday
Coping with Cyber Monday
 
Website releases made easy with the PEAR installer - Barcelona 2008
Website releases made easy with the PEAR installer - Barcelona 2008Website releases made easy with the PEAR installer - Barcelona 2008
Website releases made easy with the PEAR installer - Barcelona 2008
 

Recently uploaded

Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!
Ortus Solutions, Corp
 
[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
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptxAI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
Sunil Jagani
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Ukraine
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
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
 
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
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
AlexanderRichford
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
ScyllaDB
 
AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)
HarpalGohil4
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
"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
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's TipsGetting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
ScyllaDB
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
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
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 

Recently uploaded (20)

Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!
 
[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...
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptxAI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
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
 
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
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
 
AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
"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
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's TipsGetting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
Getting the Most Out of ScyllaDB Monitoring: ShareChat's Tips
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
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)
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 

Frontend Caching, PHPTek 2011, Chicago

  • 1. Frontend Caching Helgi Þormar Þorbjörnsson PHP Tek, Chicago, 26th May 2011 Thursday, 26 May 2011
  • 2. Who am I? Thursday, 26 May 2011
  • 3. Who am I? VP of Engineering at Orchestra.io Thursday, 26 May 2011
  • 4. Who am I? VP of Engineering at Orchestra.io Developer at PEAR Thursday, 26 May 2011
  • 5. Who am I? VP of Engineering at Orchestra.io Developer at PEAR From Iceland Thursday, 26 May 2011
  • 6. Who am I? VP of Engineering at Orchestra.io Developer at PEAR From Iceland @h on Twitter Thursday, 26 May 2011
  • 7. Pareto Principle 20% 80% Thursday, 26 May 2011
  • 8. 80 / 20 Rule 20% 80% 20% of the population receives 80% of the income Thursday, 26 May 2011
  • 9. 80 / 20 Rule 20% 80% 20% of causes produce 80% of the effects Thursday, 26 May 2011
  • 10. 80% of response time is spent downloading resources Thursday, 26 May 2011
  • 11. 4 Rules of Web Performance Thursday, 26 May 2011
  • 12. Weight Time Processing Perception Thursday, 26 May 2011
  • 14. Make people think your site is fast Thursday, 26 May 2011
  • 15. When people can interact with the site Thursday, 26 May 2011
  • 17. “It all depends on how we look at things, and not how they are in themselves.” - Carl G. Jung Thursday, 26 May 2011
  • 18. Perception 50% of users arrive on an empty cache Thursday, 26 May 2011
  • 19. Perception Empty Cache Full Cache 28.0K 1 HTML Document 1.9K 1 Style Sheet File 59.5K 4 Javascript Files 28.0K 1 HTML Document 78.7K 24 Images 0.1K 2 Images 168.1K Total Size 28.1K Total Size 30 HTTP Requests 3 HTTP Requests 2.4s Response Time 0.9s Response Time Thursday, 26 May 2011
  • 22. HTTP Requests Less is more Thursday, 26 May 2011
  • 23. HTTP Requests Less is more Fewer HTTP Requests Thursday, 26 May 2011
  • 24. HTTP Requests Less is more Fewer HTTP Requests Easy to improve on Thursday, 26 May 2011
  • 26. Cookies Sent with static content Thursday, 26 May 2011
  • 27. Cookies Sent with static content Slow upstream speed Thursday, 26 May 2011
  • 28. Cookies Sent with static content Slow upstream speed Big cookies Thursday, 26 May 2011
  • 29. Experiment Time! Cookie Size Response Time (Delta) 0 bytes 78 ms ( 0 ms) 500 bytes 79 ms ( +1 ms) 1000 bytes 94 ms (+16 ms) 1500 bytes 109 ms (+31 ms) 2000 bytes 125 ms (+47 ms) 2500 bytes 141 ms (+63 ms) 3000 bytes 156 ms (+78 ms) Thursday, 26 May 2011
  • 30. Experiment Time! Cookie Size Response Time (Delta) 0 bytes 78 ms ( 0 ms) 500 bytes 79 ms ( +1 ms) 1000 bytes 94 ms (+16 ms) 1500 bytes 109 ms (+31 ms) 2000 bytes 125 ms (+47 ms) 2500 bytes 141 ms (+63 ms) 3000 bytes 156 ms (+78 ms) Thursday, 26 May 2011
  • 31. Experiment Time! Cookie Size Response Time (Delta) 0 bytes 78 ms ( 0 ms) 500 bytes 79 ms ( +1 ms) 1000 bytes 94 ms (+16 ms) 1500 bytes 109 ms (+31 ms) 2000 bytes 125 ms (+47 ms) 2500 bytes 141 ms (+63 ms) 3000 bytes 156 ms (+78 ms) Thursday, 26 May 2011
  • 34. Cookies Remove unnecessary cookies Thursday, 26 May 2011
  • 35. Cookies Remove unnecessary cookies Appropriate domain level Thursday, 26 May 2011
  • 36. Cookies Remove unnecessary cookies Appropriate domain level Keep size low Thursday, 26 May 2011
  • 37. Cookies Remove unnecessary cookies Appropriate domain level Keep size low Set Expires Thursday, 26 May 2011
  • 39. Parallel Downloads Be aware of max connection limits Thursday, 26 May 2011
  • 40. Parallel Downloads Borrowed from BrowserScope.org Thursday, 26 May 2011
  • 41. Parallel Downloads Borrowed from BrowserScope.org Thursday, 26 May 2011
  • 42. Parallel Downloads One domain = 2 Parallel connections Thursday, 26 May 2011
  • 43. Parallel Downloads One domain = 2 Parallel connections HTML Image Image Image Image Image Image Image Image 0.4 0.8 1.2 1.6 2 2.4 Secs Thursday, 26 May 2011
  • 44. Parallel Downloads Two domains = 4 Parallel connections HTML Image Image Image Image Image Image Image Image 0.4 0.8 1.2 1.6 2 2.4 Secs Thursday, 26 May 2011
  • 45. Parallel Downloads Too many hostnames can cause complications Thursday, 26 May 2011
  • 46. Parallel Downloads Too many hostnames can cause complications 2 – 4 sub domains is a good average Thursday, 26 May 2011
  • 47. Combine Files Combining 6 scripts into 1 eliminates 5 requests Thursday, 26 May 2011
  • 48. Combine Files Combining 6 scripts into 1 eliminates 5 requests Challenges: develop as separate modules combinations vs. loading more than needed Thursday, 26 May 2011
  • 49. Javascript Doesn’t comply with parallel download rules Thursday, 26 May 2011
  • 50. Javascript Doesn’t comply with parallel download rules HTML JS Image Image Image Image Image Image Image 0.4 0.8 1.2 1.6 2 2.4 Secs Thursday, 26 May 2011
  • 51. Javascript script defer attribute is not a solution Thursday, 26 May 2011
  • 52. Javascript script defer attribute is not a solution Solution - move them as low in the page as possible Thursday, 26 May 2011
  • 55. Processing Fake the delivery Thursday, 26 May 2011
  • 56. Processing Fake the delivery Lazy Loading Thursday, 26 May 2011
  • 57. Processing Fake the delivery Lazy Loading Above the fold Loading Thursday, 26 May 2011
  • 58. Processing Fake the delivery Lazy Loading Above the fold Loading Delay Javascript Loading Thursday, 26 May 2011
  • 60. Processing Bonus - async attribute Thursday, 26 May 2011
  • 61. Processing Bonus - async attribute http://www.appelsiini.net/projects/lazyload Thursday, 26 May 2011
  • 63. JS Minification Crushes the file Strips out all cruft Voodoo Magic! Thursday, 26 May 2011
  • 64. JS Minfication UglifyJS Google Closure YUI Compressor Thursday, 26 May 2011
  • 65. JS Minfication UglifyJS Google Closure YUI Compressor http://bit.ly/compression-rates Thursday, 26 May 2011
  • 66. CSS Minification YUI Compressor minifycss.com OOCSS Thursday, 26 May 2011
  • 67. GZip GZip can be used on Thursday, 26 May 2011
  • 68. GZip GZip can be used on JS Thursday, 26 May 2011
  • 69. GZip GZip can be used on JS CSS Thursday, 26 May 2011
  • 70. GZip GZip can be used on JS CSS XML Thursday, 26 May 2011
  • 71. GZip GZip can be used on JS CSS XML JSON Thursday, 26 May 2011
  • 72. GZip GZip should not be used on Thursday, 26 May 2011
  • 73. GZip GZip should not be used on Images Thursday, 26 May 2011
  • 74. GZip GZip should not be used on Images Document formats Thursday, 26 May 2011
  • 75. GZip GZip should not be used on Images Document formats Already compressed Thursday, 26 May 2011
  • 76. 404 robots.txt favicon Thursday, 26 May 2011
  • 78. Images favicon Thursday, 26 May 2011
  • 79. Images favicon CSS Sprites Thursday, 26 May 2011
  • 80. Images favicon CSS Sprites inline base64 Thursday, 26 May 2011
  • 81. Images favicon CSS Sprites inline base64 Thursday, 26 May 2011
  • 83. Images Badly optimised Thursday, 26 May 2011
  • 84. Images Badly optimised Thumbnails Thursday, 26 May 2011
  • 85. Images Badly optimised Thumbnails PNGs compressed up to 50% Thursday, 26 May 2011
  • 86. PNG Optimise OptiPNG pngwolf pngcrush jpegtran Thursday, 26 May 2011
  • 89. SSL Extra roundtrips Thursday, 26 May 2011
  • 90. SSL Extra roundtrips More resources for servers Thursday, 26 May 2011
  • 91. SSL Extra roundtrips More resources for servers Worth it, tho! Thursday, 26 May 2011
  • 92. Tread the users’ path Thursday, 26 May 2011
  • 93. Tread the users’ path Test on slower connections Thursday, 26 May 2011
  • 94. Tread the users’ path Test on slower connections Slow proxies Thursday, 26 May 2011
  • 95. Tread the users’ path Thursday, 26 May 2011
  • 96. Tread the users’ path Tables / Phones Thursday, 26 May 2011
  • 97. Tread the users’ path Tables / Phones Airline connections Thursday, 26 May 2011
  • 98. Tread the users’ path Tables / Phones Airline connections Public places Thursday, 26 May 2011
  • 100. CDN Single domain Thursday, 26 May 2011
  • 101. CDN Single domain Smart routing Thursday, 26 May 2011
  • 102. CDN Single domain Smart routing Data is closer to end user Thursday, 26 May 2011
  • 105. CDN on a Budget Thursday, 26 May 2011
  • 106. CDN on a Budget S3 Thursday, 26 May 2011
  • 107. Query vs. Filename revisions Thursday, 26 May 2011
  • 108. Query vs. Filename revisions Cache far in future Thursday, 26 May 2011
  • 109. Query vs. Filename revisions Cache far in future Revisioning forces downloads Thursday, 26 May 2011
  • 110. Query vs. Filename revisions Cache far in future Revisioning forces downloads Thursday, 26 May 2011
  • 112. Query revisions Easy and convenient Thursday, 26 May 2011
  • 113. Query revisions Easy and convenient Usually not recommended Thursday, 26 May 2011
  • 114. Query revisions Easy and convenient Usually not recommended Bad proxies are a problem Thursday, 26 May 2011
  • 116. Filename revisions Requires more work Thursday, 26 May 2011
  • 117. Filename revisions Requires more work Recommended Thursday, 26 May 2011
  • 118. Filename revisions Requires more work Recommended During build, using md5 hash Thursday, 26 May 2011
  • 120. Compromise Create a version function Thursday, 26 May 2011
  • 121. Compromise Create a version function Put on all resources Thursday, 26 May 2011
  • 122. Compromise Create a version function Put on all resources mod_rewrite magic Thursday, 26 May 2011
  • 123. Compromise Create a version function Put on all resources mod_rewrite magic http://bit.ly/query_rev_comp Thursday, 26 May 2011
  • 125. Browser Tools Firebug Thursday, 26 May 2011
  • 126. Browser Tools Firebug YSlow Thursday, 26 May 2011
  • 127. Browser Tools Firebug YSlow PageSpeed Thursday, 26 May 2011
  • 128. Browser Tools Firebug YSlow PageSpeed Chrome Inspector Thursday, 26 May 2011
  • 130. Other Tools HTTPWatch.com Thursday, 26 May 2011
  • 131. Other Tools HTTPWatch.com WebPageTest.org Thursday, 26 May 2011
  • 132. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.org Thursday, 26 May 2011
  • 133. Other Tools HTTPWatch.com WebPageTest.org HTTPArchive.org chartbeat.com Thursday, 26 May 2011
  • 135. Other Tools WonderProxy.com Thursday, 26 May 2011
  • 136. Other Tools WonderProxy.com BrowserScope.com Thursday, 26 May 2011
  • 137. Other Tools WonderProxy.com BrowserScope.com html5boilerplate.com Thursday, 26 May 2011
  • 138. “Knowledge rests not upon truth alone, but upon error also” - Carl G. Jung Thursday, 26 May 2011
  • 139. Questions? @h helgi@orchestra.io Joind.in: http://joind.in/3401 Thursday, 26 May 2011