SlideShare a Scribd company logo
Step By Step Mobile Optimization

Guy Podjarny
@guypod
http://www.guypo.com/            Akamai Confidential
Agenda

• Review Primary Tools
• Introduce Demo Mobile Site
• Optimize Site in 5 steps
 •   Describe a problem
 •   Show its impact
 •   Discuss the cause
 •   Try out one or more solutions
• Summary
• Q&A

                                     Faster ForwardTM   ©2012 Akamai
Disclaimers

• Performance Numbers are never perfect
 • Numbers vary widely for any given website
 • In this deck, the numbers are helpers, not absolutes
• This presentation focuses on Mobile
 • Focus is on problems more common in Mobile websites
 • I’m intentionally not tackling common Front-End Optimization
• This presentation focuses on dedicated Mobile websites
 • I won’t be discussing Responsive Web Design (RWD) here
 • If you want to learn about RWD performance, come back tomorrow



                                 Faster ForwardTM                   ©2012 Akamai
Faster ForwardTM
                   The Tools
                        ©2012 Akamai

Recommended for you

Aptimize SharePoint Datasheet
Aptimize SharePoint DatasheetAptimize SharePoint Datasheet
Aptimize SharePoint Datasheet

Aptimize Website Accelerator is a software that speeds up SharePoint websites by 33-75% by reducing round trips between the server and browser. It uses patent pending techniques to optimize pages for performance before sending them to the browser. No additional hardware, code changes, or costs are required. It merges files, removes unused code and images, compresses files, and caches content to improve page load times without any developer work.

aspnetaptimizemoss
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup

Doug Sillars presented four simple optimizations for delivering fast and beautiful images and video on mobile: 1) reduce image quality, 2) use optimized formats like WebP and SVG, 3) size images appropriately, and 4) lazy load images below the fold. He demonstrated how these techniques can significantly reduce page load times and data usage. Sillars also discussed best practices for video delivery and alternatives to animated GIFs that can reduce file sizes substantially. Throughout, he provided real-world examples and tools to help optimize multimedia content for mobile performance.

10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai

The document discusses how Akamai's Intelligent Internet Platform addresses challenges posed by increasingly sophisticated websites and rising consumer expectations for faster load times and richer content. It does this through a global network of servers that optimize routing, cache content closer to users, compress data and prefetch resources to accelerate page loads. Case studies show how Akamai has helped customers like Best Buy and Urban Outfitters improve performance, scale to handle traffic spikes and reduce infrastructure costs.

Waterfall Chart
                                                      Doc Complete,
Waterfall                        Resource
                                                      (a.k.a. onload,
Chart                            (Request/Response)
                  Start Render                        Load Time)




                             Faster ForwardTM                ©2012 Akamai
WebPageTest

                                 • Free Perf
                                   Measurement Tool
                                  • www.webpagetest.org
                                 • Open Source
                                  • Can be privately installed
                                 • Desktop Browsers
                                  • IE 6-9, Chrome, Firefox
                                 • Uses Traffic Shaping
                                  • Over faster networks


              Faster ForwardTM                       ©2012 Akamai
“Mobile”-izing WebPageTest with Scripts
• Use Chrome or Firefox as agent
 • Chrome more similar to real mobile browsers
• Resize window to smartphone size
 • setviewportsize    320 480
 • No way to fake a Retina display
• Fake a smartphone user-agent
 • setUserAgent <Some-Smartphone-UA>
 • Doesn’t update navigator.userAgent
• Navigate to the relevant site…
 • navigate      http://www.your-site.com/


                                Faster ForwardTM   ©2012 Akamai
Akamai Mobitest

• Free Mobile Web Perf
  Measurement Tool
 • http://mobitest.akamai.com/
• Open-Source
 • http://bit.ly/open-source-mobitest
• Mobile Browsers
 • iOS, Android
• No Traffic Shaping
• Builds on WebPageTest
 • Can share a single server



                                        Faster ForwardTM   ©2012 Akamai

Recommended for you

Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...

Performance matters. And in the cloud, performance matters more than ever—layers of complexity and third-party, shared environments separate users from applications. Services are elastic, which means you can have any SLA you want, as long as you're willing to design it yourself. And you can have a fast application, too—if you're willing to deal with the bill at the end of the month. So how should you think about cloud performance? In this in-depth workshop on the performance of cloud computing, three cloud computing and Internet performance experts—Steve Riley (Riverbed, Amazon), Hooman Beheshti (Strangeloop, Radware) and Alistair Croll (Coradiant, CloudOps)—take you on a tour of the challenges on-demand computing poses to reliable, fast user experiences. What you'll learn: - The new models of delay, capacity, and uptime that on-demand computing requires - What and how to measure when it comes to performance, and how to think about metrics - Where delay happens across the cloud environment - How shared computing and back-end contention affect user experience - What the WAN and the Application Delivery Network mean in a cloudy compute model - How to spread load and optimize application front-ends to speed up applications

web performancecloud latencycloud
Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautiful

This document discusses 4 simple optimizations that can be made to images on websites to improve performance: 1) Reducing image quality, 2) Using optimized file formats like JPEG, WebP and SVG, 3) Resizing images to actual display size, and 4) Implementing lazy loading so images outside the viewport are not downloaded. It provides examples and data on how each technique can significantly reduce data usage and improve load times.

Vertically Challenged
Vertically ChallengedVertically Challenged
Vertically Challenged

The document discusses using database permissions to manage application authorization. It describes a basic tiered application architecture with a web server, application, and database layers. Implementing permissions at the database layer avoids limitations of application-managed permissions but requires some additional work. The document outlines approaches for implementing database roles and permissions, integrating them with an application via stored procedures, and handling authentication in the application framework. Both advantages and disadvantages of the database permissions approach are presented, including consistency across layers but lack of direct row-level controls.

iOS 6 Network Link Conditioner – On Device!

                                              How to Enable:
                                              http://www.neglecte
                                              dpotential.com/201
                                              2/09/ios6-network-
                                              link-conditioner/




                        Faster ForwardTM               ©2012 Akamai
Introduction: SLowe’s Commerce

• Demo eCommerce application
 • with dedicated Mobile site


• Built on Magento
 • Took the Magento Demo Site
 • Made some slight modifications




                                Faster ForwardTM   ©2012 Akamai
Initial Waterfall Chart

• URL:
  www.slowes.org
• Device: iPhone 4
• OS: iOS 6
• Speed: 3G
 • Apple’s Definition
 • Throttled with Network Link
   Conditioner




                                 Faster ForwardTM   ©2012 Akamai
Initial Filmstrip
• 16 seconds to start render
• 18 seconds to
  “Visually Complete”




                               Faster ForwardTM   ©2012 Akamai

Recommended for you

Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slow

This document discusses optimizing mobile application performance through testing. It begins by explaining that performance is a human perception, with delays of 100ms feeling instantaneous, 1s still allowing for an uninterrupted train of thought, and 10s being the limit to maintain focus. It then discusses benchmarking applications to understand current performance, identifying fixes, optimizing through things like image size and format, caching, and lazy loading. The overall message is that thorough testing across devices and networks is needed to optimize mobile applications for speed.

Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...

Amazon Simple Workflow Service (SWF) helps developers build, run, and scale background jobs that have parallel or sequential steps. Hi, we are Beamr, a Tel-Aviv based startup doing media optimization. Running on AWS we decided to use SWF in order to orchestrate our video processing workflow. In this lecture, Dan Julius, Beamr’s VP RnD, will explain how SWF helps beamr manage the workflow progress, what challenges it solved, and what things you should keep in mind when using this service.

popuplofttlvcloud computingswf
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto

An introduction to Web Performance Optimization in 2016 - Talk delivered in Toronto, Canada, October 18th, 2016

webweb performancefullstack
• Slide about redirects, maybe an eschel drawing?




Step 1:
Redirects                  Faster ForwardTM         ©2012 Akamai
JavaScript Redirect - The Good

                                                  mobileDetect.js:




• Client-side browser detection
• Easy to deploy
 • Compared to server changes
• “Future Friendly”
 • Can test screen width alongside UAs

                                    Faster ForwardTM                 ©2012 Akamai
Client-Side Detection Often Recommended
Nokia:




Mobify:




                          Faster ForwardTM   ©2012 Akamai
JavaScript Redirect – The Bad

• Slow!
 • Redirect only happens after
   JS is downloaded and executed
• Unnecessary download of
  other resources
 • Some above the JS in the HTML
 • Some downloaded early by speculative parser




                                   Faster ForwardTM   ©2012 Akamai

Recommended for you

Testing Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT Edinburgh

This document discusses optimizing mobile application performance through testing. It begins by explaining that fast performance is a human perception, with delays of 100ms feeling instantaneous, 1s still allowing for an uninterrupted train of thought, and 10s being the limit to keep focus. It then discusses benchmarking applications to identify issues, making optimizations, testing fixes, and launching optimized versions. Specific techniques covered include profiling network conditions, testing on low-end devices, setting speed goals, optimizing JSON responses, image sizes/formats/quality, and caching. The overall message is that thorough testing across devices and networks is needed to optimize mobile application speed for the best user experience.

Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive WebsitesComet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites

The document discusses the rise of Comet technology, which allows for highly interactive websites by enabling real-time updates from servers to browsers without polling. It covers the technical challenges of implementing Comet, different connection options like long polling and websockets, API styles including pub/sub and data sync approaches, and considerations around inboard vs outboard Comet architectures. The goal of Comet is to make the web more like a persistent connection instead of a traditional request-response model.

webdwrajax
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow

This document discusses mobile application performance testing. It begins by explaining how fast is perceived by humans, with 100ms seen as instant, 1s as an acceptable delay, and 10s as the limit to maintain focus. It then discusses various performance studies showing user frustration and abandonment rates related to load speeds. The document goes on to describe benchmarking applications, identifying fixes, optimizing through various techniques, and retesting. Specific areas covered in more depth include optimizing images through size, quality, format, caching and lazy loading. Other topics include content delivery networks, animating GIFs, and network information.

