regole-seo » velocità

Web mobile friendly

regole-seo — Mon, 28 Mar 2011 23:55:50 +0000

L’accesso al web tramite cellulare è in continua crescita soprattutto grazie al successo e alla grandissima diffusione degli smatphone. Questi telefonini tuttofare, dotati di funzionalità avanzate e possibilità di accesso al web sfruttando la velocità delle tecnologie di terza generazione, hanno rappresentato una vera svolta alla navigazione web tramite telefonino.

Per questo motivo la mobile accessibility del nostro sito web è un aspetto da tenere in grande considerazione.
Quando si può dire che un sito web è mobile-friendly?
Quale è il modo migliore di strutturare un sito web per andare incontro alla mobile accessibility? Quali sono i principali accorgimenti per ottimizzare l’interazione tra il sito web e Googlebot-Mobile?

Leggi il resto di questo articolo »Web mobile friendly

Articoli correlati:

WebPageTest: testare le performance del sito

regole-seo — Sun, 27 Feb 2011 16:54:04 +0000

Come ormai risaputo la velocità di caricamento di un sito è un fattore molto importante.
Essa non solo influisce sulla user experience ma è anche uno dei tanti fattori usati da Google per determinare il search ranking delle pagine web.

In alcuni articoli, qui su regole-SEO si è parlato della relazione tra velocità e SEO e di alcune delle principali tecniche per diminuire i tempi di caricamento delle pagine web.
Pochi giorni fa mi sono imbattuto in un nuovo strumento da utilizzare per testare la velocità delle pagine web.

Si tratta di WebPageTest.
Una volta arrivati su www.webpagetest.org, la prima cosa da fare è inserire la URL del sito che desiderate nell’apposito campo e cliccare sul pulsante di “start”.
Dopo circa 30 secondi il test verrà ultimato mostrandovi molti dati interessanti.

Leggi il resto di questo articolo »WebPageTest: testare le performance del sito

Articoli correlati:

Velocizzare i social plugins con Ajax e Javascript

regole-seo — Sun, 09 Jan 2011 21:59:29 +0000

Vai all’ indice degli articoli » Velocità e SEO

Il problema di come utilizzare i social plugins senza compromettere la velocità, è già stato affrontato una volta su regole-seo proponendo una soluzione Ajax e Javascript, basata sulle librerie jQuery.

Sebbene l’utilizzo di una libreria come jQuery rappresenti la migliore soluzione in quanto permette di risparmiare tempo e numerose linee di codice, è anche vero che spesso qualcuno (specialmente alle prime armi) potrebbe trovarsi di fronte a problemi di compatibilità con altre librerie Javascript utilizzate.
Per questo motivo e per eventuali altri casi in cui doveste decidere di non utilizzare jQuery, voglio proporre qui di seguito una soluzione tutta Javascript e Ajax per risolvere l’ormai famoso problema di come utilizzare i social plugins senza compromettere la velocità

Come consiglia anche Matt Cutts non è opportuno lasciare perdere i social widgets solo perchè il server a cui si collegano è “un po’ lento”.
Il guadagno che deriva dall’utilizzo dei social plugins in termini di link popularity e presenza nel web è talmente enorme rispetto allo svantaggio che deriva dalla lentezza provocata dai social plugins che sarebbe davvero ingenuo rinunciarvi per questo motivo.

La soluzione che proporrò qui di seguito mostra come “salvare capra e cavoli” sfruttando la tecnica delle “chiamate asincrone” per caricare i social plugins, in modo che il loro tempo di caricamento non incida sul tempo di caricamento delle vostre pagine. Tutto ciò è possibile utilizzando Javascript e Ajax

Come sempre, visto che l’articolo è dedicato anche a chi non ha grandi competenze in ambito Javascript, procederò passo passo commentando (soprattutto all’interno del codice) anche quei passaggi che a qualcuno sembreranno più ovvi.

Leggi il resto di questo articolo »Velocizzare i social plugins con Ajax e Javascript

Articoli correlati:

Velocizzare i social plugins con jQuery e Ajax

regole-seo — Sun, 21 Nov 2010 23:34:36 +0000

Vai all’ indice degli articoli » Velocità e SEO

Nel precedente articolo introduttivo dedicato a come usare i social plugins senza compromettere la velocità, abbiamo visto che il consiglio di Matt Cutts è appunto quello di non lasciare perdere i social widgets solo perchè il server a cui si collegano è “un po’ lento”.
La grande utilità dei social plugins per la nostra link popularity e presenza nel web è effettivamente fuori discussione.

