Web App Performance Optimization

This guide applies only for Single Page Application (SPA)

Show loading
Progressive loading. (facebook news feed example) Show mock and load content after.
Use AppShell link
- Google Instant Loading Web Apps with an Application Shell Architecture
Use event capturing and reproduce events after load (App shell)
- Load script while user fills fields or read some information

Critical Path and Render Blocking Resources (CSS + JS)
No more then 7 connections to the server in the same time.
- Inline images
- Inline js
- Inline css
Ordering of loading
- Index.html
- <head> async loading of css/js deffer for js (??)
- why we put <script> into end of the index.htm (???)
- http/2 file loading order (???)
Parsing js/ First paint (???)
www.webpagetest.org

Reduce HTTP Requests (time to connect with server)
- DNS resolve(chaching DNS)
- Inline js, html, json
Budgeting
- performance budget
Images optimization
- JPG 80 vs JPG 100 critical/non critical
- SVG when possible
- FontIcons vs SVG or compile your own (???)
- Custom fonts vs SVG
- Inline base64 vs separated files
- Images Retina (Sprites are dead) (???)
- webp (???)
- Images alternative text with size <img alt='' width='' height='' />
- Save with optimization (???) photoshop save as
- Desktop app for Windows FileOptimizer
Gzip one file VS. many Gzip + many bundles
- brotli
- option on the server
Caching files
- ngnix, Apache, IIS
Fast delivery
- (CDNs)[https://www.keycdn.com/blog/website-performance-optimization#5-reduce-latency-with-a-content-delivery-network-cdn]

Delivery only what is needed
- Reduce first bundle
- Optimise critical pages
Virtual scroll
Reduce DOM elements
- <ng-container></ng-container>
Web workers for highly performance calculations
- Page good to be optimized with this approach
Prefetching
- angular prefetching modules from links (???) example code
Angular

(???) Define types of application and provide check lists

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
README.md		README.md

Provide feedback