Top Banner
Web Performance Optimization (WPO) General, Server Side and Technology level Techniques

Performace optimization (increase website speed)

Sep 08, 2014




This presentation is helpful for increase website speed.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Page 1: Performace optimization (increase website speed)

Web Performance Optimization (WPO)General, Server Side and Technology level Techniques

Page 2: Performace optimization (increase website speed)


General Level Optimization



Importance of Web Performance

Server Side Optimization3

Technology Level Optimization 4

Performance Measurement Sites5


Page 3: Performace optimization (increase website speed)

Importance of Web Performance

Even a few seconds delay is enough to create an unpleasant user experience.

57% of online shoppers will wait 3 seconds or less before abandoning the site.

Google engineers found that users begin to get frustrated with a site after waiting just 400 milliseconds – literally the blink of an eye – for web pages to load.

Source – Aberdeen Group

Page 4: Performace optimization (increase website speed)

Levels of Optimization

General Level

• Content• Cookie• CSS• JavaScrip

t• Image• Mobile





Page 5: Performace optimization (increase website speed)

Levels of Optimization

General LevelOptimization

Page 6: Performace optimization (increase website speed)

General Level Optimization

1. Minimize HTTP Requests

Most of the time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc.

How to minimize HTTP Request?

Combined files are a way to reduce the number of HTTP requests by combining all scripts and CSS into a single stylesheet and CSS respectively.

CSS Sprites are the preferred method for reducing the number of image requests.

Image maps combines multiple images to single image.

Browser Cache Usage - 40-60% of daily visitors to your site come in with an empty cache.

Page 7: Performace optimization (increase website speed)

2. Put Stylesheets at the Top

Various research shows that moving stylesheets to the document HEAD makes pages appear to be loading faster.

The problem with putting stylesheets at the bottom of the document is that it prohibits progressive rendering and user’s stuck viewing a blank white page.

Placing stylesheets in the HEAD allows the page to render progressively.

Vital for pages with a lot of content and for users on slower Internet connections.

General Level Optimization

Page 8: Performace optimization (increase website speed)

3. Minify JavaScript and CSS

Minification reduces response time and the size.

Few popular tools for minifying are:


YUI Compressor

Google Closure Compiler

Obfuscation is an alternative optimization.

Both methods achieves fairly the same size reduction (Minification achieved a 21% size reduction, where 25% for obfuscation), but obfuscation is bit risky with JavaScript.

Should minified in-line JS and CSS as well (5% reduction).

General Level Optimization

Page 9: Performace optimization (increase website speed)

4. Avoid CSS Expressions

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically.

Supported in IE starting with version 5, but were deprecated starting with IE8.

Adding a counter to the CSS expression allows us to keep track of when and how often a CSS expression is evaluated.


Use one time expression instead of CSS expression.

For Dynamic throughout style property, use Event handler.

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

General Level Optimization

Page 10: Performace optimization (increase website speed)

5. Make JavaScript and CSS External

Using external files produces faster pages.

JS and CSS files are cached.

In-lined increases the document’s size.

Many documents could re-use them.

To reduce HTTP requests in the front page:

In-line JavaScript and CSS, but dynamically download the external files after finished loading.

General Level Optimization

Page 11: Performace optimization (increase website speed)

6. Choose <link> over @import

The difference between them is that @import is the CSS mechanism to include a style sheet and <link> the HTML mechanism. However, browsers handle them differently, giving <link> a clear advantage in terms of performance.

In IE @import behaves the same as using <link> at the bottom of the page, so it's best not to use it.

General Level Optimization

Page 12: Performace optimization (increase website speed)

7. Put Scripts at Bottom

Browser do not download more than two components in parallel per hostname.

Block parallel downloads across all hostnames.

Block rendering of everything below them in the page.

Never uses document.write.

General Level Optimization

Page 13: Performace optimization (increase website speed)

8. Remove Duplicate Scripts

Two of Ten top sites contains duplicated script.

Main factors increase the odds of a script being duplicated in a single web page is team size and number of scripts.

Hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.


Implement a script management module in your template system. The typical way to include a script is to use the SCRIPT tag in your HTML page.

An alternative in PHP would be to create a function called InsertScript.

<script type="text/javascript" src="menu_1.0.17.js"></script>

<?php insertScript("menu.js") ?>

General Level Optimization

Page 14: Performace optimization (increase website speed)

9. Optimize Image

Image needs to be optimized before you FTP those images to your web server, after designer is done with creating the images for your web page.

Key things are

Check the GIFs, whether palette size corresponding to the number of colors in the image.

Try converting GIFs to PNGs (except for animations).

Run pngcrush (or any other PNG optimizer tool) on all your PNGs.

Run jpegtran on all your JPEGs.

General Level Optimization

Page 15: Performace optimization (increase website speed)

10. Optimize CSS Sprites

Arranging the images horizontally (makes the smaller file size).

Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.

Don’t leave big gaps between the images in a sprite.

It makes the user agent requires less memory.

General Level Optimization

11. Keep Components Under 25kb for Mobile Site

iPhone wont cache components > 25K (uncompressed size).

Minification is important because gzip alone may not be sufficient.

Page 16: Performace optimization (increase website speed)

12. Don’t Scale Images in HTML

Do not use a bigger image than you need.

If you need

<img width="100" height="100" src="mycat.jpg" alt="My Cat" />

then mycat.jpg should be 100x100px, rather than scale down from 500x500px image

