While the principles of responsive web design can make sites look better on mobile devices, they don’t necessarily load faster than a site designed for desktops. And as more and more sophisticated WordPress themes emerge, with their multiple options and fancy sliders, websites just keep getting more and more bloated. This presentation will help cut out the junk that’s larding up your sites so you can better meet the demand of users wanting fast-loading user experiences–no matter the device or connection. Presented at WordCamp Salt Lake City 2013 (http://2013.slc.wordcamp.org/)

1. Does This Theme
Make My Website
Look Fat?

3. 0 kB
250 kB
500 kB
750 kB
1,000 kB
Images Scripts Flash HTML Stylesheets Other
total: 1585 kB
Average Bytes Per Page

4. 0 kB
400 kB
800 kB
1,200 kB
1,600 kB
2010 2011 2012 2013
125% increase
it’s getting worse

5. and responsive web design
doesn’t make it better

8. 8
MOBILE ONLY?
US: 25%
NEVER/INFREQUENT
DESKTOP USE
UK: 22%
NEVER/INFREQUENT
DESKTOP USE
Asia: 50+%
DON’T USE INTERNET ON PC
Africa: 50+%
DON’T USE INTERNET ON PC
India: 49%
NEVER/INFREQUENT
DESKTOP USE
US: 50+%
MORE MOBILE THAN PC
BY 2015
Source: http://www.lukew.com/ff/entry.asp?1391
KENYA: M-PESA
17% of GDP
54% of adults

9. What’s going on
behind the scenes

11. Browser &
Device
The
Internet
how the Internet works
(basically)
End-User
Network
Webhost
Network
Web
server
Cell Radio
DNS

12. device ≠ connection speed

13. Constraints

15. Browser/Device
• Connections per hostname
• Max connections
• Cache size
• Processor, underpowered to run JS, CSS
• Cell Radio

16. Network & Internet
• File sizes
• 3G/4G Slowness
• Latency, TCP slow start, congestion control
• DNS

17. Servers
• Proximity to request
• Load & capacity
• Configuration

18. Application
• Wordpress core
• Theme files
• Plugin quality (not quantity!)

19. Database
• Proximity to server
• Load & capacity
• Configuration

20. Browser &
Device
The
Internet
how the Internet works
(basically)
End-User
Network
Webhost
Network
Web
server
Cell Radio
DNS

21. What
does all this have to do
with Wordpress?

22. Get ready for your
weigh in

24. Spring Cleaning
• Remove plugins and themes you don’t use
• Delete unattached images in Media Library
• Optimize the database
• Clean out old revisions
• Remove references to inactive plugins or
themes
• Plugin: WP Clean Up

25. Let’s do some
tests

27. • YSlow
• Google PageSpeed
• Webpagetest
• GTmetrix combines both YSlow & PageSpeed
• Plugin: GTmetrix for Wordpress
• others at siteloadtest.com
Front-end

28. • Plugins:
• Databases: Debug Bar, Debug Objects for
Databases
• Themes: Theme Check
• Plugins: Plugin Performance Profiler (!)
Wordpress

29. • Are most site visitors new or returning?
• International or domestic?
• Using mobile browsers or desktop browsers?
• Which browser versions are they using?
Analytics

30. • DOM Node Count (via Chrome Developer
Tools Timeline)
• CSS Stress Test bookmarklet
• CSS Audits
• Firefox add-ons - Dust-Me Selectors & CSS Usage
• Chrome Developer Tools Audits
• Unused-CSS.com
Advanced Testing

34. Now what?

36. let’s target some common
issues

37. Scenario 1:
Large Images

39. Optimize
• Before upload:
• ImageOptim (Mac), Jpegmini (Windows), Trimage
(Linux)
• TinyPNG, PNGGauntlet
• After upload:
• WP Smush.it (!)
• EWWW Image Optimizer
• WP Minify

40. Scenario 2:
Lots of images

42. CSS Sprites
• combine image files
• wearekiss.com/spritepad
• css.spritegen.com
• www.spritecow.com
• spritegen.website-performance.org
• csssprites.com

43. Replace
• Webfonts
• free: Google Fonts, FontSquirrel
• paid: FontSpring, Myfonts, Typekit
• Icon Webfonts
• Font Awesome
• ShiftIcons
• IcoMoon

44. Scenario 3:
Loads of assets

46. Poor Man’s CDN
• Add a subdomain to your site
• Change where your media files point
(Settings > Uploading Files)
• upload path to “/home/www/public_html/assets”
• upload_url_path to “http://assets.domain.com”
• Plugin: Upload Url and Path Enabler

47. Poor Man’s CDN caveats
• Only works when you have www subdomain
• Make sure it’s cookie-free
• wp-config: define("COOKIE_DOMAIN",
'www.domain.com');
• May also need to change Google Analytics

48. Scenario 4:
Huge Webfonts

50. Reduce your fontset
• Googlefonts give you the full set of
characters, including multi-lingual
• FontSquirrel Generator

51. Scenario 4:
JS in header

53. Move it to the bottom
<?php
//First remove all JS loaded in the head section
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
//Load JS at the footer of the template
add_action('wp_footer', 'wp_print_scripts', 1);
add_action('wp_footer', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_head_scripts', 1);?>
?>

54. Scenario 5:
Lots of CSS & JS

57. Dequeue what you don’t
function swk_remove_scripts() {
! wp_dequeue_script('custom_js');
! wp_dequeue_script('chirp_js');
! wp_dequeue_script('fitvid_js');
! wp_deregister_script('chirp_js');
! wp_deregister_script('fitvid_js');
}
add_action('wp_enqueue_scripts', 'swk_remove_scripts', 500);
function swk_remove_styles() {
! wp_deregister_style('media_queries_css');
! wp_deregister_style('google_merriweather');
}

58. Selectively enable
add_action('wp_print_scripts', 'deregister_cf7_javascript',
100);
function deregister_cf7_javascript() {
if (!is_page(array(8,10))) {
wp_deregister_script('contact-form-7');
wp_dequeue_script('contact-form-7');
}
}
add_action('wp_print_styles', 'deregister_cf7_styles', 100);
function deregister_cf7_styles() {
if (!is_page(array(8,10))) {
wp_deregister_style( 'contact-form-7' );
wp_dequeue_style( 'contact-form-7' );
}
}

59. Scenario 6:
Slow mobile
rendering

61. Understand browsers
• cache size is smaller, meaning it can't store as
many files in memory
• maximum size of file that can be cached is
also smaller
• fewer parallel connections
• cell radio turns on and off

62. browserscope.org

63. Understand devices
• Processor constraints
• Use CSS3 elements sparingly, particularly drop-
shadow
• DOM rendering issues

64. and yes…
Add Caching,
Minify & Gzip

68. any questions?

69. for Happier Visitors and Stickier User Experiences
Adam Dunford
adam@steepleashton.com