Page CSS/JS files

CSS and script files are important resources in the definition of the web site style and behavior.
The are also often one of the first cause of performance problems, so it is important having a tool to detect their number and definition.
Styles and scripts can be defined within the web page, or in shared files. Both cases have pros and cons, and usually the best solution is a mix, a trade-off among clarity, ease of development, robustness and performance.

Scripts

This panel internal tab sheet lists all scripts (script tags in the HTML) found in the selected web page.

An example of script tag in the HTML syntax is, in case of script defined within the web page:

<script>
...(the script body)...
</script>

In case of script defined in a shared file:

<script src="...(a relative or absolute URL)..."></script>

Scripts are common culprits in cases of web performance problems. You should keep down the number of shared scripts to reduce the number of HTTP requests, and avoid as much as possible blocking scripts, scripts that force the browser to block page rendering. This is normally achieved by using the defer or async attributes, or by moving their definition right before the body tag closure, after all visual HTML elements are defined.

Nr

The progressive number of the script tag as found in the HTML.

Absolute URL

The absolute URL of the script resource file pointed by the src attribute.

SRC value

The value of the src attribute in the HTML markup of the script. Attribute src can contain a relative or an absolute URL.

Type

The MIME type of the script, read from the optional type attribute. If omitted, JavaScript is assumed (MIME type: text/javascript).

async

This field shows the tick icon if the async attribute is used (in case of script file external to the web page, loaded from the URL pointed by the src attribute).
The async attribute tells the browser that the script can be downloaded and parsed in parallel - without slowing down the rendering of the web page - and evaluated as soon as it is available.

defer

This field shows the tick icon if the defer attribute is used (in case of script file external to the web page, loaded from the URL pointed by the src attribute).
The defer attribute tells the browser that the script can be downloaded, parsed and executed after the web page was build, and thus does not slow down the rendering time.

Internal

A symbol stating whether the script file pointed by the src attribute is an internal resource.
Possible values are:

• The src attribute points to an INTERNAL resource.
• The src attribute points to an EXTERNAL resource.
• Blank, when no src attribute is used (i.e. the script is defined within the web page).

Blocking

States whether the script blocks page rendering, relenting visualization time.
Blocking scripts - evidenced by the snail symbol - are scripts that force the browser to block page rendering. This is normally avoided by using the defer or async attributes, or by moving their definition right before the body tag closure, after all visual HTML elements are defined.
To sum it up, a script block blocks page rendering when it does not use attributes async or defer (which only make sense when the src attribute is used), or when the script is not defined after all visual HTML elements are.

Line

The line in the HTML file where the start tag of the script was found.
The cell is an active link; clicking on it will highlight in the Content or DOM side panel (depending on what you choose from the resulting context menu) the script start tag.

Position

The horizontal coordinate in the HTML file where the start tag of the script was found.
The cell is an active link; clicking on it will highlight in the Content or DOM side panel (depending on what you choose from the resulting context menu) the script start tag.

robots.txt

A symbol stating whether the visit to the URL pointed by the script src attribute is allowed by the robots.txt file.
Possible values are:

• Access to the resource pointed by the src attribute is blocked by the robots.txt file.
• Blank, when no blockage by robots.txt was detected.

Blocking directive in robots.txt

When the script is loaded from a file external to the web page and the script file is internal (i.e. the src attribute is populated and points to a site internal resource), but could not be visited because of a block in the robots.txt file, the cell reports the blocking directive of the robots.txt file.
The directive has an active link: once clicked the robots.txt file will be selected in the main view, the Content side pane will be activated, and the corresponding line containing the directive in the robots.txt file will be highlighted.

CSS styles

This panel internal tab sheet lists all styles (style tag when the style is defined within the web page, link tag when the style is defined in a shared file) in the HTML found in the selected web page.

An example of style tag in the HTML syntax is, in case of style defined within the web page:

<style>
...(the style body)...
</style>

In case of style defined in a shared file:

<link href="...(a relative or absolute URL)..." rel="stylesheet" />

While not as much as scripts, also styles can impact web performance when they are blocking styles, i.e. styles defined within the body section instead of the HTML head. Blocking styles force the browser to block page rendering in order to re-evaluate rendering rules, potentially at the cost of restart painting the web page. You also should keep the number of shared style files to a bare minimum in order to reduce the number of HTTP requests.

Nr

The progressive number of the style tag (style for page embedded styles, link for styles defined in files external to the web page) as found in the HTML.

Absolute URL

The absolute URL of the style resource file pointed by the href attribute.

HREF value

The value of the href attribute in the HTML markup of the style. Attribute href can contain a relative or an absolute URL.

Type

The MIME type of the styling language, read from the optional type attribute. If omitted, text/css is assumed.

Inline

This field shows the tick symbol if the style is defined within the web page inside a style tag, and no symbol in case of CSS file external to the web page loaded via link tag.

Note: In web development world there is an ambiguity in the usage of the term "Inline CSS"; in this case we are using the notation to mean a CSS style defined within the web page inside a style tag.
A more correct usage of the term would be for the case of CSS style defined for a single element by using the style="..." attribute, but since Visual SEO Studio does not process the style attribute (not worth, as style can not block page rendering) and since using the (more correct) term "Internal CSS" would present another ambiguity with the case of CSS files external to the web page, but which are internal resources of the site, we decided in this peculiar instance to use the former notation.

Internal

A symbol stating whether the CSS file pointed by the href attribute (case of CSS file external to the web page, loaded via link tag) is an internal resource.
Possible values are:

• The href attribute points to an INTERNAL resource.
• The href attribute points to an EXTERNAL resource.
• Blank, when no href attribute is used (i.e. the style is defined in the web page, within a style tag).

Blocking

States whether the style blocks page rendering, relenting visualization time.
Blocking styles - evidenced by the snail symbol - are styles defined within the body section instead of the HTML head. They force the browser to block page rendering in order to re-evaluate rendering rules, potentially at the cost of restart painting the web page.

Line

The line in the HTML file where the start of the style was found.
The cell is an active link; clicking on it will highlight in the Content or DOM side panel (depending on what you choose from the resulting context menu) the style tag.

Position

The horizontal coordinate in the HTML file where the style tag was found.
The cell is an active link; clicking on it will highlight in the Content or DOM side panel (depending on what you choose from the resulting context menu) the style tag.

robots.txt

A symbol stating whether the visit to the URL pointed by the href attribute (case of CSS file external to the web page, loaded via link tag) is allowed by the robots.txt file.
Possible values are:

• Access to the resource pointed by the href attribute is blocked by the robots.txt file.
• Blank, when no blockage by robots.txt was detected.

Blocking directive in robots.txt

When the style is defined in a CSS file external to the web page, loaded via link tag, and the style file is internal (i.e. the href attribute points to a site internal resource), but could not be visited because of a block in the robots.txt file, the cell reports the blocking directive of the robots.txt file.
The directive has an active link: once clicked the robots.txt file will be selected in the main view, the Content side pane will be activated, and the corresponding line containing the directive in the robots.txt file will be highlighted.