App performance is important! Shrinking files and optimizing images.

Let us learn how we can increase the performance of our application by shrinking files and optimizing images!

Introduction

Slow webpages are the bane of every internet users experience. Everyone nowadays prioritizes fast, reliable web applications, and big tech giants know that slow webpages lose money. On the other hand, reliable and swift applications generate more clicks (and thus more revenue) and make customers delighted to use your product.

Application rendering

I will most probably mention critical rendering path in more detail in the subsequent articles, but here is the gist. Before the browser draws the pixels, a lot of background checks and steps need to be taken. After the user requests a webpage (and establishes a connection with the server) the browser first needs to construct the DOM tree (creating nodes based on HTML elements), then the CSSOM tree (object representation of the styles associated with the DOM), then it runs the JavaScript, creates the render tree and paints the page. Now, a critical thing to keep in mind is that both CSS and JavaScript are render blocking, meaning that the complete Render Tree can’t be constructed without fully parsing the resources. Thus, we should always strive to conveniently and efficiently parse everything so that the app runs smoothly.

So – we check a webpage, our local machine has to download all the accompanying files from the server, to display them on the browser. The bigger the files, the longer it takes to load the website. One simple solution to increase the speed of the file transfer is to just reduce the file sizes. We can do that by minimizing scripts and reducing image sizes. In the two subchapters that follow we will learn how we can use shrinking files and optimizing images to our advantage!

Minify… what?

HTML, CSS and JS files (written by developers) are formatted to be viewed, analyzed and understood by humans. Humans do this by adding spacing, indentations, tabs, comments and other stylistic cues. These helpful tricks actually mean nothing to the computer itself. Machines, on the other hand don’t care about any of those things – indentations, spacings and naming convertions. We can remove spaces and indentation and by doing so we can reduce file sizes and ship only the code that the computer really needs in order to execute it! In production-ready code, this is usually done by a bundler, for example Webpack or Parcel. For presentation purposes we can use any online minifier for JS files, for example this one, or this one. This snipped of code:

app.post("/posts", (req, res) => {
  const id = randomBytes(4).toString("hex");
  const { title } = req.body;

  posts[id] = {
    id,
    title,
  };

  res.status(201).send(posts[id]);
});

becomes this:

app.post("/posts",(t,s)=>{const o=randomBytes(4).toString("hex"),{title:p}=t.body;posts[o]={id:o,title:p},s.status(201).send(posts[o])});

And the uglifier tells us that we saved 27.89% memory, or more than a quarter! The code above went through minifying (removing unnecessary white-space and indentation) and uglifying (transforming the code so it can’t be reversed by changing variable names and function declarations).

Optimize your images!

Images come in different formats. The most commonly encountered are JPEG, GIF, PNG and SVG formats. We should pick the format which is best for the kind of image we need and compress it without losing too much quality.

• JPG or JPEG must be the most common image type on internet today. JPGs are good for photographs because they are usually small in size, thus easily loaded on websites. Due to their ‘lossy’ compression (reducing the size of the image, reduces the quality sizably) they are not good enough for logos, graphic or anything else that is resizable. (fun fact. both .jpg and .jpeg refer to the same file type, the only difference being that .jpg was used on earlier Windows versions that had a three-character extension cap).
• GIF or GIF 🙂 is a format that does lossless compression, losing no details while compressing the files, and they are good for simple animations because of their size and portability, but due to the limited color range GIFs are not suitable for photographs or printing.
• PNG files allow full range of color, and are especially good for web images. They are lossless and they keep their quality. Additionally, they can be transparent – which is good for logos and brands. A small drawback is that they can be bigger than JPG files.
• SVG files are file formats that render two-dimensional images. Compared to PNGs and JPGs, SVGs store images as set of points using mathematical formulas. An advantage of SVGs is that they keep their spatial relationships when the image is scaled up or down. SVGs are scalable, customizable and due to the ability to be edited they are additionally interpreted by screen readers which makes them accessible and SEO friendly.

We can reduce JPG and PNG sizes using online tools. One site that we can use for this is https://compresspng.com/.

I compressed one of my cover images, which was initialy a PNG image in RGBA color model (having red, blue, green and alpha channels). By reducing the amount of possible colors I also reduced the size of the image (putting only 2 colors destroy the image quality so be careful when manually using tools like these). Compressing tools can save more than a couple of MBs on heavier images.

Conclusion

That’s it regarding file and image optimization! We learned a lot about shrinking files and optimizing images in this article! Next parts of the application performance series will dive deeper and we will write about more advanced topics. In the meantime please check the blog for more articles. See you in the next one!