SlideShare uma empresa Scribd logo
1 de 55
Baixar para ler offline
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

Mais conteúdo relacionado

Semelhante a Faster mobile sites

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
 
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
 
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
 

Semelhante a 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
 

Mais de Matthew Farina

Drupal Calendaring, A Technological Solution
Drupal Calendaring, A Technological SolutionDrupal Calendaring, A Technological Solution
Drupal Calendaring, A Technological Solution
Matthew Farina
 

Mais de 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
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

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