make your typo3 web sites fly
DESCRIPTION
This presentation shows a number of best practice tips to increase the performance of a TYPO3 website. The TYPO3 Governmentpackage 4.7.1 is used as an example.TRANSCRIPT
Make Your Web Sites FlyJochen 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 ToolsLabs - 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 = 1config.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_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
Freitag, 15. Juni 12
No cookies anymore
Freitag, 15. Juni 12
3. Use Browser Cache
Freitag, 15. Juni 12
.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
Freitag, 15. Juni 12
config.sendCacheHeaders = 1
Freitag, 15. Juni 12
4. Use Sprites
Freitag, 15. Juni 12
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;}
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 Irelandat 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 = 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
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