Oggi però voglio mostrarvi come “salvare capra e cavoli” utilizzando Ajax e jQuery per velocizzare i social plugins facendo in modo che il loro tempo di caricamento non incida sul tempo di caricamento dei vostri contenuti.
Sfrutteremo le potenzialità delle “chiamate asincrone”.
Nell’articolo successivi dedicato a questa tematica proporrò una soluzione basata esclusivamente su Ajax e Javascript per tutti coloro che per qualche ragione non vogliano (o non possano) appoggiarsi alle librerie come jQuery.

L’utilizzo di jQuery per implementare questa tecnica richiede sicuramente molte meno linee di codice e ne rende quindi più veloce la realizzazione.

Visto che l’articolo è dedicato anche a chi non ha grandi competenze in ambito Javascript, procederò passo passo commentando anche quei passaggi che a qualcuno sembreranno più ovvi.

Leggi il resto di questo articolo »Velocizzare i social plugins con jQuery e Ajax

Articoli correlati:

Social plugins: come usarli senza compromettere la velocità

regole-seo — Sun, 07 Nov 2010 23:58:30 +0000

Vai all’ indice degli articoli » Velocità e SEO

Pochi giorni fa si è conclusa su regole-seo una serie di “articoli guida” all’integrazione dei social buttons.
Soprattutto ho voluto concentrarmi sugli aspetti e le peculiarità dei tre social buttons analizzati (il bottone “mi piace” di Facebook, il retweet button di Twitter e il Google buzz button) trovando una soluzione ai problemi più comuni che potreste incontrare nella loro integrazione.

Si, i social buttons e, più in generale, i vari social plugins o social widgets sono importanti. Anzi, ormai è evidente da un po’: il lato social del web oggi rappresenta il cuore e l’anima di internet.

I social plugins però, se ne fate uso nel vostro sito lo avrete certamente notato, rallentano a volte anche significativamente i tempi di caricamento delle vostre pagine peggiorando inevitabilmente la user experience dei vostri utenti.

Certamente dei social plugins non si può fare a meno ma è anche vero che la velocità è diventata uno dei fattori di posizionamento utilizzati da Google.
Esiste una soluzione a tutto ciò?
Certo che esiste e nei prossimi articoli dedicati a questo argomento vedremo come risolvere il problema sfruttando la potenzialità delle richieste asincrone.

Non preoccupatevi se siete completamente a digiuno di Ajax o jQuery. Procederò passo passo proponendo due soluzioni.
La prima di queste utilizzerà Ajax per il caricamento dei contenuti social delle vostre pagine, appoggiandosi alle librerie jQuery mentre la seconda soluzione verrà implementata utilizzando esclusivamente le librerie Ajax e javascript standard.

Leggi il resto di questo articolo »Social plugins: come usarli senza compromettere la velocità

Articoli correlati:

“google.load()”: più velocità con Google AJAX Libraries API

regole-seo — Sun, 25 Apr 2010 21:09:06 +0000

Vai all’ indice degli articoli » Velocità e SEO

Google AJAX Libraries API è un network di distribuzione per le più popolari librerie Javascript open source.
Rappresenta un modo davvero utile per utilizzare librerie Javascript in modo più efficiente per aumentare la velocità di caricamento delle pagine di un sito.
Vediamo meglio di cosa si tratta.

Molto spesso nella realizzazione di un sito web si ricorre all’uso di potenti librerie Javascript come ad esempio Jquery, MooTools, Prototype ecc…
Queste librerie facilitano molto gli sviluppatori nella realizzazione di funzionalità client side permettendo anche di ottenere effetti grafici e animazioni davvero molto accattivanti con uno sforzo minimo.
Purtroppo però il peso di queste singole librerie può anche superare i 50 KB senza considerare eventuali plugin aggiuntivi per realizzare funzionalità specifiche.
Inoltre va anche considerato il fatto che molto spesso queste librerie vengono utilizzate contemporaneamente all’interno dello stesso sito.
Detto questo è facile intuire che raggiungere un peso di 100 KB per una singola pagina è una possibilità decisamente plausibile, con conseguenze negative sulla velocità di caricamento.

Una soluzione a questo problema è l’utilizzo delle Google AJAX API tramite la funzione google.load()

Prima di vedere come possiamo utilizzare google.load() per sfruttare Google AJAX API, vediamo brevemente quali sono i principali vantaggi che derivano dall’utilizzare le librerie sopra menzionate facendo si che sia Google a fornircele anziché il server che ospita il nostro stesso sito:

