Application Optimization - rvdegroen/notes GitHub Wiki

What is application optimization?

To deliver a good web application for your customer, you want the customer to be able to go through the website quickly without waiting for a long time. There are several useful tools for this. This is called production optimization. There are also a few basic things that you can apply such as:

  1. Minification of resources refers to the process of removing unnecessary, redundant data from your HTML, CSS, and JavaScript that are not required to load. This includes eliminating code comments and formatting, white space characters, unused codes, newline characters, and so on.

  2. Prevent broken links to files that don’t exist.

  3. Remove Unnecessary Custom Fonts

  4. Script type module in JS (type=”module”)

  5. Code splitting (JS, CSS, and HTML can be split into smaller parts)

Why would you optimize your application?

Depending on your device and it's specs, you can make your application quicker for different devices. Usually if you have an older device for example, with worse specs, you can feel the difference when a application is optimized and when it's not. If it's optimized it will most likely be quicker than when it's not.

Your application can also make a difference in bandwidth. This is more of an issue for financial purposes. If you have a larger bandwidth use, then your application will most likely cost more money, because you want users to be able to use your application, so you would need to pay more for more bandwidth.

In our application we are going to apply lazy loading. this means that the content of the site is loaded first and then the image. this makes the application slightly faster. By giving styling to the html tag the img has a fixed size and width. This prevents the content from jumping when it is loaded We want to apply the sass tool. In the following headings we are going to explain what it is and why we are going to use it.