Come oramai noto da un bel po’ di tempo è un fattore del posizionamento anche la velocità di caricamento delle pagine web.

Si è discusso molto in merito e questo “Page Speed” è diventato un vero tormentone anche in virtù del fatto che all’interno del Webmaster Tools di google è comparsa una voce sperimentale dedicata proprio alla velocità di caricamento delle pagine del proprio sito con una modalità un po’ oscura e incerta.

Non c’è infatti un modo assoluto per calcolare la reale velocità di un sito e sulla base di quali parametri si possa ottenere il messaggio “il tuo sito è più veloce del 92% dei siti”, ma è sicuramente da tenere presente che la velocità è un fattore SEO a tutti gli effetti ed è anche un fattore determinante quando si parla di usabilità, esperienza utente e conversioni.

La percezione che si può ottenere dallo strumento sperimentale è che questa velocità venga stimata tramite google toolbar o forse Google Chrome o altri servizi google che il navigatore usa e di certo in questo caso il tempo di caricamento può essere influenzato dallo stato della connessione del navigatore e da altri mille fattori che non possono determinare in assoluto la velocità di un sito web.

A parte tutto questo quello che conta è che un sito va ottimizzato al massimo senza troppo pensare ai secondi di caricamento, ma semplicemente tenendo a mente che dobbiamo pensare a noi stessi ed evitare confronti perché confronti non se ne possono fare. Un sito web è un insieme di cose quindi bisogna unire uno ad uno i vari fattori e combinarli insieme per ottenere il massimo relativo al nostro sito e non il massimo assoluto (non possiamo competere con una pagina bianca con solo testo, ma non è detto che quella pagina sia più usabile, più gradevole e con più beneficio emotivo … spero sia chiaro il concetto.

Dopo queste premesse passiamo alla parte un po’ più tecnica del post…vi voglio parlare di uno strumento molto utile per migliorare le vostre pagine senza troppo sforzo e indipendentemente dal fatto che usiate un CMS oppure un sito realizzato da voi.

L’applicazione è “Minify” ( http://code.google.com/p/minify/ ). Minify è un applicazione sviluppata in PHP5 che aiuta nell’adempimento di molte delle regole che permettono di migliorare le performance di una pagina web.

Il suo utilizzo è molto semplice e una volta scaricata l’applicazione basta semplicemente settare secondo le proprie esigienze il file di configurazione e seguire le istruzioni molto dettagliate presenti all’interno del file e all’interno della pagina web dell’applicazione.

In questa immagine potete vedere il contenuto del file .zip che potete scaricare dal sito.

Quello che ci interessa è la cartella min che ha come contenuto i seguenti file e cartelle

Nella stragrande maggioranza dei casi per iniziare ad utilizzare il builder e l’applicazione non è neccessaria alcuna modifica al file config.php, ma se avete qualche problema allora potete mettervi mano e leggere i vari suggerimenti presenti all’interno del file.

Giunti a questo punto non vi resta che uppare la cartella min sul vostro spazio web e visitare la url miosito.ext/min/ e magicamente vi apparirà un semplice strumento con questo aspetto

Grazie a questa banale interfaccia potete combinare i vostri file CSS e JS distintamente specificando le rispettive locazioni e cliccando Update otterrete il codice da inserire nelle vostre pagine in sostituzione dei vostri CSS o JS combinati.

Lo strumento è davvero intuitivo e segnala in modo immediato anche eventuali errori, come ad esempio nell’immagine il percorso dei file che non esistono.

Dopo aver preso dimestichezza con lo strumento diventerà molto più semplice e veloce gestire i file JS e CSS del vostro sito in base alle varie pagine visto che il builder è solo un’applicazione, ma non è assolutamente necessario visto che potete anche utilizzare il file groupsConfig.php per gestire i gruppi di file di cui avete bisogno all’interno di ogni sezione del vostro sito (immgine 4), oppure specificare il codice per le vostre pagine a mano seguendo la seguente regola: /min/f=vostroprimofile.css, vostrosecondofile.css,vostroterzofile.css etc etc.

In concreto vi mostro un esempio pratico della situazione che dovrete fronteggiare.

Pagina originale

<link rel="stylesheet" href="css/stile1.css" type="text/css" />
<link rel="stylesheet" href="css/stile2.css" type="text/css" />
<link rel="stylesheet" href="css/stile3.css" type="text/css" />
<link rel="stylesheet" href="css/stile4.css" type="text/css" />
<script type="text/javascript" src="js/js1.css"></script>
<script type="text/javascript" src="js/js2.css"></script>
<script type="text/javascript" src="js/js3.css"></script>

Pagina con css e js minificati e combinati al posto di quelli originali

<link type="text/css" rel="stylesheet" href="/min/b=css&amp;f=stile1.css,stile2.css,stile3.css,stile4.css" />
<script type="text/javascript" src="/min/b=js&amp;f=js1.js,js2.js,js3.js"></script>

Pagina con css e js minificati e combinati usando i gruppi

<link type="text/css" rel="stylesheet" href="/min/g=nomeGruppoCss" />
<script type="text/javascript" src="/min/g=nomeGruppoJs"></script>

ipotizzando che nel file groupsConfig.php ci sia:

'nomeGruppoJs' => array('//js/file1.js', '//js/file2.js', '//js/file3.js'),
'nomeGruppoCss' => array('//css/stile1.css', '//css/stile2.css','//css/stile3.css', '//css/stile4.css'),

Quali sono i vantaggi ?

Ora che abbiamo perso questa oretta abbiamo ottenuto molteplici vantaggi:

1. Possiamo continuare a tenere distinti vari file CSS e JS senza combinarli a mano e dunque mantenendo l’organizzazione dei nostri file chiara.
2. I nostri file vengono minificati e dunque risparmiamo una notevole quantità di banda e riduciamo il peso della pagina.
3. I file vengono compressi dall’applicazione quindi salviamo ulteriore banda e secondi.
4. Sui file viene settata una scadenza e vengono “cachati” quindi riusciamo a velocizzare le visite successive ( di default nel file config.php abbiamo questo valore $min_serveOptions['maxAge'] = 1800; che ovviamente può essere modificato in base alle vostre preferenze).
5. Grazie a questa applicazione riusciamo a guadagnare in un colpo solo moltissimi punti dai tool Google Page Speed e YSlow andando ad adempiere ad un alto numero di regole.

Gli svantaggi o eventuali problemi

Più che svantaggi ci potrebbero essere problemi con alcune combinazioni di file sopratutto Javascript quindi se combinando molti file notate che qualcosa non va più nel vostro sito cercate di identificare il file che una volta combinato va in conflitto con gli altri o risulta corrotto e continuate ad utilizzarlo singolarmente.

Controllate i requisiti richiesti dall’applicazione per funzionare.

Autore dell’articolo: Andrea Pernici lavora come freelance ed è project manager di GT Idea. Laureato in informatica e giocatore di pallamano, puoi seguirlo sul suo blog www.andreapernici.com

Articolo di: Emanuele Calì per EmaWebDesign :: Web Programming / Web Design

Migliorare le performance di una pagina web con Google Minify

Dopo una breve pausa torna la rubrica con il “meglio della settimana” dalla blogosfera italiana. Ecco i post più interessanti di questa settimana:

01) Mappa dei venture capital italiani che investono in Internet

02) Facebook e le ultime novità per Marketer e Sviluppatori

