SlideShare a Scribd company logo
Wednesday, March 21, 12
Mobile




                          Faster Mobile Sites
                          Presented by Matt Farina




Wednesday, March 21, 12
Hi, My name is Matt.You might
                          know me as mfer.
                          mattfarina.com
                          @mattfarina




Wednesday, March 21, 12
Download the slides...
         http://www.slideshare.net/mattfarina
                          http://speakerdeck.com/u/mattfarina




Wednesday, March 21, 12
http://www.flickr.com/photos/robinhamman/337969896/
Wednesday, March 21, 12
Take Aways

               1. Why front end performance is important.

               2. Where to look for performance issues.

               3. Resources, tools, and stuff you can use.

               4. Some actions you can take on your site.



Wednesday, March 21, 12
Before We Get Started


                 Before we talk about the fun and new stuff
                 there’s are some things commonly talked
                 about you should look into:

                 • CDN                • Memcache
                 • Varnish            • Lots of other cool stuff
                 • APC


Wednesday, March 21, 12
Why is Front End
                          Performance Important?




Wednesday, March 21, 12
The HTTP Archive measurement of where
                  time spent generating a page happens for
                              the top 50K sites.

                                              Front End             Back End




                                                      13%




                                                               87%




                          http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
Wednesday, March 21, 12
Front End        Back End                           Front End              Back End



                          15%                                                        3%




                                  85%                                                 97%



                          Desktop                                                Mobile



                            http://www.readwriteweb.com/hack/2011/06/mobile-page-response.php
Wednesday, March 21, 12
85% of mobile users expect sites
                          to load at least as fast as using a
                          desktop or laptop computer.




             http://www.tealeaf.com/customer-experience-management/resource-center/register.php?doc=mobile-cem
Wednesday, March 21, 12
57% of online shoppers will wait
                          three seconds or less before
                          abandoning the site.




                            http://www.akamai.com/html/about/press/releases/2010/press_061410.html
Wednesday, March 21, 12
“Yahoo! reported that making
                pages just 400 milliseconds
                 slower resulted in a traffic
                     drop of up to 9%.”
                          * Google, Amazon, and others have found
                                      similar results.



                                http://www.slideshare.net/stoyan/yslow-20-presentation
Wednesday, March 21, 12
SEO
                       Google takes performance into
                     account in search engine rankings.



                  http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
Wednesday, March 21, 12
We aren’t just competing over
                          user time and attention with
                          other websites. We’re also
                          competing against native apps.




Wednesday, March 21, 12
Part 1: Bandwidth




Wednesday, March 21, 12
4G will solve our problems, right?

                           http://www.flickr.com/photos/eliu500/5332240987/
Wednesday, March 21, 12
According to ITU (UN agency for
                          information and communications
                          technology) in 2011 we only had
                          45% of 3g or better coverage
                          worldwide.



                             http://www.itu.int/ITU-D/ict/facts/2011/material/ICTFactsFigures2011.pdf
Wednesday, March 21, 12
“Research done at Google shows
                     that an increase from 5Mbps to
                     10Mbps results in a disappointing
                     5% improvement in page load
                     times. Or put slightly differently, a
                     10Mbps connection, on average
                     uses only 16% of its capacity.”


                           http://www.igvita.com/2011/10/20/faster-web-vs-tcp-slow-start/
Wednesday, March 21, 12
TCP connections aren’t great for small
                    files (all your non-media assets are small
                       files). This is due to TCP slow start.

                http://www.stevesouders.com/blog/2010/07/13/velocity-tcp-and-the-lower-bound-of-web-performance/
Wednesday, March 21, 12
If you pay for bandwidth and you
                     can use less bandwidth to send
                     the same functionality you have a
                     savings at the same usage level.




Wednesday, March 21, 12
Minify Production JavaScript

                          • For example, minified drupal.js is 24%
                           the size of the original.

                          • UglifyJS - a great minifier
                           https://github.com/mishoo/UglifyJS


                          • Speedy Module - minified core JS
                           http://drupal.org/project/speedy



                          • Advanced CSS/JS Aggregation (D 6.x)
                           http://drupal.org/project/advagg



