Post on 20-Jan-2017
transcript
Il tuo sito è più lento del 95% dei siti web
Fonte immagine
22-10-2016
@overclokk 1
Enea OverclokkWordPress Lover
WordPress DeveloperWordPress Meetup Bologna
@overclokk
www.overclokk.netwww.italystrap.it
2@overclokk
3
@overclokk@overclokk
4
Fonte immagine 6@overclokk
Fonte immagine
stava aspettando il caricamento della
tua pagina web
7@overclokk
8Fonte immagine @overclokk
Fonte immagine 10
2014
@overclokk
Fonte immagine 11
2016
2.5MB
@overclokk
Tip { 1 }Le performance sono nulla senza
controllo!
{ Cit.Pirelli } 15@overclokk
come funziona il browser
Fonte immagine 16@overclokk
cos’è il DOM - document object model
HTMLHead Body
Meta Link H1 p
span“Ciao”
“a”
“tutti”
17@overclokk
STRUMENTI DI ANALISI
Fonte immagine 19
Strumenti per dev del browser
Chrome -> CTRL+MAIUSC+IFirefox -> CTRL+F12
@overclokk
STRUMENTI DI ANALISI
Fonte immagine 20
www.webpagetest.org
@overclokk
PER SAPERNE DI PIù
Fonte immagine 22
https://olegs.be/blog/
@overclokk
Tip { 2 } Analisi accurata di tema e plugins
23@overclokk
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
COME SI FA?
Fonte immagine 26@overclokk
Esempio
Fonte immagine 27
Prendiamo un plugin a caso
@overclokk
. . .
31
E con i temi è ancora peggio...
@overclokk
. . .
32
Specialmente quelli che utilizzano pagebuilder...
@overclokk
“I pagebuilder uccidono le performance del tuo sito
web”{ Cit. Andrea Cardinali }
33@overclokk
Tip { 3 }Risolvere i problemi… uno alla volta
35@overclokk
Tip { 4 }Non esiste una soluzione unica per
tutti i problemi!
36@overclokk
Tip { 5 }Le performance cominciano dallo
sviluppo NON con l’uso di plugin per risolvere problemi di sviluppo!
38@overclokk
Tip { 6 }Il CODEX è il tuo migliore amico
#sapevatelo
40@overclokk
41
IN PARTICOLARE
https://developer.wordpress.org/themes/basics/including-css-javascript/
https://codex.wordpress.org/Conditional_Tags
https://codex.wordpress.org/Plugin_API/Hooks
@overclokk
42
Link esterni
http://www.overclokk.net/come-usare-jquery-wordpress-correttamente.html
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
Tip { 7 }Chi ben comincia è a metà… dello
sviluppo, ma con gli strumenti giusti!
43@overclokk
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
Some grunt plugins
https://github.com/overclokk/ItalyStrap/blob/Dev/Gruntfile.js
PLUGIN PER GRUNT
@overclokk
e per i Js e css che bloccano la visualizzazione above the fold?
?46@overclokk
Fonte immagine 47@overclokk
48
Some grunt pluginshttps://github.com/addyosmani/grunt-uncss
https://github.com/bezoerb/grunt-critical
PLUGIN FOR GRUNT
@overclokk
. . .
49
Ma quindi cache, CDN, HTTPS ecc?
@overclokk
Enea OverclokkWordPress Lover
WordPress DeveloperWordPress Meetup Bologna
@overclokk
www.overclokk.netwww.italystrap.it
52@overclokk