WHITE PAPER

PRESENTATION TIER
PERFORMANCE OPTIMIZATION

Abstract
The performance of websites was always a critical non-functional
requirement. A better performing site directly translates into better user
experience, repeated site visits, and hence increased revenues. A fast
performing site invariably provides a competitive edge as well. Also these
sites are often indexed faster by search engines and often appear at the top
of search results8.
An ever increasing expectation for performance of websites means that Web
pages need to be designed to be optimal and fast rendering. Many a times,
websites lose their customers in a blink of an eye if they are a sub-second
slower than their competitors1
This white paper discusses this critical non-functional requirement, methods
to achieve it, and draws examples from various real-world scenarios. Most
of modern applications follow layered architecture mainly consisting of
three key Layers: presentation layer, business layer and integration layer. An
optimization approach invariably involves all the layers. This white paper
mainly focuses on the optimizations in the presentation layer.
 Need for Speed the number of clicks and transactions design and development.
performed on the site, which would
Not long back even a 2-second page b. Top-down strategy: This is a reactive
eventually result in the loss of users2.
strategy which involves doing a
response time was considered as an
post-mortem of pages when any
acceptable one. However, web users have
become increasingly impatient when Strategies of presentation performance issue is discovered.
This involves analysing the page
it comes to speed these days. Earlier, layer performance
components and targeting the
speed was considered a feature and now optimization
optimizations which reap big and
it is deemed a necessity. Additionally, There are broadly two main categories quick benefits and iteratively enhance
technological innovation in mobile space adopted for performance optimization: other components. This is potentially
has raised the bar for speed. Hence, speed costly and the cost mainly depends
a. Bottom-up strategy: This involves
makes a lot of economic sense now. on the phase during which the issue is
carefully laying out the ground rules
A recent research found that 250-450 uncovered.
for performance based on required
milliseconds are the magical numbers SLAs and design / develop the pages Subsequent sections discuss these
that decide the winner in the race of by adopting the principles laid out. This strategies in detail.
web speed . Research also indicates that
1 is the preferred approach that involves
the slower the site, the lesser would be optimization in both presentation layer

Bottom-up performance optimization

This strategy essentially is performance-by-design wherein performance optimization principles are framed, applied, and maintained right
from application design phase. This is the preferred strategy to incorporate performance as a core development principle instead of having it
as an afterthought which involves following key stages:

1. Layout performance principles

2. Execute the performance principles by identifying the key pages/transactions and optimizing them

3. Monitor and maintain the performance SLAs

• Start with performance best • Identify the key pages and

practices check-list transactions/functionalities
• Use the check-list as basis for
Develop/ Identify key • Target the optimizations for
user interface development update pages/ those pages and transactions
principles transactions

• Test the performance of pages

Test and Apply • Apply performance
using automated tools for re-iterate performance optimizations like merging,
required performance optimizations minifying, CSS sprites, HTTP
• Update the principles if required compression etc to the list
and repeat

External Document © 2018 Infosys Limited

Step – 1: Layout performance principles
An organization can create a performance guideline framework that forms the guiding principles for individual projects. The performance
guideline framework can be constructed based on:

The performance service level i. Page render time across different geographies
agreement (SLA) the organization
has promised to its customers : ii. Overall transaction time for key processes.

i. Richness involves providing feature rich client-side components like widgets and
Making the user interface rich as pages with high degree of intuitiveness
well as responsive: ii. Responsiveness and interactivity involves making those client-side components
highly interactive by adopting techniques like partial-page-rendering.

i. Minimize number of HTTP requests

Request optimization for a page ii. Minimize amount of data requested per request by maximizing usage of client-side
which mainly involves: components wherever possible and employ partial page rendering to avoid the full
page refresh.

i. Using cache headers

ii. Caching lookup lists

Adopting wide variety of caching
strategies across various layers iii. Caching can be applied at webserver, server side, database layer and other possible

which involve things like integration layers

iv. Avoid 3rd party plugins unless absolutely required. Even when they are included, only
load the scripts on-demand and keep the 3rd party scripts at the bottom of the page.

i. Minimizing number of JS/CSS/Image files by minifying and merging them

ii. Appropriate positioning of the files to improve the perceived page load time for user.
Optimizing static assets like iii. Use PNG format of image always
images, JavaScript, CSS, JSON
which involves iv. Encouraging usage of CSS sprites

v. Use lazy loading of content wherever possible

vi. Avoid iframes and redirects to the best extent possible

i. Understand the key application expectation from end uses by conducting usability
studies, surveys, interviews and A/B testing. Once the key expectations are
understood design performance strategies around these expectations