Wednesday, March 21, 12
Quick Note On Legal Issues

                          • JavaScript downloaded to the browser
                            is a form of distribution.

                          • The source (non-minified) must be
                            linked to or publicly available. This
                            could be a link in a comment.

                          • Preserve copyright / attribution
                            comments.

                          Note: I’m not a lawyer and this is not legal advice.


Wednesday, March 21, 12
Contrib Challenge: If a project in
                    contrib is using un-minified
                    JavaScript for production file a bug.
                    Remember, patches welcome.




Wednesday, March 21, 12
Original   41.3% Smaller



             Use Lossless compression
            on theme and module images.

Wednesday, March 21, 12
Compression Tools




                     ImageOptim - for mac and what I use
                      http://imageoptim.pornel.net/


                     SmushIt - a web service owned by Yahoo!
                      http://www.smushit.com/ysmush.it/


                     RIOT - Recommended to me but never used
                      http://luci.criosweb.ro/riot/



Wednesday, March 21, 12
Responsive Images

                          • Adaptive Image
                           http://drupal.org/project/adaptive_image
                           Note: Does not work with CDNs or reverse proxies.



                          • Responsive Images
                           http://drupal.org/project/responsive_images
                           Uses a special field formatter for images.


                          • Adaptive Image Styles
                           http://drupal.org/project/ais
                           Requires alterations to .htaccess and JS.




Wednesday, March 21, 12
Remove Image Styles Metadata




                            ImageMagick advanced module has
                               an option to strip out metadata.
                            http://drupal.org/project/imagemagick


Wednesday, March 21, 12
Gzip Everything

                          When you send assets to the browser Gzip
                           everything. Modern browsers (even IE 6)
                            support accepting Gzip compression.


                                 • mod_deflate (for apache)
                                 • IIS (build in)
                                 • HttpGzipModule (nginx)


Wednesday, March 21, 12
Part 2: RTT and
                           Connections




Wednesday, March 21, 12
6
        The number of parallel connections to a domain
       across all tabs and windows in desktop browsers.



Wednesday, March 21, 12
Max Connections Per Host


                          iOS 5         Android 2.2      Android 2.3       Blackberry




                           6                 4                 6                  5




                               • Android 2.2 has a 27.8% Android market share.
                               • Android 2.3 has a 58.6% Android market share.
                               • Android 4.x (ICS) has 1% Android market share.

Wednesday, March 21, 12
Round-trip Time (RTT)




                      Browser                                                         Server


                   “the length of time it takes for a signal to be sent
                         plus the length of time it takes for an
                     acknowledgment of that signal to be received.”


                                https://en.wikipedia.org/wiki/Round-trip_delay_time
Wednesday, March 21, 12
Mobile phone network
                latency is 2-10x that of wired
                        connections.



                          http://www.slideshare.net/guest22d4179/latency-trumps-all
Wednesday, March 21, 12
CSS Image Sprites




                           http://www.famfamfam.com/lab/icons/silk/
Wednesday, March 21, 12
CSS Sprite Tools
                           Glue
                           http://glue.readthedocs.org/


                           Compass
                           http://compass-style.org/


                           Sprite Cow
                           http://www.spritecow.com/


                           SpritePad
                           http://spritepad.wearekiss.com/




Wednesday, March 21, 12
Enable CSS and JavaScript
                     Aggregation




                In an unscientific random poll of DrupalCon attenders websites these were
                not enabled half the time. Not the first conference I’ve observed this at.

Wednesday, March 21, 12
“Adding an Expires header to your components with
            a date in the future makes them cacheable, reducing
            the load time of your pages. Certainly this should be
            done with images, but that's fairly typical. Go a step
            further and add it to scripts and stylesheets, too. This
            won't affect performance the first time users hit your
            page, but on subsequent page views it could reduce
            response times by 50% or more.”




                           http://stevesouders.com/hpws/rule-expires.php
Wednesday, March 21, 12
What about caching and updating?

                     So, you’ve updated an image or a sprite
                     and you want that to download but your
                            images are set to cache.

                 Solution: Use a custom name for each
              update. For example append a character you
               increment or a date. Or, use a query string.

                          This is what Google, Yahoo, and many others do.


Wednesday, March 21, 12
Warning: While desktop
            browsers generally have large
            caches, mobile browsers
            typically have a cache only
            several MB in size.

Wednesday, March 21, 12
Part 3: Mobile Devices




