Tags

, , , ,

Just notes from some reading online!

Client Side performance is as important as the server side counterpart when it comes to maximising the user experience and competing in a market where response times of few seconds is expected. With sophistications brought to the applications by Web 2.0 and plethora of technologies, quite a lot of processing is done on the client side. Just doing server side performance testing would only reveal a part of performance issues.

Client side performance refers to anything related to how the web page is rendered by the browser. It depends on lot of factors like browsers and browser versions, OS, environment settings etc and involves things like Page rendering time, response time for requests JS, AJAX etc, loading time for CSS, JS, images etc.

What do we measure?

Some of the things measured are:

Time to first byte (TTFB): Time for the start of the initial navigation until the first byte of the base page is received by the browser, after following redirects.

Time to Start Render: Time from the first navigation until the first non white content is painted to the browser display.

Doc Complete Time: The Onload event which fires when all of the scripts, CSS and images defined in the HTML have finished loading.

DNS Lookup Speed: The time it takes your IP device to ask a DNS server for the IP address associated with a domain name.

Content download speed: The time it takes between loading the first byte to the last byte of the URL you’re testing.

Browser’s network waterfall is a good place to start the insights of how the page is performing.

There are various free tools you can use to check the basic client side performance like:

— YSlow

— webpagetest.org

— Google’s pagespeedinsights

Most Performance Testing reports will cover similar contents. This is a summary of what will be displayed in the report:

 

Minimize Redirects Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users.
Leverage Browser Caching Reduce the load times of pages by storing commonly used files from your website on your visitors browser.

Reduce page load times for repeat visitors

Particularly effective on websites where users regularly re-visit the same areas of the website

Specifying image Dimensions Reduce the load times of pages by storing commonly used files from your website on your visitors browser.

Reduce page load times for repeat visitors

Particularly effective on websites where users regularly re-visit the same areas of the website

Remove query strings from static resources Reduce the load times of pages by storing commonly used files from your website on your visitors browser.

Reduce page load times for repeat visitors

Particularly effective on websites where users regularly re-visit the same areas of the website

Specify a Cache Validator All static resources should have either a Last-Modified or ETag header. This will allow browsers to take advantage of the full benefits of caching.
Optimize images Reduce the load times of pages by loading appropriately sized images.

Reduce file sizes based on where images will be displayed

Resize image files themselves instead of via CSS

Save files in appropriate format depending on usage

Enable Keep Alive Enabling HTTP Keep-Alive or HTTP persistent connections allow the same TCP connection to send and receive multiple HTTP requests, thus reducing the latency for subsequent requests.
Minify CSS Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time.
Serve Resources from a consistent URL It’s important to serve a resource from a unique URL, to eliminate duplicate download bytes and additional RTTs.
Enable gzip compression for files sent from your server to the user
Minify JS
Minify HTML Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up downloading, parsing, and execution time.
Avoid Bad Requests Removing “broken links”, or requests that result in 404/410 errors, avoids wasteful requests.
Avoid a character set in Metatag Specifying a character set in a meta tag disables the lookahead downloader in IE8. To improve resource download parallelization, move the character set to the HTTP Content-Type response header.
Parsing of JS In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.
Minimize Request Size Keeping cookies and request headers as small as possible ensures that an HTTP request can fit into a single packet.
Optimize Order of Styles and Scripts Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time.
Put CSS in document head Moving inline style blocks and <link> elements from the document body to the document head improves rendering performance.
Minimize DNS Lookups The DNs information can be cached at ISP level and user level (OS cache and browser cache). For an empty DNS user Cache, number of DNS lookups is equal to number of unique hostnames in the webpage

See here for Google’s best practices  and here for Yahoo’s best practices!

Another useful resource is here for faster loading websites!

This link talks about the most prevalent issues!

 

Advertisements