Performance Engineering II

Continued from Performance Engineering I
Here we will check out what we can do at CSS and Javascript files to make the application efficient

CSS & Java-script
The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. Browser normally downloads CSS in parallel with other components except Javascripts

Make JavaScript and CSS External
Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser. If the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. The pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times.

Minify JavaScript and CSS
Minification is the practice of removing unnecessary scripts from code to reduce its size to improve load times. It is advised to remove unnecessary white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.
Inlined<> and </> blocks should also be minified. Minifying them will reduce the size by 5% or more.

Put Stylesheets at the Top
The HTML specification clearly states to declare style sheets in the HEAD section of the page. Adding stylesheets in the document HEAD allows the page to render progressively efficient. The browser display whatever content it has as soon as possible. This is important for pages with a lot of content and for users on slower Internet connections. This improves the overall user experience.
The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.

Avoid CSS Expressions
CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. They were supported in Internet Explorer starting with version 5, but were deprecated starting with IE8.
The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page.
One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression.
Choose over @import One of the previous best practices states that CSS should be at the top in order to allow for progressive rendering.
In IE @import behaves the same as using at the bottom of the page, so it's best not to use it.

Javascripts block parallel downloads.

Develop Smart Event Handlers
Avoid too many event handlers in page. Sometimes pages feel less responsive because of too many event handlers attached to different elements of the DOM tree which are then executed excessively. Using event delegation is a good approach. If you have 10 buttons inside a div, attach only one event handler to the div wrapper, instead of one handler for each button. Events bubble up so you'll be able to catch the event and figure out which button it originated from.

Put Scripts at the Bottom
When scripts are defined on top of the page they can take unnecessary time to load; they don’t show the contents that users are expecting. It's better to display the HTML contents of a page, and then load any scripting code.
Alternatively you can use the defer attribute, which runs the script at the end of page loading, but some browser does not support this attribute

Remove Duplicate Scripts
Duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution. In Internet Explorer, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.

Cookies and Images
Reduce Cookie Size Information about cookies is exchanged in the HTTP headers between web servers and browsers. It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time. Also care should be taken while setting cookies at the appropriate domain level so other sub-domains are not affected

Use Cookie-free Domains for Components
When the browser makes a request for a static image and sends cookies together with the request, the server doesn't have any use for those cookies. So they only create network traffic for no good reason. So it is necessary to make sure that static components are requested with cookie-free requests.

Optimize Images
You can check the GIFs and see if they are using a palette size corresponding to the number of colors in the image. Similarly try to save those images as .PNG, if you find reduction in image size, you can use PNG files in your web application

Optimize CSS Sprites
• Arranging the images in the sprite horizontally as opposed to vertically usually results in a 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 Scale Images in HTML Don't use a bigger image than you need and try them to scale using HTML tags

BeleTPL.com