Ottimizzazione SEO tramite il miglioramento delle prestazioni del vostro Sito Web.

E adesso vi parliamo delle’ottimizzazione SEO , ma da un altro lato, ossia quello delle prestazioni di un sito web,  perchè come dice Google se il tuo sito web non è veloce, allora i tuoi client…ossia utenti non sono invogliati a rimanerci o ritornarci, pensiate che questo discorso non si regga in piedi? Tranquilli lo pensiamo anche noi, ma senza volere indagare l’ovvio, una cosa è certa google indicizza e quindi in un modo o in un altro se volete avere un sito ben indicizzato dovete andare dietro le logiche di SEO che vi piacciono o meno e da qualche tempo a questa fa nei vari algoritmi per l’indicizzazione esiste anche questo parametro. Ossia  quanto è veloce il tuo sito? E’ sufficientemente veloce  rispetto agli altri siti? Se andate nel vostro pannello per webmaster di Google , vi troverete fra le varie voci anche una che si chiama Prestazioni del sito, vi consiglio di darci un ‘occhiata, oppure potete andare in uno dei tantissimi tool on line come  Page Speed

http://code.google.com/speed

Che indovinate un po’ è sempre google…in ogni modo  sono veramente molti i parametri, il primo ad essere stato introdotto è stato Yslow che consideriamo sempre il migliore in circolazione, anche se quello di google è molto bene realizzato

http://www.developer.yahoo.com/yslow

credo che Page Speed , ma anche di Yslow ci sono anche dei pluggins di firefox che vi permettono di controllare la velocità della vostra pagina direttamente dal vostro browser

https://addons.mozilla.org/it/firefox/addon/yslow/

Sinceramente non ce la sentiamo di consigliarveli anche se sono molto pratici, in quanto questi tool hanno una duplice funzione, che è in primis dirvi se il vostro sito è piu’ o meno veloce…ma ha anche la funzione di darvi i consigli per velocizzare il vostro sito web, ma il migliore di tutti in assoluto si chiama GTMetrix per il semplice motivo che unisce Yslow a Page Speed e vi da dei risultati combinati lo potete trovare qui

http://gtmetrix.com

Ora faremo un discorso a carattere a carattere generale, ma in ogni modo quando iniziate a migliorare le prestazione di un vostro sito iniziate sempre da gtmetrix per poi finire con page speed, come linea a carattere generale.

I CSS per ottimizzare le prestazione di un Sito Web

Il primo passo per ottimizzare le prestazioni di un sito web non puo’ certo transigere dall’utilizzo dei CSS che cosa sono i CSS, sono ovviamente dei fogli di stile diciamo, ossia quei particolari tag, selettori etc. etc. (non è argomento di questa guida) il cui utilizzo attribuisce alla vostra pagina un aspetto piu’ gradevole, il requisito che si utilizza in questi casi è il riutilizzo, ossia se tu hai mettiamo un numero elevato di pagine con lo stesso template, allora utilizza sempre gli stessi CSS da un foglio esterno invece che ricaricare sempre gli stessi all’interno della pagina. Questo che vi abbiamo appena detto è veramente l’ABC, insomma anche prima che l’ottimizzazione del vostro sito web diventasse un parametro SEO era basilare utilizzare questa tecnica. Ma l’ottimizzazione dei parametri CSS non è solamente questa , ovviamente si potrebbe comprimere i selettori, comprimere gli spazi, rimuovere gli elementi non piu’ usati, rimuovere quelli non piu’ utilizzati nella vostra pagina ma che avevate usato in fase di progettazione, etc. etc. Insomma un’operazione che sarebbe lunga e dispendiosa e sinceramente molto poco simpatica e allora anche qui è conveniente ricorrere ai tool , dopo andare su GTMetrix e se c’e’ rimasto qualcosa da fare farlo manualmente…questo almeno è il nostro consiglio. Fra i tool , al momento in cui stiamo scrivendo gratuiti , vi consigliamo

