chatbotAI FAQ Chatbot chat_svgHuman Agent

JS Factors

Dom Elements Status

The DOM stands for the Document Object Model for the HTML and the XML documents is an Application Programming Interface . A document formatter for the HTML/XHTML/XML and determines the state of the browser. HTML webpage can contains a DIV,HTML.BODY element on a page.Our tool WebAnalyzer will analyse the overall count of Elements and if the count is greater than 1300 it will directly affect your page speed. A well optimised website will not have more than 300 dom elements.

Make Ajax Response Cachable

AJAX is defined as Asynchronous JavaScript and the XML. It is used to fetch dynamic data from backend server with out reloading the webpage.It is an extention for the Javascript and is quite useful for Browser-based presentation using HTML and Cascading Style Sheets (CSS). Caching everything that can be cached is a nice way to optimised the web-page.Ajax has a way that allows this through their cache parameter providing a good performance gain.Caching must be always done by the library itself without any of the prior settings.

$.ajax({ type: "GET", url: "/homepage", data: "", beforeSend: function() {}, cache: true, success: function(data) {} })

Restrict Use of document.write

The document.write() method basically writes a string of text to a DOM stream which is then further opened by document.open().So, to put or add an extra content in our web pages, one should prefer Manupulating the DOM rather than than using document.write. There is a size limit for document.write() while writing too much data in a page. document.write() when called stills the page unless the whole content is writtem. So at the worse case, we should not use document.write() I think that the only limitation for the document.write() is the string length that you use (which depends on the browser used). However, a single string in any modern browser got practically no limits due to the new techniques of memory management.

Restrict Use of Bad Plugins

A plugin also called as extension or add-on is a software element that adds a particular feature to the existing program.One can do customisation for their needs in the software to add new features.While they are helpful but an oversized, un optimised plugin will take minutes to process and ultimately takes the website down.So the backend developers should be careful while implementing useless plugins. Web Analyzer will filter out the bad plugins which are taking overload on the webpage. Platforms like WordPress repository have unlimited access to free plugins but one should able to check out the reviews that the customers have written.Look out for the community before blindly putting a plugin.

Restrict Use of Duplicate JS

Duplicate JS files are used mostly due to the lack of awareness and in the case of fast deadlines to meet. Duplicate scripts hurt the speed and the page load time by creating unwanted requests (HTTP) in every browsers. It has nothing to do even when the script is already cached, extra requests are made on everytime the enduser refreshed or reloads the webpage. WebAnalyzer can analyse all the duplicates links in your webpage so that you can save your wasted page load time and speed for the page. Most of the "unused JS" in the project does not get removed and led to this particular factory Browsers like the IE and Firefox, duplicate JS scripts cause wasted time while evaluating the duplicate scripts more than one time.

Use of Defer Parsing

Defer Parsing means the loading or parsing of that javascript that only begins after the page content has completely loaded Not anyone simply understands how to correctly defer the parsing of the DOM elements. Some will say "just use defer" or "just use async" but these will not answer the problem of allowing a page to load and then load the external JS This code should be placed in our HTML just before the tag . I highlighted the name of the external JS file.

<script type="text/javascript"> function fetchjsatbeg() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", fetchjsatbeg, false); else if (window.attachEvent) window.attachEvent("onload", fetchjsatbeg); else window.onload = fetchjsatbeg; </script>

Avoid POST for Ajax Calls

Ajax is now-a-days go-to weapon for loading dynamic data from the backend. Sometimes we failed to use ajax methods properly and ends up doing bad impact on our website. So,Speaking of GET requests, one should always prefer GET requests because performance of these are far better than POST.However there are cases where we have to use POST so one can not argue there as it also depends in the particulars of the request. Two basic cases for these requests are : GET requests are designed to retrieve information from the server. POST requests are meant to produce a server feedback like the deletion or updation of a database record, firing a webhook and so on. ON the other hand ,GET requests are generally faster, so we should prefer Ajax with GET method.

Prefer Asynchronous Resources

The parsing of HTML content and loading of the javascript or css scripts should continue while the execution of these scripts will execute when it is ready.And we know that this execution will take the fewest bytes of load speed. We can check if a script is loading asychronously by looking at the async attribute. Now if the async attribute is not present instead defer attribute is present, then those scripts would be executed once the page has finished parsing. If neither of the attribute is present, then the script is retrieved and executed in parallel with the user-agents continues parsing the image. By preferring the asynchronous script the browser will keep parsing and rendering the content resources and the HTML that comes after the async script, without waiting for that particular async script to complete. This will ultimately gives a speed boost If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.


Minified JS

Minification is the process that is performed by evaluating,analyzing and rewriting the content of a webpage to reduce its overall size.
It is performed to minimise the size and optimizing the webpage speed. Web Analyzer can give the user's requested css files minified versions. This process is generally performed before a web-application is deployed or just before the production.
So when a user requests a webpage, thr minified version is sent instead of the old version, which ultimately results in the fast-response.
Minification has the direct impact on the server response time or time to first byte.Minification can greatly reduce the overall bandwidth-usage for both the company and the end-user.

Avoid E-Tag Headers :

E-Tag is a cache headers which servers uses to control how the clients should cache out their content.E-Tags are an alternative to "Last-Modified-Time" for to determining cache validation. With an Etag, it always uses the server to check the hash sum of a file, and only after that will the browser decide take it from the cache or load it completely.For sites where data and files are updating every now and then , it would not be a good practice to use E-Tag .ETag headers should generally not be used unless you have an explicit reason to need them

Restrict JS src Above Body

When a browsers loads a webpage and the JS sources comes in the way, the parser gets blocked and stop parsing the rest of the html and resources on the page. Once the script is downloaded and executed, the parser keep on parsing the rest of the HTML document.The delay in the parsing or halt causes major speed performance on the page load time.

Avoid type="text/javascript" Attribute

This attribute is use to recognise the content between the tags.HTML5 specification has clearly defined and made the attribute free and optional .It is being picked by default.For the most external links, this attribute sometimes used as a way for user agents so that they can avoid fetching resources they do not support.