JS Redirect => HTTP Redirect
mobileDetect.js                                             Apache




                                                              CDN




          Fallback:
  Inline Script on Desktop page                      CMS/App Server




                                  Faster ForwardTM         ©2012 Akamai
Optimization Results - Waterfall

• Real page starts loading
  after ~1.5 secs vs 5.5 secs
 • ~4 Seconds saved


• No downloading of excess
  CSS and JS

• All Good: Less requests,
  less bytes, less delay


                             Faster ForwardTM   ©2012 Akamai
Optimization Results - Visual
• ~5 seconds acceleration to start render




                           Faster ForwardTM   ©2012 Akamai
Merging Redirect Chains
                                                   Only one redirect
• Combine all redirects to one redirect




• Requires combining Application and Mobile logic

                                                     Mobile Logic
  ^/(?:magento/)?(.*)   /magento/


                                                   Application Logic

                                Faster ForwardTM              ©2012 Akamai

Recommended for you

Velocity 2013: Extreme Image Optimization
Velocity 2013: Extreme Image OptimizationVelocity 2013: Extreme Image Optimization
Velocity 2013: Extreme Image Optimization

In last 4 years, two new image formats were added to the web technology arsenal -- WebP & JPEG XR. These image formats are far superior to their predecessors, but unfortunately are only supported by very specific browsers, and aren't always easy to generate. Akamai has recently added support for these image formats, and learned a lot in the process. In this short talk, Ido will explain more about these formats and share some of our experience working with them.

jpeg xrvelocity conferenceakamai technologies
Nantes when its just too slow
Nantes when its just too slowNantes when its just too slow
Nantes when its just too slow

This document provides tips for optimizing images for fast loading on mobile websites. It discusses how image size, quality, format, caching, and lazy loading can significantly impact performance. Specific techniques recommended include resizing images to appropriate screen sizes, using formats like WebP and SVG that compress well, lazy loading images below the fold, and adding responsive breakpoints to serve optimized images for different devices. Benchmarking tools are suggested for testing image performance in various scenarios. The overall message is that with the right optimizations, images can load quickly without sacrificing quality.

Show104 buried treasure
Show104 buried treasureShow104 buried treasure
Show104 buried treasure

The document provides an overview of options for accessing data stored in Lotus Notes databases from other systems. It discusses generating feeds using the ReadViewEntries API to output data in XML or JSON format, as well as creating calendar feeds using the iCalendar format. The document also covers integrating with IBM Connections and using tools like ODBC, JDBC, and web services to access Notes data from other applications.

ibm connect
Avoiding Redirects: Serving Client-Specific HTML
• Instead of redirecting, return client-aware HTML
 • Same URL returns HTML by client
 • Caution: Caching appliances & CDNs must be tuned
 • Requires consistent paths across all variations




                        No Redirect

                              Faster ForwardTM        ©2012 Akamai
Step 1: Conclusions

• Redirects have a real cost
 • Especially in high latency mobile networks
• HTTP Redirects are much faster than JS Redirects
 • Use HTTP Redirects
 • Use JS Redirects as backup only
• 1 Redirect is faster than… more than 1 redirect
 • Merge redirect chains whenever possible
• No redirects are faster than even 1 redirect!
 • Consider serving different HTML to different clients on one site


                                  Faster ForwardTM                    ©2012 Akamai
Step 2:
Faster ForwardTM
                   Compression
                           ©2012 Akamai
Lack of HTTP Compression (Gzip)




           160 KB (!!!)
No Gzip



                          Faster ForwardTM   ©2012 Akamai

Recommended for you

Delta++ Reducing The Size Of Android Application Updates
Delta++ Reducing The Size Of Android Application UpdatesDelta++ Reducing The Size Of Android Application Updates
Delta++ Reducing The Size Of Android Application Updates

TO GET THIS PROJECT THROUGH ONLINE OR TRAINING SESSION CONTACT: LansA Informatics Pvt Ltd No 165, 5th Street, Crosscut road, Gandhipuram, Coimbatore - 641 012 Landline: 0422 - 4204373 Mobile: +91 90 953 953 33 Email :lansa.projects@gmail.com Website: www.lansainformatics.com Blog: www.lansastudentscdc.blogspot.com

android final year projects in gandhipuramandroid projectsandroid study materials
Android Media Player Development
Android Media Player DevelopmentAndroid Media Player Development
Android Media Player Development

The document discusses Android media player development. It covers characteristics of video streams like frame rate, interlacing vs progressive, aspect ratio, color depth and video compression methods. It then discusses the Android media player API, limitations and advanced development using FFmpeg library. Key points covered include supported video formats, media player class methods, state changes and errors that can occur. Customizing the player is described as providing benefits like security and real-time ads but also drawbacks like increased errors.

androidandroid media player
3D Video Programming for Android
3D Video Programming for Android3D Video Programming for Android
3D Video Programming for Android

This document discusses 3D video encoding and delivery standards for Android devices. It covers 3D video formats like side-by-side and top-bottom, support in H.264 profiles and HDMI standards, and how to configure the encoder on TI and Qualcomm processors to add 3D signaling information to the encoded video stream. By inserting frame packing and stereo metadata, devices can automatically detect 3D content and display it correctly without user intervention.

seifpahdmi
Solution: Apply Compression

• Gzip compression built into most elements in the stack
 • App Server, Web Server, Load Balancer, CDN…




                             Faster ForwardTM              ©2012 Akamai
Compression matters more on Mobile!

• Mobile websites have less images
 • JS & CSS account for more of the bytes
 • Therefore, more of the bytes is compressible
 • Therefore, compression matters more on Mobile.
• (Practically) all mobile browsers support compression
 • Kinda true on desktop these days
• Download bandwidth on mobile is smaller than broadband
• Latency on mobile is higher on broadband



                                Faster ForwardTM          ©2012 Akamai
TCP Slow Start (diagrams from John Rauser)

     Early TCP                  Slow Start               Delayed ACK




                         Max Packet Size: 1460 bytes
http://velocityconf.com/velocity2010/public/schedule/detail/11792
                                  Faster Forward
                                         TM
                                                                    ©2012 Akamai
TCP Slow Start (diagrams from John Rauser)

                                    • Time to deliver ~72KB:
                                      • Fiber (4ms RTT): ~24ms
                                      • DSL (50ms RTT): ~300ms
                                      • 3G (200ms RTT): 1.2 seconds (!!!)
                                    • Time to deliver ~300KB:
                                      • Fiber (4ms RTT): ~40ms
                                      • DSL (50ms RTT): ~500ms
                                      • 3G (200ms RTT): 2 seconds (!!!)
                                    • Slow-Start is per connection


http://velocityconf.com/velocity2010/public/schedule/detail/11792
                                  Faster Forward
                                        TM
                                                                    ©2012 Akamai

Recommended for you

Types Of Sentences Ppt
Types Of Sentences PptTypes Of Sentences Ppt
Types Of Sentences Ppt

The document discusses the four types of sentences: interrogative sentences which ask questions and end with question marks, declarative sentences which make statements and usually end with periods, imperative sentences which give commands or directions and can end with periods or exclamation marks, and exclamatory sentences which show strong emotion, begin with "what" or "how", and end with exclamation marks. Examples are provided for each type of sentence.

Sentence Structure Ppt
Sentence Structure PptSentence Structure Ppt
Sentence Structure Ppt

The document discusses varying sentence structure to make writing more interesting. It provides examples of simple sentences with one clause, compound sentences with two independent clauses joined with coordinating conjunctions or semicolons, and complex sentences with one independent and one dependent clause. The second paragraph is more effective because it uses a variety of sentence structures including compound and complex sentences rather than just simple sentences.

Sentence structure powerpoint
Sentence structure powerpointSentence structure powerpoint
Sentence structure powerpoint

This document provides information on how to vary sentence structure to make writing more interesting. It discusses using simple, compound, complex, and compound-complex sentences. Simple sentences contain one independent clause, while compound sentences contain two independent clauses joined with a conjunction. Complex sentences have one independent clause and one dependent clause. Compound-complex sentences contain two or more independent clauses and one or more dependent clauses. The document provides examples of each sentence type and guidelines for using commas with different clauses.

sentence structures
Step 2: Conclusions

• Compression is a critical optimization
• Easy to implement, especially in Mobile
 • All mobile browsers (that you care about) support it
• Especially important on Mobile
 • Compressible content (JS,CSS…) accounts for a bigger part of the page
 • High latency makes large download slow
 • High packet loss makes large downloads unbearable




                                  Faster ForwardTM                  ©2012 Akamai
Step 3: Consolidation
 Faster ForwardTM   ©2012 Akamai
Step 3: Fragmented JS/CSS Files

                                          2 CSS Files


                                          16 JS Files




                       Faster ForwardTM          ©2012 Akamai
Step 3: Consolidate CSS & JS Files




                        Faster ForwardTM   ©2012 Akamai

Recommended for you

Types Of Sentences
Types Of SentencesTypes Of Sentences
Types Of Sentences

The document discusses the four types of sentences: declarative, exclamatory, interrogative, and imperative. A declarative sentence makes a statement, an exclamatory sentence expresses strong emotions and ends with an exclamation point, an interrogative sentence asks a question and ends with a question mark, and an imperative sentence gives a command. It provides examples of each sentence type and has the reader identify the type of four example sentences. In conclusion, it reviews the four sentence types and explains the difference between a sentence and a fragment.

Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)

(This version of the presentation is oriented at a web performance audience, and includes some mobile design 101 content) Mobile Web Design is complicated, and several design paradigms have been created to help deal with the challenges the mobile landscape creates. Amongst other implications, each paradigm also carries its own performance pitfalls, which can turn a well designed site into a horribly slow user experience. This presentation covers the top design paradigms - Dedicated Websites (mdot) and Responsive Web Design, gives some background on each, and digs into the performance do's and don'ts for your design of choice.

responsive web designmobile web performance feomobile
Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster

This document discusses strategies for improving the performance of single page applications (SPAs). It begins by introducing common SPA frameworks and trends. It then discusses challenges like framework overhead and constant reinstallation that can degrade performance. Solutions presented include light first visits using skeleton pages, server-side rendering, virtual DOM libraries, JavaScript packaging, resource deferral, caching optimizations, and monitoring SPA-specific metrics. The document emphasizes the importance of choosing the right framework, designing for performance, and testing SPAs using modern techniques.

interactivefront endjmeter
Step 3: Consolidate JS/CSS Files - Visual

Fragmented




Consolidated




               Consolidation made it worse!

                          Faster ForwardTM    ©2012 Akamai
Consolidated vs. Fragmented - Test



                                                • 1 consolidated script
                                                • ~1 MB in size


• 10 scripts, with IDs from 1 - 10
• Each script weights ~100 KB
• Each script ends with:
 • document.write('Processed file ID @, time is ' + new Date());
                                  Faster ForwardTM                        ©2012 Akamai
Consolidated vs. Fragmented - Result
               Consolidated             Fragmented




Fragmented


Consolidated

                              Starts painting ~5
                               seconds earlier!
                                Faster ForwardTM     ©2012 Akamai
Consolidation & Progressive Processing

• Browsers only process JavaScript & CSS when fully loaded
 • Unlike HTML, which is processed (roughly) as soon as it arrives
• Consolidation delays the first script execution, CSS evaluation
 • Especially with many scripts of varying sizes
 • Possibly not always true for CSS
• This means Consolidation often delays dynamic requests
 • Generated by scripts, thus not seen until execution
 • Often results in a slower page
• Making consolidating “streaming” is doable, but hard
 • http://www.guypo.com/uncategorized/consolidation-not-simple-addition/

                                 Faster ForwardTM                    ©2012 Akamai

Recommended for you

Velocity spa faster_092116
Velocity spa faster_092116Velocity spa faster_092116
Velocity spa faster_092116

Making Single Page (SPA) Faster was a presentation done at Velocity NY 2016 It covers 3 main points: - selecting the right framework (performance oriented) - best practices and optimizations - monitoring

spa single page appsspavelocity conference
Boston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and YouBoston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and You

Joseph Morrissey and Matt Ringel from Akamai Technologies go a level deeper into web browser internals to show how a browser turns HTML into pixels, and what you can do with your web pages to make them easier to digest by the browser. We include the top 5 things we've found that make web site rendering slower, and what you can do to fix them.

web browserweb design and developmentweb page
Implementing Aqua Ion - Chris Schultz, Digi-Key
Implementing Aqua Ion - Chris Schultz, Digi-KeyImplementing Aqua Ion - Chris Schultz, Digi-Key
Implementing Aqua Ion - Chris Schultz, Digi-Key

Digi-Key, the top-rated and most visited Web site in the electronic distribution industry, migrated their catalog to a digital form a few years ago. Although site visitors were impressed with the design of the dynamic catalog, the retailer received complaints about poor performance. Join this session to hear how Digi-Key is working with Akamai and leveraging Aqua Ion to gain insight into user performance and help boost their online performance for their customers, while freeing up technical resources to work on more sophisticated site functionality and high-value projects. The speaker will share best practices on how they implement Akamai solutions, as well as the benefits they realize from using Akamai’s front-end optimization and real user monitoring features. See Chris Schultz's Edge Presentation: http://www.akamai.com/html/custconf/edgetv-commerce.html#beyond-middle-mile The Akamai Edge Conference is a gathering of the industry revolutionaries who are committed to creating leading edge experiences, realizing the full potential of what is possible in a Faster Forward World. From customer innovation stories, industry panels, technical labs, partner and government forums to Web security and developers' tracks, there’s something for everyone at Edge 2013. Learn more at http://www.akamai.com/edge

mediadigi-keycloud
Step 3a: Async Scripts

• Defer external script execution to onload
 • Often useful to defer download as well!
• Replace dependent inline scripts with event handlers
 • Invoked in “onload” of appropriate external script
 • No need to touch inline scripts with no dependencies
• Complications:
 • Scripts required for basic page functionality
 • Scripts that use document.write()
 • 3rd party scripts (you don’t know what they use…)
• Complications not as common in simpler mobile websites

                                 Faster ForwardTM         ©2012 Akamai
Step 3a: Simulation – remove combined.js




                                           No Visual
                                           Difference!


                        Faster ForwardTM        ©2012 Akamai
Step 3: Conclusions
• Consolidation is good and bad
 • Good: Reduces roundtrips
 • Bad: Hurts caching, progressive processing
• Consolidate with Care
 • Merge small files together, especially if functionally related
 • If you can, use Adaptive and Streaming Consolidation
    • http://www.guypo.com/uncategorized/consolidation-not-simple-addition/
• Procrastinate - Defer as much as you can
 • Often easier to do on Mobile websites
• Measure!!!


                                    Faster ForwardTM                          ©2012 Akamai
Step 4:
Faster ForwardTM   Retina Images
                           ©2012 Akamai

Recommended for you

Front End Optimization [Cloud Connect 2012]
Front End Optimization [Cloud Connect 2012]Front End Optimization [Cloud Connect 2012]
Front End Optimization [Cloud Connect 2012]

The document discusses front end optimization (FEO) which refers to techniques for improving the performance of how web pages load in browsers. It focuses on reducing the number of round trips, bytes transferred, and improving caching and page rendering. The document outlines specific FEO techniques companies can implement manually but notes it requires significant resources. It then discusses the emerging FEO automation industry and challenges around automating the process while avoiding breaking pages or optimization issues.

website performanceweb content optimizationsite acceleration
Clone your Network with OpenNebula
Clone your Network with OpenNebulaClone your Network with OpenNebula
Clone your Network with OpenNebula

Thomas Higdon from Akamai Technologies discusses how they use OpenNebula to clone virtual machine instances of Akamai's global content delivery network. This allows them to more quickly provision development and testing environments that mimic Akamai's production instances. OpenNebula manages the virtual machines and resources while an Akamai instance service exposes machine types and services. Teams can then use the same instance across development, QA, and testing stages to improve process unification.

opennebulaopennebula confakamai
OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...
OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...
OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...

Thomas Higdon from Akamai Technologies discusses how they use OpenNebula to clone virtual machine instances of Akamai's global content delivery network. This allows them to more quickly provision development and testing environments that mimic Akamai's production instances. OpenNebula manages the virtual machines and resources while an Akamai instance service exposes specific machine types and services. When changes need testing, they can clone an existing instance to a new environment rather than rebuilding it from scratch.

opennebulac12gnetways
Retina Images




                bg_header_retina.png – 56 KB
            1                                  2

            3                                  4
                    bg_header.png –
                    14KB


                          Faster ForwardTM         ©2012 Akamai
Lossless Image Compression

                                          • “Image Minification”
Retina:                                   • Sheds bytes without
                                            reducing quality
                                          • Sample techniques:
                                           •   Remove Geo data
                                           •   Remove Histogram data
Regular:                                   •   Remove unused colors
                                           •   Replace GIF with PNG-8
                                           •   …



                       Faster ForwardTM                           ©2012 Akamai
Lossy Image Compression

• Reduce quality without hurting User Experience
• For Desktop, reduce to high-end screen resolution
• For Mobile, reduce to display size & resolution
 • Known as “Responsive Images”

 Image    Origina   Lossless        “Desktop”         Reduce to      Reduce to
          l         Compression     Resolution        320px wide     128px wide

 Retina    56KB     48.2KB (14%)    26.6KB (53%)      6.8 KB (88%)   2.2KB (96%)

 Regula    14KB     11.5KB (18%)       7KB (50%)       7KB (50%)     2.2KB (85%)
 r
                                   Faster ForwardTM                     ©2012 Akamai
Responsive Images


                                                               128px,
                                                 240px, 6.8 KB 2.9 KB
                       320px, 10.6 KB

      480px, 21.3 KB

Site:
lonelyplanet.com
Device:
iPhone 4
Before:
867 KB
After:
570 KB                                      Full Res, 50.1 KB
                       Faster   ForwardTM                       ©2012 Akamai

Recommended for you

Chicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWDChicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWD

The document discusses responsive web design and how Akamai solutions can help address common problems with RWD. It describes strategies for RWD like adaptive delivery and responsive client-side design. Common issues with RWD include over-downloading content and image-related problems. Akamai solutions like adaptive images, responsive images, Edge Server Includes, and responsive server-side design can help optimize content delivery for different devices and networks. These solutions can improve page load times and the user experience compared to traditional RWD approaches.

akamai technologiesprofessional servicesrwd
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your siteAkamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site

The document discusses how Akamai's Dynamic Site Accelerator (DSA) can help websites address performance, scalability, security, and availability issues. DSA leverages Akamai's global edge network to speed page loading, optimize caching, improve TCP performance, and offload website infrastructure. It provides an example of how DSA helped Cathay Pacific boost online bookings and reduce infrastructure costs. In summary, DSA leverages Akamai's edge network to improve website performance, scalability, and availability while reducing infrastructure needs and costs.

akamai technologies零壹科技dsa
Responsive Web Demo with Akamai
Responsive Web Demo with AkamaiResponsive Web Demo with Akamai
Responsive Web Demo with Akamai

The document discusses how Akamai's responsive web design (RWD) and image optimization solutions can improve website performance for desktop and mobile users. It shows that Akamai's Ion Standard solution improved page load times by 92-99% and that Ion Premier improved load times by 125-235%. Pairing Ion Premier with additional image optimization and design tools improved load times even further by 272-400%.

Standardizing Responsive Images
                           @srcset



                          <picture>




             https://github.com/scottjehl/picturefill
                            Faster Forward
                                     TM
                                                        ©2012 Akamai
Responsive Images - Summary
• Smaller screens don’t benefit from high quality images
• Solution: Respond to screen size by reducing image quality
• Screen size detection usually done on client side
 • But same technique can be used on server-side
 • Examples: Sencha.io Src (Free), Akamai EIM (Commercial)
• Don’t forget CSS background images!
 • Implementation is easier – with a few catches we’ll discuss later…
• Optional: Lazy-load higher quality images
 • May defer them to onload
 • May load them on demand

                                 Faster ForwardTM                       ©2012 Akamai
Step 4a: Banner Image Compression impact


No Image
Optimization:



Lossy
Compression:



No Retina
Image:

                         Faster ForwardTM    ©2012 Akamai
Step 4: Conclusions

• Mobile screen size & resolution are an opportunity & a threat
 • Opportunity: Reduce bytes on smaller screens
 • Threat: Using Retina images broadly
• Lossless Image Compression should be a given
 • No trade-offs, just do it.
• Lossy Comp/Responsive Images avoid excessive quality
 • Avoid images too big for a user to appreciate (on this device)
 • Optionally load low quality images first, high quality images at onload
• Measure!!!
 • Show your designers the UX impact of every image quality change

                                  Faster ForwardTM                       ©2012 Akamai

Recommended for you

Akamai company profile
Akamai company profileAkamai company profile
Akamai company profile

This document discusses Akamai's content delivery network (CDN) and its peering relationships. It provides an overview of Akamai, describing its intelligent platform of over 150,000 servers worldwide. It explains how Akamai uses mapping rather than BGP routing to direct users to optimal edge servers. The document also discusses why Akamai peers directly with internet service providers - to improve performance for users, reduce costs, and increase reliability during high traffic events. Finally, it notes that peering benefits internet service providers too by enhancing content delivery and reducing transit fees.

akamai hosting technology
O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions
O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and PredictionsO'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions
O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions

Slides from Strangeloop president Joshua Bixby's O'Reilly webcast: At Velocity EU in October 2012, Strangeloop president Joshua Bixby will unveil findings from the first comprehensive study ever conducted of mobile performance over 3G networks. In this webcast, Joshua talks about why measuring 3G performance is important, and what kind of evolution we can expect to see from mobile networks, browsers, site development, and performance best practices in 2013.

mobile webpage speedweb performance
The Dark Side of Single Page Applications
The Dark Side of Single Page ApplicationsThe Dark Side of Single Page Applications
The Dark Side of Single Page Applications

The story of all the pitfalls we had while transferring FTBpro.com from the good old web to a Backbone single page application... and all the great solutions we've came up with

ruby on railsjavascript
iPhone Optimization: Summary
            Faster ForwardTM   ©2012 Akamai
Interim Summary - Actions
• Step 1: Improved Redirects
 • Replaced JS Redirect with HTTP Redirect
 • Merged redirect chains
• Step 2: Applied HTTP Compression
• Step 3: Consolidated JavaScript and CSS files
 • Async’d JavaScript files too
• Step 4: Compressed Images
 • Lossless Compression
 • Lossy Compression
 • No Retina Images


                                  Faster ForwardTM   ©2012 Akamai
Interim Summary - Acceleration




      Browsing www.slowes.org (including app redirect)
                          Faster ForwardTM               ©2012 Akamai
Step 5:
Android


          Faster ForwardTM   ©2012 Akamai

Recommended for you

PhoneGap Day EU 2017: Hybrid Ember Apps
PhoneGap Day EU 2017: Hybrid Ember AppsPhoneGap Day EU 2017: Hybrid Ember Apps
PhoneGap Day EU 2017: Hybrid Ember Apps

This document discusses building Phonegap apps with Ember and Ember Cordova. It covers why to use Ember and Cordova together, the default Ember project structure, routing, components, Ember Data, actions, and the Ember Cordova library. It also discusses structuring apps, performance best practices like managing reflows and animations, and debugging memory issues.

emberjscordovaember.js
BP209 doctors have scalpels, carpenters have hammers, ibm sametime develope...
BP209   doctors have scalpels, carpenters have hammers, ibm sametime develope...BP209   doctors have scalpels, carpenters have hammers, ibm sametime develope...
BP209 doctors have scalpels, carpenters have hammers, ibm sametime develope...

Often the hidden power of a platform lies in its Software Development Kits (SDKs) and IBM Sametime is no exception. IBM Sametime has one of the richest SDKs of any UC platform, and knowing about its capabilities can allow companies to understand further how they can fully exploit all of the capabilities Sametime offers. Come to this session to learn about the different SDK components and to see examples of how customers are using the SDK to integrate Sametime into their Communication Enabled Business Processes (CEBP)

epilio sametime sdk cebp
Configuring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web PerormanceConfiguring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web Perormance

Apache is the most popular web server in the world, yet its default configuration can't handle high traffic. Learn how to setup Apache for high performance sites and leverage many of its available modules to deliver a faster web experience for your users. Discover how Apache can max out a 1 Gbps NIC and how to serve over 140,000 pages per minute with a small Apache cluster. This presentation was given by Spark::red's founding partner Devon Hillard in March 2012 at the Boston Web Performance Meetup.

sparkred; spark::red; apache
Testing on Android

• No network Throttling on-device
 • iOS had the same problem until a few weeks ago (with iOS 6)
• Alternative: Tether to laptop, throttle there
 • Instructions on how to tether: http://pcapperf.appspot.com/
 • Unfortunately, newer Androids can’t connect through laptop
• Realistic alternative: Test w/out throttling
 • No 3G load times, but can find interesting data in Waterfall chart
 • Use Real User Measurement to monitor real world numbers
 • Use Mobitest for Android Browser, Remote Debugging for Chrome



                                 Faster ForwardTM                       ©2012 Akamai
Step 5: Android Test




 22 files
                                 Strange gap
 (vs. 14                          (~200 ms)
   on
iPhone)

                                               # Connections
                                                   Limit




            Both Retina &
             regular reqs
                            Faster ForwardTM                   ©2012 Akamai
Duplicate Requests on Android – Tim Kadlec’s Test




http://timkadlec.com/2012/04/media-query-asset-downloading-results/
                                        Faster Forward
                                                  TM
                                                                      ©2012 Akamai
Duplicate Requests on Android – Slowe’s

                                           …




                                           …




                        Faster ForwardTM       ©2012 Akamai

Recommended for you

Assessing Your Own Site Configuration
Assessing Your Own Site ConfigurationAssessing Your Own Site Configuration
Assessing Your Own Site Configuration

Being able to review and assess configurations is key in improving efficiency and performance for our websites. During this session, we will discuss and demonstrate how to review your Akamai configurations in order to move towards updated and efficient methods. In order to improve all aspects of websites, we will cover areas including images, protocols, DNS, caching, and more. Not only will we essentially teach you how to perform mini configuration assessments, but we will also walk through several basic steps using industry tools and Akamai solutions that can help address performance pitfalls within a website today. These tools will range anywhere from using WebPageTest, PageSpeed, to more Akamai focused areas such as Log Analysis, Portal Reports and other Akamai solutions.

Website Performance
Website PerformanceWebsite Performance
Website Performance

The document discusses website performance and optimization. It notes that nearly half of users expect a site to load within 2 seconds and will abandon a site taking longer than 3 seconds. Common issues causing poor performance are bloated templates, unnecessary code, and too many HTTP requests. Suggested optimizations include minimizing assets, prioritizing visible content, image optimization, caching, compression, and lazy loading. Case studies show significant speed improvements after implementing optimizations. Metrics like Speed Index measure how quickly visible content displays to influence perceived performance.

Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)

This document discusses web performance optimization and provides tips to improve performance. It emphasizes that performance is important for user experience, search engine optimization, conversion rates, and costs. It outlines common causes of performance issues like round-trip times, payload sizes, browser rendering delays, and inefficient JavaScript. Specific recommendations are given to optimize images, stylesheets, scripts, and browser rendering through techniques like compression, caching, deferred loading, and efficient coding practices. A variety of tools for measuring and improving performance are also listed.

pagespeedyslowperformance
Duplicate Requests - Solution
• One solution works (almost) everywhere…
 • As long as you support media queries…




                               Faster ForwardTM   ©2012 Akamai
Step 5a: Eliminate Duplicate Requests - Results




                         Faster ForwardTM         ©2012 Akamai
Android
 Mind the Gap…
• Theories                                                          Strange gap
 • It’s the weak mobile device…                                      (~200 ms)

     • But it doesn’t happen on iPhone!        Chrome
 • It’s the old Android browser…
     • Harder to test Chrome for Android
     • Let’s test with desktop Chrome
 • Ok, let’s test on Chrome for Android…
     • Using Remote Debugging                            Chrome for Android
      • https://developers.google.com/chrome
      /mobile/docs/debugging
    • On Nexus 7 Tablet, No gap!


                                     Faster ForwardTM                             ©2012 Akamai
Problem: Translate3D
                                                     combined.css
“The translate3d() CSS function
moves the position of the
element in the 3D space. This
transformation is characterized
by a 3-dimension vector whose
coordinates define how much it
moves in each direction”




                                  Faster ForwardTM       ©2012 Akamai

Recommended for you

Serverless Security: What's Left To Protect
Serverless Security: What's Left To ProtectServerless Security: What's Left To Protect
Serverless Security: What's Left To Protect

