Welcome to Centmin Mod Community
Register Now

WebPerf What Are Client Hints and Are They Worth Implementing

Discussion in 'All Internet & Web Performance News' started by eva2000, Jun 1, 2018.

  1. eva2000

    eva2000 Administrator Staff Member

    34,632
    7,655
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,773
    Local Time:
    2:40 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    The concept of responsive web design has been around for a while, but all of the kinks have yet to be ironed out. The exponential proliferation of connected devices with varying software and technical capabilities has made it more and more difficult to cater web content to every single user.


    Furthermore, trying to accommodate everyone often leads to cluttered markup that negatively impacts performance. Client hints were created to streamline the process of resource selection so that developers can build better responsive web apps more efficiently.

    What Are Client Hints?


    Client hints were introduced by Google for Chrome, and other browsers have adapted them since the HTTP specification was released. Client hints allow for proactive content negotiation by letting user agents determine how images and other resources get displayed on individual devices. They act as a sort of liaison between the client and the server to put together the best page layout possible.

    Why Use Client Hints?


    One of the biggest challenges of responsive web design is creating clean markup.
    For example, making images responsive can require you to specify multiple image breakpoints and pixel densities. If you’re not careful, you could end up with some sloppy, bloated code.

    Implementing hints saves time for both you and your users by drastically reducing the amount of code needed to make your page elements responsive. They essentially automate the resources selection process. For instance, if you want to offer multiple versions of an image, adding hints to the HTTP request helps the web server automatically pick which
    one is the best fit for the user’s device. Decoupling your markup from your images also allows you to alter images without it affecting your markup.

    Automating resource selection with client hints doesn’t just save you time and energy. The true benefit is improved performance, which means a better user experience. According to tests conducted by Smashing Magazine, making your images responsive with hints requires 19-32 percent less data to be served than using preselected image breakpoints. Consequently, the server will send better quality images at a faster rate.

    Client hints aren’t just for images. They are helpful wherever you have breakpoints based on viewport size or DPR in your CSS. See the Google Dev Guide’s section on client hints to learn more about their uses.

    How Do Client Hints Work?


    All requests that a browser sends to a server includes HTTP request headers. Client hints take the form of HTTP request header fields. Adding them instructs the server to look at certain parameters on users’ devices when deciding how to deliver content. Commonly used client hint headers include:

    • DPR, or “device pixel ratio,” which means the ratio of physical screen pixels to CSS pixels.
    • Viewport-Width, which is quantified in CSS pixels.
    • Width, or the width of an image in physical pixels.
    • Downlink, which represents the user’s maximum download speed.

    There are a few others, but not all are available in every browser. The list of available hints will certainly grow as more browsers start supporting them.

    Client Hints Browser Support


    Client hints work wonders for Chrome and Opera users, but they can potentially
    create problems for visitors who have unsupported browsers. Hopefully, this drawback will not be an issue in the future; however, in the meantime, developers might want to consider combining hints with relative widths and heights to prevent layout breaks. Using an image optimization service may help mitigate the risks of serving excessively large images to unsupported browsers.

    [​IMG]

    How to Enable Client Hints


    Before you can start including hints, you must prepare the server to accept them. Since enabling client hints adds a little bit to your payload, there’s no need to turn them on if you don’t need them. To enable hints, insert the following header to your server’s config file:

    Accept-CH: DPR, Width, Viewport-Width

    If adding the header is not an option, you can add the following meta tag under the head element of your markup instead:

    <meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width">

    You must individually list each hint that you want the server to accept. Therefore, if you wish to enable the downlink hint, you must add “Downlink” to the above snippet. The user’s browser should now append the specified headers to all future server requests. If you’re viewing your website in Chrome, use the “Network” panel to see the headers being sent.

    [​IMG]

    Using Hints to Deliver Responsive Images


    Although client hints have other uses, they are typically employed to deliver responsive web images. Responsive images adapt to the user’s browser and screen. If you want to make an image responsive using hints, then there are a couple of steps that you need to take:

    1. Opt into client hints by including the HTTP header or meta tag in the head element of your markup.
    2. Be sure to set the Sizes attribute for all of your image tags.

    As of now, the client hints specification requires the sizes attribute be set for the Width header to work properly. As mentioned earlier, the sizes attribute defines the layout and the display size of an image.

    The traditional way to serve multiple versions of an image is to use the srcset attribute like so:

    <img src="image.jpg" alt="image"
    srcset="image-160.jpg 160w,
    image-320.jpg 320w,
    image-640.jpg 640w,
    image-1280.jpg 1280w"
    sizes="(max-width: 480px) 100vw,
    (max-width: 900px) 33vw,
    254px">

    The srcset attribute allows the browser to choose from different image sizes. This method works fine, but that’s a lot of code for one image.

    Client hints eliminate the need for srcset. The Width attribute, for example, uses the value of the sizes attribute to calculate the exact width of the image on the page. With hints enabled, the browser sends a request like this to the server:

    GET image.jpg
    Accept: image/webp,image/*,*/*;q=0.8
    DPR: 2
    Viewport-Width: 1024
    Width: 508

    In this example, the browser tells the server that the requesting device has a pixel ratio of 2 and a viewport width of 1024. With that information, the server will return an image that is twice the size of the original to perfectly fit in the user’s browser. Now, if you have hints enabled, the previous example can be reduced to the following:

    <img src="image.jpg" alt="image"
    sizes="(max-width: 480px) 100vw,
    (max-width: 900px) 33vw,
    254px">

    As you can see, taking advantage of hints can cut down on the amount of code needed to ensure your website is responsive.

    Client Hints and The Accept Header


    If you’re well versed on the topic of responsive web design, then you may be familiar with the Accept header. Client hints can be combined with the Accept header to serve the same image in various formats.

    Accept works similarly to the other client hint headers. It tells the server which media types are acceptable to the browser. For example, whenever Chrome requests an image, it automatically includes an Accept header in the HTTP requests like so:

    Accept: image/webp,image/*,*/*;q=0.8

    This snippet lets the server know that Chrome prefers the WebP image format; however, if WebP isn’t an option, then it should serve a file with a mime type beginning with image/*. If that isn’t available, then */* indicates that the server should serve whatever it has. Finally, the q=0.8 part indicates how strongly the browser prefers the specified format. The Mozilla Developer’s Guide has more information about the Accept header specification and the quality preference parameter.

    Enabling the Accept header allows you to further simplify your markup if you want to support multiple image formats. Chrome automatically includes the aforementioned Accept header, but other browsers do not have built-in preferences. Therefore, you must add your own Accept header in the head element of your markup to enable it for all users. Feel free to copy the Chrome default example, or use it as a guide to set your own preferences.

    Summary


    Setting up client hints takes a little time and effort, but it can pay off. You’ll have responsive image tags that are much more manageable, and your users will always receive content that is optimized for their device in as few bytes as possible.

    However, for now, browser support is still fairly limited. This makes it difficult to implement globally in the case of a CDN such as KeyCDN as this would require a change on the origin server’s side. We’ve discussed this topic on our community site and although KeyCDN doesn’t currently support client hints, this could change in the future based on how the adoption rate continues.

    The post What Are Client Hints and Are They Worth Implementing appeared first on KeyCDN Blog.

    Continue reading...
     
    • Like Like x 1
    • Winner Winner x 1
  2. JJC84

    JJC84 Premium Member Premium Member

    139
    56
    28
    Jan 31, 2018
    Ratings:
    +80
    Local Time:
    11:40 AM
    1.13.9
    10.1
    Excellent post. Life is too short for sloppy code or ugly web sites and apps.
     
    • Like Like x 2
  3. eva2000

    eva2000 Administrator Staff Member

    34,632
    7,655
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,773
    Local Time:
    2:40 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
  4. bassie

    bassie Active Member

    856
    200
    43
    Apr 29, 2016
    Ratings:
    +605
    Local Time:
    6:40 PM
    Thanks for the article @eva2000
    I have more and more come to the point that I don't keep myself busy anymore with small improvements like this or (not in logical order):

    hpack, dynamic_tls_records, chacha, client hints, hsts, Content-Security-Policy, Subresource Integrity, OCSP stapling, DNS CAA, HPKP. you can make better use of this time and create content. You will be charged on content, not if your website is 0.1% faster or .0.2% safer.
     
    • Funny Funny x 1
  5. eva2000

    eva2000 Administrator Staff Member

    34,632
    7,655
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,773
    Local Time:
    2:40 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    ah but part of the fun is learning to squeeze that extra 0.1% performance out your sites :D
     
..