Ilya’s book is online. Read it for free
Performance is a feature.
This book provides a hands-on overview of what every web developer needs to know about the various types of networks (WiFi, 3G/4G), transport protocols (UDP, TCP, and TLS), application protocols (HTTP/1.1, HTTP/2), and APIs available in the browser (XHR & Fetch, WebSocket, WebRTC, and more) to deliver the best—fast, reliable, and resilient—user experience.
Can’t wait for cross browser support
Responsive images can be difficult to bring to your site due to the verbose syntax of resolution switching, the requirement of polyfills, or the requirement of JavaScript. Deploying responsive images becomes easier today with the general introduction of Client Hints. Client Hints enable the server to send the best-sized image to a client or browser based on extra information included in the HTTP request headers. This is all done without JavaScript and at the time of the initial request.
Today, Chrome 46 was released to the general public, including support for Client Hints. When enabled on a website, Client Hints will send extra device pixel ratio (DPR) and image width information.
Implementing Client Hints
Configuring Client Hints on a site is extremely simple. Just include the following meta tag in the <head>:
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">
From GitHub, http-client-hints
Opt-in hint delivery
To reduce request overhead the hints are sent based on opt-in basis: the server advertises supported hints, the user agent sends the appropriate hint request headers for subsequent requests - seeAdvertising Support for Client Hints.
Note that this means that the user agent will not send hints on the very first request. However, if the site provides correct opt-in information in the response, hints will be delivered by all subsequent requests. Also, the user agent may remember site opt-in across browsing sessions, enabling hint delivery of all subsequent requests.
Use cases
Responsive Design + Server Side Components (RESS)
The application may want to deliver alternate set of optimized resources based on advertised hints. For example, it may use the device pixel ratio (DPR), or the layout viewport width (Viewport-Width) to respond with optimized HTML markup, CSS, or script resources - see Responsive Design + Server Side Components (RESS).
Note: Applications that use this approach must also serve appropriate Vary and Cache-Control response headers to ensure correct delivery of optimized assets.
Breaking the 1000ms Time to Glass Mobile Barrier - Slides
Ilya Grigorik is extremely passionate about a web that works fast. Lucky for you, he works for Google's Make The Web Fast team, spending his days doing exactly that and as an advocate for performance best practices.
Here's the 1 second breakdown:
Read his new book online, High Performance Browser Networking
For us mere mortals, blame it on the mobile network ;)
Breaking the 1000ms Time to Glass Mobile Barrier
Ilya Grigorik is extremely passionate about a web that works fast. Lucky for you, he works for Google's Make The Web Fast team, spending his days doing exactly that and as an advocate for performance best practices. He stopped by SFHTML5 to outline the logistics behind building a mobile website that loads as quickly as possible. A site that not only renders in 1 second, but one that is also visible in 1 second. With hard statistics as evidence to show why this matters, Ilya discusses techniques to deliver a 1000 millisecond experience. **For more tips, tricks, and techniques on HTML5, check out the tons of video content on our site: https://marakana.com/s/tags/html5
You know why Ilya works at Google? Decisions are based on facts. Testing, benchmarks and metrics!
Some of the tips apply to web sites as well, i.e. asynchronous JavaScript and inline "critical" CSS. Will definitely need to watch this again.
One request. Inline. Defer the rest.
