For WordPress Sheffield: http://wpsheffield.com/

1. * (and to be completely honest... in anything)
Some simple tips
for front-end
performance in
WordPress*
Wednesday, 11 September 13

2. welcome. my name is:
Ian Parr
on Twitter:
@devolute
web:
devolute.net
i am a:
• Front-end web developer
• UX preacher
• Person
Wednesday, 11 September 13

3. Lets talk about being a
‘Front-end developer’
Wednesday, 11 September 13

4. Lets talk about being a
‘Front-end developer’
• 43% developer, 39% design, 47% i dunno lol x
Wednesday, 11 September 13

5. Lets talk about being a
‘Front-end developer’
• 43% developer, 39% design, 47% i dunno lol x
• Making things pretty.
Wednesday, 11 September 13

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

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

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

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

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

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

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

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

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

15. Lets make things faster
{demo!}
Wednesday, 11 September 13

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

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

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

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

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

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

22. Wednesday, 11 September 13

23. Wednesday, 11 September 13

24. How do improve
performance in WordPress?
Wednesday, 11 September 13

25. How do improve
performance in WordPress?
We want to:
Wednesday, 11 September 13

26. How do improve
performance in WordPress?
We want to:
• Limit the number of requests.
Wednesday, 11 September 13

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

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

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

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

31. 42.1kb - 9.3kb
=
200 Megabytes*
Wednesday, 11 September 13

32. 42.1kb - 9.3kb
=
200 Megabytes*
* after 6380 visitors
Wednesday, 11 September 13

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

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

35. Wednesday, 11 September 13

36. How do we combine
CSS/JS files?
Wednesday, 11 September 13

37. How do we combine
CSS/JS files?
• Write CSS properly.
Wednesday, 11 September 13

38. How do we combine
CSS/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

39. How do we combine
CSS/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

40. How do we combine
CSS/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

41. How do we combine
CSS/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

42. We can use a plug-in
Wednesday, 11 September 13

43. Wednesday, 11 September 13

44. My workshop
• Performance
• RWD process
• Lots of other stuff
• £30 off! - code: MrParr30
http://makedo.in/practical-frontend-development/
Wednesday, 11 September 13