SlideShare ist ein Scribd-Unternehmen logo
Make Your Web Sites Fly
                                       Jochen Weiland




Freitag, 15. Juni 12
Jochen Weiland
             •         TYPO3 since 2002

             •         Member Security Team

             •         Member BCC

             •         jweiland.net




Freitag, 15. Juni 12
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Why Speed Matters

                       •   User experience
                       •   Increased use of mobile platforms
                       •   Fast sites sell better
                       •   Fast sites rank better




Freitag, 15. Juni 12
Google Webmaster Tools
                   Labs - Site Performance




Freitag, 15. Juni 12
Freitag, 15. Juni 12
What do do?

                       •   Analyze!
                       •   Optimize!
                       •   Test!




Freitag, 15. Juni 12
Example



Freitag, 15. Juni 12
Freitag, 15. Juni 12
Analyze!

                       •   Firebug
                       •   Chrome Developer Tools
                       •   YSlow!
                       •   Google Page Speed




Freitag, 15. Juni 12
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Request/Response
                           Headers




Freitag, 15. Juni 12
YSlow! - Grade




Freitag, 15. Juni 12
YSlow! - Components




Freitag, 15. Juni 12
YSlow!
                       Components Detail




Freitag, 15. Juni 12
YSlow! - Statistics




Freitag, 15. Juni 12
Chrome Developer Tools




Freitag, 15. Juni 12
Let's Start Optimizing!



Freitag, 15. Juni 12
1. Compress with gzip



Freitag, 15. Juni 12
Freitag, 15. Juni 12
Enable in Install Tool




Freitag, 15. Juni 12
.htaccess File
                       <FilesMatch ".js.gzip$">
                             AddType "text/javascript" .gzip
                       </FilesMatch>
                       <FilesMatch ".css.gzip$">
                             AddType "text/css" .gzip
                       </FilesMatch>
                       AddEncoding gzip .gzip



Freitag, 15. Juni 12
Freitag, 15. Juni 12
That saved 5%...
                          so what?


Freitag, 15. Juni 12
Let's add some
                         TypoScript

                        config.compressJs = 1
                        config.compressCss = 1




          *requires TYPO3 4.6 or higher
Freitag, 15. Juni 12
Freitag, 15. Juni 12
57% less



Freitag, 15. Juni 12
2. Use cookieless
                           domains


Freitag, 15. Juni 12
Cookie is sent with
                         every request




Freitag, 15. Juni 12
Ext: ja_replacer
                config.tx_ja_replacer.search {
                  10="/typo3temp/
                  11="typo3temp/
                  12="/fileadmin/
                  13="fileadmin/
                  14="/typo3conf/
                  15="typo3conf/
                }

                tx_ja_replacer.unsecure = COA
                tx_ja_replacer.unsecure {
                  10="http://static.typo3-workshop.net/typo3temp/
                  11="http://static.typo3-workshop.net/typo3temp/
                  12="http://static.typo3-workshop.net/fileadmin/
                  13="http://static.typo3-workshop.net/fileadmin/
                  14="http://static.typo3-workshop.net/typo3conf/
                  15="http://static.typo3-workshop.net/typo3conf/
                }

                config.tx_ja_replacer.replace < tx_ja_replacer.unsecure

Freitag, 15. Juni 12
No cookies anymore




Freitag, 15. Juni 12
3. Use Browser Cache



Freitag, 15. Juni 12
.htaccess:

                  ExpiresActive On
                  ExpiresDefault "access plus 31 days"

                  ExpiresByType application/javascript A900
                  ExpiresByType application/x-javascript A900
                  ExpiresByType text/javascript A900
                  ExpiresByType text/html A1800
                  ExpiresByType text/xml A90
                  ExpiresByType text/css A900
                  ExpiresByType text/plain A90
                  ExpiresByType image/gif A604800
                  ExpiresByType image/jpg A604800
                  ExpiresByType image/jpeg A604800
                  ExpiresByType image/png A604800
                  ExpiresByType image/bmp A604800
                  ExpiresByType application/x-shockwave-flash A604800




Freitag, 15. Juni 12
config.sendCacheHeaders = 1




Freitag, 15. Juni 12
4. Use Sprites



Freitag, 15. Juni 12
sprites.png
                       One Image File with 17 Symbols
                       article ul.csc-menu li {
                        margin-left: 0.5em;
                          padding-left: 1.75em;
                        margin-bottom:0.5em;
                        font-size: 1em;
                        line-height: 1.25em;

                       before:

                           background: url(../img/icon-arrow-down.png) 0 0.3em no-repeat;

                       after:

                           background: url(../img/sprites.png) -20px -95px no-repeat;
                       }




