Make Your TYPO3 Web Sites Fly

  • 2,074 views
Uploaded 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.

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,074
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
33
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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