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.
Fonts should use modern formats like WOFF and WOFF2.
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.