WordPress Theme and Plugin Optimization - WordPress Arvika March '14
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

WordPress Theme and Plugin Optimization - WordPress Arvika March '14

  • 281 views
Uploaded on

WordPress optimization tips for theme and plugin authors

WordPress optimization tips for theme and plugin authors

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
281
On Slideshare
280
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 1

http://www.slideee.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WordPress Theme and Plugin Optimization
  • 2. This Presentations Covers: • Optimization tips for WordPress developers releasing their work for free in official repositories or somewhere else ! • Optimization tips for WordPress developers selling themes or plugins on their own or through a marketplace 2
  • 3. Why Page Loading Time Matters • Improved user experience • Higher conversion rates • SEO benefits 3
  • 4. Things That Can Slow You Down • Poor hosting • No caching • Non optimized content • Problems caused by theme or plugins 4
  • 5. Underscores Very popular ThemeForest theme 5 Hello, Two Worlds!
  • 6. 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
  • 7. WebPagetest.org No caching 7
  • 8. 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
  • 9. 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
  • 10. WebPagetest.org W3TC caching 10
  • 11. 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
  • 12. 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
  • 13. Query Monitor Plugin No caching 13
  • 14. 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
  • 15. 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
  • 16. 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 file with Underscores vs. 45 and 17 “fully loaded” • Buggy code 16
  • 17. 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
  • 18. Transients API • Used to cache specific 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
  • 19. Real-life Example Caching 2014 header menu 19
  • 20. wp_nav_menu( array(
 'theme_location' => 'primary',
 'menu_class' => 'nav-menu' )
 ); ! 36 database queries in Hello, World! post 20
  • 21. $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
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. http://slobodanmanic.com
 @slobodanmanic
 
 
 http://slbd.me/WPArvika Tack!