Web Application Performance Optimisation
To deliver a streamlined and responsive user experience, application optimisation and performance has to be considered at each stage. From producing lean fast running code, to developing assets that have been optimised and packaged for delivery over the network, utilising as little bandwidth and CPU as possible whilst also leveraging user caches.
With any code, optimisation has to be balanced with readability, modularity, and maintainability. Code optimisation is not something you do after you have finished building an application, but more a mindset that you keep with you as you develop something.
Backend Code Optimisation
It is about using appropriate flow control patterns to achieve what is needed without doing unnecessary work or wasting resources. Designing your code architecture in a DRY and modular way, thinking specifically about the role of each piece of functionality and not letting its remit stray from those boundaries.
Code bloat is often a problem when programming, but having a good understanding of your systems, leaving room for future extension as you develop, and not patching or working around problems, but instead solve the root cause (Even if this means a lot more work).
By developing in this way, code should be well optimised, extensible, and maintainable.
Front-end Code Optimisation
All of the above applies also to front-end code, normally with the added complexity of non-linearity. Front-end code is event driven and asynchronous in nature, and thus one has to be careful that code does not trigger cascades of events.
The user device must be considered here, as the burden of your code is on their CPU, memory, and battery. Using built in methods and utilising the functionality of the browser and GPU will always produce smaller code and better performance. An example of this is using CSS animations controlled with a class, rather than pure JavaScript.
Asset Optimisation
Pre-compression of assets should be performed, be that minifying HTML, CSS, JavaScript or SVGs, using an optimised compressor for PNG images, stripping EXIF meta data and using interlaced JPGs.
Where practical, assets can be combined. CSS and JavaScript are perfect candidates for this, and can be performed as part of a build process.
Fonts should use modern formats like WOFF and WOFF2.
Delivery Optimisation
All assets delivered over the network should be optimised, be it HTML, CSS, JavaScript, Images, and Fonts. Only required assets should be requested, and in the case of images, should be delivered at the appropriate size.
For textual assets, over the wire compression should be employed for delivery such as Brotli or Gzip, and cache control should be leveraged for subsequent page loads. Browser features such as lazy and asynchronous loading can be used to lower the initial load burden, and pre-loading site wide assets such as CSS, JS, fonts, and logos will help improve asset discovery.
