wordpress theme and plugin optimization - wordpress arvika march '14

WordPress Theme and Plugin Optimization

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

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

• NextGEN Gallery by Photocrati

• Ultimate TinyMCE

• WooCommerce

• WordPress SEO

�6

WebPagetest.orgNo caching

�7

Load time - WebPagetest.org, no caching

Seco

nds

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

Requ

ests

0

22.5

45

67.5

90

First load Second load

7

89

7

62

4

34

17

Underscores, no plugins Underscores, plugins "TF theme", no plugins "TF theme", plugins

�9

WebPagetest.orgW3TC caching

�10

Load time - WebPagetest.org, W3TC caching

Seco

nds

0

1.25

2.5

3.75

5

First load Second load

4.033

4.908

3.2473.791

1.1961.476

0.3890.596

Underscores, no plugins Underscores, plugins "TF theme", no plugins "TF theme", plugins

�11

HTTP requests - WebPagetest.org, W3TC caching

Requ

ests

0

15

30

45

60

First load Second load

6

51

1

34

4

17

05

Underscores, no plugins Underscores, plugins "TF theme", no plugins "TF theme", plugins

�12

Query Monitor PluginNo caching

�13

Database queries - Query Monitor, no caching

DB q

uerie

s

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

7060.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 file 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 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

Real-life ExampleCaching 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!