Wednesday, March 21, 12
10x
                 JavaScript on mobile devices (high end
               ones) takes about 10x as long to execute on
                  mobile devices compared to desktop
                               computers.

Wednesday, March 21, 12
512MB
                The amount of RAM in the iPhone 4s and
              iPad 2. Mobile devices typically have 1GB or
               less of RAM. This helps extend battery life.

Wednesday, March 21, 12
What Can We Do About It?

                          Nothing Fancy with JavaScript
                          JS has less performance and memory to work with.



                          Simpler DOM
                          A complicated DOM (divitis) uses more system
                          resources. A simpler DOM has less objects in memory.


                          Mobile Optimized Images
                          They use less resources to render, manipulate, and
                          keep in memory.




Wednesday, March 21, 12
Let’s Get A Little
                             Advanced




Wednesday, March 21, 12
Alternatives To Caching

                          If there isn’t much space to cache
                           where else can we stick assets?

                          Local Storage
                          Google, Bing, and others put assets in local storage.



                          Manifest Appcache
                          Designed for html5 apps these can tell a browser to
                          store assets for long periods.




Wednesday, March 21, 12
What Else Can We Compress?

                      JavaScript, CSS, and images aren’t the
                       only things that can be compressed.

                          HTMLCompressor
                          http://code.google.com/p/htmlcompressor/
                          Minify HTML. In Drupal see hook_page_delivery_callback_alter
                          and drupal_deliver_html_page.



                          mod_pagespeed
                          Apache module that automatically optimizes web pages and
                          resources on them.




Wednesday, March 21, 12
Delayed JavaScript Evaluation

                            All JavaScript included in a page
                          needs to parsed and evaluated before
                                  it becomes available.


                          jQuery on iPhone 4 takes 320ms to
                          parse and evaluate. Lazy Evaluation
                          waits until JS is needed to evaluate it.


Wednesday, March 21, 12
Update Your Linux Kernel


                The Linux 3.3 kernel increases the TCP
                initial congestion window to 10. This can
                cut down the number of round trips to get
                data. Google and Microsoft already do this.




       http://samsaffron.com/archive/2012/03/01/why-upgrading-your-linux-kernel-will-make-your-customers-much-happier
Wednesday, March 21, 12
Tools and Resources




Wednesday, March 21, 12
Tools and Resources
                          Page Speed
                          https://developers.google.com/pagespeed/
                          Analyzes a website and generates suggestions. A website or
                          browser plugin. Documentation details on suggestions.


                          Mobile Perf Bookmarklet
                          http://stevesouders.com/mobileperf/mobileperfbkm.php
                          Tools to analyze on mobile and store data to analyze on desktop.



                          Performance Articles
                          http://code.google.com/speed/articles/
                          https://github.com/h5bp/mobile-boilerplate/wiki/Blog-and-Articles
                          Articles about technologies related to performance.



Wednesday, March 21, 12
Chrome Developer Tools




Wednesday, March 21, 12
webpagetest.org




Wednesday, March 21, 12
Questions?
                          http://www.slideshare.net/mattfarina
                          http://speakerdeck.com/u/mattfarina

                              Twitter: @mattfarina
                              Blog: engineeredweb.com



Wednesday, March 21, 12
What did you think?
                           Locate this session on the
                           DrupalCon Denver website
                          http://denver2012.drupal.org/program

                           Click the “Take the Survey” link.


                                 Thank You!
Wednesday, March 21, 12

More Related Content

Similar to Faster mobile sites

Making the Switch, Part 1: Top 5 Things to Consider When Evaluating Drupal
Making the Switch, Part 1: Top 5 Things to Consider When Evaluating DrupalMaking the Switch, Part 1: Top 5 Things to Consider When Evaluating Drupal
Making the Switch, Part 1: Top 5 Things to Consider When Evaluating Drupal
Acquia
 
Designing for Performance: Database Related Worst Practices
Designing for Performance: Database Related Worst PracticesDesigning for Performance: Database Related Worst Practices
Designing for Performance: Database Related Worst Practices
Christian Antognini
 
Designing for performance: Database Related Worst Practices
Designing for performance: Database Related Worst PracticesDesigning for performance: Database Related Worst Practices
Designing for performance: Database Related Worst Practices
Trivadis
 
Future of web development
Future of web developmentFuture of web development
Future of web development
Buycmstemplate
 
