• Like
  • Save
Some simple tips for front-end performance in WordPress
Upcoming SlideShare
Loading in...5
×
 

Some simple tips for front-end performance in WordPress

on

  • 283 views

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

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

Statistics

Views

Total Views
283
Views on SlideShare
275
Embed Views
8

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 8

http://lanyrd.com 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Some simple tips for front-end performance in WordPress Some simple tips for front-end performance in WordPress Presentation Transcript

    • * (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 Parr on 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 combine CSS/JS files? Wednesday, 11 September 13
    • How do we combine CSS/JS files? • Write CSS properly. Wednesday, 11 September 13
    • 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
    • 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
    • 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
    • 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
    • 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