Boosting frontend application performance is one of important aspects for JS frameworks like Ember, Angular, React and so on. The most common way to increase the performance is HTTP requests, Avoid URL redirect, Avoid empty SRC or HREF, Make AJAX cacheable, Compress components with gzip, Minify CSS and JavaScript, Reduce the number of DOM elements, Reduce DNS lookups, Use GET for AJAX requests and many more. Basically improper way to using JS code will reduce application performance. By using proper tools, libraries and debugging practices will help avoid these problem.

1. Boost your Front end app
Performance
Prasanna Vijayan

2. Best Practise
1. Design for performance
2. Minify CSS and JS
3. Broken Links and Broken SRC / HREF attributes
4. Use webP for images
5. Fonts
6. Lazy Load CSS and JS
7. Cookies

3. Design for Performance
Good content, layout, images, and interactivity are essential for engaging your
audience, but each of these elements have impact on page load time and the
end-user experience.

4. Minify css and JS
Minification removes unnecessary characters from a file to reduce its size,
thereby improving load times. When a file is minified, comments and
unnecessary white space characters (space, newline, and tab) are removed. This
improves response time since the size of the download is reduced.

5. Broken Links & src / href attributes
You may expect a browser to do nothing when it encounters an empty image SRC
tag. However, this isn't the case in most browsers. Safari will make a request to
the actual page itself. This behavior could corrupt user data, waste server
computing cycles generating a page that will never be viewed, and in the worst
case, cripple your servers by sending a large amount of unexpected traffic.

6. Use webP for Images
WebP images can be substantially smaller than images of other formats:
sometimes they are up to 25% smaller than their JPEG counterpart. WebP is
overlooked a lot and not often used. At the time of writing, WebP support is
limited to Chrome, Opera and Android (still over 50% of our users), but we can
degrade gracefully to JPG/PNG.

7. Fonts
The browser comes across a @font-face definition in CSS that points to a font not
available on the user’s computer, it will try to download this font file. While the
download happens, most browsers don’t display the text using this font. At all.
This phenomenon is called the “Flash of Invisible Text” or FOIT.

8. Lazy Load css and js
Generally speaking we have an approach of loading in assets as soon as possible.
We eliminate render blocking requests and optimise for the first view, leveraging
the browser cache for repeated views.

9. Cookies
We don't have a server side language, just a static Apache web server. But an
Apache web server can still do server side includes (SSI) and read out cookies. By
making smart use of cookies and serving HTML that is partially rewritten by
Apache, we can boost front-end performance.

10. Caching
Since we depend heavily on browser caching for repeating views, we need to
make sure we cache properly. Ideally we want to cache assets (CSS, JS, fonts,
images) forever, only invalidating the cache when a file actually changes. Cache is
invalidated if the request URL is unique.

11. Last Slide
Thanks.