Tecniche e suggerimenti per migliorare le performance Front End di siti realizzati con TYPO3. Presentato al T3Camp Italia 2011 da David Denicolò

1. Migliorare le
performance Front-
End con TYPO3
David Denicolò <david@intera.it>
T3Camp Italia Migliorare le performance Front-End
Bologna 28/29 Ottobre 2011
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

2. About me
David Denicolò
CTO @ InteRa
TYPO3 dal 2002
T3Camp Italia Migliorare le performance Front-End
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

3. Le performance di un sito web sono
uno degli aspetti cruciali
raggiungere le migliori prestazioni
porta un vantaggio per gli utenti e
benefici per i motori di ricerca.
T3Camp Italia Migliorare le performance Front-End
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

4. Il tempo di caricamento delle pagine è
un elemento che condiziona il ranking.
T3Camp Italia Migliorare le performance Front-End
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

5. Da cosa è condizionato il tempo di
caricamento?
• dalla risposta del server
• dalle performance di TYPO3
• dalla dimensione della pagina
• dal numero di richieste HTTP
T3Camp Italia Migliorare le performance Front-End
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

6. Tecniche di ottimizzazione FE
riduce diminuisce
Tecnica
richieste HTTP dimensioni
T CSS3 ombre, gradienti, angoli V V
E
M CSS Sprite
P V =
L Font-face
A V X =
T
E Distribuzione su più server V =
Merge V =
T
Y
Minify = V P
Compress = V O
Source Optimization
T3Camp Italia
=
Migliorare le performance Front-End
V 3
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

7. Distribuzione o parallelizzazione
La distribuzione è una tecnica mista, in
cui lo sviluppatore può disporre alcune
risorse su altro server.
L’estensione “T3 jQuery” permette
caricare librerie JavaScript jQuery
direttamente da un CDN, ad esempio
Google, MSN o jquerytools.com
T3Camp Italia Migliorare le performance Front-End
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

8. merge, minify, compress
le tecniche di Merge, Minify, Compress
su CSS e JS possono essere realizzate
tramite l’estensione di TYPO3:
• “CSS/Javascript Minificator, Compressor”
• extkey: scriptmerger
• occorre configurare htaccess
T3Camp Italia Migliorare le performance Front-End
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

9. Esempio di TypoScript di scriptmerger
plugin.tx_scriptmerger { plugin.tx_scriptmerger {
css { javascript {
enable = 1 enable = 1
addContentInDocument = 0 parseBody = 0
addBeforeBody = 0
# minification doNotRemoveInDocInBody = 1
minify { addContentInDocument = 0
enable = 1
ignore = .min. # minification
} minify {
enable = 1
# gzip compression useJSMinPlus = 1
compress { ignore = ?,.min.
enable = 1 }
ignore = .gz.
} # gzip compression
compress {
# merging enable = 1
merge { ignore = ?,.gz.
enable = 1 }
ignore =
} # merging
merge {
# charset enable = 1
uniqueCharset { ignore = ?
enable = 1 }
value = @charset "UTF-8"; }
} externalFileCacheLifetime = 3600
} }
}

10. Esempio di htaccess di scriptmerger
### BEGIN EXT:scriptmerger ###
# Removal of ETag (saves some bytes; the last modified header is still there)
FileETag MTime Size
<IfModule mod_headers.c>
FileETag none
</IfModule>
# Client caching of JS/CSS files (because they are merged with an applied hash!)
# Note: Unsetting of the last modified header causes a permant 200 Ok status
<FilesMatch ".(merge|min|gz)(.gz)?.(js|css)">
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 year"
</IfModule>
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</FilesMatch>
# deliver the uncompressed file if gzip encoding isn't accepted
AddEncoding x-gzip .gz
RewriteCond %{HTTP:accept-encoding} !gzip [NC]
RewriteRule ^typo3temp/scriptmerger/compressed/(.+).gz.(js|css)
typo3temp/scriptmerger/uncompressed/$1.$2 [L,NC]
### END EXT:scriptmerger ###

11. source optimization
la tecnica di source optimization
può essere realizzata tramite
l’estensione di TYPO3
• “SourceOptimization”
• extkey: sourceopt
T3Camp Italia Migliorare le performance Front-End
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

12. Esempio di TypoScript di sourceopt
# CONSTANTS
sourceopt {
enabled = 1
enable_utf-8_support = 1
removeGenerator = 0
removeBlurScript = 1
removeComments = 1
removeComments.keep.10 = /This website is powered by TYPO3/usi
removeComments.keep.20 = /^[if/usi
formatHtml = 1
formatHtml.tabSize = 1
formatHtml.debugComment = 1
}

13. Buone pratiche
CSS su file, non inline nel body
JS in header o footer non nel body
verificare CSS e JS delle estensioni
Redirect in htacces non in realurl
T3Camp Italia Migliorare le performance Front-End
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

14. strumenti di verifica
Page speed
• https://developers.google.com/pagespeed/
Tools Pingdom
• http://fpt.pingdom.com/
Strumenti per webmaster di Google
• https://www.google.com/webmasters/tools
T3Camp Italia Migliorare le performance Front-End
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

15. Grazie per l’attenzione
• www.intera.it
• twitter: davdenic
• davdenic.tumblr.com
T3Camp Italia TYPO3 Caretaker
L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl