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

5@overclokk

Fonte immagine 6@overclokk

Fonte immagine

waiting for your web page loading

7@overclokk

8Fonte immagine @overclokk

the problem

9@overclokk

Fonte immagine 10

2014

@overclokk

Fonte immagine 11

2016

2.5MB

@overclokk

the dream

12@overclokk

13@overclokk

14@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

18@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

21@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

K I S Skeep it simple stupid

25@overclokk

how do i do it ?

Fonte immagine 26@overclokk

Example

Fonte immagine 27

Let’s take a random plugin

@overclokk

28

Without WooCommerce

@overclokk

29

With WooCommerce

@overclokk

30

With WooCommerce

@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

34@overclokk

Tip { 3 }Solve problems … one at a time

35@overclokk

Tip { 4 }There is no single solution for all

problems!

36@overclokk

al clear so far?

?37@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

thank you! :-)

50@overclokk

any questions?

?51@overclokk

Enea OverclokkWordPress Lover

WordPress DeveloperWordPress Meetup Bologna

@overclokk

www.overclokk.netwww.italystrap.it

52@overclokk