Mettiamo a disposizione di tutti una raccolta dei suggerimenti e i trucchi sull'utilizzo di JQuery, sulla configurazione di Joomla e altri cms disponibili sul mercato, sull'ottimizzazione dei siti web e su altre personalizzazioni e procedure avanzate per applicazioni web che possano essere di interesse comune.

Valutazione attuale: 0 / 5

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
Submit to FacebookSubmit to Google PlusSubmit to TwitterSubmit to LinkedIn

Se state utilizzando Joomla, senza aver mai modificato il file ".htaccess", sicuramente questa è una delle segnalazioni che il Page Speed vi segnalerà. In pratica vi chiede di indicare per tutti i file il tempo di "caching" (tempo di validità). Se non lo avete già fatto dal backend di Joomla dovete abilitare la cache e specificarne il tipo. Questa però si applica solo a file generati dal php, per poter agire sugli altri file: immagini, javascript, css e file statici dobbiamo aggiungere alcune righe di codice alla fine del file ".htaccess".

 

<ifModule mod_headers.c>
# 1 MESE
<filesMatch ".(ico|gif|jpg|jpeg|png|flv|pdf)$">
Header set Cache-Control "max-age=2419200"
</FilesMatch>

# 1 SETTIMANA
<filesMatch ".(js|css|swf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>

# 45 MIN
<filesMatch ".(html|htm|txt)$">
Header set Cache-Control "max-age=2700"
</FilesMatch>
</ifModule>


Ci sono diversi moduli di apache che fanno questa stessa operazione, la scelta su quale utilizzare dipende da quello installato sul vostro server.

Valutazione attuale: 0 / 5

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
Submit to FacebookSubmit to Google PlusSubmit to TwitterSubmit to LinkedIn

Lo stesso discorso va fatto per quanto riguarda la compressione dei file che va abilitata per tutti i file tranne che per le immagini. Il codice che va aggiunto nel file ".htaccess" è:

#Abilitiamo la compressione di tutti i file tranne le immagini
<IfModule headers_module>
<IfModule mod_deflate.c>

# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|rar|zip)$ no-gzip

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary

</IfModule>
</IfModule>

Valutazione attuale: 0 / 5

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
Submit to FacebookSubmit to Google PlusSubmit to TwitterSubmit to LinkedIn

E’ possibile che il vostro template o alcuni plugin includano file javascript di piccole dimensioni.

In questo caso si può procedere in diversi modi:

a) Se il file di piccole dimensioni è 1 e, ad esempio, è incluso nel vostro template, potete rimuovere l’inclusione del javascript ed inserire nel template il contenuto del file.

Esempio:

Potete sostituire

<script type="text/javascript" src="/templates/vostro-template/js/nomeFile.js"></script>

con

<script type="text/javascript">
//INSERITE QUI IL CONTENUTO DEL FILE nomeFile.js
</script>

Per ora fate una semplice sostituzione, nel prossimo "tips" vedremo in che ordine vanno inserite le risorse.


b) Se invece i file di piccole dimensioni sono più di uno potete unirli mettendo il contenuto di ogni file in quello nouovo che state creando. Successivamente assicuratevi di sostituire tutte le occorrenze delle inclusioni dei file raggruppati con l’inclusione del nuovo file.

Es. se nel vostro codice c’è qualcosa del genere:

<script type="text/javascript" src="/templates/vostro-template/js/file_1.js"></script>
<script type="text/javascript" src="/templates/vostro-template/js/file_2.js"></script>

potete sostituirlo con

<script type="text/javascript" src="/templates/vostro-template/js/file_1_e_2.js"></script>

in cui avrete messo il contenuto del file 1 e del file 2 facendo attenzione a rispettare l’ordine di inclusione.


Questa tecnica può essere applicata anche ai file css ed ai javascript di dimensioni più importanti, ma bisogna controllare che entrambi i javascript vengano utilizzati sempre nelle stesse pagine. Potrebbe non avere importanza fare questa unione se i due file vengono utilizzati al 99% dei casi l’uno indipendentemente dall’altro e solo nel 1% dei casi nella stessa pagina.

In genere questa tecnica è consigliata perché anche se si rallenta il primo caricamento del file in genere se ne riguadagna nelle richieste successive grazie all’uso della cache.

Valutazione attuale: 0 / 5

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
Submit to FacebookSubmit to Google PlusSubmit to TwitterSubmit to LinkedIn

Qui ci viene suggerito di mantenere un certo ordine nell’inclusione di file css e javascript.

In particolare andrebbero inseriti, se possibile, prima tutti i css, poi i javascript ed infine gli script inline.

Anche in questo caso Joomla ci viene in aiuto perché prevede già un’inclusione con questo ordine, dobbiamo solo rispettare alcune accortezze.

Molto spesso è sufficiente sostituire nel nostro template un inclusione di questo tipo:

<script type="text/javascript" src="/templates/vostro-template/js/file_1.js"></script>

con

$doc =JFactory::getDocument();
$doc->addScript($this->baseurl ."/templates/vostro-template/js/file_1.js");

stesso discorso vale per i css che vanno inclusi:

$doc->addStyleSheet( $this->baseurl .'/templates/' . $this->template. '/css/template.css' );

Per quanto riguarda gli script inline basterà inserirli dopo la riga:

<jdoc:include type="head" />

che dovreste trovare nel vostro template.

 

Questo punto è molto importante perché può avere un rilevante impatto sulle prestazioni.
L'ordine di inclusione e la definizione di risorse esterne è molto importante perché può avere un rilevante impatto sulle prestazioni del sito.

Valutazione attuale: 0 / 5

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
Submit to FacebookSubmit to Google PlusSubmit to TwitterSubmit to LinkedIn


La minificazione, da non confondere con la compressione, consiste nel rimuovere/sostituire dal file js tutti quei caratteri che non modificano la logica delle funzioni in esso definite.

Ci sono diversi tools che fanno questa operazione e se non avete voglia di installarvene uno sul pc, potete utilizzare questo: http://refresh-sf.com/yui/ che funge da interfaccia al tool di compressione di Yahoo.

Individuato il file da minificare fatene una copia e per modificare meno codice lo chiamaremo allo stesso modo del file originale ma aggiungete "-src".

Esempio: "file_1.js" diventa "file_1-src.js"

Il file originale sarà minificato mentre il file "-src" ne conterra la copia, pronta ad essere modificata in caso di necessità.

In realtà, una “buona programmazione” vorrebbe che il file originale mantenga lo stesso nome ed il file minificato prenda il nome di "file_1-min.js" ma questo significherebbe modificare anche tutti i punti del codice di Joomla (in genere template o plugin) con il nome del file minificato.

Quindi prendete il contenuto del "file_1.js" minimizzatelo utilizzanto il tool online prendete l’output e copiatelo dentro "file_1.js" al posto di quello che c’era scritto prima ma senza rimuovere il DISCLAIMER che in genere è contenuto nella parte superiore del file.

Pagina 5 di 7

Elenco categorie

  • Page Speed Performance

    I nostri consigli e le tecniche per migliorare le performance dei siti web costruiti in Joomla, attraverso l'utilizzo di tools messi a disposizione dei webmaster come YSlow di Yahoo e PageSpeed di Google. In particolare andremo ad analizzare nello specifico quest'ultimo tool.

  • E-commerce

    I consigli, le tecniche e gli strumenti utili per creare, ottimizzare e rendere più efficace un sito e-commerce.

  • Report e Analytics

    I consigli, le tecniche e gli strumenti di Analytics per monitorare il traffico verso il proprio sito web: importanza del monitoraggio, configurazioni base e report

Gestionale Hotel