TYPO3 Page speed and performance. June 9th 2017 at CertiFUNcation, Phantasialand, Bruhl, Germany

1. CertiFUNcation Day 2017 June 9th 2017
T Y P O 3 W E B S I T E
P E R F O R M A N C E
I M P R O V E C O N V E R S I O N

2. PA G E S P E E D M AT T E R S T O G O O G L E
W H Y S H O U L D I C A R E ?

3. PA G E S P E E D M AT T E R S T O V I S I T O R S
W H Y S H O U L D I C A R E ?

4. CertiFUNcation Day 2017 June 9th 2017
S P E E D M AT T E R S !

5. CertiFUNcation Day 2017 June 9th 2017
A 1 S E C O N D D E L AY I N PA G E L O A D T I M E
7% loss in conversions
11% fewer page views
16% decrease in customer satisfaction

6. S P E E D M AT T E R S
If an e-commerce site
is making 100.000 a day
they could lose 2.5 million
a year in sales

7. CertiFUNcation Day 2017 June 9th 2017

8. T RY B O T H A N D P I C K A S I D E
W E B S I T E P E R F O R M A N C E

9. CertiFUNcation Day 2017 June 9th 2017
B A C K E N D
O N T H E L E F T S I D E

10. CertiFUNcation Day 2017 June 9th 2017
B A C K E N D
R U L E # 1
config.no_cache = 1
✘

11. CertiFUNcation Day 2017 June 9th 2017
B A C K E N D
AV O I D _ I N T
# Setting "felogin" plugin TypoScript
plugin.tx_felogin_pi1 = USER_INT
plugin.tx_felogin_pi1 {
userFunc = TYPO3CMSFeloginControllerFrontendLoginController->main
storagePid = {$styles.content.loginform.pid}
recursive =
templateFile = {$styles.content.loginform.templateFile}
feloginBaseURL =
…

12. B A C K E N D
Use the admin panel

13. B A C K E N D
Deactivate
extensions not in use

14. CertiFUNcation Day 2017 June 9th 2017
• More PHP processing
• Use wisely
• HMENU’s are processor hungry
• Delete unused TypoScript
T Y P O S C R I P T
B A C K E N D

15. CertiFUNcation Day 2017 June 9th 2017
B A C K E N D
U S E W I S E LY
page = PAGE
page {
10 = FLUIDTEMPLATE
10 {
variables {
colPos1 = CONTENT
colPos1 {
table = tt_content
select {
orderBy = sorting
where = colPos=1
}
}
…
<f:cObject typoscriptObjectPath=“lib.column.1" />

16. Use the TypoScript
Object Browser
and Template Analyzer
T Y P O S C R I P T
B A C K E N D

17. CertiFUNcation Day 2017 June 9th 2017
B A C K E N D
C A C H E TA G S
elements.headerBar = COA
elements.headerBar {
10 = TEXT
10 {
cache {
key = headerBarLogo_{TSFE:sys_language_uid}
key {
insertData = 1
}
lifetime = default
}
…

18. CertiFUNcation Day 2017 June 9th 2017
B A C K E N D
D ATA P R O C E S S I N G
tt_content.batman_content_element = FLUIDTEMPLATE
tt_content.batman_content_element {
file = Batman.html
file.wrap = EXT:batman/Resources/Private/Templates/|
dataProcessing {
10 = DCBatmanDataProcessingDarkKnightProcessor
}
}
…

19. Logged in frontend users
TypoScript conditions
C A C H E F L O O D I N G
B A C K E N D

20. CertiFUNcation Day 2017 June 9th 2017
• Remove metadata
• Remove color profile
O P T I M I Z E I M / G M
B A C K E N D

21. CertiFUNcation Day 2017 June 9th 2017
• nc_staticfilecache
• Caching mechanisms (Redis, Varnish, Reverse Proxy)
S O M E M O R E
B A C K E N D

22. CertiFUNcation Day 2017 June 9th 2017
F R O N T E N D
O N T H E R I G H T S I D E

23. CertiFUNcation Day 2017 June 9th 2017
• HTTP request
• Process request (See the left side again ;-)
• HTTP response
T T F B
F R O N T E N D

24. CertiFUNcation Day 2017 June 9th 2017
C O N C U R R E N T H T T P R E Q U E S T S
F R O N T E N D
6 - 8( H T T P / 1 . 1 )

25. CertiFUNcation Day 2017 June 9th 2017
F R O N T E N D
C O N C AT E N AT E
config {
concatenateJs = 1
removeDefaultJS = 1
concatenateCss = 1
…

26. CertiFUNcation Day 2017 June 9th 2017
• Sprites (images / SVG)
• Embedded images (data:image/png;base64)
• Embedded SVG
• Cookieless domain (Reduce traffic) or CDN (better)
M O R E T O C O N S I D E R
F R O N T E N D

27. CertiFUNcation Day 2017 June 9th 2017
M O R E T O C O N S I D E R
F R O N T E N D
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="http://example.com">

28. T H E B U I L D
F R O N T E N D

29. B U I L D I N G T H E D O M
F R O N T E N D

30. B U I L D I N G T H E C S S O M
F R O N T E N D

31. B U I L D I N G T H E R E N D E R T R E E
F R O N T E N D

32. L AY O U T / R E F L O W
F R O N T E N D

33. PA I N T
F R O N T E N D

34. CertiFUNcation Day 2017 June 9th 2017
• Executed immediately (blocks parsing)
• Executed while parsing (async, only external)
• Executed after parsing (defer, only external)
J AVA S C R I P T
F R O N T E N D

35. CertiFUNcation Day 2017 June 9th 2017
M O R E T O C O N S I D E R
F R O N T E N D
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

36. CertiFUNcation Day 2017 June 9th 2017
• mod_expires for static assets
• Serve with timestamp ?1234567890
B R O W S E R C A C H I N G
F R O N T E N D

37. CertiFUNcation Day 2017 June 9th 2017
M O R E T O C O N S I D E R
F R O N T E N D
<link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>

38. T RY B O T H A N D P I C K A S I D E
W E B S I T E P E R F O R M A N C E

39. G E T I T V I S U A L
Y O U R T O O L B O X

40. Y S L O W
Y O U R T O O L B O X

41. Y S L O W
Y O U R T O O L B O X

42. PA G E S P E E D I N S I G H T S
Y O U R T O O L B O X

43. P I N G D O M
Y O U R T O O L B O X

44. P I N G D O M
Y O U R T O O L B O X

45. W E B PA G E T E S T
Y O U R T O O L B O X

46. W E B PA G E T E S T
Y O U R T O O L B O X

47. G T M E T R I X
Y O U R T O O L B O X

48. – M A R I S S A M AY E R
“To me, speed is really about convenience.”

49. twitter.com/aurora_borealis
facebook.com/padraigbroens
linkedin.com/in/typo3development
patrick.broens
keybase.io/auroraborealis