10 Web Performance Lessons For the 21st Century
10 Web Performance Lessons For the  21st Century10 Web Performance Lessons For the  21st Century
10 Web Performance Lessons For the 21st Century
Mateusz Kwasniewski
 
Building Highly Optimized Mobile Web Apps
Building Highly Optimized Mobile Web AppsBuilding Highly Optimized Mobile Web Apps
Building Highly Optimized Mobile Web Apps
Glan Thomas
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and Video
Jason Grigsby
 
Microsoft Power Point Best Practices For Scaling Heavily Adopted And Concur...
Microsoft Power Point   Best Practices For Scaling Heavily Adopted And Concur...Microsoft Power Point   Best Practices For Scaling Heavily Adopted And Concur...
Microsoft Power Point Best Practices For Scaling Heavily Adopted And Concur...
Steve Feldman
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
Jason Grigsby
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
Dave Olsen
 
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and JavascriptHyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
nlwebperf
 
Tableau training doc bnreddy call_09396725649
Tableau training doc bnreddy call_09396725649Tableau training doc bnreddy call_09396725649
Tableau training doc bnreddy call_09396725649
Nagi Reddy B
 
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...
Steve Feldman
 
Responsive Web Design - An Accessibility Tool
Responsive Web Design - An Accessibility ToolResponsive Web Design - An Accessibility Tool
Responsive Web Design - An Accessibility Tool
George Zamfir
 
Bio-IT Asia 2013: Informatics & Cloud - Best Practices & Lessons Learned
Bio-IT Asia 2013: Informatics & Cloud - Best Practices & Lessons LearnedBio-IT Asia 2013: Informatics & Cloud - Best Practices & Lessons Learned
Bio-IT Asia 2013: Informatics & Cloud - Best Practices & Lessons Learned
Chris Dagdigian
 
Magento Performance Improvements with Client Side Optimizations
Magento Performance Improvements with Client Side OptimizationsMagento Performance Improvements with Client Side Optimizations
Magento Performance Improvements with Client Side Optimizations
PINT Inc
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Doug Gapinski
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Dave Olsen
 
Makingweb: Great front end performance starts on the server.
Makingweb: Great front end performance starts on the server.Makingweb: Great front end performance starts on the server.
Makingweb: Great front end performance starts on the server.
Jon Arne Sæterås
 
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 PotsdamFrom Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
Andreas Grabner
 

Similar to Faster mobile sites (20)

Making the Switch, Part 1: Top 5 Things to Consider When Evaluating Drupal
Making the Switch, Part 1: Top 5 Things to Consider When Evaluating DrupalMaking the Switch, Part 1: Top 5 Things to Consider When Evaluating Drupal
Making the Switch, Part 1: Top 5 Things to Consider When Evaluating Drupal
 
Designing for Performance: Database Related Worst Practices
Designing for Performance: Database Related Worst PracticesDesigning for Performance: Database Related Worst Practices
Designing for Performance: Database Related Worst Practices
 
Designing for performance: Database Related Worst Practices
Designing for performance: Database Related Worst PracticesDesigning for performance: Database Related Worst Practices
Designing for performance: Database Related Worst Practices
 
Future of web development
Future of web developmentFuture of web development
Future of web development
 
10 Web Performance Lessons For the 21st Century
10 Web Performance Lessons For the  21st Century10 Web Performance Lessons For the  21st Century
10 Web Performance Lessons For the 21st Century
 
Building Highly Optimized Mobile Web Apps
Building Highly Optimized Mobile Web AppsBuilding Highly Optimized Mobile Web Apps
Building Highly Optimized Mobile Web Apps
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and Video
 
Microsoft Power Point Best Practices For Scaling Heavily Adopted And Concur...
Microsoft Power Point   Best Practices For Scaling Heavily Adopted And Concur...Microsoft Power Point   Best Practices For Scaling Heavily Adopted And Concur...
Microsoft Power Point Best Practices For Scaling Heavily Adopted And Concur...
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
 
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and JavascriptHyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
 
Tableau training doc bnreddy call_09396725649
Tableau training doc bnreddy call_09396725649Tableau training doc bnreddy call_09396725649
Tableau training doc bnreddy call_09396725649
 
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...
 