03) Integrare Facebook nel proprio sito Web

04) Google Realtime

05) Facebook: come intercettare i click sul Like Button

06) JavaScript e il tag noscript

Articolo di: Emanuele Calì per EmaWebDesign :: Web Programming / Web Design

I migliori post della settimana #80

- si carica l’editor nello spazio web via FTP
- si includono i files necessari nella pagina dove lo si vuole utilizzare
- si crea un’istanza con una sola riga di codice

window.onload = function() {
CKEDITOR.replace( ‘nome istanza’ , {
toolbar : ‘Basic’
});

Una delle cose fondamentali, nell’utilizzo di CKeditor in una web application, è la possibilità di leggere e scrivere il contenuto dell’editor. Per queste e per tante altre opzioni, CKeditor, mette a disposizione delle API javascript molto comode e facili da utilizzare. Vediamo ora come poter leggere e scrivere il contenuto dell’editor grazie ai metodi getData e setData:

Per leggere il contenuto dell’editor

var text = CKEDITOR.instances["nome istanza"].getData();

Per scrivere il contenuto nell’editor

CKEDITOR.instances["nome istanza"].setData(“testo di prova”);

E tu quale editor wysiwyg utilizzi nei tuoi web projects?

Articolo di: Emanuele Calì per EmaWebDesign :: Web Programming / Web Design

CKeditor API: leggere e scrivere il contenuto dell’editor

I motivi sono due:

1) Per permettere ai lettori di raggiungere velocemente i migliori contenuti del blog e di averli sempre disponibili in una sezione dedicata facilmente raggiungibile.

