Le slide illustrano le tre tecniche per velocizzare il sito web. Google vuole dei siti veloci? E noi glie li daremo....

1. EDP ANSWER
Le operazioni indispensabili per aumentare
le performance del vostro sito
Page 1

2. Quanto conta la velocità di un sito
La velocità è una caratteristica indispensabile per
ogni sito web.
Più un sito è veloce, più saranno le possibilità di scalare le
SERP (risultati di ricerca di Google)
Perchè?
Perchè un sito lento non interessa a nessuno, fa perdere
solo tempo
Page 2

3. Cosa influisce sulla velocità
Le più importanti
 Grandezza delle immagini
 Numero di richieste HTTP
 Codice non utilizzato
Parliamone un po…
Page 3

4. Grandezza delle immagini
Come già sapete..
 È essenziale caricare le immagini già perfettamente
dimensionate perchè si evitano di caricare KB inutili
 EVITARE WIDTH E HEIGHT ( ridimensionamento delle
immagini da browser)
 Preferire i JPG ai PNG perchè sono più leggeri (JPG è un
formato già compresso)
 Alleggerire il più possibile le immagini (qualità ridotta)
Page 4

5. Grandezza delle immagini (2)
Ovviamente settate la scadenza dell’immagine a
lungo termine se questa rimane invariata nel tempo
 Ad esempio se si tratta dello sfondo del sito, il logo,
immagini fisse di articoli, etc..
Così evitate che il browser richeda ogni volta l’immagine. La
memorizza nella cache e la mostra quando ce n’è bisogno
Page 5

6. Numero di richieste HTTP
Per verificare la velocità della vostra pagina collegatevi al
sito
http://www.webpagetest.org
Questo sito analizza in profondità il sito e vi da delle
valutazioni.
Ecco in nostro test
Page 6

7. Numero di richieste HTTP (2)
PRE-OTTIMIZZAZIONE
POST-OTTIMIZZAZIONE
Page 7

8. Numero di richieste HTTP (3)
Cliccando su Page Speed score vi da
l’elenco delle modifiche da effettuare
per migliorare le prestazioni.
Nelle prossime slide ci soffermiamo
sulla tecnica per minimizzare CSS e JS.
Page 8

9. Numero di richieste HTTP (4)
Per comprimere CSS e JS
Comprimere CSS e JS significa racchiudere in un unico file
compresso tutti i css e i js chiamati all’interno del tema del
nostro sito web.
Page 9

10. Numero di richieste HTTP (5)
Passo a passo
1) Scaricare Minify 2.1.5
http://code.google.com/p/minify/downloads/list
2) Estrarre i file e mettere nella ROOT del sito la cartella min
3) Dal browser collegarsi alla cartella scrivendo
www.miosito.it/min
Page 10

11. Numero di richieste HTTP (6)
4) Si apre una pagina bianca con una serie di istruzioni. In alto
inserire tutti i CSS o tutti i JS che volete unire
5) Cliccate su Update
Page 11

12. Numero di richieste HTTP (7)
6) A questo punto potete inserire il tag HTML che pagina vi
suggerisce appena sotto
Esempio con 3 css
<link type="text/css" rel="stylesheet“
ref="/min/b=css&amp;f=primo.css,secondo.css,terzo.css" />
oppure creare un gruppo. Nel secondo caso aprite il file
/min/groupsConfig.php e all’interno aggiungete tutti i vostri JS come segue
(nell’esempio sono 3)
‘nomeGruppo’=>array(‘//percorso/primo.js', (‘//percorso/secondo.js ',
‘//percorso/terzo.js '), e quindi inserire
<link type="text/css" rel="stylesheet“ ref="/min/g=nomeGruppo" />
Page 12

13. Numero di richieste HTTP (8)
La stessa cosa vale per i JS
Page 13

14. Pulizia del codice non utilizzato
Spesso per comodità non si crea ex
novo un css, si prende quello di un sito
realizzato precedentemente perché
magari molti elementi sono in comune
o basta modificare qualche riga e
otteniamo un sito completamente
diverso
Page 14

15. Pulizia del codice non utilizzato(2)
Quindi magari vi ritrovate con un foglio di stile lunghissimo e
complicato . Cosa fare?
Come posso sapere quali classi CSS sto davvero utilizzando e
quali invece no???
Installate Firefox e aggiungete
Page 15

16. Grazie e buon lavoro
EDP ANSWER
Piazza Carlo Manziana, 16
26013 Crema (CR)
Tel. / Fax +39 0373 202704
Mail info@edpanswer.it
Page 16