General Level Optimization

Page 17: Performace optimization (increase website speed)

13. Make favicon.ico Small and Cacheable

Browser will always request it, better not to respond 404.

• Cookies are sent every time its requested.

• Also interferes with the download sequence in IE.


Make it small, preferably under 1K.

Set Expires header when you feel comfortable.

Imagemagick can help you create small favicons.

General Level Optimization

Page 18: Performace optimization (increase website speed)

14. Avoid Empty Image src

Image with empty string src attribute occurs more than one will expect.

It appears in two form: –

Straight HTML <img src=" "> JavaScript var img = new Image();

img.src = "";

Browser makes another request to your server.

Cripple your servers by sending a large amount of unexpected traffic.

Waste server computing cycles.

Possibly corrupt user data.

HTML5 instruct browsers not to make an additional request.

Empty image src can destroy your site.

General Level Optimization

Page 19: Performace optimization (increase website speed)

15. Avoid Redirects

Redirects are accomplished using the 301 and 302 status codes.

Redirects slow down the user experience. Nothing can be rendered Round-trip request

Add Expires headers to cache redirects.

Wasteful Redirect, i.e. when a trailing slash (/) is missing from a URL that should otherwise have one.

This is fixed in Apache by using Alias or mod_rewrite, or the DirectorySlash directive if you're using Apache handlers.

HTTP/1.1 301 Moved Permanently


Content-Type: text/html

General Level Optimization

Page 20: Performace optimization (increase website speed)

16. Make Ajax Cacheable

Expires or Cache-Control header.

Adding a timestamp to the URL – &t=1190241612.

When it has been modified, send with a new timestamp.

The most important way to improve the performance of Ajax is to make the responses cacheable

17. Avoid 404’s

Ineffectual response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit.

General Level Optimization

Page 21: Performace optimization (increase website speed)

18. Reduce Cookie Size

HTTP cookies are used for a variety of reasons such as authentication and personalization.

It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.

Eliminate unnecessary cookies.

Keep cookie sizes small.

Setting cookies at the appropriate domain level.

Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

General Level Optimization

Page 22: Performace optimization (increase website speed)

Levels of Optimization

Server LevelOptimization

Page 23: Performace optimization (increase website speed)

1. Implement Content Delivery Network (CDN)

The users proximity has an impact on response times.


Use a CDN: Akamai Technologies, EdgeCast, Amazon CloudFront, or level3.

Distribute your static content before distributing your dynamic content.

At Yahoo, using a CDN improved response times >= 20%.

Server Level Optimization

Page 24: Performace optimization (increase website speed)

2. Reduce DNS Lookups

Domain Name System (DNS) maps hostnames to IP addresses.

On average, takes 20-120 Milliseconds.

IE caches :DnsCacheTimeout : 30 minutes

Firefox :network.dnsCacheExpiration : 1 minute(Fasterfox changes this to 1 hour)

Reducing hostnames reduces the DNS lookups, But it reduces parallel downloads.

Better to split these components across at least two but no more than four hostnames.

Server Level Optimization

Page 25: Performace optimization (increase website speed)

3. Split Components Across Domains

Splitting components allows you to maximize parallel downloads.

Make sure you're using not more than 2-4 domains because of the DNS lookup penalty.

For Instance, you can host your HTML and dynamic content on and split static components between and

Server Level Optimization

Page 26: Performace optimization (increase website speed)

4. Use Cookie-free Domains for Components

Create www site and sub-domain.

that sub-domain is cookie-free.

Buy a whole new domain if already set on domain without www.

Yahoo! uses,

YouTube uses,

Amazon uses and so on.

Some proxies might refuse to cache the components that are requested with cookies.

Server Level Optimization

Page 27: Performace optimization (increase website speed)

5. Add Expires or Cache-Control Header

Use "Never expire" policy for static components by setting far future Expires header.

For dynamic components, use an appropriate Cache-Control header to help the browser with conditional requests.

Avoid unnecessary HTTP requests on subsequent page view after the first visit.

Server Level Optimization

Page 28: Performace optimization (increase website speed)

6. Gzip Components

Gzip is effective compression method compared to deflate.

Key Features are

Reduces response times. The response size ~ 70% reduction. 90%+ of browsers support gzip. Compress any text responses. Image and PDF files SHOULD NOT be gzipped.

In Apache, the module configuring gzip depends on your version: Apache 1.3 uses mod_gzip while Apache 2.x uses mod_deflate.

Server Level Optimization

Page 29: Performace optimization (increase website speed)

Levels of Optimization

Technology LevelOptimization

Page 30: Performace optimization (increase website speed)

General Guidelines

Keep the Joomla! Version updated.

Choose extensions wisely.

Deactivate unused extensions, upgrade used.

Simplify your templates as much as possible.

Use Cache.

Optimize the MYSQL Statements.

Use limited number of Records in SQL.

Enhance Joomla! Web

Page 31: Performace optimization (increase website speed)

1. Flush Buffer Early

Normally, it may take 200 to 500ms for the backend server to stitch together the HTML page, once a user request a page.

The browser remains idle until data is received.

In PHP flush() function allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page.

The benefit is mainly seen on busy backend or light frontend.

Flushing after the HEAD is optimal, as it allows to include any JS and CSS.


Technology Level Optimization

... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content -->

Page 32: Performace optimization (increase website speed)

Performance Measurement Sites

Page 33: Performace optimization (increase website speed)