Poiché Google possiede un grandissimo content delivery network con diversi centri sparsi in tutto il mondo, è in grado di fornire i file più velocemente del server che ospita il nostro sito, utilizzando il “data center” che geograficamente si trova più vicino all’utente, aumentando così la velocità di download della pagina web.
Utilizzando questo modo comune di accedere alle migliori librerie Javascript e grazie al fatto che questo metodo viene usato dai webmaster più accorti, esistono grandi possibilità che l’utente che visita il nostro sito abbia già visitato precedentemente un sito che caricava le stesse librerie da noi usate sempre utilizzando utilizzare google.load().
In tal caso le librerie si trovano già nella cache del browser dell’utente e non verranno scaricate nuovamente a vantaggio della velocità di caricamento delle nostre pagine.
Grazie al fatto che ci sono alte probabilità che le librerie Javascript da noi usate si trovino già nella cache del browser dell’utente (come visto nel punto precedente), il numero di download delle librerie Javascript diminuirà insieme alla banda utilizzata dagli utenti in visita al nostro sito.

Vediamo ora come utilizzare la funzione google.load() per usufruire delle librerie Javascript di Google AJAX API attraverso i pochi passi descritti di seguito:

Innanzi tutto occorre creare una API key che consentirà al vostro sito di potere utilizzare le di Google AJAX API. Potete generare l’API Kei al seguente indirizzo code.google.com/intl/it-IT/apis/ajaxsearch/signup.html
A questo punto vi basterà inserire il seguente codice contenente l’API Kei generata nell’header delle vostre pagine web
L’ultimo passaggio è quello di caricare le librerie Javascript di cui necessitate nella vostra pagina web come nell’esempio seguente:

Il primo parametro passato nella fuznione google.load() è il nome della libreria mentre il secondo rappresenta la versione.

Per maggiori dettagli su come utilizzare Google AJAX API vi rimando alla documentazione ufficiale: AJAX Libraries API Developer’s Guide.

Vai all’ indice degli articoli » Velocità e SEO

Articoli correlati:

GZIP compression

regole-seo — Sun, 11 Apr 2010 20:58:33 +0000

Vai all’ indice degli articoli » Velocità e SEO

La gzip compression è un buon modo per ottenere due grandi vantaggi in termini di performance di un sito web.
In primo luogo grazie alla compressione gzip si risparmia sul bandwidth (larghezza di banda) ovvero sulla quantità di byte che occorre trasportare in giro per il web affinchè il nostro sito venga visualizzato.
In secondo luogo (diretta conseguenza del primo aspetto) potremo ottenere un vantaggio anche in termini di velocità.

Mentre il vantaggio che si acquisisce in termini di larghezza di banda attivando la gzip compression è fuori discussione, il beneficio effettivo che la gzip compression porta in termini di velocità dipende comunque da diversi altri fattori quali la quantità di traffico del vostro sito, la velocità della linee, l’effettive peso dei vostri contenuti ecc.

Quello che ad oggi mi sento proprio di dire, è che la compressione gzip attivata su un sito può solo portare vantaggi, anche nel caso in cui la velocità non dovesse aumentare in modo rilevante.

Tempo fa la scelta non era così semplice infatti non tutti i vecchi browser web supportavano la gzip compression. Stiamo però parlando delle versioni ormai datate dei browser; le versioni precedenti alla 4 di Internet Explorer e Netscape e di versioni di Opera precedenti la 5.12.
Insomma credo proprio che ormai sia acqua passata.

Prima di vedere due esempi su come attivare la gzip compression su web server Apache e la gzip compression su application server Apache Tomcat e verificarne il funzionamento tramite gzip-test, vediamo meglio di cosa si tratta.

Standard http request and respons

L’immagine precedente descrive ciò che generalmente avviene quando invochiamo un url come ad esempio http://www.mioSito.it/index.html

Browser: invia una richiesta al server per la pagina, http://www.mioSito.it/index.html
Server: riceve la richiesta e cerca la pagina da fornire
Server: trova la pagina e invia con un response code 200 (OK) il file trovato, supponiamo di 100KB
Browser: attende di scaricare i 100 KB per poi visualizzare la pagina all’utente.

Chiaramente questa operazione viene ripetuta per tutte le risorse riferite dalla pagina index.html (immagini script esterni ecc…)

In questo caso ipotetico dunque dobbiamo attendere il download di 100 KB… …decisamente troppo!

Gzip http request and respons

Con la gzip compression quello che avviene è che il server effettua una compressione del file richiesto prima di inviarlo al browser. Una volta ricevuto il file, il browser lo decomprimerà per poi visualizzarlo all’utente.

Ecco cosa avviene nel dettaglio:

Browser: invia una richiesta al server per la pagina, http://www.mioSito.it/index.html specificando al server che supporta la gzip compression
Server: Riceve la richiesta e cerca la pagina da fornire
Server: Trova la pagina e invia un response code 200 (OK), comprime il file da 100 KB ottenendo un file da 25 KB e lo invia al browser.
Browser: attende di scaricare i 25 KB per poi visualizzare la pagina all’utente.

Da notare che il guadagno ottenuto sulla compressione del codice della pagina può arrivare al 75%.

Come evidenziato anche nell’immagine, perché tutto ciò funzioni correttamente, il client (browser) e il server devono stabilire un accordo:

Il browser deve informare il server che è in grado di supportare il contenuto compresso. Per fare ciò invia nell’header della richiesta il seguente parametro:
Accept-Encoding: gzip, deflate
Il server, nel caso il contenuto richiesto venga compresso, deve informare il browser che il contenuto che sta per inviare è compresso. Per fare ciò invia nell’header della risposta il seguente parametro:
Content-Encoding: gzip

NOTA: Se il server non invia tale parametro in risposta allora significa che il contenuto non è stato compresso e che quindi il browser (pur supportando contenuti comrpessi) dovrà trattarlo nel modo tradizionale.

Poiché come detto in precedenza, già da diversi anni i browser supportano la gzip comrpession, se vogliamo ottenere i vantaggi della compressione gzip tutto quello che ci resta da fare è configurare il server del nostro sito perché fornisca i contenuti compressi.

Vediamo come attivare la gzip compression su web server Apache e su application server Apache Tomcat

Apache gzip compression

Per abilitare la gzip compression su web server Apache occorre essenzialmente abilitare il modulo mod_deflate.so inserendo la seguente istruzione nel file httpd.conf situato nella cartella conf dell’installazione di Apache:

LoadModule deflate_module modules/mod_deflate.so

e aggiungere quanto segue per attivare la compressione:

# # mod_deflate configuration # LoadModule deflate_module modules/mod_deflate.so AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript DeflateCompressionLevel 9 BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html DeflateFilterNote Input instream DeflateFilterNote Output outstream DeflateFilterNote Ratio ratio LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate

Per una descrizione dettagliata della configurazione vi rimando a questo articolo: how to Install and configure mod_deflate – Compress Web Content delivered by Apache e chiaramente anche alla documentazione ufficiale del modulo mod_deflate di Apache: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

Apache Tomcat gzip compression

Nel caso invece abbiate realizzato un’applicazione web Java e debba essere l’application server Tomcat a dovere operare la gzip compression, vi basterà configurare il Connector all’interno del file server.xml come nel seguente esempio:

maxThreads="150" minSpareThreads="25" maxSpareThreads="75" enableLookups="false" redirectPort="8443" acceptCount="100" connectionTimeout="20000" disableUploadTimeout="true" useBodyEncodingForURI="true" compressableMimeType="text/html,text/xml,text/css,text/javascript,text/plain" compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata"/>

A questo indirizzo trovate la documentazione ufficiale per la configurazione del Connector di Tomcat: Tomcat Http connector

GZIP test

Una volta configurato il server non ci resta che verificare se tutto funziona correttamente.
A questo indirizzo www.gidnetwork.com/tools/gzip-test.php trovate gzip-test un semplice strumento che è in grado di dirvi se la gzip compression è attiva per il vostro sito e, in tal caso, quanto è il guadagno che ne avete avuto in termini di dimensioni.

Con la gzip compression, a fronte di una perdità di velocità generalmente irrisoria derivante dal lavoro operato dal server per realizzare la compressione, otterrete sicuramente un aumento più o meno sensibile della velocità di download dei contenuti e sicuramente un grande vantaggio in termini di banda utilizzata.

Vai all’ indice degli articoli » Velocità e SEO

Articoli correlati:

Ottimizzazione, compressione e uso intelligente delle immagini

regole-seo — Mon, 22 Mar 2010 22:29:12 +0000

Vai all’ indice degli articoli » Velocità e SEO

Nell’articolo precedente riguardante le tecniche di base per aumentare la velocità di un sito, abbiamo visto che un primo importante passo per diminuire i tempi di caricamento di un sito è rappresentato dalla realizzazione di codice pulito, contenuti leggeri e dallo sfruttamento della cache del browser per memorizzare gli script e le informazioni di stile in modo che queste non debbano essere scaricate dal browser ad ogni accesso successivo.

In questo articolo vediamo un altro aspetto di base molto importante per la velocità di un sito. Si tratta dell’ottimizzazione, della compressione e dell’uso intelligente delle immagini.

Lo scopo non vuole essere quello di dare una spiegazione dettagliata e approfondita dei vari formati per le immagini e dei vari algoritmi di compressione. Piuttosto vuole essere una breve raccolta di tutti quegli aspetti a cui ognuno dovrebbe porre attenzione nell’ambito dell’utilizzo delle immagini in una pagina web.
A fine articolo ho allegato anche un tutorial realizzato da Sara Gioria, grafica web e illustratrice, per la realizzazione di immagini “ombreggiate”, una delle tante tecniche usate dai grafici esperti per abbattere i tempi di caricamento delle immagini con effetti particolari sfruttando la potenza dei CSS.

Ecco le cose che occorre sempre tenere in cosiderazione:

Non esagerare con le immagini

E’ vero. Spesso una bella immagine può trasformare un sito da niente in un gioiellino, almeno in termini di impatto visivo.
Al di là di questo però attenti a non esagerare con le immagini, soprattutto quando il loro uso è al puro scopo di formattazione. Sarebbe sempre opportuno chiedersi se effettivamente tutte le immagini usate sono necessarie. Molti effetti spesso realizzati tramite l’ausilio di immagini possono infatti essere realizzati con i CSS, diminuendo così il peso della pagina in favore della velocità di caricamento.

Attributi Height e Width

Quando una pagina viene caricata e gli attributi “height” e “width” del tag relativo ad un’immagine sono definiti nel codice, il browser è già a conoscenza di come i vari contenuti dovranno essere visualizzati, ancora prima che l’immagine venga caricata.
In caso contrario potremo avere dei rallentamenti dovuti al fatto che, una volta terminato il download dell’immagine, il browser deve riposizionare i contenuti sulla base dell’effettivo spazio occupato dall’immagine.
Anche se in questi casi ciò che realmente succede dipende molto anche dal tipo di browser utilizzato, il consiglio è quello di inserire sempre questi due attributi.

Le dimensioni effettive delle immagini dovrebbero essere sempre coerenti con gli attributi “height” e “width” del tag che verrà usato per rappresentarle nella pagina web.
Nel caso in cui altezza e larghezza dell’immagine siano inferiori a quelle inserite negli attributi “height” e “width” otterremmo un effetto “sgranato” dovuto al fatto che l’immagine viene ingrandita oltre le sue naturali dimensioni dal browser, durante la renderizzazione.
Nel caso in cui invece altezza e larghezza dell’immagine siano superiori a quelle inserite negli attributi “height” e “width” allora sicuramente le prestazioni ne risentirebbero in quanto l’immagine sarà più grande del necessario e realizzata con un numero di punti superiori al dovuto. Chiaramente più punti significa più byte da scaricare.

Formato delle immagini (gif, jpg o png)

La scelta del formato dell’immagine è sicuramente un aspetto importante. Il formato sbagliato può incidere molto negativamente sul livello di compressione utilizzabile e di conseguenza sulla pesantezza dell’immagine e la velocità di caricamento.

In generale il formato gif permette di ottenere prestazioni migliori per immagini con poche sfumature. E’ dunque poco indicato per fotografie ad esempio.
Il tipo di compressione usato nel caso di una gif si basa sul numero di colori utilizzati (fino ad un massimo di 256). Più colori utilizziamo più il peso dell’immagine aumenterà.
Un vantaggio del formato gif è anche quello di supportare la trasparenza.
Per informazioni dettagliate sul formato gif seguite il seguente link: Graphics Interchange Format

Il formato jpeg è invece più indicato per immagini fotografiche o comunque con tanti colori e sfumature diverse. Per queste immagini il formato gif difficilmente ci permetterebbe di ottenere un risultato soddisfacente. Il formato jpeg, che diversamente da gif applica una compressione con perdita dell’informazione, può invece permetterci di ottenere risultati soddisfacenti in questi casi. Più il livello di compressione adottato sarà elevato, più l’immagine perderà di qualità diminuendo però di peso.
Maggiori informazioni sul formato jpeg sono disponiblili al seguente link: Joint Photographic Experts Group

Il formato png ha il vantaggio di effettuare una compressione dell’immagine senza perdita di informazioni, come avviene per il formato gif, ma senza le limitazioni di quest’ultimo.
In breve, questo significa che le dimensioni del file diminuiscono, ma la qualità dell’immagine resta ottima anche nel caso in cui si tratti di un’immagine con molti colori. Inoltre il formato png supporta la trasparenza e la semitrasparenza. Purtroppo però a oggi non ancora tutti i browser supportano la trasparenza delle png (come ad esempio le versioni di internet explorer precedenti alla 7).
Per maggiori informazioni sul formato png seguite il seguente link: Portable Network Graphics

In genere il miglior modo per determinare il migliore formato da utilizzare è quello di effettuare delle prove per capire quale dei tre formati permette di raggiungere il migliore compromesso tra qualità desiderata e dimensioni del file ottenuto.

Compressione delle immagini

La compressione delle immagini è importante in quanto può incidere molto sulla velocità di caricamento.
I formati generalmente utilizzati per il web (sopra descritti) forniscono diversi livelli di compressione che possono permetterci di trovare la migliore soluzione in quanto a qualità e peso dell’immagine.
Esistono molti strumenti gratuiti anche on-line che permettono di ottenere rapidamente la compressione di un’immagine.
Online Image Optimizer ad esempio permette di comprimere un’immagine usando il formato gif, formato png o jpeg. E’ in grado di mantenere la trasparenza e le animazioni dei file gif e può mostrare i risultati a diversi livelli di compressione.

Usare i trucchi dell’esperto

Oltre a questi accorgimenti che tutti dovrebbero adottare esistono anche tecniche più avanzate. Veri e propri trucchi del mestiere che permettono di ottenere buoni effetti e alta qualità abbattendo la quantità di byte del file di immagine.
Per capirci meglio farò un esempio basato proprio su una tecnica usata in regole-seo.
Le immagini presenti all’inizio di ogni articolo possiedono un effetto ombra. Un effetto ombra rappresenta una sfumatura la cui quantità di livelli di trasparenza, sommata alla quantità di colori richiesti dall’immagine stessa da rappresentare, rende inutilizzabile il formato gif.
L’utilizzo di un’immagine ombreggiata nel formato jpeg non è realizzabile perché non viene supportata la trasparenza. Per finire il formato png è invece una soluzione ottima in termini qualitativi ma che spesso porta a ottenere immagini più pesanti rispetto ai formati precedenti.
Un bel guaio insomma!

La tecnica adottata è stata allora quella di separare l’effetto ombreggiato dall’immagine stessa, salvando ombra e immagine in due file diversi.
In questo modo un file png contenente l’ombreggiatura viene applicato come sfondo al tag

destinato a contenere l’immagine, mentre l’immagine viene salvata indipendentemente e, grazie al fatto che non deve contenere le informazioni relative all’ombreggiatura, il suo peso è sicuramente inferiore.
Inoltre poiché tutte le immagini degli articoli sono costruite in questo modo, il file dell’ombra che è sempre lo stesso per tutti gli articoli viene scaricato dal browser solo al primo accesso e memorizzato in cache per gli accessi successivi.
Anche se il guadagno effettivo ottenuto dipende dall’immagine usata per l’articolo vi faccio un esempio del vantaggio ottenuto sull’immagine usata nell’articolo “Velocità e SEO“:
File immagine unico con ombreggiatura:
- un file png con dimensioni 96 KB
Due file separati per l’ombreggiatura e immagine dell’articolo:
- un file png per l’ombreggiatura con dimensioni 1KB scaricato solo al primo accesso
- un file jpeg per l’immagine dell’articolo con dimensione 21 KB.
Insomma le dimensioni sono state abbattute di tre quarti!

Nel link seguente potrete trovare un tutorial che spiega in maniera più dettagliata come ottenere l’effetto ombra sopra descritto. Il tutorial è stato realizzato da Sara Gioria che si occupa da anni di grafica web e illustrazione e che colgo l’occasione per ringraziare.

Esistono moltissime altre tecniche per abbattere i tempi di caricamento delle immagini.
Un’altra molto interessante, anche se più complessa da realizzare, è la tecnica degli sprite CSS usata anche da Google.
Seguendo il link CSS sprite troverete molte informazioni utili su questa tecnica.

Vai all’ indice degli articoli » Velocità e SEO

Articoli correlati:

Codice pulito, contenuti leggeri e cache del browser

regole-seo — Sun, 14 Mar 2010 22:42:49 +0000

Vai all’ indice degli articoli » Velocità e SEO

Esistono diverse tecniche per aumentare la velocità, l’efficienza, e le prestazioni di un sito.
Prima di concentrarci sulle tecniche più avanzate, che sicuramente vedremo nei prossimi articoli, vorrei soffermarmi sulle basi. Su quelle pratiche e quegli accorgimenti che ogni webmaster dovrebbe conoscere e possibilmente mettere in pratica per aumentare la velocità del proprio sito e di conseguenza migliorare la “user experience” dei propri utenti.
Concentrarsi sulle tecniche più avanzate senza curarci di queste cose sarebbe a mio giudizio ridicolo.

Ancora oggi sul web esistono siti costruiti senza curare minimamente l’aspetto della velocità. Siti che, nonostante le potenzialità della connessioni di oggi, impiegano ancora 15 secondi a caricare una pagina. Siti che semplicemente sfruttando le tecniche di base potrebbero essere anche 10 volte più veloci.

Vediamo, in due articoli, quali sono questi aspetti di base che ci possono aiutare a velocizzare un sito web.
Mentre nel prossimo articolo tratteremo l’ottimizzazione delle immagini sia per quanto riguarda la compressione che la scelta del formato, in questa prima parte vedremo come alleggerire il codice e i contenuti e a sfruttare la cache dei browser web.

Utilizzare i CSS