Heighten the user experience of ii. Adopt process improvements such as:
key business processes: 1. Reduce number of steps/pages for completing the overall process

2. Automate the steps in process to the extent possible.

3. Provide quicker alternatives for a business process like one-click checkout,

guest shopping etc.

External Document © 2018 Infosys Limited

 Step – 2 Execute performance principles
Once the performance ground rules are set, individual project teams can implement the performance guidelines by adopting various
optimization techniques applicable to their context. Optimization occurs at two levels:

• During application design

• During application development

Application Design Optimizations

Some of the design optimizations emerge from performance guidelines laid out in step – 1. Following list provides few key design
considerations from performance point-of-view:

Simple and Lightweight: Keep the

frequently used pages like home page and i. Including only key functionalities to keep it light weight
landing page simple and yet effective. This ii. Having optimized marquee images
would involve things like

Provide interactivity through usage of i. Wherever possible, employ partial page rendering to avoid the full page refresh.
client-side components:
ii. Adopt client-side validation framework to catch the errors
Provide intuitive information architecture i. Providing optimized search functionality on all pages to reach any page using
and easy navigation after careful and keyword search
thorough research of key functionalities.
This involves things like: ii. Providing elaborate menu to allow the user to navigate to any sub level page.

i. Provide alternate versions of pages / functionalities to multiple devices

Provide multi-channel interface:
ii. Provide cross-channel integration for seamless user experience
i. Provide personalized experience based on user’s previous browsing history.

ii. Remember user’s preferences to customize the key functionalities such as search, navigation
Enhance user overall experience by
leveraging client-side components: iii. Recommendations based on transaction history

iv. Leverage web analytics to gain insights into customer’s implicit preferences and use it for
further customizations

i. Wherever possible load the data only on-demand instead of pre-loading all the data. For
instance:
On-demand data loading:
1. Use pagination for search results and load the second page only when requested

2. Information in the popup can be loaded only when user clicks on popup link.

i. Come up with process for automating and make it part of process. For instance merging and
minification can be automated and added to the build process

ii. Identify all the tools which help in automation and optimization to improve productivity

1. Use tools like Google PageSpeed, Yahoo YSlow etc. for constantly checking the page
Identify areas for automation:
performance.

2. Use tools like Gomez for identifying page performance across geographies.

3. Identify Web analytics tools for automatically tracking the user activities and page
performance.

Avoid chatty service calls i. Minimize the service calls from presentation tier

Encourage asynchronous calls i. Wherever possible promote asynchronous calls between presentation tier and
business tier.

External Document © 2018 Infosys Limited

Application development performance optimizations
Before discussing the techniques for performance optimizations, let’s look at the factors which contribute to page performance

Normally performance optimization is a multi-layer (presentation layer, business layer, database layer etc.) and multi-team (UI developers,
business logic developers, networking team, and Infrastructure team) effort. This paper primarily addresses the concerns related to the
presentation layer.

Factors affecting page performance

Today’s websites are expected to be highly user intuitive and feature-rich. They almost always compete in the online Olympics to serve
“richer, friendlier and faster” content. During development of some of these features, developers would inadvertently compromise
performance. Let’s examine few of the key features and their impact to page performance in detail:

Feature Factors affecting page performance

• Inclusion of multiple JavaScript libraries which build the UI modules and impart
interactive behaviour. This increases resource requests for a page.
Rich and Intuitive User interface using
• Inclusion of multiple CSS files for adding styles for the UI modules. This increases
client side modules resource requests for a page.

• Including the JS files at the top of the page which blocks the loading of subsequent page
components.

Support huge number of functionalities on

• More the functionalities more will be the Document Object Model (DOM)/page size.

the home and landing pages • Possibility of duplicate resource requests.

• Possibility of internal or external network bottlenecks.

• Include ads before the page load

Integration with 3rd party functionalities • Include lots of plugins like Twitter, Facebook, Google+, and LinkedIn etc.

• Include JS files required for site survey at the beginning of the page

Adding large marquee images / animated • Multiple images increases the resource requests
flash objects/videos on each page
• Bigger the asset size, larger would be the bandwidth consumption

Security requirements preventing usage of • Absence of client-side page components forces the user to load the full page for each
client-side components functionality. This would increase the overall time taken for completing a transaction.

• Absence of server side caching would aggregate the performance issue

Enable mobile access • Absence of device specific site and mobile accelerator would render the page slow in
mobile devices

External Document © 2018 Infosys Limited

 A deep-dive into User interface performance optimization techniques
Following table provides a comprehensive list of performance optimizations that can be carried out at a user interface level:

