make your typo3 web sites fly

Make Your Web Sites FlyJochen Weiland

Freitag, 15. Juni 12

Jochen Weiland

• TYPO3 since 2002

• Member Security Team

• Member BCC

• jweiland.net


Why Speed Matters

• User experience

• Increased use of mobile platforms

• Fast sites sell better

• Fast sites rank better


Google Webmaster ToolsLabs - Site Performance


What do do?

• Analyze!

• Optimize!

• Test!


Example


Analyze!

• Firebug

• Chrome Developer Tools

• YSlow!

• Google Page Speed


Request/Response Headers


YSlow! - Grade


YSlow! - Components


YSlow! Components Detail


YSlow! - Statistics


Chrome Developer Tools


Let's Start Optimizing!


1. Compress with gzip


Enable in Install Tool


.htaccess File

<FilesMatch "\.js\.gzip$"> AddType "text/javascript" .gzip</FilesMatch><FilesMatch "\.css\.gzip$"> AddType "text/css" .gzip</FilesMatch>AddEncoding gzip .gzip


That saved 5%...so what?


Let's add some TypoScript

config.compressJs = 1config.compressCss = 1

*requires TYPO3 4.6 or higher


57% less


2. Use cookieless domains


Cookie is sent with every request


Ext: ja_replacerconfig.tx_ja_replacer.search { 10="/typo3temp/ 11="typo3temp/ 12="/fileadmin/ 13="fileadmin/ 14="/typo3conf/ 15="typo3conf/}

tx_ja_replacer.unsecure = COAtx_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


No cookies anymore


3. Use Browser Cache


.htaccess:

ExpiresActive OnExpiresDefault "access plus 31 days"

ExpiresByType application/javascript A900ExpiresByType application/x-javascript A900ExpiresByType text/javascript A900ExpiresByType text/html A1800ExpiresByType text/xml A90ExpiresByType text/css A900ExpiresByType text/plain A90ExpiresByType image/gif A604800ExpiresByType image/jpg A604800ExpiresByType image/jpeg A604800ExpiresByType image/png A604800ExpiresByType image/bmp A604800ExpiresByType application/x-shockwave-flash A604800


config.sendCacheHeaders = 1


4. Use Sprites


sprites.pngOne 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;}


From 19 to 12 image request


5. Use a CDN


Using a CDN

• Webserver located in Munich, Germany

• Static files stored on Amazon S3 in Irelandat http://jweilandawstest.s3-website-eu-west-1.amazonaws.com/

• Amazon CloudFront for worldwide distribution


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 = COAtx_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


Using a CDN


Before:

After:


Chrome Timeline


make your typo3 web sites fly

Technology