Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)

1,387 views

Published on

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/)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,387
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)

  1. 1. Does This Theme Make My Website Look Fat?
  2. 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. 3. 0 kB 400 kB 800 kB 1,200 kB 1,600 kB 2010 2011 2012 2013 125% increase it’s getting worse
  4. 4. and responsive web design doesn’t make it better
  5. 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. 6. What’s going on behind the scenes
  7. 7. Browser & Device The Internet how the Internet works (basically) End-User Network Webhost Network Web server Cell Radio DNS
  8. 8. device ≠ connection speed
  9. 9. Constraints
  10. 10. Browser/Device • Connections per hostname • Max connections • Cache size • Processor, underpowered to run JS, CSS • Cell Radio
  11. 11. Network & Internet • File sizes • 3G/4G Slowness • Latency, TCP slow start, congestion control • DNS
  12. 12. Servers • Proximity to request • Load & capacity • Configuration
  13. 13. Application • Wordpress core • Theme files • Plugin quality (not quantity!)
  14. 14. Database • Proximity to server • Load & capacity • Configuration
  15. 15. Browser & Device The Internet how the Internet works (basically) End-User Network Webhost Network Web server Cell Radio DNS
  16. 16. What does all this have to do with Wordpress?
  17. 17. Get ready for your weigh in
  18. 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. 19. Let’s do some tests
  20. 20. • YSlow • Google PageSpeed • Webpagetest • GTmetrix combines both YSlow & PageSpeed • Plugin: GTmetrix for Wordpress • others at siteloadtest.com Front-end
  21. 21. • Plugins: • Databases: Debug Bar, Debug Objects for Databases • Themes: Theme Check • Plugins: Plugin Performance Profiler (!) Wordpress
  22. 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. 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. 24. Now what?
  25. 25. let’s target some common issues
  26. 26. Scenario 1: Large Images
  27. 27. Optimize • Before upload: • ImageOptim (Mac), Jpegmini (Windows), Trimage (Linux) • TinyPNG, PNGGauntlet • After upload: • WP Smush.it (!) • EWWW Image Optimizer • WP Minify
  28. 28. Scenario 2: Lots of images
  29. 29. CSS Sprites • combine image files • wearekiss.com/spritepad • css.spritegen.com • www.spritecow.com • spritegen.website-performance.org • csssprites.com
  30. 30. Replace • Webfonts • free: Google Fonts, FontSquirrel • paid: FontSpring, Myfonts, Typekit • Icon Webfonts • Font Awesome • ShiftIcons • IcoMoon
  31. 31. Scenario 3: Loads of assets
  32. 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. 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. 34. Scenario 4: Huge Webfonts
  35. 35. Reduce your fontset • Googlefonts give you the full set of characters, including multi-lingual • FontSquirrel Generator
  36. 36. Scenario 4: JS in header
  37. 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. 38. Scenario 5: Lots of CSS & JS
  39. 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. 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. 41. Scenario 6: Slow mobile rendering
  42. 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. 43. browserscope.org
  44. 44. Understand devices • Processor constraints • Use CSS3 elements sparingly, particularly drop- shadow • DOM rendering issues
  45. 45. and yes… Add Caching, Minify & Gzip
  46. 46. any questions?
  47. 47. for Happier Visitors and Stickier User Experiences Adam Dunford adam@steepleashton.com

×