2) Per fidelizzare i nuovi lettori, per mostrare loro subito “il meglio” affinchè si convincano da subito che vale la pena seguire il blog.

Tu cosa ne pensi? Credi sia utile aggiungere al blog una sezione “best of”?

A proposito, visto che dovrò selezionare i migliori articoli, mi vuoi indicare quelli che ti sono piaciuti particolarmente? Non si vince nulla ovviamente

Puoi suggerirmi quelli che reputi i migliori articoli di EmaWebDesign tramite la pagina dei contatti.

Articolo di: Emanuele Calì per EmaWebDesign :: Web Programming / Web Design

Blogging: una sezione Best Of può essere utile?

Di seguito i post più interessanti di questa settimana:

01) Che impatto ha l’ubicazione del server sul posizionamento nei risultati di Google?

02) Zen Coding, per scrivere HTML in maniera ultra-rapida

03) Google e il Targeting per Posizionamento?

04) Nuovo look per gli annunci AdSense

05) Google migliora la rubrica dei contatti di Gmail

Articolo di: Emanuele Calì per EmaWebDesign :: Web Programming / Web Design

I migliori post della settimana #79

Gli sviluppatori web, che realizzano applicazioni per il mobile, hanno finalmente trovato un alleato con cui sviluppare applicazioni per iPhone: jQTouch. Non sto parlando di Objective C/Cocoa ma di un potente plugin per jQuery che permette a chi ha familiarità con HTML/CSS/JavaScript di realizzare applicazioni che si presentano come “native” dell’iPhone, quindi, con grafica, animazioni e funzionalità identiche a quelle delle applicazioni native iPhone.

Per “ricreare” grafica e animazioni tipiche delle applicazioni native iPhone con HTML/CSS/JS si passerebbe obbligatoriamente per un duro lavoro di scrittura del codice mentre, con l’utilizzo di jQTouch, con poche righe di codice e un pò di Ajax si possono realizzare applicazioni identiche in tutto e per tutto a quelle native. Un notevole risparmio di tempo durante la scrittura dell’applicazione ed un vantaggio notevole: in caso di problemi con AppStore o in caso di lunghe attese per la pubblicazione dell’applicazione (o di un suo aggiornamento), è possibile predisporre l’applicazione via web trattandosi infatti di una web application!

Inoltre, realizzare un’applicazione iPhone basata su una web app, permette lo sviluppo della stessa tramite gli ide e software preferiti, non bisogna obbligatoriamente utilizzare MAC e si può utilizzare l’applicazione da qualunque dispositivo dotato di browser web.

Si, ma la pubblicazione dell’applicazione su AppStore?

Esistono strumenti di sviluppo come PhoneGap che convertono applicazioni realizzate con HTML/CSS/JS in applicazioni pronte per essere inviate ad AppStore. Non ho mai utilizzato tale strumento ma, con una veloce googlata, si può vedere che in rete se ne parla molto bene.

jQTouch è opera di David Kaneda. Sotto potete visualizzare un video che mostra il plugin e questo è il canale ufficiale Vimeo di David: davidkaneda.

Se ti interessa jQTouch e lo sviluppo di applicazioni iPhone tramite HTML/CSS/JS iscriviti al feed RSS perchè in futuro parleremo ancora di questi argomenti

Articolo di: Emanuele Calì per EmaWebDesign :: Web Programming / Web Design

jQTouch: applicazioni per iPhone con un plugin jQuery

Di seguito i post più interessanti di questa settimana:

01) Fare impresa in Italia

02) Facebook Questions rilancia la sfida ai motori di ricerca

03) Css compressi

04) Come deve essere il title?

05) Flattr, micropagamenti sociali per i tuoi contenuti

Articolo di: Emanuele Calì per EmaWebDesign :: Web Programming / Web Design

