Bruno Skvorc - The Web Performance Collection

Performance simply matters. Technology may allow us to go bigger, but maybe not necessarily be better when it comes to performance. Now is the time to utilize the amazing tools that are available to us for making websites and applications faster, and to learn how to improve user experience and satisfaction.

This collection contains four books:

• Front-end Performance is a collection of practical articles on front-end website performance for front-end developers. It's packed with useful, real world hints and tips that you can use on your sites today.
• Back-end Performance is a collection of articles on back-end website performance for web developers. It outlines useful strategies and practical advice.
• Performance Tools contains tutorials on some of the most popular and powerful website performance tools available.
• Performance Project contains a series of practical, real-world tutorials, all based around a single project: a simple image gallery blog. We'll build the project, and then run through a series of performance optimization processes; by the time we're done, we'll have achieved very significant performance improvements.

This collection is for developers who wish to build sites and apps that run faster. Youll need to be familiar with HTML and CSS and have a reasonable level of understanding of JavaScript in order to follow the discussion, and for book 2, Back-end Performance, you'll need some understanding of server-side development.

Code in this book is displayed using a fixed-width font, like so:

Where existing code is required for context, rather than repeat all of it, will be displayed:

Some lines of code should be entered on one line, but weve had to wrap them because of page constraints. An indicates a line break that exists for formatting purposes only, and should be ignored:

Youll notice that weve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

The question "which browsers should my website/app support?" isoften raised by clients and developers. The simple answer is a list ofthe top N mainstream applications. But has that policy becomeirrelevant?

The top ten desktop browsers according toStatCounter for May 2017 were:

1. Chrome 59.37% market share
2. Firefox 12.76%
3. Safari 10.55%
4. IE 8.32%
5. Edge 3.42%
6. Opera 1.99%
7. Android (tablet) 1.24%
8. Yandex Browser 0.48%
9. UC Browser 0.41%
10. Coc Coc 0.33%

Mobile now accounts for 54.25% of all webuseso we also need to examine the top ten phone browsers:

1. Chrome 49.23%
2. Safari 17.73%
3. UC Browser 15.89%
4. Samsung Internet 6.58%
5. Opera 5.03%
6. Android 3.75%
7. IEMobile 0.68%
8. BlackBerry 0.26%
9. Edge 0.15%
10. Nokia 0.12%

The worldwide statistics don't tell the whole story:

• Patterns vary significantly across regions. For example, Yandex isthe second most-used Russian browser (12.7% share). Sogou is thethird most-used browser in China (6.5%). Opera Mobile/Mini has a 28%share in Africa.
• New browser releases appear regularly. Chrome, Firefox and Operareceive updates every six weeks; it would be impractical to checkversions going back more than a few months.
• The same browsers can work differently across devices and operatingsystems. Chrome is available for various editions of Windows, macOS,Linux, Android, iOS and ChromeOS, but it's not the same applicationeverywhere.
• There is an exceedingly long tail of old and new, weird andwonderful browsers on a range of devices including games consoles,ebook readers and smart TVs.
• Your site's analytics will never match global statistics.

Despite the organic variety of applications, all browsers have the samegoal: to render web pages. They achieve this with a rendering engineand there is some cross-pollination:

1. Webkit is used in Safari on macOS and iOS.
2. Blink is a fork of Webkit now used in Chrome, Opera, Vivaldi andBrave.
3. Gecko is used in Firefox.
4. Trident is used in Internet Explorer.
5. EdgeHTML is an update of Trident used in Edge.

The majority of browsers use one of these engines. They're differentprojects with diverse teams but the companies (mostly) collaborate viathe W3C to ensure new technologies are adopted by everyone in the sameway. Browsers are closer than they've ever been, and modern smartphoneapplications are a match for their desktop counterparts. However, no twobrowsers render in quite the same way. The majority of differences aresubtle, but they become more pronounced as you move toward cutting-edgetechnologies. A particular feature may be fully implemented in onebrowser, partially implemented in another, and non-existent elsewhere.