• CSS Optimizer inserite il vostro foglio di STILE e lui ve ne restituisce una forma compressa lo trovate qui http://www.cssoptimiser.com
• Clean CSS è simile al sito sopra, solo che vi offre vari gradi di compressione da provare su http://www.cleancss.com

Ottimizzazione SEO delle immagini

Quando andiamo a parlare di immagini e di ottimizzazione ci riferiamo in primis al lato html , già perchè secondo i nuovi dettami si parte proprio da qui quindi in primis quando dovete inserire un’inmmagine nel tag img usate sempre l’URL relativo e mai quello assoluto quando avete a che fare con immagini che sono all’interno del vostro dominio, ossia

img src=”http://www.miosito.it/img.jpg NON VA BENE

img src=”img.jpg” E’ CORRETTA

andiamo avanti, anche se fino ad adesso vi abbiamo sempre consigliato di ridurre il codice con o senza i vari tool qui andiamo invece nella direzione diametralmente opposta, ossia aumentare , tante volte si trovano delle immagini a cui è già stato fatto un resize delle dimensioni con la grafica, questo è sicuramente utile, ma non dimenticate mai di mettere nelle immagini l’altezza e la larghezza ossi width=”500″ height=”500″ per esempio non dovranno mai mancare in quanto in loro assenza dovrà essere l’html ad effettuare questo calcolo e quindi se avete molte immagini senza larghezza e altezza alla fine il tempo di caricamento della pagina si allungherà a dismisura. Un’altra cosa da tenere a mente è il dimensionamento intrinseco dell’immagine facciamo un esempio chiaro che ci spieghiamo di piu’ di mille parole. Se avete un immagine fisica jpg alta e larga 20 potete mettere nel tag width=”25″ e height=”25″, ma non width=”20005″ e height=”2000005″ per esempio altrimenti l’immagine risulterà eccessivamente sgranata e darà al vostro utente un’idea di non professionalità , insomma dovete raggiungere il giusto compromesso, mentre non è corretta l’impressione inversa ossia se avete un’immagine di dimensione fisica 2500 e 2500 dopo nel tag avete width=”25″ e height=”25″, allora vuol dire che non avete ottimizzato e nemmeno questo va bene.

All’interno di alt, ossia è un attributo dove dovete immettere una piccola descrizione dell’immagine che avete caricato, non pensiate che i motori di ricerca la tengano in considerazione ma fa comunque professionale, per l’indicizzazione delle immagini il motore di ricerca tiene in considerazione principalmente due cose la prima è la vostra affidabilità che la dovrete dimostrare nel tempo , la seconda il testo vicino all’immagine, che è quello che poi effettivamente determina l’inserimento o meno nel motore di ricerca. Passiamo adesso al formato delle immagini

• GIF ha una gamma massima di 256 colori, quindi è utile per animazioni di piccole dimensioni, bottoni o altri elementi grafici del sito web, non è adatto per caricare le immagini di grandi dimensioni di larghezza e altezza
• Jpeg tipicamente è il formato piu’ utilizzato per caricare le immagini fotografiche, necessita spesso di essere ottimizzato vedremo fra poco come e ha una perdita di informazioni che tradotto vuol dire che il livello di nitidezza del formato reale è maggiore di quello salvato in jpeg
• PNG non ha perdita di informazione e tipicamente è piu’ pesante in termini di Kb rispetto al Jpeg

Una volta che avete scelto le immagini vi consigliamo di ottimizzarle o con il programma di grafica uno ottimo che vi fa questa conversione in massa di una cartella e open source è XnView , in ogni modo anche on line ne potete trovare quanti ne volete di questa tipologia ve ne consigliamo due

http://www.smushit.com/ysmush.it è un servizio ottimo di Yahoo completamente gratuito.
http://tools.dynamicdrive.com/imageoptimizer/ riduce le dimensioni di gif , png e jpg

