Make Your TYPO3 Web Sites Fly

3,179 views

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
3,179
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
40
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

×