What else can we do with data-uri?

I started thinking of data-uri as a mean to reduce HTTP requests and file size. Then I thought it could be used as a hack to delay the execution of &https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/what_else_can_we_do_with_data-uri/quot;downloaded&https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/what_else_can_we_do_with_data-uri/quot; scripts.

data-uri inside URI

URIs containing data-uri can reduce HTTP requests and file size. This technique could also be used to lazy load assets from pages that already perform well.

These are the results of YSlow for three different &https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/what_else_can_we_do_with_data-uri/quot;import&https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/what_else_can_we_do_with_data-uri/quot; methods:

Image path in Source (demo)

Empty Cache:

HTTP Requests – 11

Total Weight – 29.1K

1 HTML/Text 1.8K

5 CSS Image 6.6K

Primed Cache:

1 HTML/Text 1.8K

data-uri in Source (demo)

Empty Cache:

HTTP Requests – 10

Total Weight – 29.4K

1 HTML/Text 6.5K

4 CSS Image 2.2K

Primed Cache:

1 HTML/Text 6.5K

data-uri in URI (demo)

Empty Cache:

HTTP Requests – 10

Total Weight – 24.7K

1 HTML/Text 1.8K

4 CSS Image 2.2K

Primed Cache:

1 HTML/Text 1.8K

Note that there is more to it when it comes to performance. With very long URIs, packetization comes into play which increases TCP transport time.

Executing scripts on demand

With data-uri, we can create a script node dynamically without downloading a file. Like this:

<script>
f = function(){
    var plug=document.createElement('script');
    plug.setAttribute(&https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/what_else_can_we_do_with_data-uri/quot;src&https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/what_else_can_we_do_with_data-uri/quot;, &https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/what_else_can_we_do_with_data-uri/quot;data:application/x-javascript;base64,YWxlcnQoIkhlbGxvIFdvcmxkISIp&https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/what_else_can_we_do_with_data-uri/quot;);
    document.getElementsByTagName(&https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/what_else_can_we_do_with_data-uri/quot;head&https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/what_else_can_we_do_with_data-uri/quot;)[0].appendChild(plug);
}
</script>

Click to plug that script node and execute the code

Things to consider

These demos are just “proof-of-concept”. Security and browser compatibility are obvious issues, and relying on JavaScript to extract images from URIs should also be a concern.

URL‘s length is also a factor to consider. I believe href values cannot exceed 1024 characters and server could return 414 Errors (URI Too Large) if requested URLs’ length exceed the capacity limit for the server (even though the spec for the HTTP protocol does not specifiy any limit).