Una volta che avrete ottimizzato questo processo  avrete delle immagini ottimizzate come dimensione e come linguaggio html , di cui vi ringrazieranno google, i vostri utenti, ma anche il vostro servizio di hosting, in quanto gli state facendo consumare meno banda, bene tutto finito allora? Purtroppo non è cosi’ adesso vi potrete trovare davanti ad un dilemma che vi andremo a spiegare alla fine del quale vi chiederete , ma allora  tutto questo lavoro che abbiamo fatto a cosa ci è servito?  Ed in effetti…Il problema un po’ come tutto il mondo , il mondo del web è fatto di furbi, quando non dei veri e propri furbissimi, ossia  delle persone che guadagnano sul vostro lavoro, linkando semplicemente nel loro sito una vostra immagine, capirete che quanto questa operazione è svolta da molti, si finisce che la banda , spesso condivisa , del vostro sito web inizia a ridursi al lumicino…tempo fa addirittura questa era una causa di chiusura dei siti anche a pagamento, in quanto gli amministratori hosting ti dicevano , te hai approfittato della banda che ti ho concesso e ti chiudo l’account…voi in questo caso potresti sempre denunciarli, ma siccome siamo in Italia se vi va bene otterrete giustizia fra un dieci anni…allora come risolvere capre e cavoli? Semplicemente con una tecnica chiamata Hot-linking che impedisce che le vostre immagini vengano caricate su altri siti, ma questo purtroppo ne inibisce l’utilizzo anche ai motori di ricerca per  indicizzarle, insomma capirete che il problema non è di semplice soluzione. Vi mostro anche due possibili modi per utilizzare in pratica questa tecnica. Cominciamo dal PHP

 1 <?php 

2 $dir='secret-directory-name-here/'; 

3 if ((!$file=realpath($dir.$_GET['file'])) 

4 || strpos($file,realpath($dir))!==0 || substr($file,-4)=='.php'){ 

5 header('HTTP/1.0 404 Not Found'); 

6 exit(); 

7 } 

8 $ref=$_SERVER['HTTP_REFERER']; 

9 if (strpos($ref,'http://www.example.com/')===0 || strpos($ref,'http')!==0){ 

10 $mime=array( 

11 'jpg'=>'image/jpeg', 

12 'png'=>'image/png', 

13 'mid'=>'audio/x-midi', 

14 'wav'=>'audio/x-wav' 

15 ); 

16 $stat=stat($file); 

17 header('Content-Type: '.$mime[substr($file,-3)]); 

18 header('Content-Length: '.$stat[7]); 

19 header('Last-Modified: '.gmdate('D, d M Y H:i:s',$stat[9]).' GMT'); 

20 readfile($file); 

21 exit(); 

22 } 

23 header('Pragma: no-cache'); 

24 header('Cache-Control: no-cache, no-store, must-revalidate'); 

25 include($file.'.php'); 

26 ?>

Non vi spiego tutte le righe di codice l’importante che sappiate che questo codice blocca tutti jpeg, png e gif dentro la cartella image e lo stesso fa per quello della la cartella audio

oppure se volete utilizzare .htaccess fate nel seguente modo

RewriteEngine on RewriteCond %{HTTP_REFERER}!^$ RewriteCond %{HTTP_REFERER}!^http://(www\.)?miosito.com/.*$ [NC] RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ - [F]

WordPress e l’ottimizzazione delle prestazioni