Responsive Web Design - An Accessibility Tool
Responsive Web Design - An Accessibility ToolResponsive Web Design - An Accessibility Tool
Responsive Web Design - An Accessibility Tool
 
Bio-IT Asia 2013: Informatics & Cloud - Best Practices & Lessons Learned
Bio-IT Asia 2013: Informatics & Cloud - Best Practices & Lessons LearnedBio-IT Asia 2013: Informatics & Cloud - Best Practices & Lessons Learned
Bio-IT Asia 2013: Informatics & Cloud - Best Practices & Lessons Learned
 
Magento Performance Improvements with Client Side Optimizations
Magento Performance Improvements with Client Side OptimizationsMagento Performance Improvements with Client Side Optimizations
Magento Performance Improvements with Client Side Optimizations
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
 
Makingweb: Great front end performance starts on the server.
Makingweb: Great front end performance starts on the server.Makingweb: Great front end performance starts on the server.
Makingweb: Great front end performance starts on the server.
 
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 PotsdamFrom Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
 

More from Matthew Farina

How Helm, The Package Manager For Kubernetes, Works
How Helm, The Package Manager For Kubernetes, WorksHow Helm, The Package Manager For Kubernetes, Works
How Helm, The Package Manager For Kubernetes, Works
Matthew Farina
 
Exploring the Future of Helm
Exploring the Future of HelmExploring the Future of Helm
Exploring the Future of Helm
Matthew Farina
 
Helm 3
Helm 3Helm 3
Helm project update at cncf 2019
Helm project update at cncf 2019Helm project update at cncf 2019
Helm project update at cncf 2019
Matthew Farina
 
Helm @ Orchestructure
Helm @ OrchestructureHelm @ Orchestructure
Helm @ Orchestructure
Matthew Farina
 
Measuring How Helm Is Used
Measuring How Helm Is UsedMeasuring How Helm Is Used
Measuring How Helm Is Used
Matthew Farina
 
Testing Lessons Learned From The Community Charts
Testing Lessons Learned From The Community ChartsTesting Lessons Learned From The Community Charts
Testing Lessons Learned From The Community Charts
Matthew Farina
 
Kubecon SIG Apps December 2017 Update
Kubecon SIG Apps December 2017 UpdateKubecon SIG Apps December 2017 Update
Kubecon SIG Apps December 2017 Update
Matthew Farina
 
Dipping Your Toes Into Cloud Native Application Development
Dipping Your Toes Into Cloud Native Application DevelopmentDipping Your Toes Into Cloud Native Application Development
Dipping Your Toes Into Cloud Native Application Development
Matthew Farina
 
A Dive Into Containers and Docker
A Dive Into Containers and DockerA Dive Into Containers and Docker
A Dive Into Containers and Docker
Matthew Farina
 
HP Helion OpenStack and Professional Services
HP Helion OpenStack and Professional ServicesHP Helion OpenStack and Professional Services
HP Helion OpenStack and Professional Services
Matthew Farina
 
Why OpenStack matters and how you can get involved
Why OpenStack matters and how you can get involvedWhy OpenStack matters and how you can get involved
Why OpenStack matters and how you can get involved
Matthew Farina
 
Faster front end performance
Faster front end performanceFaster front end performance
Faster front end performance
Matthew Farina
 
Secure your site
Secure your siteSecure your site
Secure your site
Matthew Farina
 
Building Faster Websites
Building Faster WebsitesBuilding Faster Websites
Building Faster Websites
Matthew Farina
 
Drupal Calendaring, A Technological Solution
Drupal Calendaring, A Technological SolutionDrupal Calendaring, A Technological Solution
Drupal Calendaring, A Technological Solution
Matthew Farina
 
Make Drupal Better
Make Drupal BetterMake Drupal Better
Make Drupal Better
Matthew Farina
 
Intro To jQuery In Drupal
Intro To jQuery In DrupalIntro To jQuery In Drupal
Intro To jQuery In Drupal
Matthew Farina
 

More from Matthew Farina (18)

How Helm, The Package Manager For Kubernetes, Works
How Helm, The Package Manager For Kubernetes, WorksHow Helm, The Package Manager For Kubernetes, Works
How Helm, The Package Manager For Kubernetes, Works
 
Exploring the Future of Helm
Exploring the Future of HelmExploring the Future of Helm
Exploring the Future of Helm
 
