Best Practices

Overview

The Wix platform allows third-parties to integrate their apps as if they were part of the platform. However, without proper design and performance planning an app would not feel ‘native’ to the platform and might discourage users from using it.

Planning for performance meaning fast loading of your document, fast rendering, responsive UI, and a secure app. The list below aggregates the most important performance topics which will yield the desired look and feel for apps that will allow seamless integration into the Wix platform.

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 are 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 is 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.
Misc
  • Optimize for application start up time (lazy loading).
  • Minimize perceived latency (show something fast!).

Was this page helpful?

What can we do to improve it?

What did you like about it?