Quality and Performance report

http://www.brigadeutopia.net.in
Report generated on Oct 12, 2018 12:08:36 PM
Download report
SIMULATED VISITOR: Chrome Washington DC 10.0/2.0Mbps (Latency: 28 ms) Edit

Requests

28

Weight

758kB

HTML CSS Scripts Images Others
Timeline / Waterfall

First Byte

0.62sec

Start Render

1.67sec

Fully loaded

3.53sec


Browser warnings 0OK
HTTP/2 Ready: 7%
Speed Index: 2514

Technologies :

Font Awesome

Google Font API

Modernizr

Nginx

Twitter Bootstrap

jQuery

yepnope.js


Share this report by email

Feel free to share this report with your collaborators, by copying the URL from the address bar,
or by clicking below:

Share the report

Tips and best practices:

Things to improve

Browser rendering 

0/100

3 critical dependencies detected

The failure of a third-party content provider could bring an overall breakdown of your website.

Single Point Of Failure

A Frontend Single Point Of Failure (SPOF) is a critical dependency on a third-party content, that may block the entire display of your page in case of failure of the content provider.

As an example, if your web page uses a blocking script hosted by Google’s servers, then your page is reliant on any failure from this script. Please read this blog post dedicated to SPOF for more information.

How to avoid SPOF?

As far as possible, exclude any of these dependencies, even from renowned providers. If you have to use a third-party content, ensure that you choosed an asynchronous integration and that you have a fallback in case of problem.


We are checking if the tested web page depends (in a critical way) on some of most widespread external resources (googleapis, typekit,...). That are known as Frontend SPOF (Single Point Of Failure) cases.

The following resources represent a SPOF for this page:


 
Read more
Security 

0/100

You should use a secure connection (HTTPS)

HTTPS guarantees the confidentiality and security of communications over the internet: data is encrypted, so protected against attacks and data corruption.

Google is multiplying its actions to push more and more websites towards HTTPS. Google first added HTTPS in its SEO criteria (see the announcement). Since then, Chrome has been evolving and now highlights the absence of a secure environment in various cases where information is collected from users. Other browsers are also following this trend.

Setting up HTTPS on a website sometimes causes some reservations (cost, impacts on performance, compatibility with technical partners…). But the market has changed in recent years and you should not worry about migrating to HTTPS. You should consider switching your site to HTTPS.

How to set up the HTTPS protocol

You have to set up a certificate you got from a reliable certification authority. Learn more by contacting your website host who can help you getting this certificate. Besides, the following page help you in your migration procedure to the HTTPS protocol.

A free certificate? Try Let's Encrypt!

Let's Encrypt is a free, automated, and open certificate authority. Many hosting providers offer to enable the generation and automatic renewal of free certificates directly from the administration interface of your domain. Contact your website host for more information.


 
Read more
Security 

0/100

The Content Security Policy is missing

Protect you website from cross-site scripting (XSS) attacks by setting up a restrictive Content-Security-Policy.

XSS attacks explained

XSS attacks are a type of attack in which malicious data is maliciously added to websites. The number of vulnerabilities allowing these attacks is quite large, which is why it is as useful to prevent them as to limit their harmful effects.

You can protect your pages against these attacks and their effects by restricting execution to code portions either legitimized by the domain to which they belong or by a unique integrity token. The code that does not corresponding to this security policy will not be executed and the user will be informed.

You can learn more about XSS attacks on the Open Web Application Security Project (OWASP) Website.

Configure a "Content-Security-Policy" (CSP) HTTP header

Set up a "Content-Security-Policy" (CSP) HTTP header to prevent or limit damage caused by an XSS attack. To specify a security policy configure your server so the response of the first resource contains the "Content-Security-Policy" HTTP header.

Here's an example:

Content-Security-Policy: script-src 'self' https://apis.google.com

In this case, only scripts coming from the current host or https://apis.google.com will be executed.

Read more about the CSP HTTP header. You can also look at the CSP directives specification.

Please, be careful, if the header is misconfigured, some of your content, scripts, or styles may be blocked. That could cause unwanted side effects. Moreover, the restrictions apply to all pages of the website. We recommend you test the different pages of your website before deploying this header in your production environment.


No Content Security Policy on this page: it is more easily exposed to XSS attacks.


 
Read more
Browser rendering 

0/100

You can save one script execution

A library or an external script are usually intended to be called once per page. However, the use of widgets can lead to several useless executions.

Duplicate scripts

It is common to see scripts used multiple times within the same page. The most common case is the integration of social networks widgets. It can be useful to find them several times on the page. That is not a bad practice, however you should be careful that those scripts don't slow down your page.

What happens when a script is included 2 times in the code? How many times is it loaded? Parsed? Executed?

Most modern web browsers download only once a script included 2 times. An exception persists: Firefox, which will load the resource as many times as mentioned if no effective caching policy is configured.

Apart from this exception, performance issues come during the parsing and execution of the scripts. Indeed, if a script is placed three times in the code, it will be parsed and executed 3 times, on all browsers.

Do not hesitate to read this article on that topic.

How to fix it?

There is a solution to use a script several times without parsing and executing more than once. You need to write some JavaScript code that checks if the script is present. If the script is already included, it just uses it, otherwise it injects it and uses it.

Consider the following example with the Facebook widget, described in the article. Whenever you want to integrate this functionality into your page, it is necessary to include the following code:

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

The bold line checks the presence of the script in the document. So the script is included, parsed and executed only during the first call in the page. Other calls will fall in the case of the bold line, and therefore will just use the script that is already included and executed.


The following script is parsed and executed multiple times on your page:


 
Read more
Google Font API 

0/100

You should retrieve Google Fonts in one-time

The Google Font API allows to minimize the number of requests to retrieve the font you want.

The fonts with Google Font API

This page uses fonts provided by Google to improve its rendering.

How to retrieve them?

It is possible to load the Google fonts in a single request. For example, if your code looks like this:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:normal,italic">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster:bold,bolditalic">

You should replace it with the following form, which will retrieve the same content with one request:

 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:normal,italic|Lobster:bold,bolditalic">

You should optimize the following requests:


 
Read more
Browser rendering 

0/100

Specify a character set in the response HTTP Header

The following resources have no character set specified in their HTTP headers. Specifying a character set in HTTP headers can speed up browser rendering.

Specify the character set used in the Content-Type HTTP header allows the browser to parse immediately the page.


 
Read more
Browser rendering 

60/100

Defer parsing of JavaScript

JavaScript can significantly slow down a page display, especially if it is necessary to download an external script.

Defer the use of JavaScript as much as possible to provide a faster start for the page display.

How can I fix this?

First of all, distinguish what portions of your JS is critical and must be loaded as soon as possible, and put them in a specific external file. Keep this file as streamlined as possible, and defer the parsing or execution of all other JS files (learn more).

Use one of the methods below to defer parsing for external JavaScript files:

  • use the async attribute;
  • use the defer attribute;
  • append the script to the DOM in JavaScript during the onload event;
  • make sure your scripts are placed at the bottom of the page (ideally at the end of the body).

12.0KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.


 
Read more
Data amount 

40/100

Use a better file format for your fonts

Be sure to deliver the lightest possible font format.

Declaring several font formats

Web browsers such as Firefox, Chrome, Safari, Internet Explorer, and Opera do not support the same font formats. Your goal is to use the lightest possible format for each platform. When you use a font, you can specify several formats via the @font-face CSS instruction. This enables the browser to use the first compatible format that it supports.

How to declare your font formats?

Check if your formats are well ordered in the @font-face's src property. Here's an article about this topic to help you to determine the right order to declare your fonts. TL; DR preferred order of webfont formats: EOT, WOFF2, WOFF, TTF, and SVG.


The following resources are fetched, however you should consider using the WOFF2 format:


 
Read more
Quality 

0/100

2 IDs are duplicated within your HTML

Using the same ID on several elements can have side effects, especially during JavaScript executions or when applying CSS rules.

IDs explained

Each element of a web page can be identified thanks to the id attribute:

<p>
  <span id="mySpan1"></span>
</p>

These IDs allow you to manipulate your elements with CSS or JavaScript instructions.

How to properly use IDs?

You must ensure identifiers are not duplicated within the page. If you want to share a property or a behavior between multiple items, you have to use the class attribute, which is dedicated to this purpose:

<p>
  <span class="mySpans"></span><span class="mySpans"></span>
</p>