L’uso dei CSS per costruire il layout della pagina è molto importante per almeno due motivi.
In primo luogo l’uso dei CSS permette di ottenere un codice più snello e pulito rispetto ad una pagina il cui layout è basato ad esempio sull’uso delle tabelle e dei loro attributi. Con i CSS tendenzialmente possiamo ottenere degli effetti di stile utilizzando meno codice rispetto a quando non li utilizziamo. Meno codice in pagina significa pagine più leggere e quindi veloci da scaricare e minore difficoltà anche per i motori nella ricerca dei contenuti all’interno del codice.
Seconda cosa molto importante è che i CSS possono essere inseriti in un file esterno alla pagina che ne fa uso. In questo modo un browser web può memorizzare le informazioni del layout contenute nel file CSS nella sua cache in modo che agli accessi successivi non debba scaricare nuovamente il file. In tal modo la velocità di caricamento aumenta visto che per gli accessi successivi la quantità di byte delle informazioni di stile non verrà più scaricata.

Evitare tabelle annidate

Come già emerso precedentemente l’utilizzo delle tabelle atte alla formattazione della pagina sarebbe da evitare a favore dell’utilizzo dei CSS.
Questo non significa che le tabelle non debbano più essere usate in nessun caso.
Per la visualizzazione di dati tabulari, soprattutto se in gran quantità, restano ancora un’ottima soluzione.
Occorre però cercare di evitare la creazione di tabelle nidificate (o se preferite tabelle innestate). Questo perché più la nidificazione delle tabelle è complessa più il browser impiegherà tempo nella renderizzazione della pagina visto che prima di disegnala dovrà avere letto l’intero codice html dell’aggregazione realizzata.

Usare script esterni

Il codice javascript dovrebbe essere sempre inserito in un file esterno soprattutto nei casi in cui lo stesso codice è utilizzato in più pagine.
Anche in questo caso infatti, come visto precedentemente per il file CSS, il browser può memorizzare nella sua cache il file contenente gli script velocizzando gli accessi successivi.
Per importare un file di script “tuo script.js” all’interno di una pagina web basta inserire il codice seguente:

Soprattutto in casi in cui vi è una gran quantità di script, l’utilizzo di un file esterno può davvero permettere di risparmiare una gran quantità di tempo di caricamento.

Rimuovere tutto ciò che non è necessario

Nella costruzione di una pagina web spesso bisogna scendere a un compromesso. L’utilizzo di molte immagini, applicazioni flash ed effetti vari atti ad impressionare l’utente possono appesantire di molto il sito e peggiorare notevolmente la “user experience” dell’utente.
In alcuni casi occorre frenare un po’ l’entusiasmo e magari rinunciare a mettere in mostra tutta la nostra abilità nella costruzione di componenti “belli” ma talvolta inutili e spesso controproducenti in termini di accessibilità e velocità.
Spesso un valido compromesso sta nell’utilizzo di script o librerie come jquery che permettono di ottenere effetti molto accattivanti con davvero poco impatto sul peso dei contenuti e sulla velocità di caricamento.
Tra i contenuti inutili rientrano però anche quelle porzioni di codice che sono presenti ma non hanno nessuna utilità. Si tratta spesso di codice inserito da qualche editor utilizzato per la realizzazione della pagina. L’ideale sarebbe sempre ricontrollare il codice per eliminare le parti inutili.
L’eliminazione del codice inutile non solo sarà utile per aumentare la velocità di caricamento ma vi fara compiere un passo positivo anche in direzione della qualità del sito.
Alcuni webmaster consigliano anche di eliminare gli spazi, gli a capo e le indentazioni.
Sebbene per pagine molto ricche questo può effettivamente significare una riduzione di peso della pagina da tenere in considerazione, il mio consiglio è quello di pensare anche alla leggibilità e alla manutenibilità del codice. Eliminare indentazioni e caratteri di a capo potrebbe permettervi si di avere un guadagno (più o meno ingente) in termini di velocità e prestazioni ma a fronte di un tragica esperienza futura in termini di manutenibilità.

Vorrei anche aggiungere, per completare questo punto, un piccolo sfogo personale verso tutte quelle persone che realizzano pagine associando una musica di sottofondo.
Personalmente credo che la musica di sottofondo non porti nessun vantaggio e solo tanti svantaggi.
L’unica cosa sensata che mi viene da pensare è che chi decide di inserire un audio di sottofondo lo faccia per creare un clima adatto alla pagina visitata. Un tentativo di rilassare l’utente oppure di “gasarlo”.
Ma vediamo quali potrebbero essere i lati negativi di aggiungere l’audio di sottofondo alla vostra pagina web:

Un utente che naviga all’una di notte e arriva sul vostro sito subirà inevitabilemnte le ire di chi magari sonnecchiava sul divano nella stessa stanza.
Chi sta navigando durante il lavoro (prendendosi qualche minuto di pausa) non sarà felice di averlo fatto sapere anche al suo capo grazie proprio alla musicalità del vostro sito.
Molte persone ascoltano la musica in cuffia mentre navigano e la musica del vostro sito si andrebbe a sovrapporre a quella ascoltato dall’utente.
Per concludere, la maggior parte delle persone che arriva su un sito che inizia a suonare spegne le casse entro i primi 5 secondi.

