Web Project Optimization
In order to minimalize the amount of time needed for loading and rendering content, all applications should request required content in a timely fashion, whether it be at the users demand or in the event it be prefetched before. Please ensure applications use local copies of content if necessary and create http request models as small as possible.
It is noted that it is compulsory for all browsers and servers to use http compression, and browser is also using cache mechanism. Securing that our server delivers a response as rapidly as possible with a size as small as possible will consequently assist us to reach our end goal more promptly.
Optimizing Cascading Style Sheets and HTML Content
Media Content Optimizations
When optimizing images, audio, and video content, please make certain that unused media contents and/or references to those contents are removed in order to build the application. Use any Lossless/Lossy images, audio, and/or video compression tools, such as, pngquant, etc. Please do not use separate content files to optimize their quantity and boost delivery. Instead, focus on using image, audio, and/or video sprite sheets or atlases.
This is great practice to use Lossy as an audio format instead of WAV or any other uncompressed formats and a great practice if you’re not already familiar with PNG format. When you are not using PNG, practicing with SVG icons is necessary. For a set of SVG files, it is essential to create custom font and SVG sprite to boost delivery.
Optimizing HTTP Content Delivery
While optimizing HTTP content delivery, minimize the count of delivery files. All files can be placed in HTML, JS, or CSS files in Base64 format, however, it will increase the size of the content. All text based files can easily be placed in HTML/JS/CSS without any fine. This will make it easily accessible to create one file with all of our contents if it was ever necessary.
As you optimize the HTTP request and response data, confirm HTTP compression is turned on and replace the JSON/text request/response data to a tighter format. Use a binary data model instead of JSON, CSV, etc. Or attempt to minimize the scheme size in JSON. Please ensure you don’t fetch or push already fetched or pushed data as you are optimizing this. For example, a first -time client fetch full and big array of orders. The second time when you want to synchronize your list you should fetch only changes.
Make sure you never load the same content twice. Ensuring you use cache mechanisms, storing synchronization by yourself, and using service workers to implement fitness synchronization behavior of content delivery can prevent this from ever happening.
It’s acceptable to preload some content, and use ‘async’ and ‘defer’ attributes to prevent block loading HTML. It is asked you do not load an entire project if you only need one part.