Web Performance in Action : Building Faster Web Pages

Annotation SummaryWeb Performance in Action is your companion guide to making websites faster. You'll 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. Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. About the TechnologyNifty features, hip design, and clever marketing are great, but your website will flop if visitors think it's slow. Network conditions can be unpredictable, and with today's 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 BookWeb 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. You'll master optimal rendering techniques, tips for decreasing your site's footprint, and technologies like HTTP/2 that take your website's speed from merely adequate to seriously fast. Along the way, you'll learn how to create an automated workflow to accomplish common optimization tasks and speed up development in the process. What's InsideFoolproof performance-boosting techniquesOptimizing images and fontsHTTP/2 and how it affects your optimization workflowAbout the ReaderThis book assumes that you're familiar with HTML, CSS, and JavaScript. Many examples make use of Git and Node.js. About the AuthorJeremy Wagner is a professional front-end web developer with over ten years of experience. Foreword by Ethan Marcotte. Table of ContentsUnderstanding web performanceUsing assessment toolsOptimizing CSSUnderstanding critical CSSMaking images responsiveGoing further with imagesFaster fontsKeeping JavaScript lean and fastBoosting performance with service workersFine-tuning asset deliveryLooking to the future with HTTP/2Automating optimization with gulp 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 Client’s Website 1.2.3 Simulating a Network Connection 1.3 Auditing the Client’s Website 1.4 Optimizing the Client’s 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 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 Chrome’s 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 3 Optimizing CSS 3.1 Don’t 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 Don’t 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 Google’s Mobile-Friendly Guidelines 3.2.4 Verifying a Site’s 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 3.3.7 Using Faster Selectors 3.3.8 Constructing and Running the Benchmark 3.3.9 Examining the Benchmark Results 3.3.10 Using Flexbox Where Possible 3.3.11 Comparing Box Model and Flexbox Styles 3.3.12 Examining the Benchmark Results 3.4 Working with CSS Transitions 3.4.1 Using CSS Transitions 3.4.2 Observing CSS Transition Performance 3.4.3 Optimizing Transitions with the will-change Property 3.5 Summary 4 Understanding Critical CSS 4.1 What Does Critical CSS Solve? 4.1.1 Understanding the Fold 4.1.2 Understanding Render Blocking 4.2 How Does Critical CSS Work? 4.2.1 Loading Above-the-Fold Styles 4.2.2 Loading Below-the-Fold Styles 4.3 Implementing Critical CSS 4.3.1 Getting the Recipe Website Up and Running 4.3.2 Identifying and Separating Above-the-Fold CSS 4.3.3 Loading Below-the-Fold CSS 4.4 Weighing the Benefits 4.5 Making Maintainability Easier 4.6 Considerations for Multipage Websites 4.7 Summary 5 Making Images Responsive 5.1 Why Think About Image Delivery? 5.2 Understanding Image Types and Their Applications 5.2.1 Working with Raster Images 5.2.2 Working with SVG Images 5.2.3 Knowing What Image Formats to Use 5.3 Image Delivery in CSS 5.3.1 Targeting Displays in CSS by Using Media Queries 5.3.2 Targeting High DPI Displays with Media Queries 5.3.3 Using SVG Background Images in CSS 5.4 Image Delivery in HTML 5.4.1 The Universal max-width Rule for Images 5.4.2 Using srcset 5.4.3 Using the Element 5.4.4 Polyfilling Support with Picturefill 5.4.5 Using SVG in HTML 5.5 Summary 6 Going Further with Images 6.1 Using Image Sprites 6.1.1 Getting Up and Running 6.1.2 Generating the Image Sprite 6.1.3 Using the Generated Sprite 6.1.4 Considerations for Image Sprites 6.1.5 Falling Back to Raster Image Sprites with Grumpicon 3.4 Working with CSS Transitions 3.4.1 Using CSS Transitions 3.4.2 Observing CSS Transition Performance 3.4.3 Optimizing Transitions with the will-change Property 3.5 Summary 4 Understanding Critical CSS 4.1 What Does Critical CSS Solve? 4.1.1 Understanding the Fold 4.1.2 Understanding Render Blocking 4.2 How Does Critical CSS Work? 4.2.1 Loading Above-the-Fold Styles 4.2.2 Loading Below-the-Fold Styles 4.3 Implementing Critical CSS 4.3.1 Getting the Recipe Website Up and Running 4.3.2 Identifying and Separating Above-the-Fold CSS 4.3.3 Loading Below-the-Fold CSS 4.4 Weighing the Benefits 4.5 Making Maintainability Easier 4.6 Considerations for Multipage Websites 4.7 Summary 5 Making Images Responsive 5.1 Why Think About Image Delivery? 5.2 Understanding Image Types and Their Applications 5.2.1 Working with Raster Images 5.2.2 Working with SVG Images 5.2.3 Knowing What Image Formats to Use 5.3 Image Delivery in CSS 5.3.1 Targeting Displays in CSS by Using Media Queries 5.3.2 Targeting High DPI Displays with Media Queries 5.3.3 Using SVG Background Images in CSS 5.4 Image Delivery in HTML 5.4.1 The Universal max-width Rule for Images 5.4.2 Using srcset 5.4.3 Using the Element 5.4.4 Polyfilling Support with Picturefill 5.4.5 Using SVG in HTML 5.5 Summary 6 Going Further with Images 6.1 Using Image Sprites 6.1.1 Getting Up and Running 6.1.2 Generating the Image Sprite 6.1.3 Using the Generated Sprite 6.1.4 Considerations for Image Sprites 6.1.5 Falling Back to Raster Image Sprites with Grumpicon 6.2 Reducing Images 6.2.1 Reducing Raster Images with imagemin 6.2.2 Optimizing SVG Images 6.3 Encoding Images with WebP 6.3.1 Encoding Lossy WebP Images with imagemin 6.3.2 Encoding Lossless WebP Images with imagemin 6.3.3 Supporting Browsers that Don’t Support WebP 6.4 Lazy Loading Images 6.4.1 Configuring the Markup 6.4.2 Writing the Lazy Loader 6.4.3 Accommodating Users Without JavaScript 6.5 Summary 7 Faster Fonts 7.1 Using Fonts Wisely 7.1.1 Selecting Fonts and Font Variants 7.1.2 Rolling Your Own @font-face Cascade 7.2 Compressing EOT and TTF Font Formats 7.3 Subsetting Fonts 7.3.1 Manually Subsetting Fonts 7.3.2 Delivering Font Subsets Using the unicode-range Property 7.4 Optimizing the Loading of Fonts 7.4.1 Understanding Font-Loading Problems 7.4.2 Using the CSS font-display Property 7.4.3 Using the Font-Loading API 7.4.4 Using Font Face Observer as a Fallback 7.5 Summary 8 Keeping JavaScript Lean and Fast 8.1 Affecting Script-Loading Behavior 8.1.1 Placing the Element Properly 8.1.2 Working with Asynchronous Script Loading 8.1.3 Using async 8.1.4 Using async Reliably with Multiple Scripts 8.2 Using Leaner jQuery-Compatible Alternatives 8.2.1 Comparing the Alternatives 8.2.2 Exploring the Contenders 8.2.3 Comparing File Size 8.2.4 Comparing Performance 8.2.5 Implementing an Alternative 8.2.6 Using Zepto 8.2.7 Understanding Caveats on Using Shoestring or Sprint 8.3 Getting by Without jQuery 8.3.1 Checking for the DOM to Be Ready 8.3.2 Selecting Elements and Binding Events 8.3.3 Using classList to Manipulate Classes on Elements 8.3.4 Reading and Modifying Element Attributes and Content 8.3.5 Making AJAX Requests with the Fetch API 8.3.6 Using the Fetch API 8.3.7 Polyfilling the Fetch API 8.4 Animating with requestAnimationFrame 8.4.1 requestAnimationFrame at a Glance 8.4.2 Timer Function-Driven Animations and requestAnimationFrame 8.4.3 Comparing Performance 8.4.4 Implementing requestAnimationFrame 8.4.5 Dropping in Velocity.js 8.5 Summary 9 Boosting Performance with Service Workers 9.1 What Are Service Workers? 9.2 Writing Your First Service Worker 9.2.1 Installing the Service Worker 9.2.2 Registering the Service Worker 9.2.3 Intercepting and Caching Network Requests 9.2.4 Measuring the Performance Benefits 9.2.5 Tweaking Network Request Interception Behavior 9.3 Updating Your Service Worker 9.3.1 Versioning Your Files 9.3.2 Cleaning Up Old Caches 9.4 Summary 10 Fine-Tuning Asset Delivery 10.1 Compressing Assets 10.1.1 Following Compression Guidelines 10.1.2 Using Brotli Compression 10.2 Caching Assets 10.2.1 Understanding Caching 10.2.2 Crafting an Optimal Caching Strategy 10.2.3 Invalidating Cached Assets 10.3 Using CDN Assets 10.3.1 Using CDN-Hosted Assets 10.3.2 What to Do If a CDN Fails 10.3.3 Verifying CDN Assets with Subresource Integrity 10.4 Using Resource Hints 10.4.1 Using the preconnect Resource Hint 10.4.2 Using the prefetch and preload Resource Hints 10.4.3 Using the prerender Resource Hint 10.5 Summary 11 Looking to the Future with HTTP/2 11.1 Understanding Why We Need HTTP/2 11.1.1 Understanding the Problem with HTTP/1 11.1.2 Solving Common HTTP/1 Problems via HTTP/2 11.1.3 Writing a Simple HTTP/2 Server in Node 11.1.4 Observing the Benefits 11.2 Exploring How Optimization Techniques Change for HTTP/2 11.2.1 Asset Granularity and Caching Effectiveness 11.2.2 Identifying Performance Antipatterns for HTTP/2 11.3 Sending Assets Preemptively with Server Push 11.3.1 Understanding Server Push and How It Works 11.3.2 Using Server Push 11.3.3 Measuring Server Push Performance 11.4 Optimizing for Both HTTP/1 and HTTP/2 11.4.1 How HTTP/2 Servers Deal with HTTP/2-Incapable Browsers 11.4.2 Segmenting Your Users 11.4.3 Serving Assets According to Browser Capability 11.5 Summary 12 Automating Optimization with gulp 12.1 Introducing gulp 12.1.1 Why Should I Use a Build System? 12.1.2 How gulp Works 12.2 Laying Down the Foundations 12.2.1 Structuring Your Project’s Folders 12.2.2 Installing gulp and Its Plugins 12.3 Writing gulp Tasks 12.3.1 The Anatomy of a gulp Task 12.3.2 Writing the Core Tasks 12.3.3 Writing the Utility Tasks 12.4 Going a Little Further with gulp Plugins 12.5 Summary Appendix A Tools Reference Appendix B Native Equivalents of Common jQuery Functionality Index Web Performance in Action is your companion guide to making websites faster. You'll 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 it's slow. Network conditions can be unpredictable, and with today's 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. You'll master optimal rendering techniques, tips for decreasing your site's footprint, and technologies like HTTP/2 that take your website's speed from merely adequate to seriously fast. Along the way, you'll learn how to create an automated workflow to accomplish common optimization tasks and speed up development in the process. What's 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 you're 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 Nifty features, hip design, and clever marketing are great, but your website will flop if visitors think it's slow. Network conditions can be unpredictable, and with today's 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. 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. You'll master optimal rendering techniques, tips for decreasing your site's footprint, and technologies like HTTP/2 that take your website's speed from merely adequate to seriously fast. Along the way, you'll learn how to create an automated workflow to accomplish common optimization tasks and speed up development in the process.--Page 4 of cover