Serverless means handing off server management to the cloud platforms – along with their security risks. With the “pros” ensuring our servers are patched, what’s left for application owners to protect? As it turns out, quite a lot. This talk discusses the aspects of security serverless doesn’t solve, the problems it could make worse, and the tools and practices you can use to keep yourself safe. Required audience experience Basic knowledge of how FaaS and Serverless works Objective of the talk As many companies explore the world of serverless, it’s important they understand the aspects of security this new world helps them with, and the ones they need to care more about. This talk will provide a framework to understand how to prioritise and approach security for Serverless apps.

serverlesssecuritydevops
Securing Serverless - By Breaking In
Securing Serverless - By Breaking InSecuring Serverless - By Breaking In
Securing Serverless - By Breaking In

Guy Podjarny breaks into a vulnerable serverless application and exploits multiple weaknesses, helping better understand some of the mistakes people make, their implications, and how to avoid them. Video available on: https://www.infoq.com/presentations/serverless-security-2017

securityserverlesscontainers
Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?

Slides from my ServerlessConf Austin 2017. Serverless means handing off server management to the cloud platforms - along with their security risks. With the “pros” ensuring our servers are patched, what’s left for application owners to protect? As it turns out, quite a lot. This talk discusses the aspects of security serverless doesn’t solve, the problems it could make worse, and the tools and practices you can use to keep yourself safe

Step 5b: Remove translate3d calls
Chrome                              Android




                                                         Gap a tiny bit
                                                       smaller (~170 ms)




   • Results on iPhone, Nexus Tablet remain unchanged
     • Issue seems to occur only when Hardware Acceleration is not supported

                                    Faster ForwardTM                       ©2012 Akamai
Step 5: Conclusions

• Not all (mobile) browsers/devices are the same
 • Even if they’re WebKit based
• Don’t optimize things you’re not doing
 • Especially if you’re using hacks to do the optimization
• Say it with me: MEASURE!!!
 • In Mobile, you have to test on multiple devices
 • Android devices vary by OS Version, OEM, device…
 • Use analytics to find your top clients,




                                  Faster ForwardTM           ©2012 Akamai
Use Analytics to determine YOUR top devices

  Google Analytics




                        Faster ForwardTM      ©2012 Akamai
Summary
• Summary




            Faster ForwardTM   ©2012 Akamai

Recommended for you

Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)

Some of the very things that make JavaScript awesome can also leave it exposed. Guy Podjarny and Danny Grander walk through some sample security flaws unique to Node’s async nature and surrounding ecosystem (or especially relevant to it)—e.g., memory leaks via the buffer object, ReDoS and other algorithmic DoS attacks (which impact Node due to its single-threaded nature), and timing attacks leveraging the EventLoop—and show how these could occur in your own code or in npm dependencies.

node.jsdependenciesopen source
Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)

npm packages are awesome, but also introduce risk. This presentation explains how packages may introduce known vulnerabilities into your application, explains their impact, and most importantly, shows how to protect yourself. The few slides were complemented by running several vulnerability exploits against the vulnerable demo app Goof from here: https://github.com/Snyk/goof

node.jsnpmvulnerabilities
Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)

Building software today involves more assembly than actual coding. Much of our code is in fact pulled in open source packages, and the applications heavily rely on surrounding third party binaries. These third parties make us more productive - but they also introduce an enormous risk. Each third party component is a potential source of vulnerabilities or malicious code, each third party service a potential door into our system. This talk contains more information about this risk, create a framework for digesting and tackling it, and lists a myriad of tools that can help.

securityopen sourcethird party
What have we done?

• We optimized one home page in 5 steps:
 •   Step 1: Redirect Optimization
 •   Step 2: HTTP Optimization
 •   Step 3: JS/CSS Optimization
 •   Step 4: Image Optimization
 •   Step 5: Cross-Device Optimization
• We MEASURED during each step
 • Assuming less-than-stellar network conditions
• We made the page ~5x faster


                                  Faster ForwardTM   ©2012 Akamai
Manual FEO

        Original                        Optimized




          Original
         Original
      Original
     Original
   Original
 Original
Original




                     Faster ForwardTM          ©2012 Akamai
Automated FEO                         Pixie Dust

                 Slow,
 Web          Generic HTML
Server



• Automates much of the optimization process
 • Can’t fix everything, but can save a lot of effort
• Doesn’t replace performance awareness                 * Visual from
 • For example, measuring…                              Patrick Meenan
                                   Faster ForwardTM         ©2012 Akamai
Final Words

• A mobile page with few images != A fast page
• Mobile Site Common Pitfalls:
 • Slow and repeated redirects
 • Excess JavaScript & CSS
• Mobile Site Opportunities:
 • Reduce image size: Smaller Screen
 • Defer JS: Simpler content can be visually complete without it
• Measuring Is Critical
 • Test on different devices and browsers
 • Should be built into QA & Build System regression tests

                                 Faster ForwardTM                  ©2012 Akamai

Recommended for you

High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)

The web is becoming increasingly image rich. Between high-resolution mobile screens, Pinterest-style design, and big background graphics, the average image payload has more than doubled in the last three years. While visually appealing, these images carry a substantial performance cost, and — if not optimized correctly — can make a web experience slow and painful, no matter how beautiful it is. In this tutorial we’ll discuss ways that let you provide the eye-pleasing experience you want without sacrificing your site’s performance.You’ll learn about the three primary aspects of image optimization: - Image compression: how to best encode your images, delivering the same picture with the fewest bytes - Image loading: once your files are as small as they can be, we’ll cover the best ways to make them show up quickly in the browser - Operationalizing image optimization: different tools and techniques for integrating image optimization on your site Talk given at Velocity Conf EU 2015: http://velocityconf.com/devops-web-performance-eu-2015/public/schedule/detail/45013

imagesresponsive web designperformance
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)

When users use our sites, they put their faith in us. They trust we will keep their information from reaching others, believe we provided the information they see, and allow us to run (web) code on their devices. Using HTTPS to secure our conversations is a key part of maintaining this trust. If that’s not motivation enough, the web’s giants are actively promoting HTTPS, requiring it for features such as HTTP2 & ServiceWorker, using it for search engine ranking and more. To make the most of the web, you need to use HTTPS. This deck reviews what HTTPS is, discusses why you should prioritize using it, and cover some of the easiest (and most cost effective) steps to get started using HTTPS

securitysmashingconfhttps
High Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean SlowHigh Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean Slow

(slides from the O'Reilly webcast, see recording here: http://www.oreilly.com/pub/e/3425) The web is becoming increasingly image rich. Between high-resolution mobile screens, Pinterest-style design and big background graphics, the average image payload has more than doubled in the last three years. While visually appealing, these images carry a substantial performance cost, and — if not optimized correctly — can make a web experience slow and painful, no matter how beautiful it is. These slides discuss how you can provide the eye-pleasing experience you want without sacrificing your site's performance. You'll learn about the three primary aspects of image optimization: Image Compression: How to best encode your images, delivering the same picture with the fewest bytes. Image Loading: Once your files are as small as they can be, we'll cover the best ways to make them show up quickly in the browser. Image Operations: Different tools and techniques for integrating image optimization on your site.

performanceweb performanceimage
Thank You!
                    Questions?

    Step By Step Mobile Optimization

Guy Podjarny
@guypod
http://www.guypo.com/            Akamai Confidential

More Related Content

What's hot

Apache performance
Apache performanceApache performance
Apache performance
Devon Hillard
 
Faster web pages
Faster web pagesFaster web pages
Faster web pages
David Rodenas
 
Seatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case StudySeatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case Study
Stephen Thair
 
Aptimize SharePoint Datasheet
Aptimize SharePoint DatasheetAptimize SharePoint Datasheet
Aptimize SharePoint Datasheet
Armand Sultantono
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
Doug Sillars
 
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
elenae00
 
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Strangeloop
 
Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautiful
Doug Sillars
 
Vertically Challenged
Vertically ChallengedVertically Challenged
Vertically Challenged
Aurynn Shaw
 
Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slow
Doug Sillars
 
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Web Services
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
Maximiliano Firtman
 
Testing Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT Edinburgh
Doug Sillars
 
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive WebsitesComet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Joe Walker
 
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow
Doug Sillars
 
Velocity 2013: Extreme Image Optimization
Velocity 2013: Extreme Image OptimizationVelocity 2013: Extreme Image Optimization
Velocity 2013: Extreme Image Optimization
Akamai Technologies
 
Nantes when its just too slow
Nantes when its just too slowNantes when its just too slow
Nantes when its just too slow
Doug Sillars
 
Show104 buried treasure
Show104 buried treasureShow104 buried treasure
Show104 buried treasure
Mark Myers
 

What's hot (18)

Apache performance
Apache performanceApache performance
Apache performance
 
Faster web pages
Faster web pagesFaster web pages
Faster web pages
 
Seatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case StudySeatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case Study
 
Aptimize SharePoint Datasheet
Aptimize SharePoint DatasheetAptimize SharePoint Datasheet
Aptimize SharePoint Datasheet
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
 
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
 
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
 
Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautiful
 
Vertically Challenged
Vertically ChallengedVertically Challenged
Vertically Challenged
 
Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slow
 
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
 
Testing Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT Edinburgh
 
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive WebsitesComet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
 
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow
 
Velocity 2013: Extreme Image Optimization
Velocity 2013: Extreme Image OptimizationVelocity 2013: Extreme Image Optimization
Velocity 2013: Extreme Image Optimization
 
Nantes when its just too slow
Nantes when its just too slowNantes when its just too slow
Nantes when its just too slow
 
Show104 buried treasure
Show104 buried treasureShow104 buried treasure
Show104 buried treasure
 

Viewers also liked

Delta++ Reducing The Size Of Android Application Updates
Delta++ Reducing The Size Of Android Application UpdatesDelta++ Reducing The Size Of Android Application Updates
Delta++ Reducing The Size Of Android Application Updates
Papitha Velumani
 
Android Media Player Development
Android Media Player DevelopmentAndroid Media Player Development
Android Media Player Development
Talentica Software
 
3D Video Programming for Android
3D Video Programming for Android3D Video Programming for Android
3D Video Programming for Android
Yoss Cohen
 
Types Of Sentences Ppt
Types Of Sentences PptTypes Of Sentences Ppt
Types Of Sentences Ppt
Marie Semrow
 
Sentence Structure Ppt
Sentence Structure PptSentence Structure Ppt
Sentence Structure Ppt
andycinek
 
Sentence structure powerpoint
Sentence structure powerpointSentence structure powerpoint
Sentence structure powerpoint
Raja Mohan Krisnan
 
Types Of Sentences
Types Of SentencesTypes Of Sentences
Types Of Sentences
melissagkh
 

Viewers also liked (7)

Delta++ Reducing The Size Of Android Application Updates
Delta++ Reducing The Size Of Android Application UpdatesDelta++ Reducing The Size Of Android Application Updates
Delta++ Reducing The Size Of Android Application Updates
 
Android Media Player Development
Android Media Player DevelopmentAndroid Media Player Development
Android Media Player Development
 
3D Video Programming for Android
3D Video Programming for Android3D Video Programming for Android
3D Video Programming for Android
 
Types Of Sentences Ppt
Types Of Sentences PptTypes Of Sentences Ppt
Types Of Sentences Ppt
 
Sentence Structure Ppt
Sentence Structure PptSentence Structure Ppt
Sentence Structure Ppt
 
Sentence structure powerpoint
Sentence structure powerpointSentence structure powerpoint
Sentence structure powerpoint
 
Types Of Sentences
Types Of SentencesTypes Of Sentences
Types Of Sentences
 

Similar to Step by Step Mobile Optimization

Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)
Guy Podjarny
 
Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster
Boris Livshutz
 
