Website Analysis: new checkpoints on Dareboost

Service Updates
Spread the love

UPDATE: Best practices described in this article are now available on dareboost.com!

Mark your calendars! We’re going to add new checkpoints on dareboost.com on Thursday, March 24th. In this article, I propose you to discover in details the changes of this update. So you should be able to correct your web projects before the update and to avoid any score drop on our tool!

Let’s talk about CSS quality, security and accessibility!

CSS Quality: best practices

So far, DareBoost outlined the results of the W3C CSS validation. Thanks to this update, you can quickly detect some quality issues within your CSS files.

Note that the CSS analysis only focus on the files hosted on the domain of the analyzed page (so we don’t suggest optimizations for third-party content).

  • Duplicated CSS selectors: during a website’s development, you can inadvertently set a rule-set using a selector already defined above. To help you improve the maintainability of your code, we detect these errors:
.myClass { ... }
...
.myClass { ... } // already defined!

 

  • Duplicated CSS properties: another mistake, don’t set a CSS property while it’s already defined in the same rule-set. Example:
.myClass {
  margin-left: 10px;
  …
  margin-left: 10px; // already defined!
}

 

Any time you use a shorthand property in CSS, you set all the values for all the properties it deals with. It’s not a bug, it’s just how CSS works.

For instance, the “border” property is applied to all borders of an element, avoiding the use of all “border-top”, “border-right”, “border-left” and “border-bottom” properties. DareBoost helps you identify the properties overridden by a shorthand property within the same CSS rule. Example:

.myClass {
  border-color:red;
  border:5px; // border will take again the default color
}

 

  • Too complex CSS selectors: A well-structured page allows writing simple CSS rules, quickly readable. Above 7 selectors, an improvement is surely possible!
body div .myClass table ul li .myClass p {}
// the rule can be simplified
  • The !important keyword: this keyword avoids any override of the defined property (so you lose the cascading principle of CSS!). Sometimes it can be useful, but do not abuse it! If we detect this tag more than 10 times, we will notify you!

Please note that these checkpoints are mostly deployed for your convenience and only impact your score in a limited way!

 

Some other informative indicators have also been added with this update (tips with a blue icon). These tips do not impact your score at all.

  • You can know the number of colors used on the page, and the proportion of colors used only once. This might be the opportunity to identify some possible simplifications.
  • Sometimes CSS rules use unnecessary selectors. “body”, “ul” followed by “li”, or “table” followed by “tr”: we list every superfluous selector, so you can improve the readability of your styles.

 

Secure cookies

If you’re following us, you surely know about it: HTTPs is a requirement for your website.

We deliver several best practices dedicated to the security, related to HTTPs: mixed content detection, HSTS header, HTTP to HTTPs redirect… A new one has just arrived: specify the “secure” instruction in a “Set-Cookie” header. This will ensure that your visitors can only send their cookies to your server via an HTTPS request (this eliminates the risk of a sensitive cookie being sent without encryption).

Moreover, we inform you that it is best to use the http-only instruction, which prohibits the browser to manage the cookie (in JavaScript, for example). The cookie transits on the network and is only used by the server.

Read this article to learn more about these topics.

 

Edit: we have published a dedicated blog post for this best practice: Performance and security of target=_blank links with rel=noopener.

Using the target=_blank attribute is rarely recommended. However, if you need to use it, note that a security leak could cause harm to your visitors if your site includes contributing content.

It allows the targeted page to manipulate the window.opener.location property, and thus perform a redirect within the parent tab. When the user gets back to the parent tab, he can be facing a malicious website (phishing, etc).

We recommend you to add the “rel = noreferrer” attribute when using a “target = _blank” to an external website. This will block access to the “location” property.

 

Accessibility best practices

You will be notified when a <label> does not have a for attribute, which identifies the item described by the label. We check if this attribute is not empty and matches a page element.

The tool also checks that no <button> nor <li> element is empty.
Now it’s time for you to give it a try! Run a website analysis.

We hope you enjoy this update. A question about this update? An idea to suggest? We will be glad to answer all your questions!


Spread the love