File CSS/JS di pagina

File CSS e script sono risorse importanti nella definizione dello stile e del funzionamento del sito web.
Sono anche sovente una delle prime cause di problemi di prestazioni, per cui è importante avere uno strumento per rilevarne numero e definizione.
Stili e script possono essere definiti all'interno della pagina web, o in file condivisi. In entrambi casi si hanno vantaggi e svantaggi, e di solito la soluzione migliore è un misto, compromesso tra chiarezza, facilità di sviluppo, robustezza e prestazioni.

Script

Questa scheda interna al pannello elenca tutti gli script (tag script nell'HTML) trovati nella pagina selezionata.

Un esempio di tag script nella sintassi HTML è, nel caso di script definito all'interno della pagina web:

<script>
...(il corpo dello script)...
</script>

Nel caso di script definito in file condiviso:

<script src="...(un URL relativo o assoluto)..."></script>

Gli script sono spesso colpevoli di problemi di prestazioni web. Dovresti tenere al minimo il numero di script condivisi per diminuire il numero di chiamate HTTP, ed evitare il più possibile gli script bloccanti, script che forzano il browser ad arrestare la costruzione della pagina da visualizzare. Lo si ottiene normalmente utilizzando gli attributi defer o async, o muovendone la definizione appena prima della chiusura del tag body, dopo che tutti gli elementi HTML visuali sono stati definiti.

Nr

Il numero progressivo del tag script come trovato nell'HTML.

URL assoluto

L'URL assoluto dell'indirizzo del file di risorsa script puntato dall'attributo src.

Valore SRC

Il valore dell'attributo src nella definizione HTML dello script. L'attributo src può contenere un attributo relativo o assoluto.

Tipo

Il "MIME type" dello script, letto dall'attributo opzionale type. Se omesso, is assume sia JavaScript (MIME type: text/javascript).

async

Questo campo mostra l'icona di spunta se l'attributo async è utilizzato (nel caso di file di script esterno alla pagina web, caricato dall'URL puntato dall'attributo src).
L'attributo async dice al browser che lo script può essere scaricato e interpretato in parallelo - senza rallentare la costruzione della pagina web - e valutato non appena disponibile.

defer

Questo campo mostra l'icona di spunta se l'attributo defer è utilizzato (nel caso di file di script esterno alla pagina web, caricato dall'URL puntato dall'attributo src).
L'attributo defer dice al browser che lo script può essere scaricato, interpretato ed eseguito dopo che la pagina web e stata costruita, e pertanto non ne rallenta il tempo di costruzione.

Interno

Un simbolo che indica se lo script puntato dall'attributo src è una risorsa interna al sito.
I possibili valori sono:

• L'attributo src punta a una risorsa INTERNA.
• L'attributo src punta a una risorsa ESTERNA.
• Vuoto, quando l'attributo src non è utilizzato (ossia lo script è definito all'interno della pagina web).

Bloccante

