Some simple tips for front-end performance in WordPress

* (and to be completely honest... in anything)

Some simple tips for front-end performance in WordPress*

Wednesday, 11 September 13

welcome. my name is:

Ian Parron Twitter:

@devolute

web:

devolute.net

i am a:

• Front-end web developer• UX preacher• Person

Wednesday, 11 September 13

Lets talk about being a ‘Front-end developer’

Wednesday, 11 September 13

Lets talk about being a ‘Front-end developer’

• 43% developer, 39% design, 47% i dunno lol x

Wednesday, 11 September 13

Lets talk about being a ‘Front-end developer’

• 43% developer, 39% design, 47% i dunno lol x• Making things pretty.

Wednesday, 11 September 13

Lets talk about being a ‘Front-end developer’

• 43% developer, 39% design, 47% i dunno lol x• Making things pretty.• UX.

Wednesday, 11 September 13

Lets talk about being a ‘Front-end developer’

• 43% developer, 39% design, 47% i dunno lol x• Making things pretty.• UX.• Accessibility.

Wednesday, 11 September 13

Lets talk about being a ‘Front-end developer’

• 43% developer, 39% design, 47% i dunno lol x• Making things pretty.• UX.• Accessibility.• SEO issues.

Wednesday, 11 September 13

Lets talk about being a ‘Front-end developer’

• 43% developer, 39% design, 47% i dunno lol x• Making things pretty.• UX.• Accessibility.• SEO issues.• Maintenance and 'updatability'.

Wednesday, 11 September 13

Lets talk about being a ‘Front-end developer’

• 43% developer, 39% design, 47% i dunno lol x• Making things pretty.• UX.• Accessibility.• SEO issues.• Maintenance and 'updatability'.• Often do end-to-end work (Cheers WordPress!)

Wednesday, 11 September 13

Lets talk about being a ‘Front-end developer’

• 43% developer, 39% design, 47% i dunno lol x• Making things pretty.• UX.• Accessibility.• SEO issues.• Maintenance and 'updatability'.• Often do end-to-end work (Cheers WordPress!)• Performance and speed.

Wednesday, 11 September 13

Why is speed so important?

• Mobile is a big deal™• We can't guarantee the quality of their

connection. • We have no idea where they’re coming from.

Wednesday, 11 September 13

• Your customers might viewing your website on public transport.

• Even connections in the middle of a city can be awful.

• Low performance = battery strain.

Wednesday, 11 September 13

• Your customers might viewing your website on public transport.

• Even connections in the middle of a city can be awful.

• Low performance = battery strain.

Wednesday, 11 September 13

Lets make things faster

{demo!}

Wednesday, 11 September 13

I think we know who’s responsible

• It’s all in the front-end!• If it was a back-end problem then:

Wednesday, 11 September 13

I think we know who’s responsible

1. I can't help you!

• It’s all in the front-end!• If it was a back-end problem then:

Wednesday, 11 September 13

I think we know who’s responsible

1. I can't help you!2. Install a caching plug-in *

• It’s all in the front-end!• If it was a back-end problem then:

Wednesday, 11 September 13

I think we know who’s responsible

1. I can't help you!2. Install a caching plug-in *3. Talk to Tim about back-end performance in

WordPress

• It’s all in the front-end!• If it was a back-end problem then:

Wednesday, 11 September 13

I think we know who’s responsible

1. I can't help you!2. Install a caching plug-in *3. Talk to Tim about back-end performance in

WordPress* He'll probably tell you not to install a caching plug-in.

• It’s all in the front-end!• If it was a back-end problem then:

Wednesday, 11 September 13

As a Front-end developer the buck stops here

• Most performance problems are in the front-end.• How do we judge success?• We need some numbers to help us along:

• Google Insights Pagespeed• Webpagetest.org

Wednesday, 11 September 13

Wednesday, 11 September 13

Wednesday, 11 September 13

How do improve performance in WordPress?

Wednesday, 11 September 13

How do improve performance in WordPress?

We want to:

Wednesday, 11 September 13

How do improve performance in WordPress?

We want to:• Limit the number of requests.

Wednesday, 11 September 13

How do improve performance in WordPress?

We want to:• Limit the number of requests.

• DNS requests are ‘expensive’ in performance terms.

Wednesday, 11 September 13

How do improve performance in WordPress?

We want to:• Limit the number of requests.

• DNS requests are ‘expensive’ in performance terms.

• Reduce the size of those requests.

Wednesday, 11 September 13

Kill plug-ins

• They bring in so much of their own CSS and JS separately.

• This often means more requests, even if you’re not using them.

• I have a rant about plug-ins.• We don’t have time for it.

Wednesday, 11 September 13

G-Zip

• Files compressed, so less data sent.• Can be achieved by .htaccess tricks• Take care. It’s easy to kill everyone

with .htaccess.<ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/ html text/plain text/xml text/css application/x-javascript application/javascript image/svg+xml</ifmodule>

• What difference does this make?

Wednesday, 11 September 13

42.1kb - 9.3kb=

200 Megabytes*

Wednesday, 11 September 13

42.1kb - 9.3kb=

200 Megabytes*

* after 6380 visitors

Wednesday, 11 September 13

Minify

• Minifying makes CSS/JS smaller by removing whitespace.

• Smaller file = quicker download.• I used 'Smaller' on the Mac for CSS/JS.• There exist a load of different tools and

workflows to do this via CLI.

Wednesday, 11 September 13

Lower number of requests by grouping CSS/JS files

• In my opinion WordPress makes life harder than other CMS's.

• This is one of the reasons I hate WordPress.

Wednesday, 11 September 13

Wednesday, 11 September 13

How do we combineCSS/JS files?

Wednesday, 11 September 13

How do we combineCSS/JS files?

• Write CSS properly.

Wednesday, 11 September 13

How do we combineCSS/JS files?

• Write CSS properly.• i.e. not spread out all over the place in a big mess (more on this later).

Wednesday, 11 September 13

How do we combineCSS/JS files?

• Write CSS properly.• i.e. not spread out all over the place in a big mess (more on this later).

• Pre-processors can help

Wednesday, 11 September 13

How do we combineCSS/JS files?

• Write CSS properly.• i.e. not spread out all over the place in a big mess (more on this later).

• Pre-processors can help• I don't have time for this here!

Wednesday, 11 September 13

How do we combineCSS/JS files?

• Write CSS properly.• i.e. not spread out all over the place in a big mess (more on this later).

• Pre-processors can help• I don't have time for this here!

• Also...

Wednesday, 11 September 13

We can use a plug-in

Wednesday, 11 September 13

Wednesday, 11 September 13

My workshop

• Performance• RWD process• Lots of other stuff• £30 off! - code: MrParr30

http://makedo.in/practical-frontend-development/

Wednesday, 11 September 13