Velocity spa faster_092116
Velocity spa faster_092116Velocity spa faster_092116
Velocity spa faster_092116
Manuel Alvarez
 
Boston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and YouBoston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and You
mattringel
 
Implementing Aqua Ion - Chris Schultz, Digi-Key
Implementing Aqua Ion - Chris Schultz, Digi-KeyImplementing Aqua Ion - Chris Schultz, Digi-Key
Implementing Aqua Ion - Chris Schultz, Digi-Key
Akamai Technologies
 
Front End Optimization [Cloud Connect 2012]
Front End Optimization [Cloud Connect 2012]Front End Optimization [Cloud Connect 2012]
Front End Optimization [Cloud Connect 2012]
Strangeloop
 
Clone your Network with OpenNebula
Clone your Network with OpenNebulaClone your Network with OpenNebula
Clone your Network with OpenNebula
NETWAYS
 
OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...
OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...
OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...
OpenNebula Project
 
Chicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWDChicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWD
Akamai Technologies
 
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your siteAkamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
零壹科技股份有限公司
 
Responsive Web Demo with Akamai
Responsive Web Demo with AkamaiResponsive Web Demo with Akamai
Responsive Web Demo with Akamai
Fran Albaladejo
 
Akamai company profile
Akamai company profileAkamai company profile
Akamai company profile
rahulp9999
 
O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions
O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and PredictionsO'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions
O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions
Strangeloop
 
The Dark Side of Single Page Applications
The Dark Side of Single Page ApplicationsThe Dark Side of Single Page Applications
The Dark Side of Single Page Applications
Dor Kalev
 
PhoneGap Day EU 2017: Hybrid Ember Apps
PhoneGap Day EU 2017: Hybrid Ember AppsPhoneGap Day EU 2017: Hybrid Ember Apps
PhoneGap Day EU 2017: Hybrid Ember Apps
Alex Blom
 
BP209 doctors have scalpels, carpenters have hammers, ibm sametime develope...
BP209   doctors have scalpels, carpenters have hammers, ibm sametime develope...BP209   doctors have scalpels, carpenters have hammers, ibm sametime develope...
BP209 doctors have scalpels, carpenters have hammers, ibm sametime develope...
Carl Tyler
 
Configuring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web PerormanceConfiguring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web Perormance
Spark::red
 
Assessing Your Own Site Configuration
Assessing Your Own Site ConfigurationAssessing Your Own Site Configuration
Assessing Your Own Site Configuration
Akamai Developers & Admins
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
Hugo Fonseca
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
Betclic Everest Group Tech Team
 

Similar to Step by Step Mobile Optimization (20)

Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)
 
Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster
 
Velocity spa faster_092116
Velocity spa faster_092116Velocity spa faster_092116
Velocity spa faster_092116
 
Boston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and YouBoston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and You
 
Implementing Aqua Ion - Chris Schultz, Digi-Key
Implementing Aqua Ion - Chris Schultz, Digi-KeyImplementing Aqua Ion - Chris Schultz, Digi-Key
Implementing Aqua Ion - Chris Schultz, Digi-Key
 
Front End Optimization [Cloud Connect 2012]
Front End Optimization [Cloud Connect 2012]Front End Optimization [Cloud Connect 2012]
Front End Optimization [Cloud Connect 2012]
 
Clone your Network with OpenNebula
Clone your Network with OpenNebulaClone your Network with OpenNebula
Clone your Network with OpenNebula
 
OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...
OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...
OpenNebulaConf 2013 - Keynote: Clone your Network with OpenNebula by Thomas H...
 
Chicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWDChicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWD
 
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your siteAkamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
 
Responsive Web Demo with Akamai
Responsive Web Demo with AkamaiResponsive Web Demo with Akamai
Responsive Web Demo with Akamai
 
Akamai company profile
Akamai company profileAkamai company profile
Akamai company profile
 
O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions
O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and PredictionsO'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions
O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions
 
The Dark Side of Single Page Applications
The Dark Side of Single Page ApplicationsThe Dark Side of Single Page Applications
The Dark Side of Single Page Applications
 
PhoneGap Day EU 2017: Hybrid Ember Apps
PhoneGap Day EU 2017: Hybrid Ember AppsPhoneGap Day EU 2017: Hybrid Ember Apps
PhoneGap Day EU 2017: Hybrid Ember Apps
 
BP209 doctors have scalpels, carpenters have hammers, ibm sametime develope...
BP209   doctors have scalpels, carpenters have hammers, ibm sametime develope...BP209   doctors have scalpels, carpenters have hammers, ibm sametime develope...
BP209 doctors have scalpels, carpenters have hammers, ibm sametime develope...
 
Configuring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web PerormanceConfiguring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web Perormance
 
Assessing Your Own Site Configuration
Assessing Your Own Site ConfigurationAssessing Your Own Site Configuration
Assessing Your Own Site Configuration
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
 

More from Guy Podjarny

Serverless Security: What's Left To Protect
Serverless Security: What's Left To ProtectServerless Security: What's Left To Protect
Serverless Security: What's Left To Protect
Guy Podjarny
 
Securing Serverless - By Breaking In
Securing Serverless - By Breaking InSecuring Serverless - By Breaking In
Securing Serverless - By Breaking In
Guy Podjarny
 
Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?
Guy Podjarny
 
Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)
Guy Podjarny
 
Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)
Guy Podjarny
 
Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)
Guy Podjarny
 
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
Guy Podjarny
 
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
Guy Podjarny
 
High Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean SlowHigh Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean Slow
Guy Podjarny
 
Responsive In The Wild, 2014
Responsive In The Wild, 2014Responsive In The Wild, 2014
Responsive In The Wild, 2014
Guy Podjarny
 
Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)
Guy Podjarny
 
Rules driven-delivery
Rules driven-deliveryRules driven-delivery
Rules driven-delivery
Guy Podjarny
 
Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)
Guy Podjarny
 
Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)
Guy Podjarny
 
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Guy Podjarny
 
Third Party Performance
Third Party PerformanceThird Party Performance
Third Party Performance
Guy Podjarny
 
A Picture Costs A Thousand Words
A Picture Costs A Thousand WordsA Picture Costs A Thousand Words
A Picture Costs A Thousand Words
Guy Podjarny
 
Unravelling Mobile Web Performance
Unravelling Mobile Web PerformanceUnravelling Mobile Web Performance
Unravelling Mobile Web Performance
Guy Podjarny
 
State Of Mobile Web Performance
State Of Mobile Web PerformanceState Of Mobile Web Performance
State Of Mobile Web Performance
Guy Podjarny
 

More from Guy Podjarny (19)

Serverless Security: What's Left To Protect
Serverless Security: What's Left To ProtectServerless Security: What's Left To Protect
Serverless Security: What's Left To Protect
 
Securing Serverless - By Breaking In
Securing Serverless - By Breaking InSecuring Serverless - By Breaking In
Securing Serverless - By Breaking In
 
Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?
 
Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)
 
Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)
 
Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)
 
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
 
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
 
High Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean SlowHigh Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean Slow
 
Responsive In The Wild, 2014
Responsive In The Wild, 2014Responsive In The Wild, 2014
Responsive In The Wild, 2014
 
Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)
 
Rules driven-delivery
Rules driven-deliveryRules driven-delivery
Rules driven-delivery
 
Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)
 
Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)
 
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
 
Third Party Performance
Third Party PerformanceThird Party Performance
Third Party Performance
 
A Picture Costs A Thousand Words
A Picture Costs A Thousand WordsA Picture Costs A Thousand Words
A Picture Costs A Thousand Words
 
Unravelling Mobile Web Performance
Unravelling Mobile Web PerformanceUnravelling Mobile Web Performance
Unravelling Mobile Web Performance
 
State Of Mobile Web Performance
State Of Mobile Web PerformanceState Of Mobile Web Performance
State Of Mobile Web Performance
 

Recently uploaded

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
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
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 

Recently uploaded (20)

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
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
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 