velocità

Insomma io credo che siano davvero rari o forse unici i casi in cui la musica di sottofondo sia utile e apprezzata dall’utente. Siete d’accordo con me?

Dividere su più pagine contenuti molto lunghi

Se avete la possibilità di farlo, suddividete testi troppo lunghi su più pagine. In questo modo otterrete singole pagine più leggere e, se siete abbastanza accorti potrete anche riuscire migliorare i valori di keyword density.
Inoltre ricordatevi sempre che molta gente, nel vedere una scroll bar “troppo lunga” tende a demoralizzarsi e a fuggire ancora prima di aver capito se il contenuto è o meno valido.

Per ora è tutto, nel prossimo articolo continueremo il discorso sulle tecniche di base parlando di ottimizzazione delle immagini e della loro compressione.

Vai all’ indice degli articoli » Velocità e SEO

Articoli correlati:

Velocità e SEO

regole-seo — Sun, 21 Feb 2010 18:04:01 +0000

La velocità del sito inciderà sulla SERP di Google

La velocità dei siti web: un nuovo fattore SEO on-page che Google utilizzerà per determinare il valore di un sito e che sta creando nuove preoccupazioni a molti webmaster.

Questo articolo vuole essere una breve introduzione a quello che la velocità andrà a rappresentare in ambito SEO in base alle dichiarazioni fatte da Matt Cutts, per capire quanto la velocità è importante e quanta attenzione è opportuno porre a questo parametro.
Ma non è tutto. Questa pagina diventerà anche un indice per gli articoli che seguiranno relativi alla velocità, alle tante tecniche per aumentare la velocità di un sito e le sue performance e ai vari tools per l’analisi della velocità e le performance di un sito.

Indice articoli "Velocità e SEO"

Codice pulito, contenuti leggeri e cache del browser (tecniche base)
Ottimizzazione, compressione e uso intelligente delle immagini (tecniche base)

GZIP compression (tecniche avanzate)
“google.load()”: più velocità con Google AJAX Libraries API (tecniche avanzate)
Social plugins: come usarli senza compromettere la velocità (tecniche avanzate)

…tra poco on line nuovi articoli relativi alla velocità e il SEO

Matt Cutts tempo fa ha affermato che Google non ha mai considerato la velocità di un sito web. D’ora in avanti però, (per il nuovo algoritmo di Caffeine) diventerà un fattore da tenere in considerazione per il buon posizionamento.

Ecco qui sotto il filmato dell’intervista relativa a Google Caffeine dove appunto Matt Cutts ci dà importanti informazioni sulla considerazione della velocità dei siti da parte di Google.

Un sito veloce è un indicatore di una buona “user experience” relativamente alla navigazione e fruizione dei contenuti ed il compito di un motore di ricerca è fornire i migliori risultati ai propri utenti. Quindi se un sito è veloce otterrà un piccolo bonus nel posizionamneto rispetto ad un sito più lento.

A prescindere dal fatto che la velocità diventerà dunque un fattore SEO ogni webmaster che ha a cuore i propri utenti dovrebbe sempre stare attento anche alla velocità e alla pesantezza delle pagine web del proprio sito.

Google stesso cerca di venire incontro ai webmaster fornendo tools e consigli per aumentare la velocità che possono aiutare a raggiungere ottimi risultati.
Potete trovare questi strumenti al seguente indirizzo:
http://code.google.com/speed/

Va però considerato che anche se la velocità di un sito farà parte dei fattori che determineranno la sua qualità, certamente l’autorevolezza e la qualità dei contenuti saranno ancora gli aspetti principali su cui verrà stabilito il valore di un sito.
E’ sempre lo stesso Matt Cutts a sottolineare (nel filmato sottostante) questo concetto, ricordando anche che i fattori utilizzati per determinare il posizionamento sono più di 200.

Dunque attenzione d’ora in poi anche alla leggerezza e alla velocità, ma ricordiamoci che alla fine ciò che conta è appunto l’attenzione alla “user experience” degli utenti. Tutto ciò che può migliorarla non può che essere una buona mossa per essere meglio considerati dagli utenti e da Google.

Esistono diversi strumenti e tecniche che i webmaster possono utilizzare per migliorare i tempi di download dei propri contenuti e mi propongo di inserire a breve alcuni articoli (indicizzati in questa pagina) dedicati proprio a queste tecniche, a partire dalla compressione delle immagini, la compressione gzip dei contenuti, la staticizzazione dei contenuti, la compressione degli script e dei css e altro ancora.

Restate sintonizzati!

Articoli correlati: