Quality and Performance report

http://wpninjas.com
Report generated on Jul 12, 2016 5:31:43 PM
Download report
SIMULATED VISITOR: Chrome Washington DC 10.0/2.0Mbps (Latency: 28 ms) Edit

Requests

60

Weight

1.62MB

HTML CSS Scripts Images Others
Timeline / Waterfall

First Byte

0.06sec

Start Render

1.33sec

Fully loaded

1.37sec


Browser warnings 0OK
Speed Index: 1418

Technologies :

Backbone.js

Google Analytics

Google Font API

Twitter Emoji (Twemoji)

Underscore.js

WordPress

Yoast SEO

jQuery

PHP


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

Data amount 

0/100

17 images are resized with a width/height attribute

Images must not be delivered larger than they are actually displayed to avoid loading unnecessary data.

Resizing images explained

Using the width and height attributes in img tags is not recommended to reduce the rendering of an image.

For instance, if your image is set to render at 300px by 300px on a particular page, don't upload the original 1000px by 1000px version of that image to your page. Instead, resize/crop the image to fit the display size and then upload it to your site to decrease the page weight and loading time.

Using images with responsive designs or retina screens?

Responsive website designs and retina screens do not justify an image resizing. Even in such cases, some methods exist to deliver your pictures to the right size. We recommend reading the following resources:

Don't resize the following images:


 
Read more
Browser rendering 

0/100

1 critical dependency 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 our 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.

This resource represents a SPOF for this page:

  • //fonts.googleapis.com/css?family=Lato%3A300%2C7[...]%7CSpinnaker&ver=1440094952


 
Read more
Browser rendering 

0/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?

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).

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


 
Read more
Data amount 

0/100

Identical resources are served from different URLs

Resources with identical content should be served from the same URL to avoid duplicate downloads and additional requests.
You can save 1 requests and 17,52kB of data

Different URLs for the same resource

If you use different URLs to serve identical content, browsers have to request this content from the server several times, and your page will trigger unnecessary requests for data. If the same URL is used, the browser will only send one request and will use the response wherever the resource is requested. You should also use the same URL to reference the same content on several pages to benefit from the cache mechanism.

How to fix this?

Serve each resource from a unique URL. If you have to request the same resource several times, the same URL should be used to retrieve it every time.


The following URLs lead to identical content. Serve these resources from the same URL to save 1 request(s) and 17,52kB of data.


 
Read more
Data amount 

0/100

12 images (663kB) are loaded too early

Load images above the foldline first, that means all the images that are visible without any scroll of the page by the visitor.

Webpage and images

Images use to represent more than 60% of the total weight of webpages. By loading initially the only images that are visible without page scrolling, you’ll reduce bandwith consumption as for your server and your visitors. If an image has to display after any visitor’s action (as scrolling) , then you’d better load it on demand, when necessary (lazyloading).

How to set up lazyloading?

You can get informations concerning the features and plugins proposed by your page’s frameworks/CMS. You should find some easy-to-set solutions. Some Javascript libraries could help you to implement lazyloading too.

WordPress logoAs an exemple, with WordPress, you could install one of these extensions dedicated to images lazyloading.

12 images (663kB) loading can be delayed on this page, representing 49% of the total weight of all your images.


 
Read more
Security 

0/100

The Content Security Policy is missing

It is critical to restrict the origin of the contents of your webpage to protect your website from cross-site scripting attacks (XSS).

XSS attacks explained

An XSS attack aims to inject content into a page.

You can protect your pages against these attacks by implementing a content security policy that tells the web browser which servers are allowed to deliver resources on each page. If the browser makes a request to an unauthorized server, it must inform the user.

How can I prevent an XSS attack?

Set up a "Content-Security-Policy" (CSP) HTTP header. To specify a security policy on the source of your resources, 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, the page loads correctly provided that all the scripts come from the current host or https://apis.google.com.

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

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
SEO 

0/100

You should define a <meta> 'description'

No <meta> description has been found on this page. Please provide a <meta> description.

<meta name="description" content="page description" />

The meta description is used in search engine results pages (SERP). Read more about meta tags here.

Your website uses WordPress. By default WordPress doesn't manage the <meta> description. We recommend using a plugin to add this feature.


 
Read more
SEO 

0/100

Add <h1> title in your content

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

  • 14 <h2> element(s)


 
Read more
SEO 

0/100

Add alt attribute on <img> tags

The alt attribute is an important criterion for SEO. Indeed, crawlers launched by search engines cannot parse graphic contents. That is why they use the alternative text to return consistent results, like in Google images.

<img src="product.jpg" alt="My product description"/>

The alt attribute is used in several instances:

  • When the screen reader is in use;
  • When the connection is slow;
  • When there is an error in the src attribute.

You have 20 img tags, but 6 tags do not define the alt attribute:

  • <img src="http://8667-presscdn-0-95.pagely.netdna-cdn.com/wp-content/themes/ninja-brand/images/wpninjas-logo-horz.png" />
  • <img src="http://8667-presscdn-0-95.pagely.netdna-cdn.com/wp-content/themes/ninja-brand/images/wpninjas-logo-vert.png" />
  • <img src="/wp-content/themes/ninja-brand/images/wpninjas-logo-vert.png" />
  • <img src="/wp-content/themes/ninja-brand/images/pagely.png" />
  • <img style="height:15px;margin:-50px 0 12px 0;" src="/wp-content/themes/ninja-brand/images/studiopress.png" />
  • <img src="/wp-content/themes/ninja-brand/images/edd.png" />

You can set an empty text if nothing seems appropriate for describing an image but be careful. We advise you to make sure the majority of your images contain a coherent text. Read the W3C recommendations here.


 
Read more
Quality 

0/100

One ID is 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 ID is used multiple times within your page:

  • ninja_forms_field_250, 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

    Did you know?

    This page contains 6 links

    Creating and then applying an efficient link strategy to your page will enhance its SEO.

    Two main link types exist:

    • Internal links that refer to pages with the same domain name;
    • External links that point to other websites (must be relevant and point towards quality content).

    If you reference many links, you can ask the SEO algorithms to show interest in just some of them, adding the attribute rel=nofollow to the irrelevant ones (e.g., advertisements).

    Here is the sharing distribution of 6 links present in the page:

    • 1 internal link (16,67%)
    • 5 "follow" external links (83,33%)
    • No "nofollow" external link (0,00%)


     
    Read more
    WordPress 

    Handle cache management with WordPress

    Several great plugins are available for WordPress to handle the cache management. Check out the list of available plugins.

    You can consider especially the popular WP Super cache or W3 Total Cache plugins.


     
    Read more
    Browser rendering 

    The Slowest Resources

    The page load time is 1.4 seconds. Listed below, are your site's slowest loading requests:

    Listed below, are your site's 10 slowest requests:

    Excessively slow response times can be due to any number of reasons, usually because of a heavy resource that's loading or a temporary network issue.

    For more information on page load time, you can consult the timeline.


     
    Read more
    WordPress 

    Check your WordPress plugins settings

    Using a CMS like WordPress implies the installation and the configuration of several plugins. Sometimes, these improvements can slow down your page load.

    You should try the WordPress Plugin Performance Profiler (P3) to narrow down your plugins configuration, and improve your website performance.


     
    Read more
    Quality 

    The !important keyword is used 9 times

    If you abuse of this keyword, you should consider a review of your CSS code. We tolerate 10 occurrences of the !important keyword before penalizing your score.


    Here are the !important detected:

    http://wpninjas.com/#1

    • img.wp-smiley, img.emoji {display: inline !important} (line 4, col 2)
    • img.wp-smiley, img.emoji {border: none !important} (line 5, col 2)
    • img.wp-smiley, img.emoji {box-shadow: none !important} (line 6, col 2)
    • img.wp-smiley, img.emoji {height: 1em !important} (line 7, col 2)
    • img.wp-smiley, img.emoji {width: 1em !important} (line 8, col 2)
    • img.wp-smiley, img.emoji {margin: 0 .07em !important} (line 9, col 2)
    • img.wp-smiley, img.emoji {vertical-align: -0.1em !important} (line 10, col 2)
    • img.wp-smiley, img.emoji {background: none !important} (line 11, col 2)
    • img.wp-smiley, img.emoji {padding: 0 !important} (line 12, col 2)


     
    Read more
    Quality 

    The page defines 2 colors within your own CSS files

    We recommend you to try to harmonize the colors of your website to simplify your CSS, but also to avoid inconsistencies in your UI.


     
    Read less

    Well done, these best practices are respected

    Accessibility 

    100/100

    No <li> element is empty

    Users should identify easily the number of items in a list. An empty element provides a wrong information about the list content.

    The <li> element should not be empty. You must specify a text, or an image with an alternative text to allow all your users to be informed of the contents listed.

    Example :

    <li>
    my first element
    </li>

    You should prefer the use of CSS to apply a layout.



     
    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', 'dareboost.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
    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
    SEO 

    100/100

    This page specifies a <title> tag

    This page defines a title:

    - WP Ninjas


     
    Read more
    Compliance 

    100/100

    No Java applets detected

    Java applets are considered obsolete in 2015. HTML5 is powerful and more widely supported. Using Java applets can lead to compatibility issues and may send negative signals to your users (eg the browser indicating that content was blocked because it could be dangerous).

    Congratulations, this page doesn't contain Java applets.


     
    Read more
    Compliance 

    100/100

    Do not use <bgsound> tag

    No bgsound tag detected. This is a good practice: this element is not a HTML standard. See more information.

    Use the audio tag to deliver audio content on your page.

    <audio src="my-audio-file.ogg" autoplay>
    Your browser doesn't support the audio element.
    </audio>


     
    Read more