Helm 3
Helm 3Helm 3
Helm 3
 
Helm project update at cncf 2019
Helm project update at cncf 2019Helm project update at cncf 2019
Helm project update at cncf 2019
 
Helm @ Orchestructure
Helm @ OrchestructureHelm @ Orchestructure
Helm @ Orchestructure
 
Measuring How Helm Is Used
Measuring How Helm Is UsedMeasuring How Helm Is Used
Measuring How Helm Is Used
 
Testing Lessons Learned From The Community Charts
Testing Lessons Learned From The Community ChartsTesting Lessons Learned From The Community Charts
Testing Lessons Learned From The Community Charts
 
Kubecon SIG Apps December 2017 Update
Kubecon SIG Apps December 2017 UpdateKubecon SIG Apps December 2017 Update
Kubecon SIG Apps December 2017 Update
 
Dipping Your Toes Into Cloud Native Application Development
Dipping Your Toes Into Cloud Native Application DevelopmentDipping Your Toes Into Cloud Native Application Development
Dipping Your Toes Into Cloud Native Application Development
 
A Dive Into Containers and Docker
A Dive Into Containers and DockerA Dive Into Containers and Docker
A Dive Into Containers and Docker
 
HP Helion OpenStack and Professional Services
HP Helion OpenStack and Professional ServicesHP Helion OpenStack and Professional Services
HP Helion OpenStack and Professional Services
 
Why OpenStack matters and how you can get involved
Why OpenStack matters and how you can get involvedWhy OpenStack matters and how you can get involved
Why OpenStack matters and how you can get involved
 
Faster front end performance
Faster front end performanceFaster front end performance
Faster front end performance
 
Secure your site
Secure your siteSecure your site
Secure your site
 
Building Faster Websites
Building Faster WebsitesBuilding Faster Websites
Building Faster Websites
 
Drupal Calendaring, A Technological Solution
Drupal Calendaring, A Technological SolutionDrupal Calendaring, A Technological Solution
Drupal Calendaring, A Technological Solution
 
Make Drupal Better
Make Drupal BetterMake Drupal Better
Make Drupal Better
 
Intro To jQuery In Drupal
Intro To jQuery In DrupalIntro To jQuery In Drupal
Intro To jQuery In Drupal
 

Recently uploaded

CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
CEPTES Software Inc
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
Management Institute of Skills Development
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 

Recently uploaded (20)

CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 

