O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Mobile Web Performance Optimization

Book Description

Deliver a better mobile user experience by improving and optimizing your website – follow these practical steps for cutting-edge application development

About This Book

  • Optimize your website or application for an improved mobile performance
  • Learn how to create lightweight, intuitive mobile UI and make sure it's supported by a robust application architecture
  • Find out how to improve the performance of your applications by asking the right design questions at each stage in the development workflow

Who This Book Is For

This book has been created for web developers who want to optimize their website for today’s mobile users. If you understand just how important user experience is, this book is for you – it will help you throughout the entire optimization process.

What You Will Learn

  • Learn the three pillars of mobile performance
  • Find out how to ask – and answer – crucial design questions such as ‘mobile or responsive?’
  • Learn how to minify CSS and JavaScript for improved performance
  • Monitor and debug your website with the leading browser testing tools
  • Explore the impact of caching on performance – and improve it using JavaScript and CSS frameworks
  • Make third-party plugins your friend – avoid common issues and pitfalls

In Detail

With users increasingly accessing the web on mobile devices, it’s crucial to make sure your website is built to seamlessly fit this radical change in user behavior. Mobile Web Performance Optimization is designed to help you do exactly that – it’s been created to help you build fast, and mobile-user-friendly websites and applications. Featuring guidance through a range of techniques and tools essential to modern mobile development, this accessible guide will make sure you’re delivering a seamless and intuitive experience for your website’s users.

Begin by exploring the fundamental components of mobile web design and website optimization, before learning how to put the concepts into practice. Featuring cross-platform solutions, insights on developing lightweight yet robust UI, and insights on how to successfully manage data, this application development book takes you through every stage in the development process – so you can be confident that you’re asking the right questions and using the best tools in the most effective way.

By the end, you’ll understand implicitly what it means to ‘build for performance’- you’ll be a more confident developer, capable of building projects that adapt to a changing world.

Style and approach

This book takes a step-by-step approach to mobile web optimization, explaining the topics in a conversational and easy-to-follow style. Each topic includes detailed explanations of the basic and advanced features of mobile web optimization.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Mobile Web Performance Optimization
    1. Table of Contents
    2. Mobile Web Performance Optimization
    3. Credits
    4. About the Author
    5. About the Reviewer
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the color images of this book
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Pillars of Mobile Web Performance Optimization
      1. A brief history of mobile development
      2. Three main pillars
        1. Battery
          1. How a 3G wireless state machine works
          2. How a 4G LTE wireless state machine works
          3. Opening and closing connections
        2. Speed
        3. Bandwidth
      3. Available browsers
        1. Safari
        2. Chrome
        3. Internet Explorer
        4. Firefox
        5. Opera mini
      4. Mobile OS
        1. Apple iOS
        2. Google Android
        3. Microsoft Windows Phone 8
        4. BlackBerry 10 OS
      5. Summary
    9. 2. Mobile Web Optimization Essentials
      1. Mobile-only websites versus responsive websites
        1. HTTP requests
        2. Combined files
        3. CSS sprites
        4. Image maps
        5. Remove duplicate scripts
        6. Enable Gzip compression
      2. Image size matters
        1. Resize your images to correct image resolution
        2. Reduce the file size
        3. Image compression tools
          1. Tiny PNG
          2. ImageOptim
          3. Kraken
      3. Unnecessary contents
        1. Clean design
        2. Duplicate content
      4. Why design and UX are important
      5. Summary
    10. 3. How to Optimize Your Mobile Website
      1. Use of HTML5 and CSS3
        1. Hardware acceleration and the Graphics Processing Unit
        2. HTML5 form attributes and input types
        3. Using web storage in place of cookies
        4. Using CSS3 effects instead of requesting heavy images
          1. Border-radius for rounded corners
          2. Box-shadow for drop shadows and glow
          3. Linear and radial gradients
          4. Transform properties for rotation
        5. Understanding CSS Filter Effects
      2. CSS animation versus JavaScript
        1. CSS animations
      3. Iconic fonts
        1. Font Awesome icons
        2. IcoMoon icons
      4. How to use media queries
      5. Displaying none in CSS
      6. Video and images via media queries
      7. CSS preprocessors
        1. SASS and LESS
          1. Variables
            1. SASS
            2. LESS
          2. Partials
            1. SASS and LESS
          3. Mixins
            1. SASS
            2. LESS
      8. Minifying CSS and JavaScript
        1. Minifying CSS
        2. Minifying JavaScript
      9. Summary
    11. 4. Caching and Optimizing
      1. Caching
        1. Cache-Control
        2. Content prefetching
        3. Make favicon icon small and cacheable
      2. File order of external style sheets and scripts
      3. Empty source and link attributes
      4. CSS and JavaScript frameworks
        1. Bootstrap
        2. Zurb Foundation
        3. UIkit
        4. Semantic-UI
        5. Susy
        6. jQuery
        7. AngularJS
        8. Ember
        9. Aurelia
        10. Knockout.js
      5. How to optimize JavaScript
      6. Load only what is needed
      7. Reduce the number of DOM elements
      8. Summary
    12. 5. Monitoring and Debugging Our Website
      1. Profiling tools
        1. GPU Overdraw Walkthrough
        2. GPU Rendering Walkthrough
      2. A browser's DevTools performance
        1. Remote debugging
      3. Performance tools in Firefox, Safari, and IE
        1. Firefox Developer Tools
        2. IE 11 Developer Tools
        3. Safari Developer Toolbar
      4. The Google Chrome emulator
      5. Google PageSpeed Insights
      6. YSlow
      7. Summary
    13. 6. Managing Third-Party Components
      1. Eliminating 404 errors and missing assets
      2. HTTP 300, 400, and 500 codes
      3. Content Delivery Network
      4. Third-party plugins
      5. Opening connection
      6. Closing connection
      7. Offloading to Wi-Fi
      8. Screen rotations
      9. Flash files
      10. Summary
    14. 7. Tips and Tricks
      1. Built for performance
      2. When to optimize
      3. Invest for performance
      4. Design tools
      5. Performing actions optimistically
      6. Move bits when no one is watching
      7. Less work for the end user
      8. New Relic
      9. We can't predict the future, nevertheless embrace it
      10. Summary
    15. Index