Indica se lo script blocca il rendering della pagina, rallentandone il tempo di costruzione.
Gli script bloccanti - evidenziati con il simbolo della lumaca - sono script che forzano il browser ad arrestare la costruzione della pagina da visualizzare. Normalmente lo si evita utilizzando gli attributi defer o async, o muovendone la definizione appena prima della chiusura del tag body, dopo che tutti gli elementi HTML visuali sono stati definiti.
Riassumendo, un blocco script blocca la costruzione della pagina da visualizzare quando non usa gli attributi async o defer (che hanno senso solo quando l'attributo src è utilizzato), o quando lo script non è definito dopo che sono definiti tutti gli elementi HTML visuali.

Linea

La linea nel file HTML dove il tag di partenza dello script è stato trovato.
La cella è un link attivo; cliccandovi sopra si evidenzierà nel pannello laterale Contenuto o DOM (dipende da cosa sceglierai nel menu di contesto che apparirà) il tag di partenza dello script.

Posizione

La coordinata orizzontale nel file HTML dove il tag di partenza dello script è stato trovato.
La cella è un link attivo; cliccandovi sopra si evidenzierà nel pannello laterale Contenuto o DOM (dipende da cosa sceglierai nel menu di contesto che apparirà) il tag di partenza dello script.

robots.txt

Un simbolo che indica se la visita all'URL puntato dall'attributo src dello script è concessa dal file robots.txt
I possibili valori sono:

• L'accesso alla risorsa puntata dall'attributo src è bloccata dal file robots.txt
• Nulla, se nessun blocco da parte del robots.txt è rilevato.

Direttiva bloccante in robots.txt

Quando lo script è caricato da un file esterno alla pagina web e il file di script è interno (ossia l'attributo src è popolato e punta a una risorsa interna del sito), ma non può essere visitato a causa di una direttiva bloccante nel file robots.txt, la cella riporta la direttiva bloccante del file robots.txt.
La direttiva ha un link attivo: una volta cliccato verrà selezionato il file robots.txt nella vista principale, il pannello laterale Contenuto sarà attivato, e la linea corrispondente contenente la direttiva nel file robots.txt sarà evidenziata.

Stili CSS

Questa scheda interna al pannello elenca tutti gli stili (tag style quando lo stile è definito all'interno della pagina, tag link quando lo stile è definito in un file condiviso) trovati nell'HTML della pagina selezionata.

Un esempio di tag style nella sintassi HTML è, nel caso di stile definito all'interno della pagina web:

<style>
...(il corpo dello stile)...
</style>

Nel caso di stile definito in file condiviso:

<link href="...(un URL relativo o assoluto)..." rel="stylesheet" />

Anche se non tanto come gli script, anche gli stili possono impattare le prestazioni web quando sono stili bloccanti, ossia stili definiti all'interno della sezione body invece che nella head dell'HTML. Gli stili bloccanti forzano il browser ad arrestare la costruzione della pagina da visualizzare per rivalutarne le regole di visualizzazione, potenzialmente al costo di ricominciare la visualizzazione della pagina. Dovresti anche tenere il numero di file di stile condivisi a un minimo così di ridurre il numero di chiamate HTTP.

Nr

Il numero progressivo del tag dello stile (style per stili definiti all'interno della pagina, link per stili definiti in file esterni alla pagina web) come trovato nell'HTML.

URL assoluto

L'URL assoluto dell'indirizzo del file di risorsa stile puntato dall'attributo href.

Valore HREF

Il valore dell'attributo href nella definizione HTML dello stile. L'attributo href può contenere un attributo relativo o assoluto.

Tipo

Il "MIME type" del linguaggio di stile, letto dall'attributo opzionale type. Se omesso, is assume sia text/javascript.

Inline

Questo campo mostra il simbolo di spunta se lo stile è definito all'interno della pagina web dentro un tag style, and nessun simbolo in caso di file CSS esterno alla pagina web caricato tramite tag link.

Note: Nel mondo dello sviluppo web c'è un'ambiguità nell'uso del termine "Inline CSS"; in questo caso stiamo usando la notazione per significare uno stile CSS definito dentro la pagina web all'interno di un tag style.
Un uso più corretto del termine sarebbe per il caso di stile CSS definito per un singolo elemento usando l'attributo style="...", ma poiché Visual SEO Studio non processa l'attributo style (non ne vale la pena, tanto style non può bloccare la costruzione della pagina) e siccome usare il (più corretto) termine "Internal CSS" presenterebbe un'altra ambiguità con il caso di file CSS esterni alla pagina web, ma che sono risorse interne al sito, abbiamo deciso in questo caso particolare di usare la notazione precedente.

Interno

Un simbolo che indica se il file CSS puntato dall'attributo href (caso di file CSS esterno alla pagina web, caricato tramite tag link) è una risorsa interna al sito.
I possibili valori sono:

• L'attributo href punta a una risorsa INTERNA.
• L'attributo href punta a una risorsa ESTERNA.
• Vuoto, quando l'attributo href non è utilizzato (ossia lo script è definito nella pagina web, all'interno di un tag style).

Bloccante

Indica se lo stile blocca il rendering della pagina, rallentandone il tempo di costruzione.
Gli stili bloccanti - evidenziati con il simbolo della lumaca - sono stili definiti all'interno della sezione body invece che nella head dell'HTML. Forzano il browser ad arrestare la costruzione della pagina da visualizzare per rivalutarne le regole di visualizzazione, potenzialmente al costo di ricominciare la visualizzazione della pagina.

Linea

La linea nel file HTML dove il tag dello stile è stato trovato.
La cella è un link attivo; cliccandovi sopra si evidenzierà nel pannello laterale Contenuto o DOM (dipende da cosa sceglierai nel menu di contesto che apparirà) il tag dello stile.

Posizione

La coordinata orizzontale nel file HTML dove il tag dello stile è stato trovato.
La cella è un link attivo; cliccandovi sopra si evidenzierà nel pannello laterale Contenuto o DOM (dipende da cosa sceglierai nel menu di contesto che apparirà) il tag dello stile.

robots.txt

Un simbolo che indica se la visita all'URL puntato dall'attributo href (caso di file CSS esterno alla pagina web, caricato tramite tag link) è concessa dal file robots.txt
I possibili valori sono:

• L'accesso alla risorsa puntata dall'attributo href è bloccata dal file robots.txt
• Nulla, se nessun blocco da parte del robots.txt è rilevato.

Direttiva bloccante in robots.txt

Quando lo stile è definito in un file CSS esterno alla pagina web, caricato tramite tag link, e il file di script è interno (ossia l'attributo href punta a una risorsa interna del sito), ma non può essere visitato a causa di una direttiva bloccante nel file robots.txt, la cella riporta la direttiva bloccante del file robots.txt.
La direttiva ha un link attivo: una volta cliccato verrà selezionato il file robots.txt nella vista principale, il pannello laterale Contenuto sarà attivato, e la linea corrispondente contenente la direttiva nel file robots.txt sarà evidenziata.