It is important to optimize the backend as well as the frontend of any web application which runs on desktop and mobile platforms. It is vital to look into the frontend first:

  • First impression is the last impression as frontend is the wrapper to whole application.
  • UI (user interface) response time matters since user is concerned about frontend only.
  • Mobile has less memory and search engines penalize non-mobile friendly websites.

WebApp-001

80%-90% of the end-user response time is spent on the frontend, so start there.

Rules

There are twelve important rules, as well as other rules to optimize the frontend:

Rule 1: Make Fewer HTTP Requests

It is a starting point. The number of HTTP requests depends on the components you are using in your markup. There are some techniques to reduce the number of HTTP requests.

Image Maps

The images which are appearing in a sequence on a page can be fused into a single image rather than separate images. The example could be a main menu.

CSS (Cascading Style Sheets) Sprites

WebApp-002

The small images like navigation arrows, home icons, etc., can be merged in a single image. The positioning and visibility of the area of this image is controlled using CSS.

Rule 2: Use a Content Delivery Network (CDN)

WebApp-003

CDNs are a network of computers in different geo locations of the world. The concept is that whenever a user hits your website, content from the nearest computer of the CDN is retrieved.

Rule 3: Add an Expires Header

Adding an expires header to a component tells the browser that the respective component should be cached for faster retrieval.

Rule 4: Gzip Components

Always GZIP components except PDF and images since it reduces component size by 70%.

Rule 5: Put Style Sheets at Top and Scripts at Bottom

If style sheets are at top, it will make progressive rendering and will avoid flash of un-styled content & white screen issues. Similarly, these issues can be avoided if all scripts are at bottom. In addition, Defer or Async attributes can also be used to achieve the latter.

Rule 6: Make JS (JavaScript) and CSS External

Avoid using inline JS and CSS. Not only are inline scripts and styles difficult to manage, they are also not cached by the browser. Use external JS and CSS files for your scripts and styles respectively and include their references in your pages.

Rule 7: Reduce DNS (Domain Name Server) Lookups

WebApp-004

From 20ms to 120ms are spent while looking up the DNS of any domain. It is recommended to not use not more than four domains to increase the frontend response time.

Rule 8: Minify JS and CSS

It is always advised to reduce the JS and CSS file sizes. Minification is one of the techniques in which white spaces and comments are omitted to reduce the file size.

Rule 9: Make AJAX (Asynchronous JavaScript and XML) Cacheable

Usually, AJAX is based on POST requests which is non-cacheable. Use the GET method instead to make it cacheable but keep note that GET is not secure as compared to POST.

Rule 10: Post or Pre-Load Components

It is good to display UI related things first so that the user gets engaged while heavy components are loading in the background. This is called post-loading components. On the other hand, you can pre-load components for subsequent pages if you know where the user will navigate after the current page.

Rule 11: Reduce the Number of DOM Elements

If a design can be achieved using fewer divs then it is recommended to do so. Also, avoid using nested tables as they will slow down UI rendering.

Rule 12: Don’t Scale Images in HTML

It is recommended to use multiple sizes of same image which fits appropriately on various places as per design.

Toolkit

YSlow, Browser Plugin

WebApp-005

It is easily available for popular browsers. It is accessible from the Developer Tools where a separate tab – by the name YSlow – is created for it. It assigns grades depending upon overall performance score, which is based on the rules covered in this blog as well as some other performance rules. It pin-points current issues in hand and increases score, as long as you fix the identified issues.

PageSpeed, Chrome Browser Plugin

WebApp-006

This plugin is exclusively for Google Chrome. It offers more suggestions compared to YSlow.

Other Tools

  • JSPerf
  • LabJS
  • LSLint

Checklist

Here you can download a frontend optimization checklist with some pre-populated information. This checklist is a basic tool to track everything while fixing frontend issues. It has various columns which are explained in the following:

Column Name

Purpose

Release / Sprint Unique number of release / sprint in which development is in progress
Page Name Feature Name or Page Title
Page URL Page URL
Optimization Technique Optimization technique applied to fix an issue
Description Details of the optimization technique in case somebody is not aware of it.
Done? (Yes/No) Technique applied or not yet
Comments Comments