Embed Size (px)
DESCRIPTION
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/)
Citation preview
Does This Theme Make My Website
Look Fat?
0 kB
250 kB
500 kB
750 kB
1,000 kB
Ima!es Scripts Flash HTML Stylesheets Other
total: 1585 kB
Avera!e Bytes Per Pa!e
0 kB
400 kB
800 kB
1,200 kB
1,600 kB
2010 2011 2012 2013
125% increase
it’s !ettin! worse
and responsive web desi!n doesn’t make it better
8
MOBILE ONLY?
US: 25%NEVER/INFREQUENT
DESKTOP USE
UK: 22%NEVER/INFREQUENT
DESKTOP USEAsia: 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/!/entry.asp?1391
KENYA: M-PESA17% of GDP
54% of adults
What’s !oin! on behind the scenes
Browser & Device
The Internet
how the Internet works(basically)
End-User Network
Webhost Network
Web server
Cell Radio
DNS
device " connection speed
Browser/Device• Connections per hostname• Max connections• Cache size• Processor, underpowered to run JS, CSS• Cell Radio
Network & Internet• File sizes• 3G/4G Slowness• Latency, TCP slow start, con!estion control• DNS
Servers• Proximity to request• Load & capacity• Confi!uration
Application• Wordpress core• Theme files• Plu!in quality (not quantity!)
Database• Proximity to server• Load & capacity• Confi!uration
Browser & Device
The Internet
how the Internet works(basically)
End-User Network
Webhost Network
Web server
Cell Radio
DNS
Whatdoes all this have to do
with Wordpress?
Get ready for your wei!h in
Sprin! Cleanin!• Remove plu!ins and themes you don’t use• Delete unattached ima!es in Media Library• Optimize the database• Clean out old revisions• Remove references to inactive plu!ins or
themes• Plu!in: WP Clean Up
Let’s do some tests
• YSlow• Goo!le Pa!eSpeed• Webpa!etest• GTmetrix combines both YSlow & Pa!eSpeed
• Plu!in: GTmetrix for Wordpress• others at siteloadtest.com
Front-end
• Plu!ins:• Databases: Debu! Bar, Debu! Objects for
Databases• Themes: Theme Check• Plu!ins: Plu!in Performance Profiler (!)
Wordpress
• Are most site visitors new or returnin!?• International or domestic?• Usin! mobile browsers or desktop browsers?• Which browser versions are they usin!?
Analytics
• DOM Node Count (via Chrome Developer Tools Timeline)
• CSS Stress Test bookmarklet• CSS Audits
• Firefox add-ons - Dust-Me Selectors & CSS Usa!e• Chrome Developer Tools Audits• Unused-CSS.com
Advanced Testin!
let’s tar!et some common issues
Scenario 1:Lar!e Ima!es
Optimize• Before upload:
• Ima!eOptim (Mac), Jpe!mini (Windows), Trima!e (Linux)
• TinyPNG, PNGGauntlet• After upload:
• WP Smush.it (!)• EWWW Ima!e Optimizer• WP Minify
Scenario 2:Lots of ima!es
CSS Sprites• combine ima!e files• wearekiss.com/spritepad• css.sprite!en.com• www.spritecow.com• sprite!en.website-performance.or!• csssprites.com
Replace• Webfonts
• free: Goo!le Fonts, FontSquirrel• paid: FontSprin!, Myfonts, Typekit
• Icon Webfonts• Font Awesome• ShiftIcons• IcoMoon
Scenario 3:Loads of assets
Poor Man’s CDN• Add a subdomain to your site• Chan!e where your media files point
(Settin!s > Uploadin! Files)• upload path to “/home/www/public_html/assets”• upload_url_path to “http://assets.domain.com”• Plu!in: Upload Url and Path Enabler
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 chan!e Goo!le Analytics
Scenario 4:Hu!e Webfonts
Reduce your fontset• Goo!lefonts !ive you the full set of
characters, includin! multi-lin!ual• FontSquirrel Generator
Scenario 4:JS in header
Move it to the bottom<?php//First remove all JS loaded in the head sectionremove_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 templateadd_action('wp_footer', 'wp_print_scripts', 1);add_action('wp_footer', 'wp_enqueue_scripts', 1);add_action('wp_footer', 'wp_print_head_scripts', 1);?>?>
Scenario 5:Lots of CSS & JS
Dequeue what you don’tfunction 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');}
Selectively enableadd_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' ); }}
Scenario 6:Slow mobile
renderin!
Understand browsers• cache size is smaller, meanin! 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 o"
browserscope.or!
Understand devices• Processor constraints
• Use CSS3 elements sparin!ly, particularly drop-shadow
• DOM renderin! issues
and yes…Add Cachin!, Minify & Gzip
any questions?