Performance Optimizations table

UI performance optimization Performance gains Tools and Techniques

Merge all the JS and CSS files • Minimize the total number of resource requests. • YUI
• Network round trip for additional resource trip is avoided

Minify: • Reduced size would minimize the response time • JSMin

• Minify the JS and CSS files • On an average there will be 30% reduction in the file size for • YUI
• Minify the HTML content JS and CSS files.

• On an average there will be about 20% size reduction

in page size.

Asset Placement: • As JS files are at the bottom of the page, it will not block the NA

• Place all external JavaScript links at serial load of the page. This would decrease the perceived
load time for the user. Many times 3rd scripts related to
the bottom
analytics and others has the potential to slow down the entire
• Place all CSS file links in the head site. Hence placing them at the bottom would eliminate this
element problem

Assets Optimization
• Results in multi-fold benefits such as reducing the number or • Smushit Image
• Use CSS sprites resource requests and reduced image size compressor

• Use lossless compression or PNG • Image compression would decrease the size by approximately • Trimage
files 25%

Compression • Absence of device specific site and mobile accelerator would • Content-Encoding
• Enable gzip compression for HTTP render the page slow in mobile devices header

traffic

Choose appropriate presentation • Use the JavaScript library which is enough to satisfy
components application requirements.

• Avoid loading unnecessary components of the JavaScript

library which are not used for page. For instance while using
DOJO library, we can create custom build to load only the
required components.

External Document © 2018 Infosys Limited

Caching
Caching requires a special mention among optimization techniques as it has potential to drastically impact the page performance if
optimally employed. Following are some of the caching techniques that can be employed at presentation tier:

Browser caching Web server caching

• Leverage browser caching by leveraging • Store the static assets in web server which are fine-tuned
headers like “cache-control” and “expiry” for for delivery of these assets
static assets.
• Leverage the cache settings for rendering the static assets

Cache controlled values on client side

Normally Web applications display list of controlled values. For instance, a typical registration form displays the list of allowed
countries in a drop-down. In such cases instead of reading the complete list of controlled values from the data source every time,
it can be added to a JSON file and cached as a static asset. The JSON can be refreshed based on update to the source data. Similarly
the client-side validation framework requires things like data patterns, validation business rules which can be stored in client-side
components like JSON/XML file.

CDN caching
Sometimes clients will be having performance specific requirement for each geography. Let’s say that we would like to render a
normal page across all geographies when the origin server is in the US, then even with fully cached and an optimized site, it would
be challenging to render the page within 2 seconds in the Asia Pacific region.

In such scenarios it is worth considering the Content Delivery Network (CDN)/Edge caching like Akamai, Amazon CloudFront.
CDN systems would cache assets like images/Videos/JS/CSS and would serve the content from geographically optimal location to
accelerate the page rendering.

Step – 3 Monitor and maintain performance SLAs

Post-production the application needs to be continuously monitored for performance issues. Following are some of the methods for
implementing the same:

Monitoring Additionally in-house custom tools can Maintenance

Following are some techniques that can be also be developed to do a health check of
servers and page load. A combination of
• All production updates should strictly
used for post-production page monitoring. adhere to the performance guidelines
effective in-house and external monitoring outlined in step above. For instance
infrastructure helps the site admins to
Page performance monitoring if there is a need to add additional
better respond to performance situations. JavaScript page, it must be minimized
Few web analytics tools like Omniture
provide the page load times which can be and merged with the existing master
constantly monitored for any performance Application Monitoring script to minimize HTTP request
issues Post production release the application
• While adding additional functionalities,
needs to be constantly monitored to client-side version of that functionality
Real time cross geography identify any performance bottlenecks and needs to be given preference to avoid
monitoring performance issues. Tools like IBM Tivoli full page refresh.
monitoring and IBM Tivoli composite
Systems like Gomez networks provides real
application manager (ITCAM) can be used
time monitoring capability which monitors
for this purpose
the site from various geographies on
frequent basis and notifies the site admin if
the site performance falls below specified
threshold.

External Document © 2018 Infosys Limited

 Case studies
Following are some of the real-world case studies related to performance optimization

Case study – 1: Banking client’s site performance optimization

Following graphs indicate the asset (JS, CSS etc.) contribution to overall page size and page load time:

By Size By load time

22.8
41 30.30 33.00

20.1
10.8 6 30.30
4.00

JS (935KB)
JS (12s)
CSS (827)
CSS (10s)
Image (273KB)
Image (1s)
Server resp (443 KB)
Server resp (9.8s)
Xhr

1. Context and Analysis

