4

As the title says: for site speed up sake it is good to implement small images like Data URIs directly into HTML source code, like inline CSS (background image url), or with usual img src. But from which file size is it worth?

  • Depends on the page size... some devices do not cache pages over X size, so it's not just about how big the image is. – Simon Hayter Jan 22 '16 at 10:14
  • @SimonHayter i've intended the question on another way: if 1. i have a page with an image, implemented with img src and URL, and 2. i have the same page with the same image implemented with Data URI (like CSS, background image URL or with img src), at which image size the page with Data URI loads faster? – Evgeniy Jan 22 '16 at 11:06
  • 1
  • 1
    @Evgeniy If you optimize for the critical render path, I'm assuming you inline the css in the html? So that it is reduced to 1 request. If you do that and you keep the total sent bytes of the request below 14KB the server can return it in 1 roundtrip. If you go over that the server needs more round-trips. So it's not so much a matter of the size of the data-uri, but of the total number of bytes, no matter what type. The number of 14KB comes from TCP-slow start in the most common configuration. more info here: cdnplanet.com/blog/tune-tcp-initcwnd-for-optimum-performance – Marco Tolk Feb 2 '16 at 9:45
  • 1
    TCP slowstart applies to individual tcp connections. So if the browser starts multiple connections all connections will be able to process 14KB in their first roundtrip, more one later round-trips. When the browser makes it's first request. it will fetch for instance /home.html. it will get at most 10 1.4KB packets, totalling 14KB back in the 1st round trip. any additional request that will probably use a 2nd, 3rd etc. connection, where TCP slow start starts again with 10 packets. – Marco Tolk Feb 2 '16 at 10:10
2

To anwser this question first a little background: HTTP works on top of TCP. When the browser opens a connection it sends a TCP packet with the HTTP request to the server. Because TCP has TCP slowstart the server can at most send 10 packets back, totalling 14KB to the browser. After that it has to wait for an acknowledgement from the browser before it can send additional packets.

So if you want the browser to be able to render a page quickly you have to make sure that everything it needs, fits inside 14KB.

Now what does a browser need to start rendering. It starts with HTML obviously. But if the page requires css, it will not start rendering anything(it will just show a blank page) untill the css downloaded and parsed. Synchronous javascript is another thing that blocks the browser.

So if you want a page to render really fast make sure you send back everything in the first response and even then in the first 14KB of the response. This means inlining css in the HTML. If you can make the javascript load asynchronous, if it must be synchronous, do it as late as possible in the page. If it must be synchronous and in the head then it must be inlined as well.

Now determine the size of the HTML with inlined css(and maybe javascript). Make sure to determine the size of it gzipped.

Now to anwser your question: If you now have room to spare, you can inline small images as data-uri. Just make sure you keep the gzipped total under 14KB.

NOTE: inlining can as a technique for optimizing the critical path may become obsolete as HTTP/2 becomes the norm and webservers start supporting SERVER-PUSH.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.