- 80% of the end-user response time is spent on the FE. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc.
- Combine files
- Combining all scripts into a single script (e.g. webpack)
- Combining all CSS into a single stylesheet
- CSS Sprites
- Image maps
- Inline images
- The user's proximity to your web server has an impact on response time
- Improve end--user response time by moving static content off of application web servers to a CDN
- A first-time visitor to your page may have to make several HTTP requests but by using the Expires header you can make these components cacheable
- Most often used with images but they should be used on all components including scripts, stylesheets, and Flash components - shorter expiration date for more dynamic components
- Most websites gzip their HTML documents
- Also worthwhile to gzip your scripts and styleshseets, as well as any text response including XML and JSON.
- Images and PDF files should not be gzipped because they are already compressed
- Putting stylesheets in the HEAD allows the page to render progressively
- The browser will display whatever content it has as soon as possible
- Remove unnecessary characters from code to reduice its size and therefore improve load times
- DNS lookups (hostnames to IP addresses) can be cached for better performance
- Code splitting (webpack)
- Determine which content and components can wait