Web performance best practices per costruire siti più veloci. WordCamp Milano 2016

1. Il tuo sito è più lento
del 95% dei siti web
Fonte immagine
22-10-2016
@overclokk 1

2. Enea Overclokk
WordPress Lover
WordPress Developer
WordPress Meetup Bologna
@overclokk
www.overclokk.net
www.italystrap.it
2
@overclokk

3. 3
@overclokk@overclokk

4. 4

5. 5
@overclokk

6. Fonte immagine 6
@overclokk

7. Fonte immagine
stava aspettando il
caricamento della
tua pagina web
7
@overclokk

8. 8Fonte immagine
@overclokk

9. IL PROBLEMA
9
@overclokk

10. Fonte immagine 10
2014
@overclokk

11. Fonte immagine 11
2016
2.5MB
@overclokk

12. IL SOGNO
12
@overclokk

13. 13
@overclokk

14. 14
@overclokk

15. Tip { 1 }
Le performance sono nulla senza
controllo!
{ Cit.Pirelli } 15
@overclokk

16. come funziona il browser
Fonte immagine 16
@overclokk

17. cos’è il DOM - document object model
HTML
Head Body
Meta Link H1 p
span“Ciao”
“a”
“tutti”
17
@overclokk

18. 18
@overclokk

19. STRUMENTI DI ANALISI
Fonte immagine 19
Strumenti per dev del
browser
Chrome -> CTRL+MAIUSC+I
Firefox -> CTRL+F12
@overclokk

20. STRUMENTI DI ANALISI
Fonte immagine 20
www.webpagetest.org
@overclokk

21. 21
@overclokk

22. PER SAPERNE DI PIù
Fonte immagine 22
https://olegs.be/blog/
@overclokk

23. Tip { 2 }
Analisi accurata di tema e plugins
23
@overclokk

24. Fonte aforisma
“La perfezione (nel design
nello sviluppo) si ottiene non
quando non c'è nient'altro da
aggiungere, bensì quando non
c'è più niente da togliere.”
{ Cit. Antoine de Saint-Exupéry }
24
@overclokk

25. K I S S
keep it simple stupid
25
@overclokk

26. COME SI FA?
Fonte immagine 26
@overclokk

27. Esempio
Fonte immagine 27
Prendiamo un
plugin a caso
@overclokk

28. 28
Without WooCommerce
@overclokk

29. 29
With WooCommerce
@overclokk

30. 30
With WooCommerce
@overclokk

31. . . .
31
E con i temi è ancora
peggio...
@overclokk

32. . . .
32
Specialmente quelli
che utilizzano
pagebuilder...
@overclokk

33. “I pagebuilder uccidono le
performance del tuo sito
web”
{ Cit. Andrea Cardinali }
33
@overclokk

34. 34
@overclokk

35. Tip { 3 }
Risolvere i problemi… uno alla volta
35
@overclokk

36. Tip { 4 }
Non esiste una soluzione unica per
tutti i problemi!
36
@overclokk

37. tutto chiaro fino qui?
?
37
@overclokk

38. Tip { 5 }
Le performance cominciano dallo
sviluppo NON con l’uso di plugin per
risolvere problemi di sviluppo!
38
@overclokk

39. Come posso farlo senza plugin?
?
39
@overclokk

40. Tip { 6 }
Il CODEX è il tuo migliore amico
#sapevatelo
40
@overclokk

41. 41
IN PARTICOLARE
https://developer.wordpress.org/themes/basics/including-css-j
avascript/
https://codex.wordpress.org/Conditional_Tags
https://codex.wordpress.org/Plugin_API/Hooks
@overclokk

42. 42
Link esterni
http://www.overclokk.net/come-usare-jquery-wordpress-correttamente.ht
ml
http://seoblog.giorgiotave.it/caricare-jquery-asincrono-wordpress/3963
http://seoblog.giorgiotave.it/ottimizzare-velocita-caricamento-social-widgets
/3661
https://github.com/overclokk/ItalyStrap/blob/Dev/lib/script.php
@overclokk

43. Tip { 7 }
Chi ben comincia è a metà… dello
sviluppo, ma con gli strumenti giusti!
43
@overclokk

44. 44
Text editor
● https://www.jetbrains.com/phpstorm/
● https://www.sublimetext.com/
CSS preprocessor
● http://sass-lang.com/
● http://compass-style.org/
Task runner
● https://nodejs.org/en/
● http://gruntjs.com/
Strumenti di sviluppo
@overclokk

45. 45
Some grunt plugins
https://github.com/overclokk/ItalyStrap/blob/Dev/Gruntfile.js
PLUGIN PER GRUNT
@overclokk

46. e per i Js e css che bloccano la
visualizzazione above the fold?
?
46
@overclokk

47. Fonte immagine 47
@overclokk

48. 48
Some grunt plugins
https://github.com/addyosmani/grunt-uncss
https://github.com/bezoerb/grunt-critical
PLUGIN FOR GRUNT
@overclokk

49. . . .
49
Ma quindi cache,
CDN, HTTPS ecc?
@overclokk

50. Grazie! :-)
50
@overclokk

51. DOMANDE?
?
51
@overclokk

52. Enea Overclokk
WordPress Lover
WordPress Developer
WordPress Meetup Bologna
@overclokk
www.overclokk.net
www.italystrap.it
52
@overclokk