Web Performance in Action: Building Fast Web Pages

by Jeremy Wagner

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

Genres: Technology, Programming, Website Design

650 pages, Kindle Edition

Published December 22, 2016

Reviews

[Cristian · Rating 4 out of 5]

Overall I found it an excellent resource on the subject, although it fell short in a couple of areas, reason why I'm giving it four stars instead of five. Among these are:

1. The treatments on compression deal only with dynamic compression of assets, no mention of statically compressing to serve them later was made.

2. Although it deals with brotli, zopfli is nowhere to be found (maybe precisely because static compression was missing).

3. When dealing with optimizing images, it barely mentions pngquant (on the last chapter, when automating optimizations), and doesn't recommend zopflipng, probably the best two tools to really squeeze pngs down; nor mozjpeg for jpgs.

4. It doesn't really emphasize the difference between lossless and lossy compression (which tools do which type of compression with what settings), his wording sometimes being misleading.

5. It doesn't deal with useful flags for the different programs to fine tune compression (e.g. svgo's --multipass, pgnquant's --speed 1).

Leaving these aside, the book has a deep enough treatment of HTTP/2, mentioning some classical recommendations to reduce HTTP/1.1 requests (such as image sprites), and why these are anti-patterns in HTTP/2, it deals with browser support for different features, how to polyfill in most scenarios, cites several useful resources to dig further; the list goes on.

All in all I highly recommend it for anyone interested on how to make websites leaner and faster. I hesitate a bit not giving it five stars, but hopefully the critiques mentioned above will be mended in future editions.

[Alona 2156 · Rating 5 out of 5]

I really liked this book, although I had already some prior knowledge in the subject I guess I could not fully understand some concepts. And some things really surprised me. Performance of css selectors for example, for some reason I thought the more nesting you do the more work it requires from the browser to find respective nodes in DOM. And it seems that in reality nesting doesn't matter at all, what matters are css combinators like +, >, ~, they are indeed less performant. And it's just a small example from everything this book taught me.

The only drawback I can see is that when telling about automation it talks about Gulp and not Webpack. Although I guess it's due to the book being written like 4 years ago. I would love to see another edition concentrating more on JS and modern frameworks, their performance and overall issues. On the whole I'm happy with this book.

[Leandro Melendez · Rating 4 out of 5]

Una excelente guia para entender elementos necesarios para mejorar el performance de una aplicacion o pagina web.

Lo unico que en lo personal brinque un poco fueron los ejemplos practicos. Puede ser mucho para los que solo buscamos aprender del tema, y no como hacerlo a profundidad. Pero en si es bueno que el libro contenga esos tips.

Requerido para ingenieros de performance.

[Johnny · Rating 3 out of 5]

The book now feels dated, even when many of the explained solutions still works and help you to improve the performance of your web application.

[Majid Hajian · Rating 4 out of 5]

if you are a beginner in web optimization that is good start otherwise, it's just good to read. All in all, I enjoy reading that.

[Carter · Rating 4 out of 5]

I am not a web performance guru; most of the issues seem to have to do with network vs compute, and on the balance, what tradeoffs can be "hinted" at on the web page, whose data is, situated on the server to optimize responsiveness and performance. At issue, is scaling of images primarily in this book, and the size of the .jpg/.bmp etc. The book is math light, which is unfortunate- most of the calculations are likely quite simple. Perhaps this is a bit of an overstatement, but rough napkin ballpark figures are likely easy to arrive at.

[Tristan Gibbs · Rating 5 out of 5]

Great introduction to optimizing web pages and there performance. You first learn 'the why', then 'the how'. Tools and techniques are introduced for learning how to assess and optimize your sites pages and assets (assets like: html, css, js, fonts, images, and so on). I think this is a very important topic.