Migliorare le performance Frontend con TYPO3

876 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ò

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
876
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×