Selectra.info audit

HTML

Head

Duplicated content

Not well used

<link rel="shortlink" href="https://selectra.info"> don’t provide a shortened url -> useless

Favicon

Favicon checker

Android chrome
Windows 8 and 10
Mac OS Safari
Classic, desktop browsers

Scripts

There is scripts in the head, they should be moved to the bottom of the body (performance reasons)

Body

HTML5!

We use HTML5! so we must use the new blocks that it provides to structure pages, div are no more an every case solution.

Tag manager pixel

This pixel can be moved to the bottom of the body and a comment on its purpose should be useful, I don’t think that we need the div around.

<div class="region region-page-top">
    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-54H9M4S" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
</div>

App config svg

This svg load can be moved to the head section, just after the svg load of selectra.info

<script>
    var ajaxMenu = new XMLHttpRequest();
    ajaxMenu.open("GET", "//staging.cdn.selectra.info/img/app_config/v2/sprite-v2-3.svg", true);
    ajaxMenu.send();
    ajaxMenu.onload = function (e) {
        var divMenu = document.createElement("div");
        divMenu.innerHTML = ajaxMenu.responseText;
        document.body.insertBefore(divMenu, document.body.childNodes[0]);
    }
</script>

Cookie compliance

This block can be moved to the bottom of the body, just before the script part

<div class="info-box bottom is-hidden" id="cookie-compliance"><div class="container"><div class="info-box-content"><div class="info-box-msg"><span class="icon icon-24 hidden-xs-down"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 18h-2v-8h2v8zm-1-12.25c.69 0 1.25.56 1.25 1.25s-.56 1.25-1.25 1.25-1.25-.56-1.25-1.25.56-1.25 1.25-1.25z"></path></svg></span><p>En poursuivant votre navigation sur ce site, vous acceptez l'utilisation des cookies. <a href="https://selectra.info/mentions-legales" target="_blank">En savoir plus</a></p></div><button class="btn btn-xs btn-cta" type="button">Accepter</button></div></div></div>

Empty blocks

Noise blocks

Misplaced blocks

Ressources hints

It’s here

CSS

Duplicated load

Some css are loaded 2 times!

https://selectra.info/sites/default/files/advagg_css/css__kSlbzp77wrAL-9jRGsyDdTBlGW2gUUXq9x-FK53FbaM__c90ITXMIGFt5arE8KymYiVBHHqBW_LNYtw_vBzNk9KI__zl6XKZGO9d7qESwFTyzhGes9xWqJDiO_zkdf-r8G-jk.css

https://staging.cdn.selectra.info/css/app_config/v2/menu.cookie-compliance.footer.users-rating.reviews-module.selectra-light-5.min.css

Not commented, purpose?

What are their purpose? explain it!

Scripts

There is a lot of scripts! too much I think there is something to do here!

Duplicated load

Some scripts are loaded 2 times!

Owl carousel

jquery cookie

Defer, async

We should async primary scripts and defer secondary scripts.
To understand the difference see this article: Async vs Defer

Primary
Secondary

Not commented, purpose?

What are their purpose? explain it!

Are they needed?

We should only load the scripts that are needed on a page.

Are they used on the homepage?

Weight

Total weight

The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is alreay very long to download over a slow connection.

1.83MB -> A lot of work can be done here.

497 kb of HTML

109 kb of CSS

169 kb of js

890 kb of image

210 kb of webfont

Image optimization

These images could be optimized:

File minification

These files can be minified:

Requests

Number

There is 4 html requests

There is 6 CSS requests

Reduce the number of stylesheets by concatenating them.

There is 20 js requests

Reduce the number of scripts by concatenating them.

There is 74 image requests

Reduce the number of images by lazyloading them or by spriting them.

There is 9 webfont requests

Different domains

For each domain met, the browser needs to make a DNS look-up, which is slow. Avoid having to many different domains and the page should render faster.

404

Not found for https://selectra.info/modules/statistics/statistics.php

