6 ms·

Some of those optimizations become irrelevant (or downright bad) with http2. Inlining CSS ans JS is no longer best practice when you can do a server push of tho

Some of those optimizations become irrelevant (or downright bad) with http2. Inlining CSS ans JS is no longer best practice when you can do a server push of those and avoid sending the extra bytes once the files have been cached by the browser. Some optimizations can backfire. Adding async to the external JS is a great tip.. unless you have dependencies between your different scripts (i.e. you need one to be loaded before the other one gets executed)

elliotec 9y ago
Definitely both true. I hadn't looked into enabling http2 on this site, I'll check it out.
StavrosK 9y ago
Relevant to http2 push but slightly off topic, I love how I can add a single line of code to my Django project (to include a middleware library I wrote) to have automatic http2 push. The middleware will parse the static media on the page and push them to the client, it's much faster with no effort. The library is at https://github.com/skorokithakis/django-cloudflare-push https://github.com/skorokithakis/django-cloudflare-push if anyone wants to use it. It's slightly misnamed, as it supports any server that uses the Link header for push, not just CloudFlare.
- realityking 9y ago
  Doesn‘t that mean I‘ll get all assets pushed to my client every time I visit any page of your site, regardless of the file‘s cache status? That does not seem to be a good tradeoff, especially on mobile.
  - StavrosK 9y ago
    No, the browser cancels the download if it has the assets before they download.
    - _jn 9y ago
      That should take approximately as long as a client<->server ping, right? So shouldn't it be irrelevant for JS/CSS that loads within that time (say, 50Mbps & 15ms ping --> everything below 93KB gzipped?)
      - StavrosK 9y ago
        Yes, you'd download some things you don't need to. Last I heard, they're working on an extension so the browser can tell the server what media it has when it requests the initial page so they won't get sent at all.
        tomatsu 9y ago
        You could use a cookie which contains the revision and then the server could selectively push things which have changed since then.
        majewsky 9y ago
        Didn't we all have this conversation years ago already with nocache query parameters etc.? Reminds me of number 6 in RFC 1925: "It's easier to move a problem around [to another protocol layer] than to solve it." I still don't see how HTTP/2 Push is solving any real-world problems [1] besides Google being able to push ads so that it counts as an impression even if the client blocks ads. [1] I don't count the slightly faster initial page load since I'm getting that junk on every page load via push even if I already have it, so I'm paying with my data allowance. If you want your site to load fast, just fix your goddamn bloat.
        abritinthebay 9y ago
        If you specifically discount the very problem it was meant to solve then yes, yes then there it is not solving "anything"
    - paulirish 9y ago
- codedokode 9y ago
  You might better be working on caching so that the resources are loaded only the first time. Otherwise you need some way to know whether the user has the resources cached or not (a cookie maybe?).
Xoros 9y ago
That's something that really astounds me with this async thing. Why on earth when they introduced it they didn't add a way to tell the browser the order of execution ? Or may be it exists and I haven't heard about it ?
- ko27 9y ago
  There is a way: ES6 modules. If you can account for the order of execution (with modules or custom loaders) async is, in almost all cases, the best way to load your scripts. Defer (or body-end) scripts also specify the execution order, but only in a strictly linear fashion which usually has a performance hit.
- cisanti 9y ago
  But there is, it's called defer?!
- codedokode 9y ago
  You also need to hide JS controls before the scripts are loaded or you will get "dead" buttons that are visible but don't react to clicks.
codedokode 9y ago
Asynchronous JS scripts are a great choice. But you better makes this choice on early stage, because changing scripts from sync to async on a large legacy website can require a lot of time, there will be many bugs etc. You cannot just add "async" attribute.

elliotec 9y ago

Definitely both true. I hadn't looked into enabling http2 on this site, I'll check it out.

StavrosK 9y ago

Relevant to http2 push but slightly off topic, I love how I can add a single line of code to my Django project (to include a middleware library I wrote) to have automatic http2 push. The middleware will parse the static media on the page and push them to the client, it's much faster with no effort. The library is at https://github.com/skorokithakis/django-cloudflare-push https://github.com/skorokithakis/django-cloudflare-push if anyone wants to use it. It's slightly misnamed, as it supports any server that uses the Link header for push, not just CloudFlare.

realityking 9y ago
Doesn‘t that mean I‘ll get all assets pushed to my client every time I visit any page of your site, regardless of the file‘s cache status? That does not seem to be a good tradeoff, especially on mobile.
- StavrosK 9y ago
  No, the browser cancels the download if it has the assets before they download.
  - _jn 9y ago
    That should take approximately as long as a client<->server ping, right? So shouldn't it be irrelevant for JS/CSS that loads within that time (say, 50Mbps & 15ms ping --> everything below 93KB gzipped?)
    - StavrosK 9y ago
      Yes, you'd download some things you don't need to. Last I heard, they're working on an extension so the browser can tell the server what media it has when it requests the initial page so they won't get sent at all.
      - tomatsu 9y ago
        You could use a cookie which contains the revision and then the server could selectively push things which have changed since then.
        majewsky 9y ago
        Didn't we all have this conversation years ago already with nocache query parameters etc.? Reminds me of number 6 in RFC 1925: "It's easier to move a problem around [to another protocol layer] than to solve it." I still don't see how HTTP/2 Push is solving any real-world problems [1] besides Google being able to push ads so that it counts as an impression even if the client blocks ads. [1] I don't count the slightly faster initial page load since I'm getting that junk on every page load via push even if I already have it, so I'm paying with my data allowance. If you want your site to load fast, just fix your goddamn bloat.
        abritinthebay 9y ago
        If you specifically discount the very problem it was meant to solve then yes, yes then there it is not solving "anything"
  - paulirish 9y ago
codedokode 9y ago
You might better be working on caching so that the resources are loaded only the first time. Otherwise you need some way to know whether the user has the resources cached or not (a cookie maybe?).

Xoros 9y ago

That's something that really astounds me with this async thing. Why on earth when they introduced it they didn't add a way to tell the browser the order of execution ? Or may be it exists and I haven't heard about it ?

ko27 9y ago
There is a way: ES6 modules. If you can account for the order of execution (with modules or custom loaders) async is, in almost all cases, the best way to load your scripts. Defer (or body-end) scripts also specify the execution order, but only in a strictly linear fashion which usually has a performance hit.
cisanti 9y ago
But there is, it's called defer?!
codedokode 9y ago
You also need to hide JS controls before the scripts are loaded or you will get "dead" buttons that are visible but don't react to clicks.

codedokode 9y ago

Asynchronous JS scripts are a great choice. But you better makes this choice on early stage, because changing scripts from sync to async on a large legacy website can require a lot of time, there will be many bugs etc. You cannot just add "async" attribute.