The Ultimate Guide for Quick and Easy Page Speed Optimization

Speed optimization is not easy!! A lot of it is over some DIY people’s heads. How do we get coveted 100% in the page speed checkers? Well here are some simple solutions anyone can do to help.

First, leverage browser caching is a tough one. Many people don’t even know what that means. What do you do with GTMetrix tells you, “The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources.” Well, as complicated as it sounds, it is actually really easy. Just add the following code to your htaccess file.

## BEGIN EXPIRES CACHING ##


	# Enable expirations
	ExpiresActive On 



	ExpiresActive On
	ExpiresByType image/jpg "access plus 1 year"
	ExpiresByType image/jpeg "access plus 1 year"
	ExpiresByType image/gif "access plus 1 year"
	ExpiresByType image/png "access plus 1 year"
	ExpiresByType text/css "access plus 1 month"
	ExpiresByType application/pdf "access plus 1 month"
	ExpiresByType text/x-javascript "access plus 1 month"
	ExpiresByType application/javascript "access plus 1 month"
	ExpiresByType application/x-shockwave-flash "access plus 1 month"
	ExpiresByType image/x-icon "access plus 1 year"
	ExpiresByType application/x-opentype "access plus 1 year"
	ExpiresByType image/svg+xml "access plus 1 year"
	ExpiresByType application/x-font-ttf "access plus 1 year"
	ExpiresByType application/x-font-truetype "access plus 1 year"
	ExpiresByType application/x-font-opentype "access plus 1 year"
	ExpiresByType application/font-woff "access plus 1 year"
	ExpiresByType application/font-woff2 "access plus 1 year"
	ExpiresByType application/x-font-woff "access plus 1 year"
	ExpiresByType application/vnd.ms-fontobject "access plus 1 year"

	## Add woff2 file type ##
	AddType application/x-font-woff2 .woff2

	ExpiresDefault "access plus 1 month"

## END EXPIRES CACHING ##

Specifying a character set early is easy. Just add the following line to your htaccess file.

## Set default character set ##
AddDefaultCharset utf-8

Another tough one is to defer scripts. There is a lot involved in knowing what scripts to defer, but in summary, you have to load all the dependencies for a script before the script loads. For example, you have to load jQuery before you load most scripts, because most scripts use jQuery. You will have to figure that order yourself, but what I can do is give you a script to defer the scripts you need. And without further ado, here it is:

// add defer to all scripts
add_filter('script_loader_tag', 'defer_scripts', 10, 2);
function defer_scripts( $tag ) {
	$scripts_to_ignore = array('jquery.js');
	$scripts_to_async  = array('bootstrap.min.js');

	if     ( count( array_filter($scripts_to_ignore, create_function('$e','return strpos("'.$tag.'", $e);') ) )>0 )
		return $tag;
	elseif ( count( array_filter($scripts_to_async,  create_function('$e','return strpos("'.$tag.'", $e);') ) )>0 )
		return str_replace( ' src', ' async src', $tag );
	else
		return str_replace( ' src', ' defer src', $tag );
}

I’ll add more of these as I get more time, but if you do these, add dimensions to all your images and optimize them, for the most part you’ll have a decent grade.