Identical content

This is the number of requests that could be avoided, because of downloaded files that have the same content but are loaded from different URLs.

Small requests

List of all requests that are less than 2 KB. Try to merge them with other files.

3 small css files

9 small js files

27 small image files

Below the fold images

This is the number of images displayed below the fold that could be lazy-loaded. This is an excellent way to accelerate the loading time of an heavy page.

https://github.com/vvo/lazyload

Hidden images

List of all images that have a display:none property, or one of their parents. These images are loaded by the browser even if they’re not visible. You might be able to find a way to lazy-load them, only when they get visible.

DOM complexity

DOM elements

This page have too much dom elements (3979) -> we’ll have to reduce this number to get close from 1000

DOM max depth

A deep DOM makes the CSS matching with DOM elements difficult.

It also slows down JavaScript modifications to the DOM because changing the dimensions of an element makes the browser re-calculate the dimensions of it’s parents. Same thing for JavaScript events, that bubble up to the document root.

Cleaning the html tree should fix this issue.

Duplicated IDs

These duplicated IDs are coming from our svg icon sprite, wee need to change these IDs with class.

Scroll bottlenecks

DOM access on scroll

One of the main reasons of a poor scrolling experience is when too much JS is executed on each scroll event. Note that some devices such as smartphones and MacBooks send more scroll events than others. Reduce the number of DOM accesses inside scroll listeners. Put DOM queries outside them when possible.

We have 31 DOM access on scroll -> we should go for one!

Bad javascript

Javascript errors

We should have no javascript errors

jQuery

Events not delegated

53 is the number of events that are bound with the .bind() or the .on() function without using event delegation. This means jQuery binds each element contained in the object one by one. This is bad for performance.

CSS complexity

Rules count

Having a huge number of CSS rules hurts performances. If the number of CSS rules is higher than the number of DOM elements, there is clearly a problem.

Huge stylesheets generally occur when the different pages of a website load all the CSS, concatenated in a single stylesheet, even if a large part of the rules are page-specific. Solution is to create one main CSS file with global rules and one custom file per page.

Complex selectors

Complex selectors are CSS selectors with 4 or more expressions, like “#header ul li .foo”. They are adding more work for the browser, and this could be avoided by simplifying selectors.

We have 1453 complex selectors to simplify

Colors count

There is 222 colors used in our CSS, it’s too much we must find them and replace them with our colors.

Similar colors

There is 22 similar colors, our eyes can barely see the difference.

Breakpoints count

This is the number of different breakpoints found in the stylesheets' media queries.

Bad CSS

Duplicated selectors

This is when two or more selectors are strictly identical and should be merged.

Duplicated properties

This is the number of property definitions duplicated within a selector.

Use of !important

It can be useful, but only as a last resort. It is a bad practice because it overrides the normal cascading logic. The more you use !important, the more you need it again to over-override. This conducts to a poor maintainability.

Old prefixes

Many property prefixes such as -moz- or -webkit- are not needed anymore.

There is 518 offenders

Redundant tags selectors

Some tags included inside other tags are obvious. For example, when “ul li” is specified in a rule, “ul” can be removed because the “li” tag is nearly always inside an “ul” container (the “ol” container is quite rare). Same thing for “tr td”, “select option”, …

Lowering compexity in CSS selectors can make the page load a little faster.

Web fonts

Web fonts number

We have 5 web fonts, it’s a lot, maybe we can think about a font stack for each OS.

Server config

HTTP/2 or SPDY

HTTP/2 is the latest version of the HTTP protocol and is designed to optimize load speed. SPDY is deprecated but still very well supported.

The latest versions of all major browsers are now compatible. The difficulty is on the server side, where technologies are not quite ready yet.

Caching not specified

When no caching is specified, each browser will handle it differently. Most of the time, it will automatically add a cache for you, but a poor one.

Caching disabled

Counts responses with caching disabled (max-age=0)