XPages site addressing modern Domino
TwitterFacebookGoogleLinkedInEmail

XPages is not slow part 1 Client Side

I keep hearing XPages is slow.  What I have noticed is when you go into building a XPages application without any planning.  Your going to eventually hit a world of hurt.  This is true for any platform be it PHP, .NET, Oracle or J2EE based applications.  For most Notes developers, this is a new development paradigm.  When your developing in XPages, you are building a interactive web application that may be run on any type of media.

If you develop as you get requirements then chances are your application will not have the same user experience throughout each of its features.  Take my advice, plan out your application before you start building or else you’ll have a lot of unpaid hours spent fixing bugs and reworking already coded functionality.

Planning doesn’t stop at deciding what technologies to use.  To be an XPages Architect, you need to build a security model, navigation between screens saving user state between events, communicating system status to the users, giving the user a sense of control when using your application, the data model and how it will be used later by other features or reports.  I always tell developers worry about your data structures and algorithms before the code.

After you’ve done your best practices developing your application, its time to test performance on the client side and server side.  Don’t focus on both areas at once.  In this part I’m choosing the client side.  You can reference Google Dev Tools to see how this tool can help you.

These rules are well known in the web development industry and they apply to XPages development.  Your not in Kansas anymore Dorthy. Welcome to XPages!

Using Google Dev Tools Network Panel

Disable caching first.

The Browser is ready when the page is parsed, all css applied, all images download, and all JavaScript files downloaded.  You can delay the download of JavaScript files so your page can load faster.  Almost all new browsers support <script async=”async” when using a tag with src=”… -But XPages does not allow this in the <xp:script /> tag.  When to use this? When loading libraries that will not be needed right away when the home page is displayed to the user.

1. Remove any unnecessary resources to be loaded.  This includes all things your not going to use on your page.  This includes the computed text you used a few weeks ago to display a ViewScope value. You also lose a lot of load time on failed resources that do not load.  Get rid of them.  One thing you can do server side is use the loaded=”false” on design elements you do not want visible in production.  They will be ignored and avoid being rendered through the JSF life cycle.

2. Minify and compress your JavaScript files.  When going into production, its best to have one JavaScript file minified.  Meaning there is no white space.  You will save a lot here because the browser is not making a trip to the server for every file.  At the end of the day, all .js files are loaded anyway.  Why not do it in one shot?

3. When downloading images.  Make sure the images are sized correctly.  There is no reason you need to download a 1MB image to display it in a 35px x 35px area.  In addition to downloading this image, your browser has to re-size it.  Save the browser from doing unnecessary work.

4. Learn to use image sprites.  This is where you combine all your images into one file and download it once and use everywhere.

5. Minify your CSS files.  Remove unnecessary styles and redundant styles.  Why tell the browser to set a class five times through different css files?  I’ve seen this on projects with multiple developers and no lead.   This takes processing time.  You should be creating a style guide for your application.  This will help avoid bloating your styles when working in teams and helps scale your style methodology as new requirements come in.

6. Save jpg files for photographs.  Use png’s or gif’s for simple images using mostly solid colors without lots of gradients.

Follow these guidelines to ensure you have optimized the load time of your XPages application at the browser.  I’ll address Server Side in a few days.