Improve page speed with data URLs and sass

In the last years, sites are gradually become richer in functionality while demanding more network and device resources. Over the years, the experience shows that faster site engage and retain users better than slower one. As Google announced that site speed is used as a factor in their web search ranking algorithm , Site speed become even more important and can be the difference between successful site and poorly performing one.

One way to make the site faster is consolidate HTTP requests. As the number of HTTP requests from the browser increases, the overhead and load time of the site increases. Thus, when we combine several HTTP requests when possible (For example, consolidate several CSS files to one file), we can dramatically decrease the load time of our web pages.

Let's see how Data URLs can improve the site speed.

What are Data URLs

Data URLs are special type URLs which allows to embed small files inline in documents(HTML or CSS files). Data URLs are prefixed with the data: scheme and have up to 3 parts.

Data URL structure
 data:[<mediatype>][;base64],<data>
Part Description
mediatype The mediatype is a MIME type string. For example image/png for a image file in png format, image/jpeg for image in jpeg format, image/svg for image in svg format. If emitted text/plain;charset=US-ASCII will be used
base64 Whether the encoding of the following data part is base64 and not text. Using this encoding we can embed binary formats such as images in a text based document. If this part is emitted, data is plain text which should use the appropriate entities or escapes based on the enclosing document
data The data

In the next part we will see some examples how to use those urls