I migliori post della settimana #78

Qual’è la cosa più importante per un sito web? I contenuti? Certo, ma non dimentichiamo che anche il sito con i migliori contenuti del mondo sarebbe nulla senza un buon traffico. Il traffico, le visite ricevute, sono la cosa più importante insieme alla qualità dei contenuti.

Che tu sia un blogger, che tu abbia un sito aziendale o un e-commerce, inevitabilmente, avrai a che fare con la Web Analytics. La Web Analytics è una metodologia di analisi che permette di analizzare il traffico di un sito grazie a strumenti potenti e, spesso, gratuiti. Il più famoso e utilizzato strumento di Web Analytics gratuito è Google Analytics. Chi ha un sito web ha bisogno di valutarne l’efficacia, di analizzare gli accessi e i comportamenti dei visitatori al fine di correggere, in tempo reale, eventuali errori di comunicazione commessi.

Non sfruttare le possibilità offerte dalla Web Analytics significa non potersi rendere conto della bontà del lavoro svolto, non poter rimediare ad eventuali errori commessi e non poter pianificare strategie per migliorare la comunicazione ed incrementare il ROI. In parole povere, il successo di un sito web, passa inevitabilmente attraverso un quotidiano lavoro di analisi qualitativa degli accessi. La Web Analytics è fondamentale. Soltanto la Web Analytics può fornire risposte a domande come queste:

- Il numero di visitatori cresce/diminuisce?
- Come migliorare l’usabilità del sito?
- Come ottimizzare i contenuti del sito?
- Quali sono le keywords che rendono e/o convertono?
- Quali sono i siti attraverso i quali arrivano i visitatori?

Vediamo ora come iniziare a monitorare gli accessi

Strumenti come Google Analytics si basano sulla tecnica del “page tagging“. Dopo aver aperto un account, e dopo aver aggiunto il sito da monitorare, otterrai poche righe di codice JavaScript che dovrai incollare in tutte le pagine del tuo sito web. Ricorda che il codice va inserito in tutte le pagine del sito al fine di non perdere informazioni preziose poichè, i visitatori, possono raggiungere il tuo sito web dai motori di ricerca “entrando” da qualsiasi pagina, non per forza dalla home page. Una soluzione “tecnica” opportuna è quella di inserire il codice in un file a parte, automaticamente incluso in tutte le pagine del sito. In questo modo inserirai il codice una sola volta e, in caso di modifiche, modificherai una sola volta. Se il tuo sito è composto da molte pagine otterrai un bel risparmio di tempo e fatica

Google Caffeine e velocità di caricamento dei siti

Abbiamo già parlato di Google Caffeine e dell’importanza che ha oggi (molto più di ieri) la velocità di caricamento di un sito web come fattore per un buon posizionamento sui motori di ricerca. Avere un sito “leggero” che si carica velocemente è fondamentale per essere competitivi lato SEO. Il codice JavaScript di Google Analytics che viene incluso nelle pagine del sito, anche se molto leggero, risiede comunque su un server esterno e, tutto quello che risiede su un server esterno, ha tempi di caricamento più lunghi rispetto alle pagine del proprio sito web.

Questo ci convince che è opportuno inserire il codice di tracciamento alla fine delle pagine, subito prima della chiusura del tag body. Posizionando il codice alla fine delle pagine si risolvono eventuali problemi di rallentamento mentre vengono caricati i contenuti del sito. Soltanto quando tutti i contenuti del sito sono stati caricati viene eseguito il codice JavaScript e viene registrato il visitatore.

Sono dell’idea che la Web Analytics sia meglio “lasciarla” ai professionisti del settore, gli unici in grado di comprendere la notevole mole di informazioni restituite dagli strumenti di analisi e misurazione. Ciò non toglie che, con strumenti come Google Analytics, anche il più inesperto avrà modo di monitorare gli accessi al proprio sito e di rendersi subito conto di quello che funziona e quello che non funziona, di dove si è commesso errori e dove si è “visto giusto”. Se hai la possibilità di rivolgerti ad esperti meglio, altrimenti, non rinunciare al fai da te. La Web Analytics è fondamentale (quante volte l’ho detto? ) per il successo del tuo sito web

Articolo di: Emanuele Calì per EmaWebDesign :: Web Programming / Web Design

