WordPress Theme and Plugin Optimization - WordPress Arvika March '14

63 %
38 %
Information about WordPress Theme and Plugin Optimization - WordPress Arvika March '14
Technology

Published on March 18, 2014

Author: slobodanmanic

Source: slideshare.net

Description

WordPress optimization tips for theme and plugin authors

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.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.0741.042 Underscores, no plugins Underscores, plugins "TF theme", no plugins "TF theme", plugins 8

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

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.476 0.389 0.596 Underscores, no plugins Underscores, plugins "TF theme", no plugins "TF theme", plugins 11

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

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, plugins "TF theme", no plugins "TF theme", plugins 14

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

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 Example Caching 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!

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

WordPress › WP-Optimize « WordPress Plugins

Themes; Plugins. Mobile; Support. Forums ... clean up your WordPress database and optimize it without ... extensive WordPress database cleanup and ...
Read more

WordPress › Yoast SEO « WordPress Plugins

... for the Yoast SEO plugin on the WordPress ... WordPress Search Engine Optimization. ... another SEO plugin to Yoast SEO or from a theme like ...
Read more

10 Best Image Optimization Plugins to Speed Up Your ...

What are you top optimization plugins? ... Details Adaptive Image Optimization For Responsive WordPress Themes; ... July 14, 2014, ...
Read more

Wordpress Performance Optimization - speed optimize ...

Use a Wordpress Caching Plugin. ... Case Study: WordPress Theme Optimization ... Last modified: March 06, 2015.
Read more

Search Engine Optimization for WordPress « WordPress Codex

Most WordPress Themes are designed with the ... KB Robots.txt plugin for WordPress (Last updated 2007-8-14, ... Wordpress search engine optimization ...
Read more

SEO WP — Social Media and Digital Marketing Agency ...

Flexible WordPress theme specially designed for Digital Marketing Agencies, SEO companies, Social Media specialists and their clients. Fully customizable ...
Read more

CarPress - WordPress Theme For Mechanic Workshops ...

CarPress is premium Wordpress Theme for mechanic workshops, ... Popular WordPress Plugins Supported. ... 6 March 14 Last ...
Read more

50+ WordPress SEO Plugins | CodeCanyon

Browse new and popular WordPress SEO plugins. ... search engine optimization 4. seo wordpress plugin 4. ... use themes and plugins, ...
Read more

Dev4Press | Premium Plugins and Themes for WordPress

WordPress Themes Remake your website the right way. Feature packed themes with clean and modern fully responsive design with mobile first ... WordPress Plugins
Read more