Faster mobile sites

  • 2. Mobile Faster Mobile Sites Presented by Matt Farina Wednesday, March 21, 12
  • 3. Hi, My name is Matt.You might know me as mfer. mattfarina.com @mattfarina Wednesday, March 21, 12
  • 4. Download the slides... http://www.slideshare.net/mattfarina http://speakerdeck.com/u/mattfarina Wednesday, March 21, 12
  • 6. Take Aways 1. Why front end performance is important. 2. Where to look for performance issues. 3. Resources, tools, and stuff you can use. 4. Some actions you can take on your site. Wednesday, March 21, 12
  • 7. Before We Get Started Before we talk about the fun and new stuff there’s are some things commonly talked about you should look into: • CDN • Memcache • Varnish • Lots of other cool stuff • APC Wednesday, March 21, 12
  • 8. Why is Front End Performance Important? Wednesday, March 21, 12
  • 9. The HTTP Archive measurement of where time spent generating a page happens for the top 50K sites. Front End Back End 13% 87% http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/ Wednesday, March 21, 12
  • 10. Front End Back End Front End Back End 15% 3% 85% 97% Desktop Mobile http://www.readwriteweb.com/hack/2011/06/mobile-page-response.php Wednesday, March 21, 12
  • 11. 85% of mobile users expect sites to load at least as fast as using a desktop or laptop computer. http://www.tealeaf.com/customer-experience-management/resource-center/register.php?doc=mobile-cem Wednesday, March 21, 12
  • 12. 57% of online shoppers will wait three seconds or less before abandoning the site. http://www.akamai.com/html/about/press/releases/2010/press_061410.html Wednesday, March 21, 12
  • 13. “Yahoo! reported that making pages just 400 milliseconds slower resulted in a traffic drop of up to 9%.” * Google, Amazon, and others have found similar results. http://www.slideshare.net/stoyan/yslow-20-presentation Wednesday, March 21, 12
  • 14. SEO Google takes performance into account in search engine rankings. http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html Wednesday, March 21, 12
  • 15. We aren’t just competing over user time and attention with other websites. We’re also competing against native apps. Wednesday, March 21, 12
  • 17. 4G will solve our problems, right? http://www.flickr.com/photos/eliu500/5332240987/ Wednesday, March 21, 12
  • 18. According to ITU (UN agency for information and communications technology) in 2011 we only had 45% of 3g or better coverage worldwide. http://www.itu.int/ITU-D/ict/facts/2011/material/ICTFactsFigures2011.pdf Wednesday, March 21, 12
  • 19. “Research done at Google shows that an increase from 5Mbps to 10Mbps results in a disappointing 5% improvement in page load times. Or put slightly differently, a 10Mbps connection, on average uses only 16% of its capacity.” http://www.igvita.com/2011/10/20/faster-web-vs-tcp-slow-start/ Wednesday, March 21, 12
  • 20. TCP connections aren’t great for small files (all your non-media assets are small files). This is due to TCP slow start. http://www.stevesouders.com/blog/2010/07/13/velocity-tcp-and-the-lower-bound-of-web-performance/ Wednesday, March 21, 12
  • 21. If you pay for bandwidth and you can use less bandwidth to send the same functionality you have a savings at the same usage level. Wednesday, March 21, 12
  • 22. Minify Production JavaScript • For example, minified drupal.js is 24% the size of the original. • UglifyJS - a great minifier https://github.com/mishoo/UglifyJS • Speedy Module - minified core JS http://drupal.org/project/speedy • Advanced CSS/JS Aggregation (D 6.x) http://drupal.org/project/advagg Wednesday, March 21, 12
  • 23. Quick Note On Legal Issues • JavaScript downloaded to the browser is a form of distribution. • The source (non-minified) must be linked to or publicly available. This could be a link in a comment. • Preserve copyright / attribution comments. Note: I’m not a lawyer and this is not legal advice. Wednesday, March 21, 12
  • 24. Contrib Challenge: If a project in contrib is using un-minified JavaScript for production file a bug. Remember, patches welcome. Wednesday, March 21, 12
  • 25. Original 41.3% Smaller Use Lossless compression on theme and module images. Wednesday, March 21, 12
  • 26. Compression Tools ImageOptim - for mac and what I use http://imageoptim.pornel.net/ SmushIt - a web service owned by Yahoo! http://www.smushit.com/ysmush.it/ RIOT - Recommended to me but never used http://luci.criosweb.ro/riot/ Wednesday, March 21, 12
  • 27. Responsive Images • Adaptive Image http://drupal.org/project/adaptive_image Note: Does not work with CDNs or reverse proxies. • Responsive Images http://drupal.org/project/responsive_images Uses a special field formatter for images. • Adaptive Image Styles http://drupal.org/project/ais Requires alterations to .htaccess and JS. Wednesday, March 21, 12
  • 28. Remove Image Styles Metadata ImageMagick advanced module has an option to strip out metadata. http://drupal.org/project/imagemagick Wednesday, March 21, 12
  • 29. Gzip Everything When you send assets to the browser Gzip everything. Modern browsers (even IE 6) support accepting Gzip compression. • mod_deflate (for apache) • IIS (build in) • HttpGzipModule (nginx) Wednesday, March 21, 12
  • 30. Part 2: RTT and Connections Wednesday, March 21, 12
  • 31. 6 The number of parallel connections to a domain across all tabs and windows in desktop browsers. Wednesday, March 21, 12
  • 32. Max Connections Per Host iOS 5 Android 2.2 Android 2.3 Blackberry 6 4 6 5 • Android 2.2 has a 27.8% Android market share. • Android 2.3 has a 58.6% Android market share. • Android 4.x (ICS) has 1% Android market share. Wednesday, March 21, 12
  • 33. Round-trip Time (RTT) Browser Server “the length of time it takes for a signal to be sent plus the length of time it takes for an acknowledgment of that signal to be received.” https://en.wikipedia.org/wiki/Round-trip_delay_time Wednesday, March 21, 12
  • 34. Mobile phone network latency is 2-10x that of wired connections. http://www.slideshare.net/guest22d4179/latency-trumps-all Wednesday, March 21, 12
  • 35. CSS Image Sprites http://www.famfamfam.com/lab/icons/silk/ Wednesday, March 21, 12
  • 36. CSS Sprite Tools Glue http://glue.readthedocs.org/ Compass http://compass-style.org/ Sprite Cow http://www.spritecow.com/ SpritePad http://spritepad.wearekiss.com/ Wednesday, March 21, 12
  • 37. Enable CSS and JavaScript Aggregation In an unscientific random poll of DrupalCon attenders websites these were not enabled half the time. Not the first conference I’ve observed this at. Wednesday, March 21, 12
  • 38. “Adding an Expires header to your components with a date in the future makes them cacheable, reducing the load time of your pages. Certainly this should be done with images, but that's fairly typical. Go a step further and add it to scripts and stylesheets, too. This won't affect performance the first time users hit your page, but on subsequent page views it could reduce response times by 50% or more.” http://stevesouders.com/hpws/rule-expires.php Wednesday, March 21, 12
  • 39. What about caching and updating? So, you’ve updated an image or a sprite and you want that to download but your images are set to cache. Solution: Use a custom name for each update. For example append a character you increment or a date. Or, use a query string. This is what Google, Yahoo, and many others do. Wednesday, March 21, 12
  • 40. Warning: While desktop browsers generally have large caches, mobile browsers typically have a cache only several MB in size. Wednesday, March 21, 12
  • 41. Part 3: Mobile Devices Wednesday, March 21, 12
  • 42. 10x JavaScript on mobile devices (high end ones) takes about 10x as long to execute on mobile devices compared to desktop computers. Wednesday, March 21, 12
  • 43. 512MB The amount of RAM in the iPhone 4s and iPad 2. Mobile devices typically have 1GB or less of RAM. This helps extend battery life. Wednesday, March 21, 12
  • 44. What Can We Do About It? Nothing Fancy with JavaScript JS has less performance and memory to work with. Simpler DOM A complicated DOM (divitis) uses more system resources. A simpler DOM has less objects in memory. Mobile Optimized Images They use less resources to render, manipulate, and keep in memory. Wednesday, March 21, 12
  • 45. Let’s Get A Little Advanced Wednesday, March 21, 12
  • 46. Alternatives To Caching If there isn’t much space to cache where else can we stick assets? Local Storage Google, Bing, and others put assets in local storage. Manifest Appcache Designed for html5 apps these can tell a browser to store assets for long periods. Wednesday, March 21, 12
  • 47. What Else Can We Compress? JavaScript, CSS, and images aren’t the only things that can be compressed. HTMLCompressor http://code.google.com/p/htmlcompressor/ Minify HTML. In Drupal see hook_page_delivery_callback_alter and drupal_deliver_html_page. mod_pagespeed Apache module that automatically optimizes web pages and resources on them. Wednesday, March 21, 12
  • 48. Delayed JavaScript Evaluation All JavaScript included in a page needs to parsed and evaluated before it becomes available. jQuery on iPhone 4 takes 320ms to parse and evaluate. Lazy Evaluation waits until JS is needed to evaluate it. Wednesday, March 21, 12
  • 49. Update Your Linux Kernel The Linux 3.3 kernel increases the TCP initial congestion window to 10. This can cut down the number of round trips to get data. Google and Microsoft already do this. http://samsaffron.com/archive/2012/03/01/why-upgrading-your-linux-kernel-will-make-your-customers-much-happier Wednesday, March 21, 12
  • 51. Tools and Resources Page Speed https://developers.google.com/pagespeed/ Analyzes a website and generates suggestions. A website or browser plugin. Documentation details on suggestions. Mobile Perf Bookmarklet http://stevesouders.com/mobileperf/mobileperfbkm.php Tools to analyze on mobile and store data to analyze on desktop. Performance Articles http://code.google.com/speed/articles/ https://github.com/h5bp/mobile-boilerplate/wiki/Blog-and-Articles Articles about technologies related to performance. Wednesday, March 21, 12
  • 54. Questions? http://www.slideshare.net/mattfarina http://speakerdeck.com/u/mattfarina Twitter: @mattfarina Blog: engineeredweb.com Wednesday, March 21, 12
  • 55. What did you think? Locate this session on the DrupalCon Denver website http://denver2012.drupal.org/program Click the “Take the Survey” link. Thank You! Wednesday, March 21, 12