From 188d3ecaaa602267a546295364212649761ed421 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Thu, 25 Sep 2014 14:52:01 +0200 Subject: [PATCH] Tooltiping complete --- app/node_views/results.html | 112 ++++++++++++++++++++++++------------ 1 file changed, 74 insertions(+), 38 deletions(-) diff --git a/app/node_views/results.html b/app/node_views/results.html index caca9b7..cbefbf9 100644 --- a/app/node_views/results.html +++ b/app/node_views/results.html @@ -265,8 +265,8 @@
-

Current latest version of jQuery is 1.11 or 2.1

-

Each new version of jQuery optimizes performances. Do not keep an old version of jQuery. Updating can break a few things, but it is generally quite easy to fix them up, so don't hesitate.

+

Current latest versions of jQuery are 1.11 (with support for old IE versions) and 2.1 (without).

+

Each new version of jQuery optimizes performances. Do not keep an old version of jQuery. Updating can sometime break a few things, but it is generally quite easy to fix them up, so don't hesitate.
@@ -275,8 +275,8 @@
{{version}} &
- -

+ +

jQuery is a heavy library. You should **never** load jQuery more than one on the same page.
@@ -307,8 +307,9 @@
- -

+ +

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.
@@ -328,8 +329,8 @@
- -

+ +

This is when two or more selectors are strictly identical and should be merged.
@@ -341,8 +342,8 @@
- -

+ +

Very easy to fix.
@@ -354,8 +355,9 @@
- -

+ +

Such as: expression( document.body.clientWidth > 600 ? "600px" : "auto" )

+

This is a bad practice as it slows down browsers. There are some simpler CSS3 methods for doing this.
@@ -367,8 +369,8 @@
- -

+ +

It can be usefull, but use it 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.
@@ -380,8 +382,26 @@
- -

+ +

What browser do you need to support? Once you got the answer, take a look at these old rules that pollute your CSS code and remove them.

+

IE6: +

    +
  • * html
    • +
  • html > body (everything but IE6)
    • +
+

+

IE7: +

    +
  • *height: 123px;
    • +
  • height: 123px !ie;
    • +
+

+

IE9: +

    +
  • -ms-filter
    • +
  • progid:DXImageTransform.Microsoft
    • +
+

@@ -393,8 +413,8 @@
- -

+ +

Many property prefixes such as -moz- or -webkit- are not needed anymore, or by very few people. You can remove them or replace them with the non-prefixed version. This will help reducing your stylesheets weight.
@@ -406,8 +426,9 @@
- -

+ +

Universal selectors are the most expensive CSS selectors.

+

More informatons here.
@@ -419,8 +440,8 @@
- -

+ +

This is one way to remove complexity from a CSS rule. Generally, when "body" is specified in a rule it can be removed, because every element is inside the body.
@@ -437,8 +458,18 @@
{{phantomasResults.metrics.requests}}
- -

+ +

This is one of the most important performance rule. Every request is slowing down the page loading.

+

There are several technics to reduce their number: +

    +
  • Concatenate JS files
    • +
  • Concatenate CSS files
    • +
  • Embed or inline small JS or CSS files in the HTML
    • +
  • Create sprites or icon fonts
    • +
  • Base64 encode small images in HTML or stylesheets
    • +
  • Use lazyloading for images
    • +
+

@@ -522,8 +553,8 @@
- -

+ +

404 errors are never cached, so each time a page ask for it, it hits se server. Even if it is behind a CDN or a reverse-proxy cache.
@@ -535,8 +566,10 @@
- -

+ +

This counts the number of requests not keeping the connection alive (specifying "Connection: close" in the response headers). It is only counting a request if it is followed by another request on the same domain.

+

This is slowing down the next request, because the brower needs to open a new connection to the server, which means a additional round-trip.

+

Correct the problem by setting a Keep-Alive header on the guilty server.
@@ -548,8 +581,8 @@
- -

+ +

This only happens when the asset has no cache and is requested more than once on the same page. Be very careful about it.
@@ -561,8 +594,9 @@
- -

+ +

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

+

Fix immediatly if on static assets.
@@ -574,8 +608,9 @@
- -

+ +

Responses with no caching header sent (either Cache-Control or Expires).

+

Every request should have a cache time specified. If you really don't want cache, specify "max-age=0", otherwise some browsers will try to cache.
@@ -587,8 +622,9 @@
- -

+ +

Responses with too short caching time (less than a week).

+

The longer you cache, the better. Add versionning to your static assets, if it's not already done, and set their cache time to one year.
@@ -600,8 +636,8 @@
- -

+ +

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.