All posts by newton

_MG_3567

Website Performance Checklist

Here is the a quick list of check points if you are looking for performance optimization. Different type of applicaiton require different treatment, however this list is for a regular website.

  • Loading Performance

    1. Images are optimized for web
    2. Pages/content served through HTTP2
    3. Javascript is minified and bundled
    4. CSS files are minified and bundled
    5. All the content are compressed with gzip/brotli
    6. Lazy load images
    7. Cache headers should be set with at least one week expriration
    8. Avoid document.write for Javascripts for first time execution
    9. Apply PWA methods to optimize caching
    10. Make use of CDNs for static asset delivery
    11. Optimize TTFB time at your server
    12. Make sure you have proper content encoding applied.
    13. Remove ETags if there.
    14. Avoid redirects if possible
    15. Lazy load iframes
    16. Make use of image sprites if applicable
    17. Load assets in a cookie free domain
    18. Prefetch DNS if there are multiple DNS
  • Execution Performance

    1. There are no 404 errors
    2. There is no blocking scripts.
    3. All non critical javascript files are defered or asynced
    4. There are no javascript exceptions / errors
    5. There are relatively less number of DOM nestings
    6. Though it’s subjective to your application, prefer to minimize number of DOM objects in your page.
    7. Javascript is modularized so that there is no unnecessary executions
    8. Remove console logs – they make the browser slow
    9. Avoid geolocation permission at the time of load
    10. Also avoid notification permissions on at the time of load
    11. Avoid rendering lot of content on the first go. Use lazy rendering techniques.
    12. Avoid too large images as backgrounds. Also avoid scaling images.
    13. Avoid filters, shadows(specially text shadows) when ever possible.
    14. Check for scripts that execute in browser resize or scroll
    15. Optimize CSS libraries/utility libraries that are not required
    16. Avoid synchronous ajax request
    17. Make sure there are no invalid DOM elements/ nesting. Common mistakes like non list items in ordered/unorderd list.
  • Percieved Performance

    1. First meaningful paint does not take more than 3 seconds
    2. Late load/load on demand images that are not required on first view.
    3. Critical CSS and JS is loaded at the time of loading – prefetch them or embed them.
    4. No interaction take more than 1/40 seconds to respond.
    5. User is given indication of anything processing, if it’s takes more than 200 milliseconds
    6. Avoid popup messages/notifications at the time of loading the page.
GCT-HTML5

Interview Questions : HTML

  • Can you place more than one <main> tags in your webpage

    Yes, this is possible and valid to put more than one main tag if content of your main tag is not clubbed with another main tag in a single view.

  • What would happen if DOCTYPE is not mentioned in your HTML document

    Though your page would render, but you would face problem in markup validation, and browser may choose to use Quirks Mode. This may also affect the way CSS renders.

measuring-perceived-performance

Improving perceived performance of your webpages

Performance is the key factor in improving user experience. Faster the user sees information, the better for the site to have a high customer retention. Webpage performance can be categorized in to three parts: 1. Loading performance 2. Execution/Rendering Performance and 3. Perceived performance.

Perceived performance is the speed that user feels while interacting with the webpages/application. Controlling/Improving this kind of performance is all about prioritization. This can be subjective at times, and there is no defined ways to achieve it. The techniques described below are some of the proven ways one can try in their own applications

Techniques to apply

1. Fix the page loading and rendering performance

This is first level fix that one needs to do to start. Any page that takes more than 3 seconds to appear on user screen completely out of scope for this discussion

2. Lazy load all below the fold images

3. Implement critical CSS

4. Fix the animations

5. Make use of loading indicators

6. Avoid heavy operations/manipulations on scrolling/swipe events

7. Add indications to all clickable items

8. Activate above the fold javascript interactivity along with components

9. Ajaxify components that are below the fold

10. Implement HTTP2 push(preload assets) mechanism

11. Lazy load any popup that appears on the load

12. Fix layouts to avoid flickering while loading/scrolling

Photo of the software code showing the user authentification part. The photo has various uses representing the cyber crime and other security related stuff and hacking the computer systems.

Javascript : Code review checklist

This is a basic list of items to check in your code or your team mate’s code for a simple project involving plain javascript or jQuery. This is not a complete list and some of the points may not be applicable in your project as well.

  1. Right file or module for the intended code
  2. Proper indentation is applied
  3. Variables are not put at root scope or there are no implicit variables
  4. There are no unused variables
  5. Semicolons are applied where they are intended.
  6. There are no hardcoded strings
  7. Functions are made pure as far as possible.
  8. Keep the return statement to minimal (possibly only a single one).
  9. All utility methods are well documented.
  10. Proper commenting of the code if something unusual.
  11. Proper commenting of the code if something unusual.
  12. Caching of jQuery selectors if used more than once.
  13. Events should not be attached more than once.
  14. Cyclomatic complexity should be less and not be more than 10 in the worst case.
  15. Callback statements are declared in a separate function.
  16. All ajax data are handled with type check of any available property.
  17. JQuery operations are chained where ever possible.
  18. Similar jQuery operations are combined.
  19. Make sure there are no more than two level of event target delegation in case of binding events.
  20. Avoid event binding on document load which are based on another event.
  21. Apply event name spacing where ever required.
  22. Avoid wild card jQuery selectors. Prefer to be inside a scope of a component.
  23. Clean any function without body – remove them altogether.
  24. Follow consistent naming convention.
  25. Avoid too much shortening of code ( one liners).
  26. Remove console.log after debugging is complete.
  27. Where ever logging is required, make sure to do that by single global method with meaningful information.
  28. Avoid jQuery selectors by attributes – they are 100 times slower
  29. Make your code as flat as possible. Nested code is difficult to comprehend and debug.
  30. Avoid $.each where ever possible.
  31. Split the JS into logical meaningful files, if it contains so much of code.
  32. Keep the declaration and execution of functions in different scope block.
  33. Method names should be small, self-describing and non-confusing. Avoid names like : doThat()
  34. Utility methods should be pure functions.
  35. Cache long object chains in variables to improve performance.
  36. Avoid applying style in Javascript, make use of classes.
  37. Avoid id selectors wherever possible.
  38. Avoid names/ids/class names like myDiv, test – give a meaningful name.
  39. Prefer design patterns rather than arbitary way.
  40. Make sure to lint your files ( add JSHint plugin to your editor)
  41. Avoid unnecessary variables