WordPress Theme and Plugin Optimization
This Presentations Covers:
• Optimization tips for WordPress developers releasing
their work for free in official repositor...
Why Page Loading Time Matters
• Improved user experience
• Higher conversion rates
• SEO benefits
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...
WebPagetest.org
No caching
7
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...
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
Underscor...
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...
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...
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, plug...
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 Undersc...
Key Problems Caused by Themes and
Plugins
• Longer page generation time

Hello, Two Worlds! - 19 database queries with Und...
In House Optimization - Things to Keep
in Mind
• Use transients for expensive DB queries
• Use transients for remote reque...
Transients API
• Used to cache specific data that needs to be refreshed within a given
timeframe
• Uses object caching if a...
Real-life Example
Caching 2014 header menu
19
wp_nav_menu( array(

'theme_location' => 'primary',

'menu_class' => 'nav-menu' )

);
!
36 database queries in Hello, Worl...
$header_menu_query = get_transient( 'my_theme_header_menu_query' );

if ( false === $header_menu_query ) {

$header_menu_q...
add_action( 'wp_update_nav_menu', 'my_theme_delete_menu_transients' ); 

function my_theme_delete_menu_transients() {

del...
Real-life Example
• When author box is added to single posts
and pages automatically
• When shortcode is used
• When widge...
add_action( 'wp_enqueue_scripts', 'ts_fab_add_scripts_styles' );

function ts_fab_add_scripts_styles() {

$css_url = plugi...
function ts_fab_styles_needed() {

// Use helper functions to get plugin settings

$ts_fab_display_settings = ts_fab_get_d...
Loading Scripts and Styles When
Widget Is Used
function __construct() {

$widget_ops = array(

'classname' => 'ts-fab-widg...
Conclusion
• Use transients for caching
• Make your plugins and themes do only what they really have to, only when
they ha...
http://slobodanmanic.com

@slobodanmanic





http://slbd.me/WPArvika
Tack!
Upcoming SlideShare
Loading in …5
×

WordPress Theme and Plugin Optimization - WordPress Arvika March '14

605 views

Published on

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
605
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WordPress Theme and Plugin Optimization - WordPress Arvika March '14

  1. 1. WordPress Theme and Plugin Optimization
  2. 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. 3. Why Page Loading Time Matters • Improved user experience • Higher conversion rates • SEO benefits 3
  4. 4. Things That Can Slow You Down • Poor hosting • No caching • Non optimized content • Problems caused by theme or plugins 4
  5. 5. Underscores Very popular ThemeForest theme 5 Hello, Two Worlds!
  6. 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. 7. WebPagetest.org No caching 7
  8. 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. 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. 10. WebPagetest.org W3TC caching 10
  11. 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. 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. 13. Query Monitor Plugin No caching 13
  14. 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. 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. 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. 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. 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. 19. Real-life Example Caching 2014 header menu 19
  20. 20. wp_nav_menu( array(
 'theme_location' => 'primary',
 'menu_class' => 'nav-menu' )
 ); ! 36 database queries in Hello, World! post 20
  21. 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. 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. 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. 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. 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. 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. 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. 28. http://slobodanmanic.com
 @slobodanmanic
 
 
 http://slbd.me/WPArvika Tack!

×