Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Boost your Front end app Performance Prasanna Vijayan
Best Practise 1. Design for performance 2. Minify CSS and JS 3. Broken Links and Broken SRC / HREF attributes 4. Use webP ...
Design for Performance Good content, layout, images, and interactivity are essential for engaging your audience, but each ...
Minify css and JS Minification removes unnecessary characters from a file to reduce its size, thereby improving load times...
Broken Links & src / href attributes You may expect a browser to do nothing when it encounters an empty image SRC tag. How...
Use webP for Images WebP images can be substantially smaller than images of other formats: sometimes they are up to 25% sm...
Fonts The browser comes across a @font-face definition in CSS that points to a font not available on the user’s computer, ...
Lazy Load css and js Generally speaking we have an approach of loading in assets as soon as possible. We eliminate render ...
Cookies We don't have a server side language, just a static Apache web server. But an Apache web server can still do serve...
Caching Since we depend heavily on browser caching for repeating views, we need to make sure we cache properly. Ideally we...
Last Slide Thanks.
Upcoming SlideShare
Loading in …5
×

Boost your front end performance with js

120 views

Published on

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.

Published in: Internet
no profile picture user

  • Be the first to comment

  • Be the first to like this

Boost your front end performance with js

  1. 1. Boost your Front end app Performance Prasanna Vijayan
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Last Slide Thanks.

×