WordPress Theme and Plugin Optimization

This Presentations Covers: • Optimization tips for WordPress developers releasing their work for free in ofﬁcial repositories or somewhere else ! • Optimization tips for WordPress developers selling themes or plugins on their own or through a marketplace 2

Why Page Loading Time Matters • Improved user experience • Higher conversion rates • SEO beneﬁts 3

Things That Can Slow You Down • Poor hosting • No caching • Non optimized content • Problems caused by theme or plugins 4

Underscores Very popular ThemeForest theme 5 Hello, Two Worlds!

Plugins Used in This Test • Akismet • BackWPUp • Captcha • Contact Form 7 • Google XML Sitemaps • Jetpack by WordPress.com • NextGEN Gallery by Photocrati • Ultimate TinyMCE • WooCommerce • WordPress SEO 6

Load time - WebPagetest.org, no caching Seconds 0 1.75 3.5 5.25 7 First load Second load 5.171 6.42 4.9455.159 2.5262.79 1.0741.042 Underscores, no plugins Underscores, plugins "TF theme", no plugins "TF theme", plugins 8

HTTP requests - WebPagetest.org, no caching Requests 0 22.5 45 67.5 90 First load Second load 7 89 7 62 4 34 1 7 Underscores, no plugins Underscores, plugins "TF theme", no plugins "TF theme", plugins 9

WebPagetest.org W3TC caching 10

Load time - WebPagetest.org, W3TC caching Seconds 0 1.25 2.5 3.75 5 First load Second load 4.033 4.908 3.247 3.791 1.196 1.476 0.389 0.596 Underscores, no plugins Underscores, plugins "TF theme", no plugins "TF theme", plugins 11

HTTP requests - WebPagetest.org, W3TC caching Requests 0 15 30 45 60 First load Second load 6 51 1 34 4 17 0 5 Underscores, no plugins Underscores, plugins "TF theme", no plugins "TF theme", plugins 12

Query Monitor Plugin No caching 13

Database queries - Query Monitor, no caching DBqueries 0 20 40 60 80 79 44 59 19 Underscores, no plugins Underscores, plugins "TF theme", no plugins "TF theme", plugins 14

Peak memory usage - Query Monitor, no caching MB 0 17.5 35 52.5 70 60.16 30.74 51.74 22.09 Underscores, no plugins Underscores, plugins "TF theme", no plugins "TF theme", plugins 15

Key Problems Caused by Themes and Plugins • Longer page generation time  Hello, Two Worlds! - 19 database queries with Underscores vs. 79 “fully loaded” • Too many HTTP requests  Hello, Two Worlds! - 3 JS and 1 CSS ﬁle with Underscores vs. 45 and 17 “fully loaded” • Buggy code 16

In House Optimization - Things to Keep in Mind • Use transients for expensive DB queries • Use transients for remote requests to external APIs • Do not load scripts and styles in every page 17

Transients API • Used to cache speciﬁc data that needs to be refreshed within a given timeframe • Uses object caching if available, otherwise stores values in options table • set_transient() and set_site_transient() • get_transient() and get_site_transient() • delete_transient() and delete_site_transient() 18

Real-life Example Caching 2014 header menu 19

wp_nav_menu( array(  'theme_location' => 'primary',  'menu_class' => 'nav-menu' )  ); ! 36 database queries in Hello, World! post 20

$header_menu_query = get_transient( 'my_theme_header_menu_query' );  if ( false === $header_menu_query ) {  $header_menu_query = wp_nav_menu( array(  'theme_location' => 'primary',  'menu_class' => 'nav-menu',  'echo' => 0  ) );  set_transient( 'my_theme_header_menu_query', $header_menu_query, DAY_IN_SECONDS );  }    echo $header_menu_query; ! 31 database queries in Hello, World! post 21

add_action( 'wp_update_nav_menu', 'my_theme_delete_menu_transients' );   function my_theme_delete_menu_transients() {  delete_transient( 'my_theme_header_menu_query' );  } 22

Real-life Example • When author box is added to single posts and pages automatically • When shortcode is used • When widget is used • When template tag is used Selectively loading scripts and styles in Fanciest Author Box 23

add_action( 'wp_enqueue_scripts', 'ts_fab_add_scripts_styles' );  function ts_fab_add_scripts_styles() {  $css_url = plugins_url( 'css/ts-fab.css', __FILE__ );  wp_register_style( 'ts_fab_css', $css_url, '', FAB_VERSION );    $js_url = plugins_url( 'js/ts-fab.js', __FILE__ );  wp_register_script( 'ts_fab_js', $js_url, array( 'jquery' ), FAB_VERSION );    if ( ts_fab_styles_needed() ) :  wp_enqueue_style( 'ts_fab_css' );  wp_enqueue_script( 'ts_fab_js' );  endif;  } 24

function ts_fab_styles_needed() {  // Use helper functions to get plugin settings  $ts_fab_display_settings = ts_fab_get_display_settings();    /* Posts */  if ( is_single() && 'no' != $ts_fab_display_settings['show_in_posts'] )  return true;    /* Pages */  if ( is_page() && 'no' != $ts_fab_display_settings['show_in_pages'] )  return true;    ...    /* Shortcode */  global $post;  if( is_singular() && has_shortcode( $post->post_content, 'ts_fab' ) )  return true;    /* Widget check is performed inside widget class */    return false;  } 25

Loading Scripts and Styles When Widget Is Used function __construct() {  $widget_ops = array(  'classname' => 'ts-fab-widget',  'description' => 'Fanciest Author Box ' . __( 'widget', 'ts-fab' )  );  parent::__construct( 'ts-fab-widget', 'Fanciest Author Box', $widget_ops );    if ( is_active_widget( false, false, $this->id_base ) ) :  add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_fab_styles' ) );  endif;  }    function enqueue_fab_styles() {  wp_enqueue_style( 'ts_fab_css' );  wp_enqueue_script( 'ts_fab_js' );  } 26

Conclusion • Use transients for caching • Make your plugins and themes do only what they really have to, only when they have to • Don’t eat cake while you’re running on a treadmill

http://slobodanmanic.com  @slobodanmanic      http://slbd.me/WPArvika Tack!

WordPress Theme and Plugin Optimization - WordPress Arvika March '14