chatbotAI FAQ Chatbot chat_svgHuman Agent

CSS Factors


Preload or prefetch in the link tag uses early fetch request to get the content . This will imply that these resources are fetched earlier and are less likely to block the page's first render, which ulitmately will lead to better page performance. It is generally used where high priority resource must be requested at first that is used in current route.

Preload: W3C released link re=”preload”, which means web developers can now tell the browsers how to load resources on their website.
It gives the developers the capability to assign the custom loading logic without suffering the performance issues which script-based resources loaders draw.
Preload is totally different than the prefetch in the sense that it focuses on current navigation and fetches resources with high-priority.
How To Use:

<link rel="preload" href="style.css" as="style">

Preconnect: One of the the easiest ways to speed up your website or application is to simply add preconnect hints for any hosts that you will be requesting assets from. These hints essentially tell the browser what origins will be used for resources, so that it can then prepare things by establishing all the necessary connections for those resources.It helps in resolving handshaking for the DNS and TCP.
How To Use:

<link rel="preconnect" href="https://www.esferasoft.com/css/bootstrap.min.css" crossorigin>

Prefetch:Prefetching a process where the browser fetches the resources required to display a specific page that the consumer is likely to get in its second click. In other words, the browser loads a page that you’re probably going to visit in the future. The browser can store these resource in its own local cache,further to send the requested information quicker if the user does end up visiting that page.

It helps to fetch the resource and places it in the cache whenever the resources needs take it from the cache instead of making another request.
while Prefetch focuses on fetching resources for the next navigation which are low priority. It is also important to note that preload does not block the window’s onload event

Restrict Use of @import :

Import function in the css will dramatically affect the page load time as it is not in asycn function.Javascript is synchronous and single-threaded.For example if we use @import in IE(Internet Explorer) the function will execute resources to be downloaded in different order than specified. So, the outline is if we want to download the stylesheets in parallel we must use the LINK attribute instead of @import.

So below are the two methods explaining how to include a stylesheet in our web page.
The recommmended link tag

<link rel='stylesheet' href='a.css' >

The @import rule:

<style>@import url('a.css');</style>
Using @import will add one more roundtrip to the overall download time of the page.This will ultimately cause the stylesheets to be longer to download ,which hinders progress rendering causing the web page feel slower.

Restrict Use of !important :

Cascading style sheets are intended to, well, cascade. !important declarations overides the cascading nature of CSS and are frequently viewed as a hack.But like most things proposed to the CSS specifications,!important has a few reasonable applications.

All !important does is increase specificity. If we want to avoid using !important, all we need to do is increase specificity. But doing that can unnecessary destory the original structural and optimise rule of basic stylesheet. It's easy to use unproperly, and it multiply, particularly when misused. One can easily end up with a element with !important rules that you want to override, for which we have to either refactor your styles, or use another !important rule and contribute to the problem.

Restrict Use of CSS Expressions :

CSS Expressions are usally depreceated and are used in old browsers.IE for past versions have supported CSS expressions.
What exactly is CSS Expressions-
It is a javascript declaration which browsers like IE throughly understands and outputs as feasible CSS Style.Most of the expressions got tied to all of the events so their execution time does not depends on DOM load. The main drawback of CSS expressions are they are executed everytime we move the mouse around the web-page.So when a user is engaged in doing something on a webapage and we have used CSS-Expressions,we have done a little heavy in our javascript.On an average it is executed 10 to 50 thousand times on a page.
A typical example for a CSS Expression would be the dynamic calculation for CSS properties which is very easy but heavy.

#container{ width: expression(document.body.clientWidth > 400)? "400" : "auto"; /* For web browsers supporting it */ max-width: 400; }

Restrict OverUse of Style tags in Body :

Basically ,the <style> tag element in the CSS is used in CSS to add the style rules to an HTML DOM.This element generally used is document head.
But in some cases we found the tag in the body of the DOM.
There is basically no issue in <style> tags within the body taking into account we used them with a scoped attribute.But the problem we will face is to the restrict the scope of the stylesheet.Because they will apply it to the whole DOM.
It is very helpful to have enclosed CSS that only implies to a unique chunk of HTML, in order to make encapsulated, modular elements with unique and specific styling.
A typical example for this would be.

<html> <body> <style type="text/css"> p.first {color:blue} p.econdcolor:green}</style> <p class="first">Hello World</p> <p class="second">Hello World</p> </body> </html>

Restrict Stylesheets Links in Body :

The objective of this technique is to supplement the link text by adding additional text that describes the technique function of the link and styling the additional text so that it is not rendered on the screen by user agents that support CSS. Whatever the reason, CSS should be used less like any other element.
The best practise for CSS files is that they are typically so small that it's more often faster to download a one larger CSS file instead a number of parallel smaller stylesheets. For every stylesheet link that is used in the body, the browser everytime has to stop and and start the downloads multiple times and that will make a heavy load on the page.
A typical example for this would be.

<html> <body> <link href="/style1.css" rel="stylesheet"> <link href="/style2.css" rel="stylesheet"> </body> </html>

Limit External Stylesheets :

External style sheets are created in separate documents with a .css extension. An external style sheet is simply a listing of CSS rules. It cannot contain HTML tags. The <link> tag, which goes in the head of an HTML page, is used to link to an external style sheet. There is no limit to the number of external style sheets a single HTML page can use. Also, external style sheets can be combined with embedded style sheets. Follow these steps to create an external style sheet. There are however, times you should limit the use.

Avoid Duplicate StyleSheets :

Duplicate JavaScript and CSS files are used mostly due to the lack of awareness and in the case of fast deadlines to meet. Duplicate stylesheets 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 CSS" 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..

Minified CSS :

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

Avoid Use of box-shadow :

Adding box shadows is a nice method to conclude the depth and focus to our style. You have probably seen this trick before:
That trick adds a nice box-shadow to any of the selector.
Below is a code snippet that affects the webpage-performance :

.img{ -moz-box-shadow: 0 0 5px #555; -webkit-box-shadow: 0 0 5px #555; box-shadow: 0 0 5px #555; }

A basic way for an element that is used repeatedly on a page, it’s the best way to remove that if its one of the below properties.

box-shadow filter transform border-radius :nth-child

Avoid type="text/css" 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.

Use woff2 Fonts instead of woff

We should consider replacing the base Woff fonts with Woff2 fonts whenever possible.This would save many kilobytes of size and indirectly speed up the loading page time.One of the important factor is WOFF2 generally has better compression.W3C now recommends font/woff2. Following Browsers are Supported Google Chrome 36 Opera 23 Firefox 39 Opera 23 Edge 14 Safari 12

Use dns-prefetch Attribute

DNS prefetching is the process that makes the general browser to perform the DNS lookups on the page in the background when the user is surfing or browsing. The process will led to reduce the latency because the DNS lookup has already took place when the user clicks on the link. The syntax for adding DNS prefetching can be added by the syntax rel="dns-prefetch" tag.

Limit the size of fonts

A font is a accumulation of glyphs, out of each is a combine set of path explaining describing the letter form. Fonts can be compressed with GZIP or a compatible compressor.When selecting Google Fonts, generally avoid selecting all available styles and character sets just in case.

Unused Css Selectors

The unsed selectors or entries in the CSS files increase the page load time at the browser end.The reason being browser have to parse all the unused extra selectors and would take unnecessary load. Web-Analyzer would help you find such selectors so that you can identify the ones and remove them to optimise the website.