Post on 27-Jan-2015
description
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!