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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WordPress Theme and Plugin Optimization - WordPress Arvika March '14

184
views

Published on

WordPress optimization tips for theme and plugin authors

WordPress optimization tips for theme and plugin authors

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
184
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

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!