Step by Step Mobile Optimization

  • 1. Step By Step Mobile Optimization Guy Podjarny @guypod http://www.guypo.com/ Akamai Confidential
  • 2. Agenda • Review Primary Tools • Introduce Demo Mobile Site • Optimize Site in 5 steps • Describe a problem • Show its impact • Discuss the cause • Try out one or more solutions • Summary • Q&A Faster ForwardTM ©2012 Akamai
  • 3. Disclaimers • Performance Numbers are never perfect • Numbers vary widely for any given website • In this deck, the numbers are helpers, not absolutes • This presentation focuses on Mobile • Focus is on problems more common in Mobile websites • I’m intentionally not tackling common Front-End Optimization • This presentation focuses on dedicated Mobile websites • I won’t be discussing Responsive Web Design (RWD) here • If you want to learn about RWD performance, come back tomorrow Faster ForwardTM ©2012 Akamai
  • 4. Faster ForwardTM The Tools ©2012 Akamai
  • 5. Waterfall Chart Doc Complete, Waterfall Resource (a.k.a. onload, Chart (Request/Response) Start Render Load Time) Faster ForwardTM ©2012 Akamai
  • 6. WebPageTest • Free Perf Measurement Tool • www.webpagetest.org • Open Source • Can be privately installed • Desktop Browsers • IE 6-9, Chrome, Firefox • Uses Traffic Shaping • Over faster networks Faster ForwardTM ©2012 Akamai
  • 7. “Mobile”-izing WebPageTest with Scripts • Use Chrome or Firefox as agent • Chrome more similar to real mobile browsers • Resize window to smartphone size • setviewportsize 320 480 • No way to fake a Retina display • Fake a smartphone user-agent • setUserAgent <Some-Smartphone-UA> • Doesn’t update navigator.userAgent • Navigate to the relevant site… • navigate http://www.your-site.com/ Faster ForwardTM ©2012 Akamai
  • 8. Akamai Mobitest • Free Mobile Web Perf Measurement Tool • http://mobitest.akamai.com/ • Open-Source • http://bit.ly/open-source-mobitest • Mobile Browsers • iOS, Android • No Traffic Shaping • Builds on WebPageTest • Can share a single server Faster ForwardTM ©2012 Akamai
  • 9. iOS 6 Network Link Conditioner – On Device! How to Enable: http://www.neglecte dpotential.com/201 2/09/ios6-network- link-conditioner/ Faster ForwardTM ©2012 Akamai
  • 10. Introduction: SLowe’s Commerce • Demo eCommerce application • with dedicated Mobile site • Built on Magento • Took the Magento Demo Site • Made some slight modifications Faster ForwardTM ©2012 Akamai
  • 11. Initial Waterfall Chart • URL: www.slowes.org • Device: iPhone 4 • OS: iOS 6 • Speed: 3G • Apple’s Definition • Throttled with Network Link Conditioner Faster ForwardTM ©2012 Akamai
  • 12. Initial Filmstrip • 16 seconds to start render • 18 seconds to “Visually Complete” Faster ForwardTM ©2012 Akamai
  • 13. • Slide about redirects, maybe an eschel drawing? Step 1: Redirects Faster ForwardTM ©2012 Akamai
  • 14. JavaScript Redirect - The Good mobileDetect.js: • Client-side browser detection • Easy to deploy • Compared to server changes • “Future Friendly” • Can test screen width alongside UAs Faster ForwardTM ©2012 Akamai
  • 15. Client-Side Detection Often Recommended Nokia: Mobify: Faster ForwardTM ©2012 Akamai
  • 16. JavaScript Redirect – The Bad • Slow! • Redirect only happens after JS is downloaded and executed • Unnecessary download of other resources • Some above the JS in the HTML • Some downloaded early by speculative parser Faster ForwardTM ©2012 Akamai
  • 17. JS Redirect => HTTP Redirect mobileDetect.js Apache CDN Fallback: Inline Script on Desktop page CMS/App Server Faster ForwardTM ©2012 Akamai
  • 18. Optimization Results - Waterfall • Real page starts loading after ~1.5 secs vs 5.5 secs • ~4 Seconds saved • No downloading of excess CSS and JS • All Good: Less requests, less bytes, less delay Faster ForwardTM ©2012 Akamai
  • 19. Optimization Results - Visual • ~5 seconds acceleration to start render Faster ForwardTM ©2012 Akamai
  • 20. Merging Redirect Chains Only one redirect • Combine all redirects to one redirect • Requires combining Application and Mobile logic Mobile Logic ^/(?:magento/)?(.*) /magento/ Application Logic Faster ForwardTM ©2012 Akamai
  • 21. Avoiding Redirects: Serving Client-Specific HTML • Instead of redirecting, return client-aware HTML • Same URL returns HTML by client • Caution: Caching appliances & CDNs must be tuned • Requires consistent paths across all variations No Redirect Faster ForwardTM ©2012 Akamai
  • 22. Step 1: Conclusions • Redirects have a real cost • Especially in high latency mobile networks • HTTP Redirects are much faster than JS Redirects • Use HTTP Redirects • Use JS Redirects as backup only • 1 Redirect is faster than… more than 1 redirect • Merge redirect chains whenever possible • No redirects are faster than even 1 redirect! • Consider serving different HTML to different clients on one site Faster ForwardTM ©2012 Akamai
  • 23. Step 2: Faster ForwardTM Compression ©2012 Akamai
  • 24. Lack of HTTP Compression (Gzip) 160 KB (!!!) No Gzip Faster ForwardTM ©2012 Akamai
  • 25. Solution: Apply Compression • Gzip compression built into most elements in the stack • App Server, Web Server, Load Balancer, CDN… Faster ForwardTM ©2012 Akamai
  • 26. Compression matters more on Mobile! • Mobile websites have less images • JS & CSS account for more of the bytes • Therefore, more of the bytes is compressible • Therefore, compression matters more on Mobile. • (Practically) all mobile browsers support compression • Kinda true on desktop these days • Download bandwidth on mobile is smaller than broadband • Latency on mobile is higher on broadband Faster ForwardTM ©2012 Akamai
  • 27. TCP Slow Start (diagrams from John Rauser) Early TCP Slow Start Delayed ACK Max Packet Size: 1460 bytes http://velocityconf.com/velocity2010/public/schedule/detail/11792 Faster Forward TM ©2012 Akamai
  • 28. TCP Slow Start (diagrams from John Rauser) • Time to deliver ~72KB: • Fiber (4ms RTT): ~24ms • DSL (50ms RTT): ~300ms • 3G (200ms RTT): 1.2 seconds (!!!) • Time to deliver ~300KB: • Fiber (4ms RTT): ~40ms • DSL (50ms RTT): ~500ms • 3G (200ms RTT): 2 seconds (!!!) • Slow-Start is per connection http://velocityconf.com/velocity2010/public/schedule/detail/11792 Faster Forward TM ©2012 Akamai
  • 29. Step 2: Conclusions • Compression is a critical optimization • Easy to implement, especially in Mobile • All mobile browsers (that you care about) support it • Especially important on Mobile • Compressible content (JS,CSS…) accounts for a bigger part of the page • High latency makes large download slow • High packet loss makes large downloads unbearable Faster ForwardTM ©2012 Akamai
  • 30. Step 3: Consolidation Faster ForwardTM ©2012 Akamai
  • 31. Step 3: Fragmented JS/CSS Files 2 CSS Files 16 JS Files Faster ForwardTM ©2012 Akamai
  • 32. Step 3: Consolidate CSS & JS Files Faster ForwardTM ©2012 Akamai
  • 33. Step 3: Consolidate JS/CSS Files - Visual Fragmented Consolidated Consolidation made it worse! Faster ForwardTM ©2012 Akamai
  • 34. Consolidated vs. Fragmented - Test • 1 consolidated script • ~1 MB in size • 10 scripts, with IDs from 1 - 10 • Each script weights ~100 KB • Each script ends with: • document.write('Processed file ID @, time is ' + new Date()); Faster ForwardTM ©2012 Akamai
  • 35. Consolidated vs. Fragmented - Result Consolidated Fragmented Fragmented Consolidated Starts painting ~5 seconds earlier! Faster ForwardTM ©2012 Akamai
  • 36. Consolidation & Progressive Processing • Browsers only process JavaScript & CSS when fully loaded • Unlike HTML, which is processed (roughly) as soon as it arrives • Consolidation delays the first script execution, CSS evaluation • Especially with many scripts of varying sizes • Possibly not always true for CSS • This means Consolidation often delays dynamic requests • Generated by scripts, thus not seen until execution • Often results in a slower page • Making consolidating “streaming” is doable, but hard • http://www.guypo.com/uncategorized/consolidation-not-simple-addition/ Faster ForwardTM ©2012 Akamai
  • 37. Step 3a: Async Scripts • Defer external script execution to onload • Often useful to defer download as well! • Replace dependent inline scripts with event handlers • Invoked in “onload” of appropriate external script • No need to touch inline scripts with no dependencies • Complications: • Scripts required for basic page functionality • Scripts that use document.write() • 3rd party scripts (you don’t know what they use…) • Complications not as common in simpler mobile websites Faster ForwardTM ©2012 Akamai
  • 38. Step 3a: Simulation – remove combined.js No Visual Difference! Faster ForwardTM ©2012 Akamai
  • 39. Step 3: Conclusions • Consolidation is good and bad • Good: Reduces roundtrips • Bad: Hurts caching, progressive processing • Consolidate with Care • Merge small files together, especially if functionally related • If you can, use Adaptive and Streaming Consolidation • http://www.guypo.com/uncategorized/consolidation-not-simple-addition/ • Procrastinate - Defer as much as you can • Often easier to do on Mobile websites • Measure!!! Faster ForwardTM ©2012 Akamai
  • 40. Step 4: Faster ForwardTM Retina Images ©2012 Akamai
  • 41. Retina Images bg_header_retina.png – 56 KB 1 2 3 4 bg_header.png – 14KB Faster ForwardTM ©2012 Akamai
  • 42. Lossless Image Compression • “Image Minification” Retina: • Sheds bytes without reducing quality • Sample techniques: • Remove Geo data • Remove Histogram data Regular: • Remove unused colors • Replace GIF with PNG-8 • … Faster ForwardTM ©2012 Akamai
  • 43. Lossy Image Compression • Reduce quality without hurting User Experience • For Desktop, reduce to high-end screen resolution • For Mobile, reduce to display size & resolution • Known as “Responsive Images” Image Origina Lossless “Desktop” Reduce to Reduce to l Compression Resolution 320px wide 128px wide Retina 56KB 48.2KB (14%) 26.6KB (53%) 6.8 KB (88%) 2.2KB (96%) Regula 14KB 11.5KB (18%) 7KB (50%) 7KB (50%) 2.2KB (85%) r Faster ForwardTM ©2012 Akamai
  • 44. Responsive Images 128px, 240px, 6.8 KB 2.9 KB 320px, 10.6 KB 480px, 21.3 KB Site: lonelyplanet.com Device: iPhone 4 Before: 867 KB After: 570 KB Full Res, 50.1 KB Faster ForwardTM ©2012 Akamai
  • 45. Standardizing Responsive Images @srcset <picture> https://github.com/scottjehl/picturefill Faster Forward TM ©2012 Akamai
  • 46. Responsive Images - Summary • Smaller screens don’t benefit from high quality images • Solution: Respond to screen size by reducing image quality • Screen size detection usually done on client side • But same technique can be used on server-side • Examples: Sencha.io Src (Free), Akamai EIM (Commercial) • Don’t forget CSS background images! • Implementation is easier – with a few catches we’ll discuss later… • Optional: Lazy-load higher quality images • May defer them to onload • May load them on demand Faster ForwardTM ©2012 Akamai
  • 47. Step 4a: Banner Image Compression impact No Image Optimization: Lossy Compression: No Retina Image: Faster ForwardTM ©2012 Akamai
  • 48. Step 4: Conclusions • Mobile screen size & resolution are an opportunity & a threat • Opportunity: Reduce bytes on smaller screens • Threat: Using Retina images broadly • Lossless Image Compression should be a given • No trade-offs, just do it. • Lossy Comp/Responsive Images avoid excessive quality • Avoid images too big for a user to appreciate (on this device) • Optionally load low quality images first, high quality images at onload • Measure!!! • Show your designers the UX impact of every image quality change Faster ForwardTM ©2012 Akamai
  • 49. iPhone Optimization: Summary Faster ForwardTM ©2012 Akamai
  • 50. Interim Summary - Actions • Step 1: Improved Redirects • Replaced JS Redirect with HTTP Redirect • Merged redirect chains • Step 2: Applied HTTP Compression • Step 3: Consolidated JavaScript and CSS files • Async’d JavaScript files too • Step 4: Compressed Images • Lossless Compression • Lossy Compression • No Retina Images Faster ForwardTM ©2012 Akamai
  • 51. Interim Summary - Acceleration Browsing www.slowes.org (including app redirect) Faster ForwardTM ©2012 Akamai
  • 52. Step 5: Android Faster ForwardTM ©2012 Akamai
  • 53. Testing on Android • No network Throttling on-device • iOS had the same problem until a few weeks ago (with iOS 6) • Alternative: Tether to laptop, throttle there • Instructions on how to tether: http://pcapperf.appspot.com/ • Unfortunately, newer Androids can’t connect through laptop • Realistic alternative: Test w/out throttling • No 3G load times, but can find interesting data in Waterfall chart • Use Real User Measurement to monitor real world numbers • Use Mobitest for Android Browser, Remote Debugging for Chrome Faster ForwardTM ©2012 Akamai
  • 54. Step 5: Android Test 22 files Strange gap (vs. 14 (~200 ms) on iPhone) # Connections Limit Both Retina & regular reqs Faster ForwardTM ©2012 Akamai
  • 55. Duplicate Requests on Android – Tim Kadlec’s Test http://timkadlec.com/2012/04/media-query-asset-downloading-results/ Faster Forward TM ©2012 Akamai
  • 56. Duplicate Requests on Android – Slowe’s … … Faster ForwardTM ©2012 Akamai
  • 57. Duplicate Requests - Solution • One solution works (almost) everywhere… • As long as you support media queries… Faster ForwardTM ©2012 Akamai
  • 58. Step 5a: Eliminate Duplicate Requests - Results Faster ForwardTM ©2012 Akamai
  • 59. Android Mind the Gap… • Theories Strange gap • It’s the weak mobile device… (~200 ms) • But it doesn’t happen on iPhone! Chrome • It’s the old Android browser… • Harder to test Chrome for Android • Let’s test with desktop Chrome • Ok, let’s test on Chrome for Android… • Using Remote Debugging Chrome for Android • https://developers.google.com/chrome /mobile/docs/debugging • On Nexus 7 Tablet, No gap! Faster ForwardTM ©2012 Akamai
  • 60. Problem: Translate3D combined.css “The translate3d() CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction” Faster ForwardTM ©2012 Akamai
  • 61. Step 5b: Remove translate3d calls Chrome Android Gap a tiny bit smaller (~170 ms) • Results on iPhone, Nexus Tablet remain unchanged • Issue seems to occur only when Hardware Acceleration is not supported Faster ForwardTM ©2012 Akamai
  • 62. Step 5: Conclusions • Not all (mobile) browsers/devices are the same • Even if they’re WebKit based • Don’t optimize things you’re not doing • Especially if you’re using hacks to do the optimization • Say it with me: MEASURE!!! • In Mobile, you have to test on multiple devices • Android devices vary by OS Version, OEM, device… • Use analytics to find your top clients, Faster ForwardTM ©2012 Akamai
  • 63. Use Analytics to determine YOUR top devices Google Analytics Faster ForwardTM ©2012 Akamai
  • 64. Summary • Summary Faster ForwardTM ©2012 Akamai
  • 65. What have we done? • We optimized one home page in 5 steps: • Step 1: Redirect Optimization • Step 2: HTTP Optimization • Step 3: JS/CSS Optimization • Step 4: Image Optimization • Step 5: Cross-Device Optimization • We MEASURED during each step • Assuming less-than-stellar network conditions • We made the page ~5x faster Faster ForwardTM ©2012 Akamai
  • 66. Manual FEO Original Optimized Original Original Original Original Original Original Original Faster ForwardTM ©2012 Akamai
  • 67. Automated FEO Pixie Dust Slow, Web Generic HTML Server • Automates much of the optimization process • Can’t fix everything, but can save a lot of effort • Doesn’t replace performance awareness * Visual from • For example, measuring… Patrick Meenan Faster ForwardTM ©2012 Akamai
  • 68. Final Words • A mobile page with few images != A fast page • Mobile Site Common Pitfalls: • Slow and repeated redirects • Excess JavaScript & CSS • Mobile Site Opportunities: • Reduce image size: Smaller Screen • Defer JS: Simpler content can be visually complete without it • Measuring Is Critical • Test on different devices and browsers • Should be built into QA & Build System regression tests Faster ForwardTM ©2012 Akamai
  • 69. Thank You! Questions? Step By Step Mobile Optimization Guy Podjarny @guypod http://www.guypo.com/ Akamai Confidential

Editor's Notes

  1. http://www.webpagetest.org/result/120921_8cd1f274aa7b958fee1b5a661dd51c53/
  2. http://www.webpagetest.org/result/120921_8cd1f274aa7b958fee1b5a661dd51c53/
  3. http://www.webpagetest.org/result/120923_931cc33e267a396623e8b2a73a7e6899/
  4. http://www.webpagetest.org/result/120923_931cc33e267a396623e8b2a73a7e6899/
  5. http://www.webpagetest.org/result/120923_931cc33e267a396623e8b2a73a7e6899/
  6. Mobile: http://www.webpagetest.org/result/120923_07169161eb2055f79de620d6ea0e35cf/Desktop: http://www.webpagetest.org/result/120924_4N_951c2812948674c8d86d55988c2f318b/
  7. http://www.webpagetest.org/result/120924_4774b4d2c8c04c1bf8da2d1107ab82fb/
  8. http://www.webpagetest.org/result/120924_9fc90ade1aaf50641326f591c0a4225b/
  9. http://www.webpagetest.org/result/120924_9fc90ade1aaf50641326f591c0a4225b/
  10. http://www.webpagetest.org/result/120924_a65cb6638bec7386f6f67214e3b553c5/
  11. http://www.webpagetest.org/result/120924_6ad62427f7bb87acc5ce7ef7de922b55/
  12. http://www.webpagetest.org/result/120924_714a05fe5454c1999f435370ff0db47c/
  13. Before: http://www.webpagetest.org/result/120921_8cd1f274aa7b958fee1b5a661dd51c53/After: http://www.webpagetest.org/result/120924_99ff4b412d5b162ee6c27a4649f8821e/Compare:
  14. http://www.webpagetest.org/video/compare.php?tests=120925_41b25ecaa0a1e540b1faf96f2592edce-r%3A4-c%3A0&amp;thumbSize=200&amp;ival=1000&amp;end=doc
  15. http://timkadlec.com/2012/04/media-query-asset-downloading-results/http://www.stevesouders.com/blog/2010/02/12/5e-speculative-background-images/
  16. http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  17. http://www.webpagetest.org/result/120925_56dd6ec22be26f2dc82780b14a905941/
  18. Chrome: http://www.webpagetest.org/result/120926_9E_f45fd32b410326f282117d78f706afb4/