Development Best Practices

Network

Optimize loading time

  • Concatenate JavaScript files into one.

  • Concatenate CSS files into one.

  • Use a Content Delivery Network for static resources. This will decrease loading time and improve performance.

Minimize requests size

  • Minify JavaScript, CSS and HTML.

  • Use Client Storage instead of cookies (LocalStorage, SessionStorage, IndexDB), remember that each request to the server sends the cookies too.

Good practice

  • Make Ajax Cacheable.

  • Use GET instead of POST for AJAX Requests as they have less overhead.

  • Avoid HTTP Redirects.

Advanced

  • Use websockets for fast and lightweight delivery instead of normal http request.
  • Flush the HTTP response Buffer as early as possible, don’t wait until the server finishes processing the entire page, send parts when they're ready.
  • Optimize each and total number of resources for every view and split them across sub-domains.

HTML

Optimize loading time

  • Place stylesheets at the top (in the head of the document) to prevent a flash of content that's not styled.
  • Put scripts at the bottom (just before the body ends). The browser will render the document top to bottom. Script tags block (unless async or defer is supported) and delay the document layout from being rendered and displayed to the user.
  • Defer loading of JavaScript or use a loader library such as RequireJS.
  • Optimize the order of styles and scripts (group by type, origin). Don’t mix link tags with script tags.

CSS

  • Use CSS3 animation/transitions instead of regular JavaScript animation.

  • Enable hardware acceleration for better visual experience ( #content: {-webkit-transform: translateZ(0);} ).

  • Use efficient CSS selectors prefer id,tag,class instead of attribute selectors.

Images

  • Don’t Scale Images in HTML, image scaling is heavy. Send the right image size from the server.

  • Optimize Images, use the right format for the job and use an image optimizer.

  • Aggregate Static Images into a Single Composite Resource (Sprite).

  • Avoid empty Image src attribute. It causes the browser to send additional request to the server.

JavaScript

  • Use web workers for heavy background operations.
  • Use Polyfills for older browsers.
  • Avoid document.write().
  • Use JavaScript uglify tools like “google closure compiler” or “uglifyjs”.
  • Consider not using eval, new Function() or with statements.
  • Prefer for loop instead of for-in on objects.
  • Minimize DOM Access, used by queries. Cache DOM elements in your code.

Miscellaneous

  • Optimize for application start up time (lazy loading).

  • Minimize perceived latency (show something fast!).

Was this helpful?
Yes
No