The key things to really evaluate a better network resources use are about: our user want our page as fast as possible and we don’t want to waste the internet of our user. The second one is specially important in countries which mobile internet is sold on demand, for example: Brazil, Argentina, Uruguay, Chile. For countries which follow this business mode (prepaid data plans) improve network resources is money saving in a direct way.

Bad network perfomance can also represent real costs for the users.

Load faster Grow Faster

Talking about smartphone world: the number of mobile devices overcome the number of desktop devices, also Google found 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load. Network performance do a major role in web application success, for instance, Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%.

“The result of rebuilding our pages for performance led to a 40 percent decrease in Pinner wait time, a 15 percent increase in SEO traffic and a 15 percent increase in conversion rate to signup.”

So we know some argues and how big players like Google and Pinterest is allied with. But how to translate into code? There is a lot of improvement that we can do at Front End side to get a better network resource use, here I will talk about Code optimization and practices by covering 3 important topics.

Minify and Compress our code

Avoid 3rd part libraries

Importing javascript code

In the end I recommend some tools that we can use to measure our page perfomance.

Minify and Compress Our Code

Minification is essentially removing unnecessary characters from a code. It isn’t sound very useful isn’t? But trust me and keeping read or go ahead to the table bellow.

Compression is the process of encoding information using fewer bits. I’ve talk about compression more detailed in that article pt-Br article: Teoria da informação — Uma Introdução á Compressão de Dados. We can compress a entire set of files using any compressor, a highly used compressor in www world is Gzip.

Gzip is an application for compressing and decompressing files. It reduces the time required to deliver a server response by reducing the recourse size. Gzip performs better in files that have not been already compressed — that occurs because we can’t compress ad infinitum.

In Node universe we can easily implement Gzip compression (code sample bellow). I tested compressing a 100.000 byte file and I was able to save almost 75% of space.

Another samples by using only minification and minification with Gzip. We can save a lot of space of highly knew libraries.

Size comparison by using minification and Gzip

Avoid 3rd part libraries

The best-optimized resource is a resource not sent

Always ask yourself if they’re necessary. Are you using bootstrap only for grid? Try the built in css grid. With grid and flexbox we can create complex layouts with less code.

Remember that CSS is a render blocking resource by default, it means two things: in the critical render path the render tree needs the DOM and the CSSOM to build and it’s not a mandatory behaviour, it’s just the default, so we can avoid this behaviour by using media queries. For instance let’s look the code above, the first declaration will render block always, the second declaration may or may not blocking depending the device orientation.

Critical Render Path

And about Javascript libraries, I know, it is awesome, but you really need? JavaScript is the most expensive resource we serve on the web byte for byte because JS is not only downloaded, but parsed, compiled and executed as well.

For instance, it is very common to use JQuery to write less code. But that practices has a highly cost. If you don’t know vanilla javascript by heart and you need JQuery functionalities you can use You might not need Jquery website. But if you don’t want to write vanilla JS, and you just need feel JQuery functionalities you can go ahead and use an alternative like Zepto. Bellow there is 3 ways to do the same code with different costs.

If you use jQuery, you already know how to use Zepto

Importing Javascript Code

Lets simplify what happens when a client require a page: client require HTML, in HTML read are verified, by the browser, all requirements needed: styles, images, scripts...

A simple and effective solution is to reposition the script to before the closing body tag. So the browser will load and render the page content, and then download the script. But if your script manipulates the initial content or provide a required functionality so you put on the head tag.

If your imported script still slowing down your page load you can use async or defer to avoid blocking document parsing. With async, the browser downloads the script asynchronously while it continues to parse the HTML document. When the script finishes downloading, parsing is blocked while the script executes.

Tools for Measuring