Web Analytics: come monitorare il proprio sito web

Di seguito i post più interessanti di questa settimana:

01) Come coinvolgere i lettori del tuo blog con Twitter

02) HTML5 accederà a microfoni e videocamere

03) Purtroppo siamo in Italia, confermo e sottoscrivo

04) Come interagite con i vostri clienti?

05) Testo alternativo sulle immagini: è obbligatorio per Flickr?

06) Modifica dei ruoli

07) Spostare la login form di WordPress nel frontend

08) Il “web sociale” che NON voglio

Articolo di: Emanuele Calì per EmaWebDesign :: Web Programming / Web Design

I migliori post della settimana #77

Eterno dilemma

Da quando esistono i blog ci si pone in continuazione la solita domanda: meglio post lunghi o corti?

Diciamo subito che è impossibile dare una risposta certa a questa domanda. Ogni lettore ha la sua preferenza in base a quelle che sono le proprie esigenze e le proprie abitudini. Indubbiamente, il web, è una cosa completamente diversa da un libro di carta (maddai ): il tempo non è mai sufficiente per la lettura mentre, per cercare e “raccogliere” risorse utili e nuove informazioni, impieghiamo tutto il tempo possibile (e anche quello impossibile, almeno è così per me). Online ce ne sono di cose da fare ogni giorno:

- leggere la posta
- lavorare
- socializzare sui social network
- partecipare alle discussioni su forum e social
- ancora lavorare
- monitorare le proprie attività
- leggere di nuovo la posta
- altre attività che in questo momento non mi vengono in mente

In mezzo a queste miriadi di cose da fare dobbiamo trovare il tempo per tenerci aggiornati, quindi, bisogna riuscire a dedicare almeno un paio d’ore al feed reader.

Io ho nel feed reader oltre cento feed di quelli che, personalmente, ritengo il meglio dei blog italiani e non che trattano argomenti come web developing, web design, SEO, web marketing e blogging online. Se li ho reputati “degni di attenzione” non baderò alla tipologia post lungo/post corto; i post saranno indubbiamente di qualità e meriteranno sempre almeno un’occhiata. Ma quello che è altrettanto indubbio è che i post eccessivamente lunghi  li salverò nel social bookmark per leggerli quando poi riuscirò a trovare un pò di tempo libero. Cioè mai

I post in questione saranno, sicuramente, stati scritti con la tecnica del chunking, quindi, anche con una rapida occhiata potrò arrivare al “succo” del discorso. Questo permette di risparmiare tempo potendo selezionare le “parti” del post più interessanti. I post, invece, che si presentano come un interminabile blocco di testo senza uno straccio di spaziatura tra i vari paragrafi, verranno eliminati senza pietà. Ancora oggi, molti, scrivono in questo modo ed è superfluo dire che è un’assurdità bella e buona.

Concludendo, se il contenuto è valido, il blogger in gamba, è la scrittura dell’articolo viene effettuata nel modo giusto con la giusta formattazione, non importa se il post è lungo o corto: ci sarà sempre il modo di leggere quello che merita di essere letto.

Passando dalla parte del blogger, di chi produce il contenuto, posso dire che è ovviamente impossibile prevedere a priori la lunghezza del post. L’obiettivo è sempre e solo quello di produrre un contenuto di qualità, che sia completo ed esaustivo. Certo è che, dopo aver scritto un articolo, lo rileggo N volte in quella che definisco la fase di “controllo” prima della pubblicazione.

In questa fase, oltre a scovare ed eliminare errori e/o imperfezioni, cerco di “scovare” tutte quelle informazioni che possiamo etichettare come superflue al fine di eliminarle per poter mantenere l’articolo il più corto possibile. Se l’articolo prodotto è abbastanza lungo ma di parti “superflue” non ce ne sono, il dilemma è presto risolto: l’articolo va in pubblicazione perchè c’è differenza tra un post lungo e uno corto ma c’è una differenza ancora più grande tra un articolo che dice poco e male ed uno che fornisce informazioni di qualità, complete ed esaustive. Ma non dimentichiamo mai la grande importanza che ha la corretta formattazione del testo

Articolo di: Emanuele Calì per EmaWebDesign :: Web Programming / Web Design

Blogging: meglio post lunghi o corti?