Book Reviews - Mobile Web Performance Optimization

Key Features

• 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

Book Description

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.

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

About the Author

S. S. Niranga is a senior tech lead at Netstarter Pvt Ltd, and he has more than 9 years of experience as a software engineer and a web developer. During this period, he has built more than 300 websites including numerous e-commerce websites, such as JAX Tyres, ActiveSkin, Athlete foots, JVC, Pegasus, and the world's first Magento 2 website, Venroy. Also, he is an active developer on Upwork as well.
Niranga is a certified Magento frontend developer, a Microsoft technical specialist, and a scrum master. Currently, he is pursuing a master's degree in IT at the Sri Lanka Institute of Information Technology.
Niranga has done a few Tech Talk sessions regarding web optimization and e-commerce. This is his first effort as an author.
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
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
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
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
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
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
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

Book Reviews - Mobile Web Performance Optimization