Lean Websites

Barbara Bermes

Description

A practical book on website performance for web developers, concentrating mainly on front-end performance improvement. It covers plenty of solid theory, but is also packed with useful, real world hints and tips that you can use on your sites today.

Topics covered include:

• User experience, design and performance
• Measuring and monitoring performance
• Setting up a page weight budget
• Network and server improvements
• Optimizing images and video
• Optimizing scripts and third party content
• Lean DOM operations

The book also comes with a handy "cheat sheet" summarizing many of the key tips contained within the book.

Sujets

• Web Programming
• Computers
• Informatique

Informations

• Publié par: SitePoint
• Date de parution: 02 juin 2015
• Nombre de lectures: 3
• EAN13: 9781457192913
• Langue: English
• Poids de l'ouvrage: 10 Mo

Extrait

•
•
•
•
•
•
•
BERMES
WEB PERFORMANCE
LEAN WEBSITES
IF YOU WISH TO TRAVEL
FAR AND FAST, TRAVEL LIGHT
As websites become much more complex and sophisticated, YOUR AUTHOR
they’re also getting heavier and slower. This book, Lean
Websites, will help you to understand what causes websites to
be slow, and how to maximize efficiency while maintaining the LEANquality and user experience originally envisioned for your site.

This is a practical book on website performance for web
developers, concentrating mainly on front-end performance
improvement. It covers plenty of solid theory, and is also packed WEBSITES
with useful, real world hints and tips that you can use on your
sites today. BY BARBARA BERMESBARBARA
BERMES
You’ll learn:
Barbara has been an ardent
performance advocate and web
technologist for many years, working
on a variety of web projects, most User experience, design and performance
recently for the Canadian
Broadcasting Corporation. As an Measuring and monitoring performance
international speaker, a contributor to
jsmanners, and the organizer of the Setting up a page weight budget Toronto Web Performance Meetup,
Barbara shares her passion and
Network and server improvements knowledge of web performance with
the community.
Optimizing images and video
Optimizing scripts and third party content
Lean DOM operations
And much more…
WEB DEVELOPMENT
PRINT ISBN: 978-0-9922794-6-2SITEPOINT BOOKS EBOOK ISBN: 978-0-9941826-6-1
Advocate best practice techniques
Lead you through practical examples
Provide working code for your website
Make learning easy and fun
USD $39.95 CAD $45.95 BECAUSE WEB PERFORMANCE SIMPLY MATTERS
Visit us on the Web at sitepoint.com or for sales and support email [e-mail]
Safety Area: All Text, Logos & Barcode should remain inside the Pink Dotted Lines
Bleed Area: All Backgrounds should extend to, but not past, the Blue Dotted LinesLEAN WEB SITES
B Y BARBARA BERMESii
Lean Websites
by Barbara Bermes
Copyright© 2015 SitePoint Pty. Ltd.
Product Manager: Simon Mackie English Editor: Ralph Mason
Technical Editor: Andrew Betts Cover Designer: Alex Walker
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted
in any form or by any means, without the prior written permission of the publisher, except in the case
of brief quotations embodied in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein.
However, the information contained in this book is sold without warranty, either express or implied.
Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any
damages to be caused either directly or indirectly by the instructions contained in this book, or by the
software or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only
in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of
the trademark.
Published by SitePoint Pty. Ltd.
48 Cambridge Street Collingwood
VIC Australia 3066
Web: www.sitepoint.com
Email: [e-mail]
ISBN 978-0-9922794-6-2 (print)
ISBN 978-0-9941826-6-1 (ebook)
Printed and bound in the United States of Americaiii
About Barbara Bermes
Barbara has been an ardent performance advocate and web technologist for many years,
working on a variety of web projects, most recently for the Canadian Broadcasting Corporation.
As an international speaker, a contributor to jsmanners, and the organizer of the Toronto
Web Performance Meetup, Barbara shares her passion and knowledge of web performance
with the community.
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web
professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles,
and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile
development, design, and more.To you, who thinks she can't do
it— you absolutely can!
Pleasetrustandfollowyourheart.Table of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Acknowledgements xix
Want to take your learning further? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
Chapter 1 Performance Simply Matters . . . . . . . . . 1
A Lean Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
The Psychology of Speed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
What Is “Too Slow”, and When Do Websites “Feel” Slow? . . . . . . . . . 2
Maister's First Law of Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Abandonment Rate: When Your Users Decide to Leave . . . . . . . . . . . 5
Response Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Speed Matters: Everybody Cares, Even Google . . . . . . . . . . . . . . . . . . . . . . 7
Cool Down . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Chapter 2 User Experience and
Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Warm Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
UX Principles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Information Architecture and Wireframes . . . . . . . . . . . . . . . . . . . . . . . . . 10
Design for Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Perceived and Preemptive Web Performance . . . . . . . . . . . . . . . . . . . . . . 12viii
The Performance Point System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Measurable Performance Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Case Study: Time Magazine Website . . . . . . . . . . . . . . . . . . . . . . . . . 15
Cool Down . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Chapter 3 Measuring & Monitoring
Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Warm Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Measuring Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
HTTP Archive: Tracking Performance Trends . . . . . . . . . . . . . . . . . . . 23
Useful Performance Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Dedicated Perceived Performance Metrics . . . . . . . . . . . . . . . . . . . . 32
Anatomy of an HTTP Transaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Unpredictable Side Effects: Connection Speed, Bandwidth and
Latency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Monitoring Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Synthetic Measurements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Real User Monitoring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Comparing RUM and Synthetic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Cool Down . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Chapter 4 Performance Boot Camp Setup . . . . . . 57
Warm Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Measure First, Then Optimize Towards a Goal . . . . . . . . . . . . . . . . . . . . . . 58
Your Website's Waterfall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Performance Monitoring: Set up Your Performance Dashboard . . . . . . . 60
Create Your Private HTTP Archive . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Create Your Private RUM Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Set Up Alerts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72ix
Set up a Performance Budget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Competitive Comparison 76
Create Business Hypotheses and Prove Them . . . . . . . . . . . . . . . . . . 78
List and Commit to Your Performance Metrics . . . . . . . . . . . . . . . . . 79
Cool Down . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Chapter 5 Mastering Lean HTTP Requests . . . . . 83
Warm Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Understanding How the Browser Works . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Critical Rendering Path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Optimizing the Critical Rendering Path . . . . . . . . . . . . . . . . . . . . . . . 89
Reducing HTTP Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
(Smart) Concatenation 95
Image Spriting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .