Bottone Google Plus e rinvio analisi Javascript

10 nov

Posted by: Andrea Lanfranchi in: Internet, Seo

Dopo aver corretto il codice html del mio blog per farlo risultare valido alle verifiche w3c, mi sono messo ad analizzare un altro problema che nasce da quella tecnica: le performance di caricamento della pagina. Google è molto attenta alle performance offerte dai siti che indicizza e mette a disposizione diversi strumenti per ottimizzare l’output di ogni pagina affinchè risulti essere il più rapido possibile da visualizzare e, quindi, da fruire per i vostri visitatori. Non è da sottovalutare un altro fatto: quanto più il sito sarà rapido, tanto più alto sarà il numero di pagine che Googlebot (il crawler che vi indicizza) riuscirà ad ottenere in pasto nel tempo che BigG dedica alla scansione.

Tra i vari suggerimenti offerti dallo strumento di analisi PageSpeed risulta critica l’azione di Rimandare l’analisi del codice Javascript: in pratica si tratta di rinviare tutta l’esecuzione del codice javascript non necessario al rendering della pagina a dopo che il documento è stato caricato e quindi a dopo che i contenuti siano visibili.

Analizzando ora quello che avevo illustrato nell’articolo su come convalidare il bottone GooglePlus, vediamo che durante il caricamento della pagina vengono eseguite le istruzioni di rendering (in java) dei bottoni. Infatti ad ogni articolo emesso dallo script index.php genero il codice che riporto di seguito:

<div id="plusone-div<?php the_ID() ?>" class="plusone"></div>
<script type="text/javascript">
      gapi.plusone.render('plusone-div<?php the_ID() ?>',{"size": "medium", "count": "true", "href": "<?php the_permalink() ?>"});
</script>

Questa impostazione è sconsigliata perchè interrompe il normale rendering della pagina e impone l’esecuzione del codice javascript per poi riprendere di nuovo ad elaborare la restante parte del codice html. Come fare allora per rinviare a dopo il caricamento del documento il rendering dei bottoni Google Plus. E’ piuttosto semplice: emettiamo per ogni articolo un normale <div> formattato come il precedente ma questa volta aggiungiamo all’attributo title il valore dell’url di riferimento a cui agganciare il bottone stesso.

1	<div id="plusone-div<?php the_ID() ?>" class="plusone" title="<?php the_permalink() ?>"></div>

Dobbiamo ora inserire nel file header.php (lo script che genera l’intestazione di ogni pagina) un nuovo script javascript all’interno della sezione <head>. Ecco il codice:

<script type="text/javascript">
function renderPlusOnes() {
var plusOnes = document.getElementsByClassName('plusone');
for (var i=0, plusOne; plusOne = plusOnes[i++];) {
if (plusOne.title) {
  gapi.plusone.render(plusOne.id,{"size": "medium", "count": "true", "href": plusOne.title});
  }
}
}
}
</script>

Questa funzione ricerca tutti i div di classe plusone all’interno del documento e per ognuno di essi invoca la funzione di Google che esegue il render del bottone al loro interno. Noterete che l’attributo title viene utilizzato come segnaposto per l’url di destinazione. Ora non resta che modificare il tag <body> per fargli eseguire la funzione al caricamento.

1	<body onload="javascript:renderPlusOnes(); return true;">

Altri tre punti guadagnati nell’indice di performance di Google (ora 88/100) e tutto come sempre nel rispetto della convalida W3c.

0 Commenti

Bloccare il link delle immagini da altri siti con Apache

07 nov

Posted by: Andrea Lanfranchi in: Internet, Mondo IT

Una delle pratiche più fastidiose messe in campo da produttori di contenuti, siano essi blogger o editor di siti più complessi, è quella dell’ Hot-linking: ovvero inserire nelle loro pagine il link diretto alle immagini ospitate dal sito, e quindi dal server, di altri. Generalmente questa tecnica deriva da dei banali “copia e incolla” dei contenuti per metterli da qualche altra parte: già questo è scorretto … ma pazienza. Quello che da fastidio invece è il fatto che ogni volta che il contenuto clonato o copiato viene visualizzato da un browser, le immagini vengono invece recuperate dal sito, e quindi dal server, originario il quale è come se fungesse da semplice cartella condivisa per i file: non solo quindi vi hanno fregato il contenuto ma dovreste pure regalare “banda” a chi non si è nemmeno preso la briga di scaricare le immagini e di linkarle in modo corretto.

Se il vostro sito è ospitato da un web server Apache è possibile bloccare questo comportamento scorretto utilizzando un file .htaccess oppure, meglio, direttamente il file di configurazione del sito letto da Apache. In pratica si tratta di istruire Apache a bloccare l’accesso a tutte le immagini ospitate nel sito di cui venga fatta richiesta senza che sia indicato come Referer (ovvero come sito di origine) il sito origine stesso.

Mi spiego meglio : ogni volta che un browser legge una pagina html, prima legge il contenuto del codice html stesso e poi inizia a recuperare tutti gli oggetti linkati dal codice stesso come ad esempio fogli di stile (CSS), script in vari linguaggi ed anche, ovviamente le immagini. E quando il browser fa richiesta al server di una determinata immagine indica anche quale sia la pagina (e quindi l’URL) sul quale sta lavorando o dalla quale proviene: questa indicazione si chiama “Referer”. Quindi per impostare il blocco basta che il Referer sia diverso dall’URL del vostro sito per impedire la visualizzazione delle immagini.

Per iniziare è necessario accertarsi che sul server che ospita il vostro sito sia installato e disponibile il modulo setenvif : se avete dei dubbi chiedere al supporto tecnico del vostro servizio di hosting. A questo punto potete inserire nel file di definizione del vostro sito all’interno di Apache la seguente direttiva:

<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
SetEnvIfNoCase Referer "^http://www.anlan.com/" locally_linked=1
SetEnvIfNoCase Referer "^http://www.anlan.com$" locally_linked=1
SetEnvIfNoCase Referer "^http://anlan.com/" locally_linked=1
SetEnvIfNoCase Referer "^http://anlan.com$" locally_linked=1
SetEnvIfNoCase Referer "^$" locally_linked=1
Order Allow,Deny
Allow from env=locally_linked
</FilesMatch>

Ovviamente questo esempio riporta l’utilizzo del mio nome a dominio. Per il vostro dominio dovrete sostituire il vostro nome con e senza www.

Cosa dice effettivamente questa direttiva ? Per tutti i file che hanno una estensione di tipo immagine (e anche css) se il valore Referer passato dal browser non è un url del sito, allora nega la visualizzazione.

Semplice no ?

Attenzione ! Questa impostazione non impedisce in nessun modo che vi copino le immagini (e anche i contenuti) per incollarli da qualche altra parte, ma almeno non farete da prestatore di banda per utenti a sbafo !

0 Commenti

Copia file più veloce con Robocopy

25 ott

Posted by: Andrea Lanfranchi in: Mondo IT

Una delle lamentele più frequenti che raccolgo tra gli utenti di Windows 7 è la notevole lentezza del processo di copia file via rete. Esistono degli accorgimenti per ovviare al problema ma nessuno di questi vi darà la velocità che potete ottenere utilizzando lo strumento da riga di comando Robocopy.

Tuttavia anche Robocopy può essere ottimizzato. Durante le lunghe procedure di sincronizzazione/copia di migliaia di file, l’elaborazione dello scorrrimento nella finestra della console può risultare particolarmente gravoso, specialmente quando (come faccio io) la console è configurata per l’utilizzo di caratteri TrueType e visualizza molte righe e colonne. Quindi come si ottimizza ? Semplice … durante l’operazione di copia/sincronizzazione minimizzate nella traybar la finestra della console.

Non ci credete ? Fate questa prova: aprite una console di comando e configuratela per la visualizzazione diciamo di 110 colonne per 60 righe con carattere Consolas 12; successivamente, da questo prompt, lanciate la sincronizzazione di una directory con moltissimi file verso un’unità di rete condivisa … e guardate le voci che scorrono memorizzandone la velocità. Ora provate, mentre Robocopy sta ancora lavorando, ad aprire una finestra di un’altra applicazione (che so … Notepad) e dimensionarla in modo che nasconda quasi tutta la finestra della console tranne le prime 5 righe … visto come cambia la velocità ? Meno redraw deve fare la scheda video … più veloce si va.

0 Commenti

Voci Precedenti

Categorie

Internet (23)
Mio Padre (6)
Mondo IT (142)
Programmazione (12)
Senza categoria (20)
Seo (3)

Anlan.com

Bottone Google Plus e rinvio analisi Javascript

Bloccare il link delle immagini da altri siti con Apache

Copia file più veloce con Robocopy

Categorie

Archivi