Manual: Page CSS/JS files
The feature "Page CSS/JS files" of Visual SEO Studio, documented in detail.
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 astyle
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.