Questo ovviamente nel caso che dobbiate realizzare una pagina con le vostre forze, se invece avete un CMS  per esempio WordPress beh allora avete tutta una serie di plugins che vi faciliteranno e non poco il compito. Innanzitutto possiamo decidere quale plugins scegliere, perchè sappiate che non esiste nulla al mondo per cui un buon programmatore non abbia studiato un plugins ad hoc alle vostre esigenze. In questo caso i plugins migliori che vi consigliamo sono W3 Total Cache o WP Super Cache, vi consigliamo il secondo  in quanto piu’ semplice da usare, il primo è un po’ troppo per smanettoni, almeno nell’interfaccia, ma cosa fa una cache, in pratica crea una pagina html della pagina dinamica che richiedete di visitare  e vi mostra questa con un notevole risparmio di energia, ma questo plugins fa molto di piu’. Purtroppo questo plugins è studiato in modo da venirvi incontro ma rimane sempre un argomento complicato quindi potrebbe non funzionarvi in modo corretto , a causa di altri plugins, a causa delle impostazioni del server Apache della vostra soluzione hosting etc. etc. , facciamo cosi’ se avete dei dubbi scrivetecelo qui sotto e cerchiamo di darvi una mano noi. In ogni caso  ipotizziamo che non avete problemi, selezionate in Easy (Facile se lo avete in italiano il blog) e in Advanced le operazioni consigliate , non vi fate tanti problemi…Vi consigliamo solamente una cosa, ogni volta che avete cambiato un’impostazione di questo plugins andate in Easy e cancellate la cache e di nuovo sempre su Easy cliccate su Test Casche e controllate che il sito funzioni perfettamente, andate ora su CDN e abilitate la compressione dei file Javascript , nuovamente ricancellate la cache e ri testate per vedere se tutto funziona correttamente.  Altri plugins molto utili che mette  a disposizione sono

• Wp Minify che riduce ancora di piu’ gli scipt e da definizione loro Minify WP afferra JS / CSS i file nella tua pagina generata WordPress e passa tale elenco al motore Minify. Il motore Minify restituisce un consolidato, minified, e lo script compressi o stile per WP minify fare riferimento nell’intestazione WordPress.
• Wp Smush.it Ogni immagine si aggiunge a una pagina o un post viene automaticamente eseguito attraverso Smush.it dietro le quinte. Non devi fare nulla di diverso, basta fare lo smush operazione che potrebbe richiedere del tempo a seconda di quanti file immagine avete

Questi che vi abbiamo elencato sono solamente tre dei pluggins di wordpress che vanno per la maggiore nell’ottimizzazione del vostro blog, ce ne sarebbero molti altri, ma troppi pluggins possono andare in conflitto quindi meglio non abbondare in questi casi. Ultimo argomento che tocchiamo e Sprite o CSprite come viene scritto ultimamente, ossia specialmente in wordpress capita che ci siano immagini che vengano caricate in tutte le pagine con questa tecnica mettete tutte queste immagini che si rincorrono nelle varie pagine in una sola che verrà caricata solamente una volta e dopo tramite i selettori CSS potrete richiamare un’immagine alla volta , purtroppo per wordpress l’unico plugins che abbiamo trovano non a pagamento è CSprite che pero’ è un po’ datato , anche se ben realizzato. Altrimenti potete ricorrere a dei tool on line, ma dovrete eseguire l’operazione manualmente, noi ve li segnaliamo un paio, tanto piu’ o meno fanno tutti la stessa funzione, ovviamente il primo è il migliore, ma siccome il server è spesso sovraccarico non sempre funziona.

http://spritegen.website-performance.org/

http://drupal.org/project/sprites

http://css-sprit.es/

Come sempre sbizzarritevi…Molto utili sono anche plugins come db manage o wp optimize che vi permettono di ottimizzare le tabelle del vostro database e quindi la risposta del vostro data base alle query

E ricordatevi di controllare sempre su GTMetrix.com se avete effettivamente fatto delle migliorie oppure no.

La Semantica

Se  prendete il codice sorgente di questa pagina e andate all’inizio della articolo troverete questa formattazione dove h indica il titolo e 1 il livello di importanza

<h1>Ottimizzazione SEO tramite il miglioramento delle prestazioni del vostro Sito Web.</h1>

se scorrete fino ad arrivare a la Semantica troverete

<h2>La Semantica</h2>

Ossia il titolo semantica  ha un importanza minore rispetto al titolo h1. Questa suddivisione nel caso si voglia scrivere una guida come nel nostro caso è abbastanza banale, ma non lo è negli altri casi, quindi è molto bene indicare le corrette formattazioni con gli h al fine di una buona indicizzazione delle vostre pagine.