Embed Size (px)
Citation preview
1
HELLO
2
Ab
out
KEVINF R O N T E N D D E V E L O P E R & U X I N T E R F A C E D E S I G N E R
EULENBERG
3
Ab
out
W E C R E A T E C O O L W E B A P P S & U S E R E X P E R I E N C E S
4
Ab
out
C O - F O U N D E R O F
5
CYCLINGI L O V E
Ab
out
6
I L O V E W O R K I N G W I T H
Ab
out
7
ACCERLATE WP IN 2018E
XP
ER
IEN
CE
S
8
GO
AL
OF
TO
DA
Y
WHY, HOW, WHATL E T ’ S C L A R I F Y T H E
9
GO
AL
OF
TO
DA
Y
WHY PERFORMANCE MATTERS
10
W H Y
FACTSY A H O O I N C R E A S E D T R A F F I C B Y 9 % F O R E V E R Y 4 0 0 M S O F I M P R O V E M E N T
11
W H Y
FACTSA M A Z O N I N C R E A S E D R E V E N U E B Y 1 % F O R E V E R Y 1 0 0 M S O F I M P R O V E M E N T
12
W H Y
FACTSA C C O R D I N G T O G O O G L E , 5 3 % O F U S E R S W I L L A B A N D O N A S I T E O R W E B P A G E I F I T D O E S N ’ T L O A D W I T H I N 3 S E C O N D S .
13
T H E N E G A T I V E S I D E
FACTS9 0 % O F F A C E P A L M S A R E C A U S E D B Y S L O W W E B S I T E S
14
LET’S GO A STEP BACKW A I T …
15
WEB-PERFORMANCEAFFECTS USER-EXPERIENCE
16
USER-EXPERIENCEAFFECTS CONVERSION
17
THE 6 PILLARS OFPERFORMANCE ISSUES
L E T M E I N T R O D U C E …
18
THE INFAMOUS 6P
ILL
AR
S O
F I
SS
UE
S
F R O N T E N D - A S S E T S ( M A R K U P , S T Y L E S H E E T S , S C R I P T S )👁
V I S U A L C O M P O N E N T S ( I M A G E S & V I D E O S )🖼
F O N T S ( W E B T Y P O & I C O N - F O N T S )㊙
19
THE INFAMOUS 6P
ILL
AR
S O
F I
SS
UE
S
S E R V E R A N D D A T A B A S E M A N A G E M E N T⚙
T H E C L I E N T - S I D E B O T T L E N E C K ( D E V I C E S )📱
W O R D P R E S S C O N F I G U R A T I O N
20
LET’S TALK ABOUTDO’S AND DONT’S👍 👎
21
FRONTEND ASSETSP I L L A R 1
👁
22
PLUGINS AND SCRIPTSD I D Y O U K N O W ?
S L A P Y O U R P A G E S P E E D D R A M A T I C A L L Y
23
24
FRONTEND ASSETSO
PT
IMIZ
E
👍 U S E A L I G H T W E I G H T W P T H E M E
👍 U S E F E W A N D M O R E L I G H T W E I G H T P L U G I N S
👍 D E L E T E U N U S E D P L U G I N S A N D T H E M E S
👎 D O N ’ T U S E P A G E T R A N S I T I O N S F X o n $ ( d o c u m e n t ) . r e a d y ( )
25
FRONTEND ASSETSO
PT
IMIZ
E
👍 R E D U C E A M O U N T & S I Z E O F H T T P R E Q U E S T
/ U N L O A D U N N E C E S S A R Y S C R I P T S , F O N T S , S T Y L E S I N Y O U R F U N C T I O N . P H P ( C H I L D - T H E M E )
/ M I N I F Y S T Y L E S , J A V A S C R I P T & M A R K U P
/ C O N C A T E N A T E A N D L O A D C R I T I C A L C S S F I R S T ( F O R T H E F I R S T V I S I B L E P A R T Y O F T H E P A G E )
26
FRONTEND ASSETSO
PT
IMIZ
E
👍 S P L I T Y O U R S C R I P T S F R O M G L O B A L T O L O C A L
👍 L O A D Y O U R S C R I P T S A S Y N C H R O N O U S A N D A T L A S T
27
FRONTEND ASSETSO
PT
IMIZ
E
👎 D O N ’ T U S E A C P U H U N G R Y S L I D E R
👎 D O N ’ T U S E @ I M P O R T C S S D E C L A R A T I O N
👎 I F A P L U G I N O R S C R I P T D O E S N ’ T B E N E F I T T H E U X , A S K Y O U R S E L F I F Y O U R E A L LY N E E D I T
28
IF USING PAGE-BUILDERS:A T T E N T I O N
D O N ’ T U S E T H E M I F Y O U D O N ’ T N E E D T H E M
29
SOME GOOD NEWS FOR YOUI ’ V E G O T
😉
30
ACF SUPPORT FOR GUTENBERGT H I S S E P T E M B E R
🍾 🎉
31
VISUAL COMPONENTSP I L L A R 2
🖼
32
80% OF LOADING TIMED I D Y O U K N O W ?
A R E C A U S E D B Y U N - C O M P R E S S E D I M A G E S 👎
33
34
VISUAL COMPONENTSO
PT
IMIZ
E
👍 U S E T H E C O R R E C T F I L E F O R M A T F O R I M A G E T Y P E S
👎 A V O I D P N G - 2 4 W H E N P O S S I B L E
👍 U S E S R C S E T & S I Z E A T T R I B U T E F O R R E S P O N S I V E I M A G E S
👍 O P T I M I Z E I M A G E S M A N U A L L Y O R T H R O U G H A P L U G I N
35
IMAGE COMPRESSIONO
PT
IMIZ
E
/ S A V E I M A G E S F O R W E B B Y : S K E T C H O D E R P H O T O S H O P
/ M A N U A L C O M P R E S S I O N ( R E COMMENDED ) : I M A G E O P T I M O R C O M P R E S S O R . I O
/ A U T O M A T I O N C O M P R E S S I O N I N W P : S M U S H
36
SMUSH IMAGE COMPRESSIONO
PT
IMIZ
E
37
VISUAL COMPONENTSO
PT
IMIZ
E
👍 U S E T H I R D P A R T Y P L A T F O R M S F O R V I S U A L C O N T E N T
/ F O R V I D E O : Y O U T U B E , V I M E O … ( E N H A N C E D B U F F E R I N G )
👍 U S E V I D E O S I N S T E A D O F G I F S
👍 L A Z Y - L O A D I M A G E S
👍 L O A D I F R A M E S & V I D E O S A T L A S T
38
USAGE OF SVGO
PT
IMIZ
E
👍 Y O U C A N U S E I N L I N E - S V G I M A G E S
👎 B E A W A R E O F T H A T Y O U R S V G I S N ’ T B I G G E R T H A N A P N G
👎 B E A W A R E O F T H E C O D E O F Y O U R S V G F O R S E C U R I T Y R E A S O N S
👍 I N L I N E - S V G I M A G E S W I L L P R E V E N T A N A D D I T I O N A L H T T P R E Q U E S T
39
WEB-FONTSP I L L A R 3
㊙
40
WEB FONTS ARE EXPENSIVED I D Y O U K N O W ?
I D O N ’ T M E A N T H E L I C E N S E F E E S
👀
41
42
WEB-FONTSO
PT
IMIZ
E
👍 U S E T H E N A T I V E - F O N T S T A C K
43
THE NATIVE FONT-STACKO
PT
IMIZ
E
👍 G I T H U B , MEDIUM.COM & L I N K E D I N K N O W S I T B E S T
EXAMPLE BY: https://css-tricks.com/snippets/css/system-font-stack/
44
WEB-FONTSO
PT
IMIZ
E
👍 U S E T H E N A T I V E - F O N T S T A C K
👍 U S E M A X I U M O N E W E B - F O N T W I T H T W O F O N T - W E I G H T S
👍 M A K E S U R E T O U S E W O F F 2 F I L E F O R M A T
👎 A V O I D U S I N G B I G S E T S O F I C O N - F O N T S
45
QUICK-WIN WEB-FONTSO
PT
IMIZ
E
👍 U S E T H E R E L = „ P R E C O N N E C T “ A T T R I B U T E
/ T H E F O N T S A R E F E T C H E D M U C H E A R L I E R ( B E F O R E C S S I S P A R S E D )
👍 Y O U S H O U L D O N L Y L O A D F O N T - S T Y L E S Y O U N E E D A N D T A K E C O N T R O L O F I T
46
QUICK-WIN WEB-FONTSO
PT
IMIZ
E
EXAMPLE BY: Chris Ashton - http://ashton.codes/preload-google-fonts-using-resource-hints/
47
WEB-FONTSO
PT
IMIZ
E
👍 H E L V E T I C A A N D A R I A L O R G E O R G I A A N D T I M E S H A V E A G O O D R E A D A B I L I T Y & L E G I B I L I T Y
🤔 A M A Z O N U S E S F O N T S I N I M A G E S
👎 A V O I D F L I C K E R I N G O F U N C A C H E D F O N T S B Y U N D E R S T A N D I N G T H E W A Y O F R E N D E R I N G F O N T S
48
THE FOIT & FOUT OF WEB-FONTSO
PT
IMIZ
E
👩 M O N I C A D I N C U L E S C U E X P L A I N S I T I N „ F O N T A S T I C W E B P E R F O R M A N C E “
🎉 P E R F O R M A N C E A T S M A S H I N G C O N F B A R C E L O N A 2 0 1 7
49
THE FOIT & FOUT OF WEB-FONTSO
PT
IMIZ
E
/ M O N I C A D I N C U L E S C U E X P L A I N S I T I N „ F O N T A S T I C W E B P E R F O R M A N C E “
50
WP CONFIGURATIONP I L L A R 4
51
WORDPRESS IS NEARLY PERFECT
L E T ’ S F A C E I T
L E T ’ S M A K E I T B E T T E R W I T H S O M E T W E A K S
52
OP
TIM
IZE
👍 L I M I T B L O G P O S T S A N D M A K E U S E O F E X C E R P T S
WP CONFIGURATION
53
OP
TIM
IZE
👍 D I S A B L E G R A V A T A R S
WP CONFIGURATION
54
OP
TIM
IZE
👍 D I S A B L E G R A V A T A R S
WP CONFIGURATION
👍👍 O R D I S A B L E C O M M E N T S C O M P L E T E L Y
55
OP
TIM
IZE
👍 S H O W C O M M E N T S A S P A G I N A T I O N
WP CONFIGURATION
56
OP
TIM
IZE
👍 L I M I T R E V I S I O N S O F Y O U R P O S T & P A G E S
WP CONFIGURATION
SOURCE: https://www.wpblog.com/disable-limit-wordpress-post-revisions/
/ C O D E B E L O W W I L L L I M I T I T T O O N L Y 3 R E V I S I O N S
/ C O D E G O E S I N T O W P - C O N F I G . P H P
57
OP
TIM
IZE
👍 R E M O V E U N N E C E S S A R Y W I D G E T S
WP CONFIGURATION
👎 D O N ’ T U S E A N Y S H A R I N G B U T T O N P L U G I N
👍 T E S T E V E R Y W I D G E T & P L U G I N Y O U W A N T T O U S E W I T H C A R E A N D M O N I T O R W H A T H A P P E N S
58
OP
TIM
IZE
👍 T A K E U P D A T E S S E R I O U S L Y
WP CONFIGURATION
✅ U P D A T E : C O R E
✅ U P D A T E : T H E M E S
✅ U P D A T E : P L U G I N S
⚠ F O R S E C U R I T Y & P E R F O R M A N C E
59
OP
TIM
IZE
👍 Y O U CAN U S E A M P F O R M O B I L E I N W O R D P R E S S
WP CONFIGURATION
🤷 Y O U D O N ’ T H A V E T O - B U T G I V E I T A T R Y
60
CACHING WITH WP-ROCKETO
PT
IMIZ
E
61
CACHING WITH WP-ROCKETO
PT
IMIZ
E
❤ I T O F F E R S Y O U A M A Z I N G F E A T U R E S :
/ E A S Y C D N C O N N E C T A N D C A C H I N G
/ L A Z Y L O A D I N G
/ D N S P R E F E T C H & P R E C O N N E C T C O N T R O L
/ Q U I C K S E T U P A N D E A S Y T O U S E
62
CACHING CAN HELPD I D Y O U K N O W ?
T O O V E R C O M E O V E R B L O A T E D D O M , F O N T S & S C R I P T S
63
B U T I T ’ S N O T A L W A Y S T H E S O L U T I O N F O R T H E P R O B L E M I T S E L F
🤔
64
SERVER & DATABASEP I L L A R 5
⚙
65
YOUR PAGE IS TOO SLOW?MAYBE IT'S NOT YOUR PC
O H N O … .
66
67
SERVER & DATABASEO
PT
IMIZ
E
👍 U S E A H I G H Q U A L I T Y H O S T I N G P R O V I D E R
68
SERVER & DATABASEO
PT
IMIZ
E
👍 U S E A H I G H Q U A L I T Y H O S T I N G P R O V I D E R
✅ K N O W T H E D I F F E R E N C E B E T W E E N : / S H A R E D ( G O D A D D Y , B L U E H O S T , H O S T E U R O P E ) / D E D I C A T E D ( S I T E G R O U N D , G O D A D D Y , H O S T E U R O P E ) / V P S ( D I G I T A L O C E A N ) / C L O U D ( A M A Z O N E C 2 , L I N O D E , G O O G L E C O M P U T E E N G I N E )
/ M A N A G E D ( S I T E G R O U N D , R A I D B O X E S , D R E A M H O S T )
❤ I P E R S O N A L P R E F E R
69
SERVER & DATABASEO
PT
IMIZ
E
👍 U S E A H I G H Q U A L I T Y H O S T I N G P R O V I D E R
👍 N G I N X I S T H E O B V I O U S C H O I C E O V E R A P A C H E
👍 U S E A L W A Y S T H E L A T E S T P H P V E R S I O N
👍 O N LY U S E H T T P / 2 F O R M U L T I P L E P A R A L L E L R E Q U E S T S
👍 M A K E U S E O F B R O T L I O R G Z I P C O M P R E S S I O N
70
WHAT MAKES BROTLI BETTER?O
PT
IMIZ
E
👍 1 4 P E R C E N T S M A L L E R C O M P R E S S E D J A V A S C R I P T B U N D L E S
👍 2 1 P E R C E N T S M A L L E R C O M P R E S S E D H T M L
👍 1 4 P E R C E N T S M A L L E R C O M P R E S S E D C S S T H A N G Z I P
71
SERVER & DATABASEO
PT
IMIZ
E
👍 U S E A C O N T E N T D E L I V E R Y N E T W O R K ( C D N )
/ Y O U C A N U S E I T F O R I M A G E S , S T Y L E S , J S A N D H T M L
/ I T M A K E S Y O U R A S S E T S F A S T W O R L D W I D E
/ S E R V E D F R O M T H E N E A R E S T S E R V E R T O T H E U S E R
72
SERVER & DATABASEO
PT
IMIZ
E
👍 U S E A C O N T E N T D E L I V E R Y N E T W O R K ( C D N )
👍 R E D U C E C A L L S T O D A T A B A S E ( F I X B R O K E N T H E M E S )
👍 T R Y A D A T A B A S E C A C H I N G L I K E R E D I S O B J E C T C A C H E
👍 O P T I M I Z E D A T A B A S E B Y C L E A N I N G I T F R E Q U E N T L Y
73
CLEANING WITH WP-OPTIMIZEO
PT
IMIZ
E
❤
74
CLEANING WITH WP-OPTIMIZEO
PT
IMIZ
E
✅ R E M O V E S T R A H S E S / U N A P R O V E D / S P A M P I N G B A C K S / E X P I R E D T R A N S I E N T O P T I O N S
✅ C O M P A C T / D E - F R A G M E N T M Y S Q L T A B L E S
✅ C L E A N - U P A U T O M A T I O N & B E N C H M A R K S
75
SERVER & DATABASEO
PT
IMIZ
E
🤷 T R Y M A R I A D B O R P O S T G R E S Q L I N S T E A D O F M Y S Q L
👍 D I S A B L E H O T L I N K I N G I N . H T A C C E S S
👍 A D D A N E X P I R E S H E A D E R T O Y O U R . H T A C C E S S
🤷 T R Y A D D ‚ P R I O R I T I Z E C R I T I C A L C S S ‘ F I L T E R T O Y O U R A P A C H E O R N G I N X C O N F I G U R A T I O N R E A D M O R E A B O U T T H E F I L T E R : h t t p s : / / w w w . m o d p a g e s p e e d . c o m / d o c / f i l t e r - p r i o r i t i z e - c r i t i c a l - c s s
76
SERVER & DATABASEO
PT
IMIZ
E
👍 U S E A S T A T I C S I T E G E N E R A T O R F O R W P ( O N L Y I F Y O U R P A G E I S L E S S D Y N A M I C )
👍 M A K E U S E O F T H E P O W E R F U L W P R E S T - A P I T O D E L I V E R S M A L L E R P A C K A G E S O F D Y N A M I C D A T A
77
THE CLIENT-SIDE BOTTLENECK
N U M B E R 6
📱
78
SOURCE: Addy Osmani - The Cost of JavaScript
79
HOW DOES MOBILE MATTER IN 2018?
80
SOURCE: https://www.statista.com
🤓
AMOUNT OF MOBILE TRAFFIC ON WEBSITESFROM 2014 - 2019
81
BROWSERS ARE BOTTLE- NECKS, TOO.
D I D Y O U K N O W ?
T E S T I T W I T H C A R E
82
TO BE FAST?W H A T D O E S I T M E A N
83
84
MONITORING: THE KEY TO SUCCESS
H O W C A N I A C H I V E T H A T ?
📈
85
MONITORINGD
EB
UG
GIN
/ G O O G L E P A G E S P E E D I N S I G H T S
/ W E B P A G E T E S T . O R G
/ P I N G D O M
/ S O N A R W H A L E ( W E B H I N T . I O ) 🐳
86
THE BROWSERS DEV-CONSOLE IS YOUR FRIEND
D I D Y O U R K N O W ?
87
GOOGLE LIGHTHOUSE
88
89
90
LOOKUP FOR 404-ERRORS IN YOUR CONSOLE
91
CONCLUSION
92
CONCLUSIONR
EM
EM
BE
R
1. ✅ R E D U C E R E Q U E S T I N Q U A N T I T Y A N D S I Z E
2. ✅ I T D E P E N D S O N H O W Y O U P R O V I D E R E Q U E S T E D D A T A
3. ✅ R E N D E R I N G C A P A B I L I T Y A L W A Y S M A T T E R S
93
CONCLUSIONR
EM
EM
BE
R
⬇ 🤫 L E S S H T T P R E Q U E S T M E A N S :
⬇ 💡 L E S S E N E R G Y E F F O R T I S R E Q U I R E D
⬇💰 L E S S C O S T S A R E R E Q U I R E D
94
CONCLUSIONR
EM
EM
BE
R
⬇ 🤫 L E S S H T T P R E Q U E S T L E A D S T O :
⚡ B E T T E R P E R F O R M A N C E
✌ B E T T E R U X
📈 B E T T E R C O N V E R S I O N
🌳 B E T T E R F O R T H E E N V I R O N M E N T B E C A U S E O F L E S S E N E R G Y E F F O R T
95
Plu
gin
sTHANK YOU
soundcloud.com/kevineulenberg
twitter.com/snyoz
medium.froux.co
GET THIS KEYNOTE:
https://performance.froux.co/
96
OP
TIM
IZE
B R O T L I V S . G Z I P : http://instantshift.com/2018/03/02/gzip-vs-brotli-compression/
REFERENCES
P R E V E N T H O T L I N K I N G : http://webcraft.tools/how-to-prevent-hotlinking-in-wordpress/
F I L T E R N G I N X & A P A C H E P R I O R I T I Z E C R I T I C A L C S S : https://www.modpagespeed.com/doc/filter-prioritize-critical-css
B E S T W P C D N S E R V I C E S : https://www.wpbeginner.com/showcase/best-wordpress-cdn-services/
T H E N A T I V E F O N T - S T A C K B E S T P R A C T I C E S : https://css-tricks.com/snippets/css/system-font-stack/
97
OP
TIM
IZE
P R E L O A D F O N T S B Y U S I N G H I N T S : http://ashton.codes/preload-google-fonts-using-resource-hints/
REFERENCES
R E S P O N S I V E I M A G E S : https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
S E T T I N G U P A M P F O R W O R D P R E S S : https://yoast.com/setting-up-wordpress-for-amp-accelerated-mobile-pages/
B E S T W P C D N S E R V I C E S : https://www.wpbeginner.com/showcase/best-wordpress-cdn-services/
A P A C H E V S . N G I N X : https://code.tutsplus.com/tutorials/apache-vs-nginx-pros-cons-for-wordpress--cms-28540
98
OP
TIM
IZE
W H Y P E R F O R M A N C E M A T T E R S : https://developers.google.com/web/fundamentals/performance/why-performance-matters/
REFERENCES
T H E C O S T O F J A V A S C R I P T : https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
M O B I L E M A R K E T I N G R E P O R T : https://www.biznessapps.com/blog/2018-mobile-marketing-report-stats-need-know/
S M A S H I N G C O N F : T A L K S A B O U T W E B F O N T S : https://www.smashingmagazine.com/2018/07/smashingconf-videos-web-fonts-performance/
W O R D P R E S S O P T I M I Z A T I O N : https://codex.wordpress.org/WordPress_Optimization/WordPress_Performance
