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.
80%-90% of the end-user response time is spent on the frontend, so start there.
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.
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
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)
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.
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
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.
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.
YSlow, Browser Plugin
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
This plugin is exclusively for Google Chrome. It offers more suggestions compared to YSlow.
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:
|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|