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


Lets talk about being a ‘Front-end developer’



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



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



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



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



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



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



• 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!)



• 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.


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.


• Your customers might viewing your website on public transport.

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

• Low performance = battery strain.


• Your customers might viewing your website on public transport.

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

• Low performance = battery strain.


Lets make things faster

{demo!}


I think we know who’s responsible

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



1. I can't help you!




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




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

WordPress




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.



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




How do improve performance in WordPress?



We want to:



We want to:• Limit the number of requests.




• DNS requests are ‘expensive’ in performance terms.




• DNS requests are ‘expensive’ in performance terms.

• Reduce the size of those requests.


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.


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?


42.1kb - 9.3kb=

200 Megabytes*


42.1kb - 9.3kb=

200 Megabytes*

* after 6380 visitors


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.


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.



How do we combineCSS/JS files?



• Write CSS properly.



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




• Pre-processors can help




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




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

• Also...


We can use a plug-in



My workshop

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

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




Technology

Some simple tips for front-end performance in WordPress