The following IDs are used multiple times within your page:

  • contact_body, used 2 times
  • title_message2, used 2 times


     
    Read more
    Accessibility 

    0/100

    1 label does not refer to an element

    The for attribute associates the label to an other element of the page, and help screen readers to better interpret your content.

    Label and for attribute

    A label describes an element (a text to fill, a checkbox, etc.). When a user click on a label associated with a radio button, the option will be directly selected, improving the user experience.

    How to use a label?

    Associate the label to an element of the page by indicating the ID of the element. Example:

    <form action="/action">
    <label for="myId">
    <input type="radio" name="myOptions" id="myId" value="1" >

    The following label does not define a for attribute:

    • <label>


     
    Read more
    Security 

    0/100

    This page is exposed to "clickjacking" type attacks

    Keep malicious people from integrating your pages into their websites.

    Clickjacking explained

    This kind of attack happens when your page gets integrated with a malicious website via <frame> or <iframe> tags. By doing this, attackers can persuade users that they are on your own page when they are not. The unsuspecting user may enter personal information that is visible on and thus vulnerable to the malicious website.

    To avoid this, always indicate which domains have permission to integrate your pages.

    How to prevent clickjacking?

    There are two main ways to prevent that behavior.

    1/ Configure a "X-Frame-Options" HTTP header. Configure your server so the main resource response includes the "X-Frame-Options" HTTP header.

    Three values may be defined:

  • DENY to prevent any frame or iframe from integrating the page;
  • SAMEORIGIN to authorize only frames from the same domain name;
  • ALLOW-FROM uri to indicate the domains allowed to integrate a page into frame (however is not compatible with some browsers)
  • 2/ Define an explicit frame-ancestors directive into a Content-Security-Policy HTTP Header. "frame-ancestors" directive is a newer, hence supported by fewer browsers, approach that will allow your website to authorize multiple domains instead of only the current origin. Setting this directive to 'none' is similar to X-Frame-Options: DENY.

    Which approach to choose? If you only have the current domain to allow, do set up the two security features, for better compatibility with older browsers. If you want to allow multiple domains, you should only implement the frame-ancestors security policy.


    Neither the "X-Frame-Options" HTTP header nor the "frame-ancestors" security police are configured on this page; you are more likely to be exposed to clickjacking.


     
    Read more

    Did you know?

    Quality 

    1 CSS property is overridden

    Generally, it is unnecessary to define 2 times the same property within the same rule: the second one overrides the first.
    This may affect the readability of CSS code. Eliminate unnecessarily overridden properties also reduce the file size.

    How to improve it?

    Remove one occurrence of the duplicated property. For example, the following properties:

    .myClass {
    margin: 20px;
    ...
    margin: 10px;
    }

    Should be replaced by:

    .myClass {
    margin: 10px;
    }

    The following files define the same property several times in a single rule.
    Note that CSS fallbacks can justify a duplicated property.


    Make sure that the following properties are duplicated on purpose:

    http://www.brigadeutopia.net.in/css/nav.css

    • .overlay ul li {height: calc(100% / 8)} (line 51, col 2)


     
    Read more
    Quality 

    3 CSS selectors are duplicated

    Using several times the same selector for several declarative blocks within a single CSS file can affect the readability and maintainability of the code. It is also an optimization opportunity: by grouping these elements within a single rule, you will reduce the file size and optimize the rendering times.

    The CSS Object Model (CSSOM)

    The CSS rules allow to select elements from the HTML code in order to apply styling properties.

    In order to do that, the browser constructs its own model of the CSS markup it has fetched: the CSS Object Model. This transformation takes several steps: reading the file, converting the strings of text into browser tokens, transforming this tokens into objects with properties and rules and organizing the elements in a tree-like model. These operations will take place more quickly if the CSS code is written in a simple and non-redundant way.

    How to improve the CSS rules?

    For maintenance as well as performance, you have to reduce the number of rules contained into your CSS files and group rules whenever it’s possible. For instance, the following rules:

    .myClass {
    margin: 0;
    }
    ...
    .myClass{
    border: 1px solid black;
    }

    Should be merged into a single one:

    .myClass {
    margin: 0;
    border: 1px solid black;
    }

    If the duplication is the result of a legacy process or is justified for maintenance reasons, you can consider using a CSS minification tool able to do automatically this improvement.


    You can save 102 characters. The following files define the same selector in different rules:

    http://www.brigadeutopia.net.in/css/style.css

    • .rslides (2 times)
    • textarea::-moz-placeholder (2 times)
    • @media (max-width:991px)[...].portfolio-item-w3ls p.portitem-w3lh (2 times)


     
    Read more
    Quality 

    52 selectors are superfluous

    It's often inefficient to bring too much preciseness in CSS selectors. For example, in the following rule:

    body div .myClass {}

    The body element provides no details to select the desired tags. So you should prefer the following selector:

    div .myClass {}

    In the same way, you do not need to specify a <ul> selector if you specify a <li> behind.

    Here are listed the elements considered as potentially redundant: ul li, ol li, table tr, table th, body.

    The following files declar some useless selectors:

    http://www.brigadeutopia.net.in/css/style.css

    • body a (line 7, col 1)
    • ol.breadcrumb li a (line 94, col 1)
    • ol.breadcrumb li a:hover (line 95, col 1)
    • ul.social-icons1 li (line 117, col 1)
    • ul.social-icons1 li a i.fa.fa-facebook (line 118, col 1)
    • ul.social-icons1 li a i.fa.fa-facebook:hover (line 119, col 1)
    • ul.social-icons1 li a i.fa.fa-twitter (line 120, col 1)
    • ul.social-icons1 li a i.fa.fa-twitter:hover (line 121, col 1)
    • and 40 others

    http://www.brigadeutopia.net.in/css/nav.css

    • .overlay ul li (line 51, col 2)
    • .overlay ul li a (line 57, col 1)
    • .overlay ul li a:hover (line 68, col 1)
    • .overlay ul li a:focus (line 71, col 1)


     
    Read more
    Quality 

    No HTML code is commented

    Comments allow you to detail a portion of code and help you navigate more efficiently in the DOM. However, make sure no sensitive information is exposed in your comments.

    Well done, none of your comments contains HTML code.


     
    Read more
    jQuery 

    More informations about jQuery performance

    jQuery is the most used JavaScript library. Upgrade your website performance respecting the jQuery best practices. We recommend that you learn the basics of the jQuery performance, reading the following link: http://learn.jquery.com/performance/.


     
    Read more
    Security 

    Do all third parties resources deliver the right content?

    This page loads data from third parties, you should ensure their integrity.

    SubResource Integrity (SRI)

    Use SRI to ensure that a third party resource has not been tampered. Add the integrity attribute to <script> and <link> tags loading this kind of resource. Example:

    <script src="https://exemple.com/exemple-framework.js"
    integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
    crossorigin="anonymous">
    </script>

    The integrity attribute value is equal to the base64-encoded hash (SHA) of the resource. The browser compares this hash with the downloaded content in order to determine if the resource matches the expected content.

    You can create the SHA thanks to several tool. In command line, you can use openssl. You can also test some online tools, as srihash.org or report-uri.io. Learn more about SubResource Integrity.


     
    Read more

    Well done, these best practices are respected

    Browser rendering 

    100/100

    You do not use a useless "http-equiv" <meta> tag

    HTTP headers are more efficient than the http-equiv meta tags.

    The <meta http-equiv=""/> tags

    The http-equiv meta tags allow to communicate to the web browser information equivalent to the ones of HTTP headers. For example, the meta <meta http-equiv="content-type"/> will have the same consequences than the HTTP Content-Type header.

    Two points don’t stimulate the use of http-equiv meta tags:

    • Going through the meta requires to interpret the beginning of the HTML page, which is slower than going through the HTTP headers in terms of performance
    • If the HTTP header is already present, the meta is ignored
    In which cases are the <meta http-equiv=""/> useful?

    Only one case can justify the presence of these meta tags: if you don’t have access to the configuration of your server, and that is to say to the HTTP headers.

    However, we advice you to use a configurable server so that you can establish the most efficient site possible.


    This page does not contain a http-equiv meta tag. That's a best practice.


     
    Read more
    Browser rendering 

    100/100

    Your HTML response is not too heavy

    Why reduce the code amount of a page?

    Before a web page can be displayed, the browser must, among other things, download it, parse it and model it into a document that can be understood by the rendering engine. If the amount of code contained in the page is too large, these steps are slowed down and the rendering is delayed.

    How to reduce the amount of code?

    Your HTML response should contain only the information that is immediately necessary to display the visible area of the page. Move inline information to external files (JS for scripts, CSS for styles, asynchronous queries for additional content) and simplify the HTML structure of your page.


     
    Read more
    Cache policy 

    100/100

    You do not use too long inline scripts

    Any script with a significant size should let the browser cached them in order to reduce loading time/improve performance of your returning visitor.

    Inline scripts / cache policy

    "inline" scripts allow to integrate easily small portions of scripts directly in the HTML code. Example:

    <script type="text/javascript">
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']...,'/analytics.js','ga');
        ga('create', 'UA-11111111-1', 'mywebsite.com');
    </script>

    By doing so, you avoid making a request to the server to retrieve the resource. So inline scripts represent a performance gain if you want to integrate small scripts.

    However, once a script has a fairly substantial size, we advise you to outsource it and perform a request to retrieve it. So you will benefit from the cache mechanism.

    What should I do?

    Outsource your scripts with more than 1500 characters in one or more separate files.


     
    Read more
    SEO 

    100/100

    This page defines <h1> and <h2> tags

    We recommend putting page keywords in at least the h1 and h2 tags. Search engines use the h1, h2, and h3 tags for SEO purposes.
    This page contains:

    • 2 <h1> element(s)
    • 9 <h2> element(s)
    • 2 <h3> element(s)


     
    Read more
    Quality 

    100/100

    No nested tables detected

    table tag should only be used to render ordered data. Handle the elements layout with CSS instructions.

    You can use colspan and rowspan properties to represent complex data.

    No nested table found in this page.


     
    Read more
    Compliance 

    100/100

    No frameset, frame and noframes tags detected

    These tags are obsolete, due to several issues related to the navigation consistency, SEO or browsers' bookmark features for example.

    None of these tags is detected on this page.

    The use of the iframe tag is prefered.


     
    Read more