1.
Does This Theme
Make My Website
Look Fat?

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

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

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

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

6.
What’s going on
behind the scenes

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

8.
device ≠ connection speed

9.
Constraints

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

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

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

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

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

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

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

17.
Get ready for your
weigh in

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

19.
Let’s do some
tests

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

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

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

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

24.
Now what?

25.
let’s target some common
issues

26.
Scenario 1:
Large Images

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

28.
Scenario 2:
Lots of images

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

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

31.
Scenario 3:
Loads of assets

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

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

34.
Scenario 4:
Huge Webfonts

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

36.
Scenario 4:
JS in header

37.
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);?>
?>

38.
Scenario 5:
Lots of CSS & JS

39.
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');
}

40.
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' );
}
}

41.
Scenario 6:
Slow mobile
rendering

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

43.
browserscope.org

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

45.
and yes…
Add Caching,
Minify & Gzip

46.
any questions?

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