Optimization, speed, performance and mobile considerations

ever used gmetrix to test your performance and got F/F ? I can show you how to get A/A !

scaled images

They are telling you to offer different sized content for different size viewports. If your serving an image 2048×2048 and use “responsive” techniques to squish it into a 200×200 container, what do you think is happening? You’re still sending a massive image, and stuffing it into the browser! With the srcset attribute of the image tag we can now send alternative content sizes and hence appropriately sized files.

As of version 4.4, WordPress can do this automatically for us! First things first, customize image sizes for your theme (BEFORE IMAGES ARE UPLOADED… otherwise you’ll need replace images plugin). This isn’t mandatory but it will help you offer appropriately sized content.

In order for WordPress to generate the srcset and size attributes for images in the_content, it must have a class associated with it indicating the image attachment id (wp-image-{ATTACHMENT_ID}), as on this page, ‘wp-image-790’. This is automatically attached to the image when it is inserted via the editor.

WordPress uses the_content() function with filter to find image tags and add the srcset attribute

Now! because we’re smart and use bootstrap, we NOW add class “img-fluid” in order to stuff our content into an appropriate container 🙂

see:

wp_img_tag_add_srcset_and_sizes_attr()

wp_image_add_srcset_and_sizes()

defer javascript parsing

an example:

function add_defer_to_script( $tag, $handle, $source ) {
    if( in_array($handle, ['jquery','have_heart_scripts','frontend_custom_jq','code-prettify','popper','bootstrap_js','wp-embed','wp-subscribe'], true ) ) {
        $tag = '';
    }

    return $tag;
}add_filter( 'script_loader_tag', 'add_defer_to_script', 10, 3 );

this is one way to skin the cat… another way, if you’ve noticed, is the twentytwenty theme comes with a class for adding defer or async to your script

// include parent class
require_once get_template_directory().'/classes//class-twentytwenty-script-loader.php';
// use the "after_theme_setup" hook
function mytheme_setup(){
    $loader = new TwentyTwenty_Script_Loader();
    add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2  );
}add_action("after_theme_setup","mytheme_setup");
// twentytwenty/classes/class-twentytwenty-script-loader.php
/**
public function filter_script_loader_tag( $tag, $handle ) {
	foreach ( array( 'async', 'defer' ) as $attr ) {
		if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
			continue;
		}
		// Prevent adding attribute when already added in #12009.
		if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
			$tag = preg_replace( ':(?=>):', " $attr", $tag, 1 );
		}
		// Only allow async or defer, not both.
		break;
	}
	return $tag;
}
**/

so, if you use a child theme of twentytwenty, load the class from the parent theme, and instantiate the class as above!