Jeremy Wagner - Web Performance in Action: Building Faster Web Pages

Web Performance in Action: Building Fast Web Pages

by Jeremy L. Wagner

Publisher: Manning Publications

Release Date: December 2016

ISBN: 9781617293771

Topic: Web Development

Summary

Web Performance in Action is your companion guide to making websites faster. Youll learn techniques that speed the delivery of your site's assets to the user, increase rendering speed, decrease the overall footprint of your site, as well as how to build a workflow that automates common optimization techniques.

About the Technology

Nifty features, hip design, and clever marketing are great, but your website will flop if visitors think its slow. Network conditions can be unpredictable, and with todays sites being bigger than ever, you need to set yourself apart from the competition by focusing on speed. Achieving a high level of performance is a combination of front-end architecture choices, best practices, and some clever sleight-of-hand. This book will demystify all these topics for you.

About the Book

Web Performance in Action is your guide to making fast websites. Packed with Aha! moments and critical details, this book teaches you how to create performant websites the right way. Youll master optimal rendering techniques, tips for decreasing your sites footprint, and technologies like HTTP/2 that take your websites speed from merely adequate to seriously fast. Along the way, youll learn how to create an automated workflow to accomplish common optimization tasks and speed up development in the process.

Whats Inside

Foolproof performance-boosting techniques

Optimizing images and fonts

HTTP/2 and how it affects your optimization workflow

About the Reader

This book assumes that youre familiar with HTML, CSS, and JavaScript. Many examples make use of Git and Node.js.

About the Author

Jeremy Wagner is a professional front-end web developer with over ten years of experience.

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact

Special Sales Department

Manning Publications Co.

20 Baldwin Road

PO Box 761

Shelter Island, NY 11964

Email: orders@manning.com

2017 by Manning Publications Co. All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.

Recognizing the importance of preserving what has been written, it is Mannings policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine.

Development editor: Susanna Kline

Review editor: Ivan Martinovi

Technical development editor: Nick Watts

Project editor: Kevin Sullivan

Copyeditor: Sharon Wilkey

Proofreader: Elizabeth Martin

Technical proofreader: David Fombella Pombal

Typesetter: Gordan Salinovic

Cover designer: Marija Tudor

ISBN 9781617293771

Printed in the United States of America

1 2 3 4 5 6 7 8 9 10 EBM 21 20 19 18 17 16

Copyright

Brief Table of Contents

Table of Contents

Foreword

Preface

Acknowledgments

About this Book

About the Author

About the Cover Illustration

Chapter 1. Understanding web performance

Chapter 2. Using assessment tools

Chapter 3. Optimizing CSS

Chapter 4. Understanding critical CSS

Chapter 5. Making images responsive

Chapter 6. Going further with images

Chapter 7. Faster fonts

Chapter 8. Keeping JavaScript lean and fast

Chapter 9. Boosting performance with service workers

Chapter 10. Fine-tuning asset delivery

Chapter 11. Looking to the future with HTTP/2

Chapter 12. Automating optimization with gulp

Appendix A. Tools reference

Appendix B. Native equivalents of common jQuery functionality

Index

List of Figures

List of Tables

List of Listings

Copyright

Brief Table of Contents

Table of Contents

Foreword

Preface

Acknowledgments

About this Book

About the Author

About the Cover Illustration

Chapter 1. Understanding web performance

1.1. Understanding web performance

1.1.1. Web performance and the user experience

1.1.2. How web browsers talk to web servers

1.1.3. How web pages load

1.2. Getting up and running

1.2.1. Installing Node.js and Git

1.2.2. Downloading and running the clients website

1.2.3. Simulating a network connection

1.3. Auditing the clients website

1.4. Optimizing the clients website

1.4.1. Minifying assets

1.4.2. Using server compression

1.4.3. Optimizing images

1.5. Performing the final weigh-in

1.6. Summary

Chapter 2. Using assessment tools

2.1. Evaluating with Google PageSpeed Insights

2.1.1. Appraising website performance

2.1.2. Using Google Analytics for bulk reporting

2.2. Using browser-based assessment tools

2.3. Inspecting network requests

2.3.1. Viewing timing information

2.3.2. Viewing HTTP request and response headers

2.4. Rendering performance-auditing tools

2.4.1. Understanding how browsers render web pages

2.4.2. Using Google Chromes Timeline tool

2.4.3. Identifying problem events: thy enemy is jank

2.4.4. Marking points in the timeline with JavaScript

2.4.5. Rendering profilers in other browsers

2.5. Benchmarking JavaScript in Chrome

2.6. Simulating and monitoring devices

2.6.1. Simulating devices in the desktop web browser

2.6.2. Debugging websites remotely on Android devices

2.6.3. Debugging websites remotely on iOS devices

2.7. Creating custom network throttling profiles

2.8. Summary

Chapter 3. Optimizing CSS

3.1. Dont talk much and stay DRY

3.1.1. Write shorthand CSS

3.1.2. Use shallow CSS selectors

3.1.3. Culling shallow selectors

3.1.4. LESS is more and taming SASS

3.1.5. Dont repeat yourself

3.1.6. Going DRY

3.1.7. Finding redundancies with csscss

3.1.8. Segment CSS

3.1.9. Customize framework downloads

3.2. Mobile-first is user-first

3.2.1. Mobile-first vs. desktop-first

3.2.2. Mobilegeddon

3.2.3. Using Googles mobile-friendly guidelines

3.2.4. Verifying a sites mobile-friendliness

3.3. Performance-tuning your CSS

3.3.1. Avoiding the @import declaration

3.3.2. @import serializes requests

3.3.3.parallelizes requests

3.3.4. Placing CSS in the

3.3.5. Preventing the Flash of Unstyled Content

3.3.6. Increasing rendering speed