Make Your TYPO3 Web Sites Fly
-
Upload
jweiland -
Category
Technology
-
view
2.267 -
download
0
description
Transcript of Make Your TYPO3 Web Sites Fly
![Page 1: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/1.jpg)
Make Your Web Sites FlyJochen Weiland
Freitag, 15. Juni 12
![Page 2: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/2.jpg)
Jochen Weiland
• TYPO3 since 2002
• Member Security Team
• Member BCC
• jweiland.net
Freitag, 15. Juni 12
![Page 3: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/3.jpg)
Freitag, 15. Juni 12
![Page 4: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/4.jpg)
Freitag, 15. Juni 12
![Page 5: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/5.jpg)
Why Speed Matters
• User experience
• Increased use of mobile platforms
• Fast sites sell better
• Fast sites rank better
Freitag, 15. Juni 12
![Page 6: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/6.jpg)
Google Webmaster ToolsLabs - Site Performance
Freitag, 15. Juni 12
![Page 7: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/7.jpg)
Freitag, 15. Juni 12
![Page 8: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/8.jpg)
What do do?
• Analyze!
• Optimize!
• Test!
Freitag, 15. Juni 12
![Page 9: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/9.jpg)
Example
Freitag, 15. Juni 12
![Page 10: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/10.jpg)
Freitag, 15. Juni 12
![Page 11: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/11.jpg)
Analyze!
• Firebug
• Chrome Developer Tools
• YSlow!
• Google Page Speed
Freitag, 15. Juni 12
![Page 12: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/12.jpg)
Freitag, 15. Juni 12
![Page 13: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/13.jpg)
Freitag, 15. Juni 12
![Page 14: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/14.jpg)
Freitag, 15. Juni 12
![Page 15: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/15.jpg)
Freitag, 15. Juni 12
![Page 16: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/16.jpg)
Freitag, 15. Juni 12
![Page 17: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/17.jpg)
Request/Response Headers
Freitag, 15. Juni 12
![Page 18: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/18.jpg)
YSlow! - Grade
Freitag, 15. Juni 12
![Page 19: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/19.jpg)
YSlow! - Components
Freitag, 15. Juni 12
![Page 20: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/20.jpg)
YSlow! Components Detail
Freitag, 15. Juni 12
![Page 21: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/21.jpg)
YSlow! - Statistics
Freitag, 15. Juni 12
![Page 22: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/22.jpg)
Chrome Developer Tools
Freitag, 15. Juni 12
![Page 23: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/23.jpg)
Let's Start Optimizing!
Freitag, 15. Juni 12
![Page 24: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/24.jpg)
1. Compress with gzip
Freitag, 15. Juni 12
![Page 25: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/25.jpg)
Freitag, 15. Juni 12
![Page 26: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/26.jpg)
Enable in Install Tool
Freitag, 15. Juni 12
![Page 27: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/27.jpg)
.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
![Page 28: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/28.jpg)
Freitag, 15. Juni 12
![Page 29: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/29.jpg)
That saved 5%...so what?
Freitag, 15. Juni 12
![Page 30: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/30.jpg)
Let's add some TypoScript
config.compressJs = 1config.compressCss = 1
*requires TYPO3 4.6 or higher
Freitag, 15. Juni 12
![Page 31: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/31.jpg)
Freitag, 15. Juni 12
![Page 32: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/32.jpg)
57% less
Freitag, 15. Juni 12
![Page 33: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/33.jpg)
2. Use cookieless domains
Freitag, 15. Juni 12
![Page 34: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/34.jpg)
Cookie is sent with every request
Freitag, 15. Juni 12
![Page 35: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/35.jpg)
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
![Page 36: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/36.jpg)
No cookies anymore
Freitag, 15. Juni 12
![Page 37: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/37.jpg)
3. Use Browser Cache
Freitag, 15. Juni 12
![Page 38: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/38.jpg)
.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
![Page 39: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/39.jpg)
config.sendCacheHeaders = 1
Freitag, 15. Juni 12
![Page 40: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/40.jpg)
4. Use Sprites
Freitag, 15. Juni 12
![Page 41: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/41.jpg)
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
![Page 42: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/42.jpg)
From 19 to 12 image request
Freitag, 15. Juni 12
![Page 43: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/43.jpg)
5. Use a CDN
Freitag, 15. Juni 12
![Page 44: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/44.jpg)
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
![Page 45: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/45.jpg)
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
![Page 46: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/46.jpg)
Freitag, 15. Juni 12
![Page 47: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/47.jpg)
Freitag, 15. Juni 12
![Page 48: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/48.jpg)
Using a CDN
Freitag, 15. Juni 12
![Page 49: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/49.jpg)
Freitag, 15. Juni 12
![Page 50: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/50.jpg)
Freitag, 15. Juni 12
![Page 51: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/51.jpg)
Before:
After:
Freitag, 15. Juni 12
![Page 52: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/52.jpg)
Before:
After:
Freitag, 15. Juni 12
![Page 53: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/53.jpg)
Before:
After:
Freitag, 15. Juni 12
![Page 54: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/54.jpg)
Freitag, 15. Juni 12
![Page 55: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/55.jpg)
Chrome Timeline
Freitag, 15. Juni 12
![Page 56: Make Your TYPO3 Web Sites Fly](https://reader034.fdocuments.us/reader034/viewer/2022052618/554bd1bfb4c9058f6c8b4ca5/html5/thumbnails/56.jpg)
Freitag, 15. Juni 12