• The dashboard page consisted of large • The dash board page had too many b. Presentation layer:
number of functionalities. portlets which required lot of server
side processing
• All the performance optimizations
• To support large number of recommended in the performance
functionalities it also needed good optimizations table (merging and
number of scripts and CSS files 3. Performance Optimization Exercise minifcation, asset placement, browser
A thorough performance optimization caching etc.) was recommended.
• The page was taking about 30 seconds
for the first time load and about 10
exercise was carried out at all layers.
Following were the recommendations
• A CDN network like Akamai was
seconds for subsequent loads recommended to maintain acceptable
made: page load times across geographies.

2. Root cause a. Business layer:

• It was recommended to reduce the

• The performance optimization was an • Server side caching and connection number of portlets on a dashboard
after-thought rather than a bottoms-up pool was recommended. page. The optimal size of portlets on a
page is between five to eight.
approach.
• Batching of services call was
• The creative agency had missed the recommended to reduce the round
4. Results
performance optimizations for the trips to services layer.
delivered web artifacts that includes a. Page load times improved to
HTML, JS, and CSS etc. acceptable levels of 10 seconds

Figure 2: The proposed reporting mechanism

External Document © 2018 Infosys Limited

Case study – 2: Semiconductor based Manufacturing client’s site performance optimization
Another example of a frequently visited page for a North American based semiconductor major is shown below:

Home Grade Components Statistics

Statistics The page has a total of 65 HTTP requests and a total weight of 1005.7K bytes with empty cache

WEIGHT GRAPHS

Empty Cache HTTP Requests - 65 Primed cache HTTP Requests - 62

Total Weight - 1005.7K Total Weight - 110.3K
1 HTML/Text 110.3K 1 HTML/Text 110.3K
6 JavaScript File 705.5K 4 JavaScript File 0.0K
24 Stylesheet File 144.1K 23 Stylesheet File 0.0K
24 CSS Image 6.1K 6 CSS Image 0.0K
27 Image 38.2K 27 Image 0.0K
1 Favicon 1.4K 1 Favicon 0.0K

1. Context and Analysis a. Business layer: 4. Results

• The home page of the manufacturing • Out-of-the-box server side caching was • As a result of these performance
site consisted of multiple JS and CSS widely adopted for all content/data optimizations all HTTP based pages
files fetched from external systems were rendered within 2 seconds across

• The CSS and JS files were not minified (?) b. Presentation layer:
all geographies

• Most of the functionalities were doing a • All the performance optimizations

• All HTTPS based pages were delivered
within 5 seconds across all geographies.
complete page refresh which made the recommended in the performance
user to wait. optimizations table (merging and • Page views increased by 100% to 80,000
minifcation, asset placement, browser as compared to previous year owing to
2. Root cause caching etc.) was recommended. user experience improvements caused

• Development team had missed out the

• A CDN network like Akamai was
by client- side modules.
presentation layer best practices. recommended to maintain acceptable • Overall customer satisfaction increased

• Partial page rendering was not adapted page load times across varied to 81%, a major chunk of contribution
to the fullest extent. geographies. came from performance improvements
in HTTPS pages and client side
• AJAX based client side modules were
modules.
3. Performance Optimization Exercise suggested for key functionalities like
Following were the recommendations search, product finder to enhance user
made: experience

External Document © 2018 Infosys Limited

 Case study – 3: Top engine manufacturing client’s site performance optimization
Following graph indicates the asset size to page size ration of a supplier portal for energy major in North America:

Home Grade Components Statistics

Statistics The page has a total of 48 HTTP requests and a total weight of 1024.2K bytes with empty cache

WEIGHT GRAPHS

Empty Cache HTTP Requests - 48 Primed cache HTTP Requests - 47

Total Weight - 1024.2K Total Weight - 154.5K
1 HTML/Text 154.2K 1 HTML/Text 154.2K
18 JavaScript File 894.4K 17 JavaScript File 0.0K
4 Stylesheet File 48.7K 4 Stylesheet File 0.0K
14 CSS Image 11.5K 14 CSS Image 0.0K
16 Image 4.4K 10 Image 0.0K
1 Favicon 0.2K 1 Favicon 0.2K

1. Context and Analysis a. Business layer: • A CDN network like Akamai was

• Supplier and distributor portals • Batch the database calls and use
recommended to maintain acceptable
were taking about 25 seconds in the page load times across geographies.
Hibernate caching, lazy loading to
production environment. enhance the database operations. • AJAX based client side modules were

• Much of the page load time was spent • Use on-demand pagination instead of
suggested for key functionalities
in server calls and loading heavy static like pagination and dashboard
pre-fetching a large result set.
assets. functionalities.
• Rewrite the queries to use the database
• The database access layer consisting of indexes for faster performance. 4. Results
Hibernate was not optimized.
• Use optimal application server • Page load time reduced to within 10
parameters related to thread and seconds.
2. Root cause
database connection pool.
• Web components were not optimized
using performance best practices. b. Presentation layer:

• Server side code was not optimized • All the performance optimizations
recommended in the performance
3. Performance Optimization optimizations table (merging and
Exercise minification, asset placement, browser
Following were the recommendations caching etc.) was recommended.
made:

External Document © 2018 Infosys Limited

Top-down performance optimization
This strategy is employed when an existing application needs to be optimized for performance. This is preferred only when we are optimizing
legacy applications; all newly developed applications should use bottom-up strategy as the cost involved in top-down optimization is high
and optimization options are limited.

Getting the pages on a fast lane

Pareto’s principle of 80-20 rule applies well to performance related issues. This is true for both analysing root cause and for fixing the issue.

One would start with the critical performance optimizations that would result in major benefits in the initial iteration and involve the
remaining ones in subsequent iterations.

Following chart depicts the key performance optimizations and the performance gains that can be realized:
Ease of implementation

Performance gain

Following are the high level steps involved in top-down performance optimization:
1. Analyse the factors contributing to the page performance. We can use tools like PageSpeed, YSlow for performing this operation.

2. Start optimizing the activities which would realize maximum performance improvements. Above chart provides a guideline for this step

3. Iteratively implement other optimizations with subsequent releases.

Note:
1. The application design and the time available limits the performance optimization options in this strategy. For instance if the complete
application is developed without any client-side components, then developing client-side widgets would potentially involve major
application framework changes leading to higher development and testing times.

2. Application domain requirements need to be kept in mind while performing this step. For instance if security requirements don’t permit
usage of client-side components, then all optimizations related to that would not be applicable.

External Document © 2018 Infosys Limited

Few other dimensions
Real world scenarios are bit more challenging than what we have discussed till now. These would pose its own challenges for performance.
Few of them are discussed below

Transport level security Mobile device support

• Restriction for AJAX proxy which
Most of the financial sites and other sites As the mobile internet traffic is increasing, prevents content served from different
which transmit confidential information following are few thoughts to keep the site domains
optimized and ready for mobile devices:
employ transport level security and serve
content over HTTPS. As the delivered
• Mandatory usage of HTTPS for all pages

content is encrypted at the transport layer,

1. Support an alternate version of your
site for mobile devices which has an
• Heavily loaded pages to incorporate
multiple functionalities
there is an obvious performance trade-off optimized layout and images to suit the
for this. Following are some of the options In such instances optimization can be done
mobile platforms.
that are worth considering in this scenario: mainly for the server side components.
2. Keep the pages light and load the JS
1. Carefully evaluate if a page really needs code through XHR call
HTTPS. If it just displays public content Future outlook
3. Many servers provide mobile
and campaigns, it is better-off to serve accelerators Some of the future trends in performance
them over HTTP instead of HTTPS optimization are given below:

2. CDN networks also have modules Security vs. Speed 1. HTML 5 offers a whole array of features
which would speed up the delivery for While building financial sites, there could related to performance optimization.
SSL sites. Consider employing them. For be instances wherein the performance This includes hardware acceleration
instance Akamai offers secure content principles cannot be fully applied due to support for graphics and video
delivery. security constraints. For example:
2. Offline web apps features in HTML
Additionally, we can also consider using • The financial firm has restriction 5 can be leveraged to serve static
hardware SSL accelerators like that of Blue for using client-side modules and informational content.
Coat and Coyote Point. functionalities.

About the Author

Shailesh Shivakumar
is a Technology Architect with the Manufacturing unit at Infosys. He has over 10 years of industry experience. His areas of expertise
include Java Enterprise technologies, portal technologies, User interface components and performance optimization.

He can be reached at shailesh_shivakumar@[Link]

For more information, contact askus@[Link]

© 2018 Infosys Limited, Bengaluru, India. All Rights Reserved. Infosys believes the information in this document is accurate as of its publication date; such information is subject to change without notice. Infosys
acknowledges the proprietary rights of other companies to the trademarks, product names and such other intellectual property rights mentioned in this document. Except as expressly permitted, neither this
documentation nor any part of it may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, printing, photocopying, recording or otherwise, without the
prior permission of Infosys Limited and/ or any named intellectual property rights holders under this document.

[Link] | NYSE: INFY Stay Connected