Upcoming Sitevision 5 and web performance

Improved web performance metrics

Web sites built in Sitevision has always been very fast, but the performance has not always been reflected in performance measurement tools. Changes in the upcoming Sitevision 5 intends to change the latter. A lot of work has been done to up the scores and the overall experience of performance for users of all Sitevision web sites.

We have redesigned the structure of a typical Sitevision web page, moved all possible resources that block render to be loaded after first paint. We have also reduced the overall weight of resources, especially for web sites not using Social Collaboration.

Page structure

All third party javascripts and most of Sitevision javascripts have been removed from the HEAD-element. All external libraries will be loaded at the end of the BODY-element instead. This is best-practice for building high performance web pages. To further improve the end-users perception of performance we have consolidated and optimized CSS-resources, especially for web sites without Social Collaboration. This will minimize both the number of connections and the payload of data the browser needs to download.

Lazy load libraries

Sitevision modules that use large third party libraries now load the libraries on demand. A Library will be loaded only when a module depending on it is present on the current page. Some libraries will not be loaded until a certain function is activated by the user.

Lazy load images

The possibility to lazy load images below the fold has been added to the image module. When correctly used, this can dramatically decrease the loading times of large pages with a lot of images.

Result

All web sites built with Sitevision will see a dramatic increase of its score in performance measurement tools, right out of the box after upgrading to Sitevision 5. With some tinkering, especially on pages with a large number of images, even better results can easily be achieved.

Implications

All these changes comes with some implications that Sitevision developers must be aware of.

jQuery will be unavailable for direct access in inline javascripts!

All existing javascripts using the $svjq variable must be changed! jQuery will still be available for scripting, but all scripts using jQuery will have to be deferred to execute after the documentReady event. Sitevision introduces svDocReady - a utility to handle just that. Surround all inline javascript using jQuery with svDocReady and the result will be the same as before.

Since Sitevision now lazy-loads libraries for some of its modules. Custom functionality depending on libraries previously included by Sitevision might stop working. An example is jCrop which now only loads when a user actively uses the image crop functionality. Such functionality must be changed to actively load the library it needs.

SvDocReady to the rescue

As of version 4.5.4, Sitevision includes a utility named svDocReady. Inline scripts that needs jQuery or any other library included from the page, will have to be deferred via svDocReady. Deferring with svDocReady guarantees execution order and that Sitevision's third party libraries have been loaded before custom scripts are executed.

Prepare for Sitevision 5

Developers should start migration of inline javascripts after upgrading to Sitevision 4.5.4. This is highly recommended to ease the transition to Sitevision 5.