Freitag, 15. Juni 12
From 19 to 12 image request




Freitag, 15. Juni 12
5. Use a CDN



Freitag, 15. Juni 12
Using a CDN

                       •   Webserver located in Munich, Germany
                       •   Static files stored on Amazon S3 in Ireland
                           at http://jweilandawstest.s3-website-eu-
                           west-1.amazonaws.com/
                       •   Amazon CloudFront for worldwide
                           distribution



Freitag, 15. Juni 12
config.tx_ja_replacer.search {
                     10="/typo3temp/
                     11="typo3temp/
                     12="/fileadmin/default/templates/
                     13="fileadmin/default/templates/
                     14="/typo3conf/
                     15="typo3conf/
                     16="/uploads/
                     17="uploads/
                   }

                   tx_ja_replacer.http = COA
                   tx_ja_replacer.http {
                     10="http://static.typo3-workshop.net/typo3temp/
                     11="http://static.typo3-workshop.net/typo3temp/
                     12="http://cdn.typo3-workshop.net/cdn/fileadmin/default/templates/
                     13="http://cdn.typo3-workshop.net/cdn/fileadmin/default/templates/
                     14="http://static.typo3-workshop.net/typo3conf/
                     15="http://static.typo3-workshop.net/typo3conf/
                     16="http://cdn.typo3-workshop.net/cdn/uploads/
                     17="http://cdn.typo3-workshop.net/cdn/uploads/
                   }

                   config.tx_ja_replacer.replace < tx_ja_replacer.http


Freitag, 15. Juni 12
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Using a CDN




Freitag, 15. Juni 12
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Before:




                       After:




Freitag, 15. Juni 12
Before:




                       After:




Freitag, 15. Juni 12
Before:




                       After:




Freitag, 15. Juni 12
Freitag, 15. Juni 12
Chrome Timeline




Freitag, 15. Juni 12
Freitag, 15. Juni 12

Weitere ähnliche Inhalte

Mehr von jweiland

Langsame webseiten nerven- Tipps für TYPO3
Langsame webseiten nerven- Tipps für TYPO3Langsame webseiten nerven- Tipps für TYPO3
Langsame webseiten nerven- Tipps für TYPO3
jweiland
 
Solr typo3 konfiguration workshop
Solr typo3 konfiguration workshopSolr typo3 konfiguration workshop
Solr typo3 konfiguration workshop
jweiland
 
30 questions that you should ask your hosting provider
30 questions that you should ask your hosting provider30 questions that you should ask your hosting provider
30 questions that you should ask your hosting provider
jweiland
 
TYPO3 SEO
TYPO3 SEOTYPO3 SEO
TYPO3 SEO
jweiland
 
Why RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix itWhy RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix it
jweiland
 
Spark Plugs, Oil Change, Filter - How to keep your TYPO3 site running with re...
Spark Plugs, Oil Change, Filter - How to keep your TYPO3 site running with re...Spark Plugs, Oil Change, Filter - How to keep your TYPO3 site running with re...
Spark Plugs, Oil Change, Filter - How to keep your TYPO3 site running with re...
jweiland
 
Using TSconfig to tailor TYPO3 to your needs
Using TSconfig to tailor TYPO3 to your needsUsing TSconfig to tailor TYPO3 to your needs
Using TSconfig to tailor TYPO3 to your needs
jweiland
 

Mehr von jweiland (7)

Langsame webseiten nerven- Tipps für TYPO3
Langsame webseiten nerven- Tipps für TYPO3Langsame webseiten nerven- Tipps für TYPO3
Langsame webseiten nerven- Tipps für TYPO3
 
Solr typo3 konfiguration workshop
Solr typo3 konfiguration workshopSolr typo3 konfiguration workshop
Solr typo3 konfiguration workshop
 
30 questions that you should ask your hosting provider
30 questions that you should ask your hosting provider30 questions that you should ask your hosting provider
30 questions that you should ask your hosting provider
 
TYPO3 SEO
TYPO3 SEOTYPO3 SEO
TYPO3 SEO
 
Why RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix itWhy RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix it
 
Spark Plugs, Oil Change, Filter - How to keep your TYPO3 site running with re...
Spark Plugs, Oil Change, Filter - How to keep your TYPO3 site running with re...Spark Plugs, Oil Change, Filter - How to keep your TYPO3 site running with re...
Spark Plugs, Oil Change, Filter - How to keep your TYPO3 site running with re...
 
Using TSconfig to tailor TYPO3 to your needs
Using TSconfig to tailor TYPO3 to your needsUsing TSconfig to tailor TYPO3 to your needs
Using TSconfig to tailor TYPO3 to your needs
 

Make Your TYPO3 Web Sites Fly