Mobile Web Performance Optimization电子书

Mobile Web Performance Optimization

Table of Contents

Mobile Web Performance Optimization

Credits

About the Author

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the color images of this book

Errata

Piracy

Questions

1. Pillars of Mobile Web Performance Optimization

A brief history of mobile development

Three main pillars

Battery

How a 3G wireless state machine works

How a 4G LTE wireless state machine works

Opening and closing connections

Speed

Bandwidth

Available browsers

Safari

Chrome

Internet Explorer

Firefox

Opera mini

Mobile OS

Apple iOS

Google Android

Microsoft Windows Phone 8

BlackBerry 10 OS

Summary

2. Mobile Web Optimization Essentials

Mobile-only websites versus responsive websites

HTTP requests

Combined files

CSS sprites

Image maps

Remove duplicate scripts

Enable Gzip compression

Image size matters

Resize your images to correct image resolution

Reduce the file size

Image compression tools

Tiny PNG

ImageOptim

Kraken

Unnecessary contents

Clean design

Duplicate content

Why design and UX are important

Summary

3. How to Optimize Your Mobile Website

Use of HTML5 and CSS3

Hardware acceleration and the Graphics Processing Unit

HTML5 form attributes and input types

Using web storage in place of cookies

Using CSS3 effects instead of requesting heavy images

Border-radius for rounded corners

Box-shadow for drop shadows and glow

Linear and radial gradients

Transform properties for rotation

Understanding CSS Filter Effects

CSS animation versus JavaScript

CSS animations

Iconic fonts

Font Awesome icons

IcoMoon icons

How to use media queries

Displaying none in CSS

Video and images via media queries

CSS preprocessors

SASS and LESS

Variables

SASS

LESS

Partials

SASS and LESS

Mixins

SASS

LESS

Minifying CSS and JavaScript

Minifying CSS

Minifying JavaScript

Summary

4. Caching and Optimizing

Caching

Cache-Control

Content prefetching

Make favicon icon small and cacheable

File order of external style sheets and scripts

Empty source and link attributes

CSS and JavaScript frameworks

Bootstrap

Zurb Foundation

UIkit

Semantic-UI

Susy

jQuery

AngularJS

Ember

Aurelia

Knockout.js

How to optimize JavaScript

Load only what is needed

Reduce the number of DOM elements

Summary

5. Monitoring and Debugging Our Website

Profiling tools

GPU Overdraw Walkthrough

GPU Rendering Walkthrough

A browser's DevTools performance

Remote debugging

Performance tools in Firefox, Safari, and IE

Firefox Developer Tools

IE 11 Developer Tools

Safari Developer Toolbar

The Google Chrome emulator

Google PageSpeed Insights

YSlow

Summary

6. Managing Third-Party Components

Eliminating 404 errors and missing assets

HTTP 300, 400, and 500 codes

Content Delivery Network

Third-party plugins

Opening connection

Closing connection

Offloading to Wi-Fi

Screen rotations

Flash files

Summary

7. Tips and Tricks

Built for performance

When to optimize

Invest for performance

Design tools

Performing actions optimistically

Move bits when no one is watching

Less work for the end user

New Relic

We can't predict the future, nevertheless embrace it

Summary

Index