Fronend Optimizations
Reducing HTTP Requests
Caching results
- results are cached in the browser. If a new request to a file that hasn't been seen is requested, there is a new http request that is sent.
Combine Files
- There are many different types of file minimizers that can be used.
- Javascript and CSS files should be minimized wherever possible.
- They should be compressed into one file with file minimizers used in Webpack, Grunt, or Gulp.
Make Images Small
- Images make 63% of the web page's size
Prefetching
- Prefetching is a performance optimization tactic in which content that might be accessed by the user is downloaded in advance. The browser (Chrome, Firefox, etc.) caches this content in the background, making it instantly available if the user clicks on a link that uses the content.
<link rel=”prefetch” href=”/img/big_image.jpg”>
Lazy Loading
- Lazy loading is used only to render what is needed when necessary, using placeholders to use until it is necessary. For example, when scrolling, content on the bottom is not loaded until a user scrolls to it
- Lazy loading can be done with async and defer
- Google used to use meta tags to search a website. Meta tags are no longer used. Get rid of code that is unnecessary.