Download - Your site is slower than 95% of websites
your site is slower than 95% of websites
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
waiting for your web page loading
7@overclokk
8Fonte immagine @overclokk
Fonte immagine 10
2014
@overclokk
Fonte immagine 11
2016
2.5MB
@overclokk
Tip { 1 }Performaces are nothing without
control!
{ Cit.Pirelli } 15@overclokk
how the browser works
Fonte immagine 16@overclokk
what is the ”DOM” - document object modelHTML
Head Body
Meta Link H1 p
span“Ciao”
“a”
“tutti”
17@overclokk
ANALySIs tools
Fonte immagine 19
Browser’s tools for dev
Chrome -> CTRL+MAIUSC+IFirefox -> CTRL+F12
@overclokk
ANALySIs tools
Fonte immagine 20
www.webpagetest.org
@overclokk
to know more
Fonte immagine 22
https://olegs.be/blog/
@overclokk
Tip { 2 } Accurate analysis of themes and
plugins
23@overclokk
Fonte aforisma
“Perfection (in development) is achieved not when there is nothing more to add but when there is nothing left to take away.
(cit. Antoine de Saint -Exupéry )
24@overclokk
how do i do it ?
Fonte immagine 26@overclokk
Example
Fonte immagine 27
Let’s take a random plugin
@overclokk
. . .
31
With themes is even worse...
@overclokk
. . .
32
Especially those using pagebuilder...
@overclokk
“Pagebuilders kill your website’s performaces ”
{ Cit. Andrea Cardinali }
33@overclokk
Tip { 3 }Solve problems … one at a time
35@overclokk
Tip { 4 }There is no single solution for all
problems!
36@overclokk
Tip { 5 }Performances begin with the
development, NOt with the use of plugins for solving development
problems!38@overclokk
how can i do this without plugins?
?39@overclokk
Tip { 6 }CODEX is your best friend
#knowit
40@overclokk
41
IN PARTICuLAR
https://developer.wordpress.org/themes/basics/including-css-javascript/
https://codex.wordpress.org/Conditional_Tags
https://codex.wordpress.org/Plugin_API/Hooks
@overclokk
42
external Links
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 }Well begun is half done… of
development, but with right tools!
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/
development toolS
@overclokk
45
Some grunt’s plugins
https://github.com/overclokk/ItalyStrap/blob/Dev/Gruntfile.js
PLUGINs for GRUNT
@overclokk
and for the Js and css which block above the fold visualisation?
?46@overclokk
Fonte immagine 47@overclokk
48
Some grunt’s pluginshttps://github.com/addyosmani/grunt-uncss
https://github.com/bezoerb/grunt-critical
PLUGINs FOR GRUNT
@overclokk
. . .
49
And for cache, CDN, HTTPS etc?
@overclokk
Enea OverclokkWordPress Lover
WordPress DeveloperWordPress Meetup Bologna
@overclokk
www.overclokk.netwww.italystrap.it
52@overclokk