Wbsite Performance Optimization – part 1

First I will start with some basic questions that every developer should ask before start developing an app.

  • Do you use proper HTML tags?
  • Do you really need those extra tags just for a line of text or for a background image?
  • How fast it’s your page?
  • Your CSS files are not too big?
  • Have you minimized your JS/CSS files?
  • The images you use aren’t too big and to many?
  • Why so many http requests?


If you don’t have the answers to the above questions then dive with me in how to optimize your app.

Here are the points that I want to cover within this post:

  1. HTTP Requests
  2. Loading/Preload images and files.
  3. JavaScript optimization
  4. Optimized CSS – not just less CSS but optimized as well
  5. Including HD/SD images.
  6. Using sprites
  7. Image optimization
  8. Useful links

 

HTTP Requests

Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

Here are some steps that you can fallow to minimize your HTTP request:

  1. Enable gzip on compressible content
  2. Set aggressive far-future caching headers
  3. Use fingerprinting (not a tag number) within resources for caching efficiency instead of using conditional gets (Etags).
  4. Enable persistent connections

 

Loading

Building a pre-loader for the files, images or sounds may be a waste of time. Why should I build a function that does that. My app it’s smal.

Maybe it’s small and maybe you don’t need a pre-loader. But as the app gets new features like rating, highscore, invite friends then all this new features will increase the loading time.

A app of 4Mb on an EDGE connection from User Experience that will take forever to load. So isn’t it better to show to the user a message that the page it’s loading? The possibilities are endless as long as we have imagination.

Here are some examples:

loading image

All this small improvements can make the user wait up to 10 seconds extra. So why not building this?

Why should you load all the images when you don’t need them on the first page?
Why should you load the images from an unused page in the first page when the user doesn’t need them or even worse what if the user doesn’t access that page?

It’s not better to load at the beginning only what you need and serve to the user the page as fast as you can?
If the start page has only one image and 3 buttons why loading all the images from the other pages?

Build a function that requests the images/css based only on what the user clicks or on the actions that the user does.

Applying this the loading time of the page will decrease then all the users can access the web app even they are EDGE connection.

JavaScript optimization

How can you lose the weight?

  • Only load the JavaScript that will be used
  • Use the right compression tools
  • Before using JavaScript. Think. Sometimes things can be done with pure CSS or HTML
  • Structure/modularize
  • Keep it simple
  • Use it to enhance the UX, not to be the UI
  • LazyLoad/load on demand

Optimize execution speed
You can profile the JavaScript on a page with various tools:

  • Firebug “Profile”
  • Chrome “Profiles” panel in Developer Toolbar
  • DynaTrace Ajax
  • Chrome Speed Tracer plug-in
  • Android 4 Chrome Developer Tools

I will talk about the last point :
If you have a Android 4 phone then you can install the chrome browser then use the chrome developer tools.

Here is how you can install the Chrome Developer Tools

  • Download android-sdk for Windows/Mac/Linux which can be found here: http://developer.android.com/sdk/index.html
  • On the android-sdk folder there is SDK Manager access the .exe file and you will see the SDK Components.
  • Install the SDK Components that you need. Recommendation:
  • Extras folder
  • Android 4.0 and/or Android 4.0.3
  • Tools especially SDK Platform-tools which will be used later in the process.
  • Connect your mobile device to the host using USB wire. To communicate with the device you need the adb.
  • ADB can be found in the /platform-tools folder under the name adb.exe
  • When access the adb.exe for the first time a popup command line will show then it will close
  • On mobile device launch Chrome. Open Settings > Under the hood > Developers tools and check the Enable USB Web debugging
  • Open command line go to the \android-sdk-windows\platform-tools>adb.exe
  • After that do: adb forward tcp:9222 localabstract:chrome_devtools_remote
  • Open desktop Chrome and navigate to: localhost:9222
  • You will be presented with the list of links for pages currently open on your mobile Chrome. Click the desired link.
  • You can now start debugging and profiling mobile content in the Developer Tools on your desktop.
  • Start the developers tools again do the steps 8 – 10

Helpful links:
http://developer.android.com/sdk/index.html
http://developer.android.com/sdk/adding-components.html
http://developer.android.com/sdk/installing.html#components
http://code.google.com/chrome/mobile/docs/debugging.html

Javascript optimizations

  • Use caching/localstorage
  • Optimize iterations
  • Minimize DOM operations
  • Delegate events
  • Evaluate local variables

Optimize iterations
Try to find the most optimal kind of iteration. When using a for-loop, cache the iteration count (e.g. the array length).

In any case, cache the length of the loop so it doesn’t need to be recalculated in each iteration.
Please refer to http://jsperf.com/different-kinds-of-loop/5 to find a fast iteration for your situation (array, object, object and hasOwnProperty, do/while, etc.)

Minimize DOM operations
Complete the DOM operation before actually appending the new fragment to the DOM. E.g.

  • create the full string of HTML before setting innerHTML.
  • prepare the whole fragment with e.g. appendChild before appending the root element to the DOM.

Optimized CSS

Many developers use inline CSS for different HTML elements. Yes inline CSS can be faster. But when you apply the same style to 3 buttons the inline CSS  it’s not going to be faster.

It’s understandable to build the CSS from the JavaScript but it’s not easier to build a class where you can build the visual parts and then based on the id you can position the element?

Then you will have a lot of removed inline CSS. Build classes and add the class to the elements and through that class place your CSS.

This is wrong.

<div style="position: absolute; opacity: 1; width: 165px; height: 39px; left: 77px; top: 340px; text-align: center; line-height: 39px; font-family: Arial; font-weight: bold; font-size: 20px; color: #ffffff; z-index: 5;">Home</div>
<div style="position: absolute; opacity: 1; width: 165px; height: 39px; left: 77px; top: 287px; text-align: center; line-height: 39px; font-family: Arial; font-weight: bold; font-size: 20px; color: #ffffff; z-index: 5;">Some Page</div>

This is how should look lile:

<div class="buttons">Home</div>
<div class="buttons">Some Page</div>
.buttons {   position: absolute;   opacity: 1;   width: 165px;   height: 39px;   text-align: center;   line-height: 39px;   font-family: Arial;   font-weight: bold;   font-size: 20px;   color: rgb(255, 255, 255);   z-index: 5;  }

Proper usage of the CSS. Follow this basic rules and you will see an improvement on your loading time.

  • Remove duplicate rules
  • Remove rules in multiple files
  • Remove almost duplicates
  • Don’t use units when a value is 0

Execution of the rules

  1. Right-to-left
  2. Speed of selectors
  3. Avoid the descendant selector
  4. Execution Speed of Combinators

Right-to-left Execution
Keep in mind that when a browser is doing selector matching it has one element (the one it’s trying to determine style for) and all your rules and their selectors and it needs to find which rules match the element.

Note also that there are other optimizations browsers already do to avoid even trying to match rules that definitely won’t match. For example, if the rightmost selector has an id and that id doesn’t match the element’s id, then there will be no attempt to match that selector against that element at all in Gecko: the set of “selectors with IDs” that are attempted comes from a hashtable lookup on the element’s ID. So this is 70% of the rules which have a pretty good chance of matching that still don’t match after considering just the tag/class/id of the rightmost selector

Example:

  • .third { color: red; }
  • div.third { color: red; }
  • div.second div.third { color: red; }
  • div.first div.second div.third { color: red; }
  • .third: get every element and check for a class name third,
  • div.third: get every DIV element and check for a class name third,
  • div.second div.third: get every DIV element, check for a class name second, run through these and find every decendant DIV element and check for a class name third,
  • div.first div.second div.third: get every DIV element, check for a class name first, run through these and find every decendant DIV element, check for a class name second, run through these and finally check for a class name third.

Execution Speed of Selectors

  1. ID  (#myid)
  2. Class (.myclass)
  3. Tag (a,div)
  4. Attribute ( [attr=foo] )
  5. Universal (* or nothing)

BAD
button#backButton {}

BAD
.menu-left#newMenuIcon {}

GOOD
#backButton {}

GOOD
#newMenuIcon {}

Execution Speed of Combinators

  1. Child ( > )
  2. Adjacent Sibling ( + )
  3. General Sibling ( ~ )
  4. Pseudo ( :hover )
  5. Descendants ( > )

Avoid the descendant selector

The descendant selector is the most expensive selector in CSS. It is dreadfully expensive especially if the selector is in the Tag or Universal Category.

Frequently, what is really desired is the child selector. For instance, the performance are so bad, that descendant selectors are banned in Firefox’ User Interface CSS, without a specific justification. You should do the same on your Web pages

BAD
treehead treerow treecell-header {}

BETTER, BUT STILL BAD
treehead > treerow > treecell-header {}

GOOD
.treecell-header {}

Minification

Minify your CSS.
Some useful links:
https://developers.google.com/closure/compiler/
http://www.refresh-sf.com/yui/
http://www.minifycss.com/css-compressor/

I’ll end the first part of optimizing the webiste.
In the second part I will talk about:

  1. How you use HD/SD Images
  2. Media Queries in details
  3. Using Sprites
  4. Image optimization
  5. Useful links

One thought on “Wbsite Performance Optimization – part 1

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.