Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Migliorare le             performance Front-             End con TYPO3             David Denicolò <david@intera.it>T3Camp ...
About me                 David Denicolò                 CTO @ InteRa                 TYPO3 dal 2002T3Camp Italia          ...
Le performance di un sito web sono                             uno degli aspetti cruciali                             ragg...
Il tempo di caricamento delle pagine è                          un elemento che condiziona il ranking.T3Camp Italia       ...
Da cosa è condizionato il tempo di                             caricamento?                             •       dalla risp...
Tecniche di ottimizzazione FE                                                        riduce     diminuisce          Tecnic...
Distribuzione o parallelizzazione                             La distribuzione è una tecnica mista, in                    ...
merge, minify, compress                             le tecniche di Merge, Minify, Compress                             su ...
Esempio di TypoScript di scriptmergerplugin.tx_scriptmerger {                      plugin.tx_scriptmerger {        css {  ...
Esempio di htaccess di scriptmerger### BEGIN EXT:scriptmerger #### Removal of ETag (saves some bytes; the last modified he...
source optimization                             la tecnica di source optimization                             può essere r...
Esempio di TypoScript di sourceopt# CONSTANTSsourceopt {  enabled = 1  enable_utf-8_support = 1  removeGenerator = 0  remo...
Buone pratiche                             CSS su file, non inline nel body                             JS in header o foot...
strumenti di verifica                             Page speed                             •       https://developers.google....
Grazie per l’attenzione                          •      www.intera.it                          •      twitter: davdenic   ...
Upcoming SlideShare
Loading in …5
×

Migliorare le performance Frontend con TYPO3

1,032 views

Published on

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

  • Be the first to comment

  • Be the first to like this

Migliorare le performance Frontend con TYPO3

  1. 1. Migliorare le performance Front- End con TYPO3 David Denicolò <david@intera.it>T3Camp Italia Migliorare le performance Front-End Bologna 28/29 Ottobre 2011L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl
  2. 2. About me David Denicolò CTO @ InteRa TYPO3 dal 2002T3Camp Italia Migliorare le performance Front-EndL’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl
  3. 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-EndL’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl
  4. 4. Il tempo di caricamento delle pagine è un elemento che condiziona il ranking.T3Camp Italia Migliorare le performance Front-EndL’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl
  5. 5. Da cosa è condizionato il tempo di caricamento? • dalla risposta del server • dalle performance di TYPO3 • dalla dimensione della pagina • dal numero di richieste HTTPT3Camp Italia Migliorare le performance Front-EndL’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl
  6. 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 OptimizationT3Camp Italia = Migliorare le performance Front-End V 3L’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl
  7. 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.comT3Camp Italia Migliorare le performance Front-EndL’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl
  8. 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 htaccessT3Camp Italia Migliorare le performance Front-EndL’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl
  9. 9. Esempio di TypoScript di scriptmergerplugin.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. 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 isnt acceptedAddEncoding x-gzip .gzRewriteCond %{HTTP:accept-encoding} !gzip [NC]RewriteRule ^typo3temp/scriptmerger/compressed/(.+).gz.(js|css)typo3temp/scriptmerger/uncompressed/$1.$2 [L,NC]### END EXT:scriptmerger ###
  11. 11. source optimization la tecnica di source optimization può essere realizzata tramite l’estensione di TYPO3 • “SourceOptimization” • extkey: sourceoptT3Camp Italia Migliorare le performance Front-EndL’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl
  12. 12. Esempio di TypoScript di sourceopt# CONSTANTSsourceopt {  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. 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 realurlT3Camp Italia Migliorare le performance Front-EndL’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl
  14. 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/toolsT3Camp Italia Migliorare le performance Front-EndL’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl
  15. 15. Grazie per l’attenzione • www.intera.it • twitter: davdenic • davdenic.tumblr.comT3Camp Italia TYPO3 CaretakerL’evento italiano dedicato a TYPO3 David Denicolò - InteRa srl

×