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.

1. Make Your Web Sites Fly
Jochen Weiland
Freitag, 15. Juni 12

2. Jochen Weiland
• TYPO3 since 2002
• Member Security Team
• Member BCC
• jweiland.net
Freitag, 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 better
Freitag, 15. Juni 12

6. Google Webmaster Tools
Labs - Site Performance
Freitag, 15. Juni 12

7. Freitag, 15. Juni 12

8. What do do?
• Analyze!
• Optimize!
• Test!
Freitag, 15. Juni 12

9. Example
Freitag, 15. Juni 12

10. Freitag, 15. Juni 12

11. Analyze!
• Firebug
• Chrome Developer Tools
• YSlow!
• Google Page Speed
Freitag, 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
Headers
Freitag, 15. Juni 12

18. YSlow! - Grade
Freitag, 15. Juni 12

19. YSlow! - Components
Freitag, 15. Juni 12

20. YSlow!
Components Detail
Freitag, 15. Juni 12

21. YSlow! - Statistics
Freitag, 15. Juni 12

22. Chrome Developer Tools
Freitag, 15. Juni 12

23. Let's Start Optimizing!
Freitag, 15. Juni 12

24. 1. Compress with gzip
Freitag, 15. Juni 12

25. Freitag, 15. Juni 12

26. Enable in Install Tool
Freitag, 15. Juni 12

27. .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

28. Freitag, 15. Juni 12

29. That saved 5%...
so what?
Freitag, 15. Juni 12

30. Let's add some
TypoScript
config.compressJs = 1
config.compressCss = 1
*requires TYPO3 4.6 or higher
Freitag, 15. Juni 12

31. Freitag, 15. Juni 12

32. 57% less
Freitag, 15. Juni 12

33. 2. Use cookieless
domains
Freitag, 15. Juni 12

34. Cookie is sent with
every request
Freitag, 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.unsecure
Freitag, 15. Juni 12

36. No cookies anymore
Freitag, 15. Juni 12

37. 3. Use Browser Cache
Freitag, 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 A604800
Freitag, 15. Juni 12

39. config.sendCacheHeaders = 1
Freitag, 15. Juni 12

40. 4. Use Sprites
Freitag, 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 request
Freitag, 15. Juni 12

43. 5. Use a CDN
Freitag, 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
distribution
Freitag, 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.http
Freitag, 15. Juni 12

46. Freitag, 15. Juni 12

47. Freitag, 15. Juni 12

48. Using a CDN
Freitag, 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 Timeline
Freitag, 15. Juni 12

56. Freitag, 15. Juni 12