Please Enqueue Responsibly

Ethan Clevenger

A bit about me

beerPilgrimage
ethanclevenger.com
ethanclevenger91
@ethanclevenger
eclev91

"Beginner"

  • Internet - self-taught, chasm of best-practices
  • Talking about "basics" at WordCamp
  • Everyone's a beginner at something
  • Consider the requirements of your project
  • Don't do something because I said so

Your site should be fast.

  • Bounce at 4-ish seconds, at mercy of computer between 1 and 10
  • Speed analyzers red
  • All content loaded - not TTFB
*https://www.nngroup.com/articles/website-response-times/

Requests

  • Any time a site gets a resource from a server
  • FIFO, HOL-blocking
  • Images are a lost cause

wp_enqueue_script, wp_enqueue_style

  • Alert WordPress to scripts and styles your site will require
  • Dependency management







					

class Plz {
	function __construct() {
		add_action('wp_enqueue_scripts', [$this, 'wp_enqueue_scripts']);
	}

	function wp_enqueue_scripts() {
		wp_enqueue_script(
			'google-maps',
			'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap'
		);
		wp_enqueue_script(
			'theme-scripts',
			get_template_directory_uri() .'/js/scripts.js',
			['jquery'],
			filemtime(get_template_directory().'/js/scripts.js'),
			true
		);
		wp_enqueue_style(
			'theme-styles',
			get_template_directory_uri() . '/style.css',
			false,
			filemtime(get_template_directory().'/style.css')
		);
		wp_enqueue_style('dashicons');
	}
}
$plz = new Plz();

					

wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, false, true );
					

Enqueueing in Plugins

  • wp_enqueue_script is indiscriminate
  • wp_register_script
  • Enqueue at entry point

Demo Time

Clean up Contact Form 7 Scripts and Styles

Level 2

Optimization

CSS Preprocessors

Level 3

Task Runners

  • Gulp
  • Grunt

What else can gulp do?

  • Spritesheets
  • Prune CSS
  • Optimize images
  • JavaScript

CDN vs Self-hosted

CDN Advantages

  • Server potentially closer to the user
  • Potential pre-cache
  • One less request in your server's pipeline
  • Generally, high uptime

CDN disadvantages

  • Uptime? Who cares?
  • I'm lazy and upgrade-happy
  • No CSS optimization
  • Giving up control
  • $

In Review

  • Enqueue your requests, and enqueue them conditionally
  • Make fewer requests
  • Optimize your resources
  • Task runners are your friend
  • Consider a CDN