Make Your Web Sites Fly                                       Jochen WeilandFreitag, 15. Juni 12
Jochen Weiland             •         TYPO3 since 2002             •         Member Security Team             •         Mem...
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Why Speed Matters                       •   User experience                       •   Increased use of mobile platforms   ...
Google Webmaster Tools                   Labs - Site PerformanceFreitag, 15. Juni 12
Freitag, 15. Juni 12
What do do?                       •   Analyze!                       •   Optimize!                       •   Test!Freitag,...
ExampleFreitag, 15. Juni 12
Freitag, 15. Juni 12
Analyze!                       •   Firebug                       •   Chrome Developer Tools                       •   YSlo...
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Request/Response                           HeadersFreitag, 15. Juni 12
YSlow! - GradeFreitag, 15. Juni 12
YSlow! - ComponentsFreitag, 15. Juni 12
YSlow!                       Components DetailFreitag, 15. Juni 12
YSlow! - StatisticsFreitag, 15. Juni 12
Chrome Developer ToolsFreitag, 15. Juni 12
Lets Start Optimizing!Freitag, 15. Juni 12
1. Compress with gzipFreitag, 15. Juni 12
Freitag, 15. Juni 12
Enable in Install ToolFreitag, 15. Juni 12
.htaccess File                       <FilesMatch ".js.gzip$">                             AddType "text/javascript" .gzip ...
Freitag, 15. Juni 12
That saved 5%...                          so what?Freitag, 15. Juni 12
Lets add some                         TypoScript                        config.compressJs = 1                        config....
Freitag, 15. Juni 12
57% lessFreitag, 15. Juni 12
2. Use cookieless                           domainsFreitag, 15. Juni 12
Cookie is sent with                         every requestFreitag, 15. Juni 12
Ext: ja_replacer                config.tx_ja_replacer.search {                  10="/typo3temp/                  11="typo3t...
No cookies anymoreFreitag, 15. Juni 12
3. Use Browser CacheFreitag, 15. Juni 12
.htaccess:                  ExpiresActive On                  ExpiresDefault "access plus 31 days"                  Expire...
config.sendCacheHeaders = 1Freitag, 15. Juni 12
4. Use SpritesFreitag, 15. Juni 12
sprites.png                       One Image File with 17 Symbols                       article ul.csc-menu li {           ...
From 19 to 12 image requestFreitag, 15. Juni 12
5. Use a CDNFreitag, 15. Juni 12
Using a CDN                       •   Webserver located in Munich, Germany                       •   Static files stored on...
config.tx_ja_replacer.search {                     10="/typo3temp/                     11="typo3temp/                     1...
Freitag, 15. Juni 12
Freitag, 15. Juni 12
Using a CDNFreitag, 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 TimelineFreitag, 15. Juni 12
Freitag, 15. Juni 12
Upcoming SlideShare
Loading in...5
×

Make Your TYPO3 Web Sites Fly

2,416

Published on

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.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,416
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Make Your TYPO3 Web Sites Fly

  1. 1. Make Your Web Sites Fly Jochen WeilandFreitag, 15. Juni 12
  2. 2. Jochen Weiland • TYPO3 since 2002 • Member Security Team • Member BCC • jweiland.netFreitag, 15. Juni 12
  3. 3. Freitag, 15. Juni 12
  4. 4. Freitag, 15. Juni 12
  5. 5. Why Speed Matters • User experience • Increased use of mobile platforms • Fast sites sell better • Fast sites rank betterFreitag, 15. Juni 12
  6. 6. Google Webmaster Tools Labs - Site PerformanceFreitag, 15. Juni 12
  7. 7. Freitag, 15. Juni 12
  8. 8. What do do? • Analyze! • Optimize! • Test!Freitag, 15. Juni 12
  9. 9. ExampleFreitag, 15. Juni 12
  10. 10. Freitag, 15. Juni 12
  11. 11. Analyze! • Firebug • Chrome Developer Tools • YSlow! • Google Page SpeedFreitag, 15. Juni 12
  12. 12. Freitag, 15. Juni 12
  13. 13. Freitag, 15. Juni 12
  14. 14. Freitag, 15. Juni 12
  15. 15. Freitag, 15. Juni 12
  16. 16. Freitag, 15. Juni 12
  17. 17. Request/Response HeadersFreitag, 15. Juni 12
  18. 18. YSlow! - GradeFreitag, 15. Juni 12
  19. 19. YSlow! - ComponentsFreitag, 15. Juni 12
  20. 20. YSlow! Components DetailFreitag, 15. Juni 12
  21. 21. YSlow! - StatisticsFreitag, 15. Juni 12
  22. 22. Chrome Developer ToolsFreitag, 15. Juni 12
  23. 23. Lets Start Optimizing!Freitag, 15. Juni 12
  24. 24. 1. Compress with gzipFreitag, 15. Juni 12
  25. 25. Freitag, 15. Juni 12
  26. 26. Enable in Install ToolFreitag, 15. Juni 12
  27. 27. .htaccess File <FilesMatch ".js.gzip$"> AddType "text/javascript" .gzip </FilesMatch> <FilesMatch ".css.gzip$"> AddType "text/css" .gzip </FilesMatch> AddEncoding gzip .gzipFreitag, 15. Juni 12
  28. 28. Freitag, 15. Juni 12
  29. 29. That saved 5%... so what?Freitag, 15. Juni 12
  30. 30. Lets add some TypoScript config.compressJs = 1 config.compressCss = 1 *requires TYPO3 4.6 or higherFreitag, 15. Juni 12
  31. 31. Freitag, 15. Juni 12
  32. 32. 57% lessFreitag, 15. Juni 12
  33. 33. 2. Use cookieless domainsFreitag, 15. Juni 12
  34. 34. Cookie is sent with every requestFreitag, 15. Juni 12
  35. 35. 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.unsecureFreitag, 15. Juni 12
  36. 36. No cookies anymoreFreitag, 15. Juni 12
  37. 37. 3. Use Browser CacheFreitag, 15. Juni 12
  38. 38. .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 A604800Freitag, 15. Juni 12
  39. 39. config.sendCacheHeaders = 1Freitag, 15. Juni 12
  40. 40. 4. Use SpritesFreitag, 15. Juni 12
  41. 41. 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
  42. 42. From 19 to 12 image requestFreitag, 15. Juni 12
  43. 43. 5. Use a CDNFreitag, 15. Juni 12
  44. 44. 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 distributionFreitag, 15. Juni 12
  45. 45. 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.httpFreitag, 15. Juni 12
  46. 46. Freitag, 15. Juni 12
  47. 47. Freitag, 15. Juni 12
  48. 48. Using a CDNFreitag, 15. Juni 12
  49. 49. Freitag, 15. Juni 12
  50. 50. Freitag, 15. Juni 12
  51. 51. Before: After:Freitag, 15. Juni 12
  52. 52. Before: After:Freitag, 15. Juni 12
  53. 53. Before: After:Freitag, 15. Juni 12
  54. 54. Freitag, 15. Juni 12
  55. 55. Chrome TimelineFreitag, 15. Juni 12
  56. 56. Freitag, 15. Juni 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×