WordPress optimization tips for theme and plugin authors

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!