Last active
July 23, 2018 17:00
-
-
Save cup-of/cdd8585fca524b91e88bb6e6f16a3ab9 to your computer and use it in GitHub Desktop.
Increase pagespeed on custom wordpress themes by injecting minified css and js into the html. Then minify the html. Place in functions.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Deregister jQuery and enqueue main scripts | |
--------------------------------------------------------------------------------------- */ | |
function scripts() { | |
wp_deregister_script('jquery'); | |
wp_deregister_script( 'wp-embed' ); | |
} | |
add_action( 'wp_enqueue_scripts', 'scripts' ); | |
/* Inject minified style.css in the head | |
--------------------------------------------------------------------------------------- */ | |
// Takes the style.css and injects a minified version of it into the <head>. Increases pagespeed on google's light house audit. | |
// You will need to create a php file called _css.php and put it in a folder called speed in your theme directory. | |
// Make sure to remove the link to the style.css in the head, since we dont need it anymore. | |
add_action( 'wp_head', 'merge_css' ); | |
function merge_css() { | |
// Get current theme name | |
$theme = wp_get_theme(); | |
// Initialize variable we will store all of our css in | |
$mergedCSS = ''; | |
// Do stuff with third party css | |
// Grab all of the css files in the /css folder | |
$cssFiles = glob(get_stylesheet_directory() . '/css/*.css'); | |
// Loop through each file and keep appending its contents to the $mergedCSS variable. | |
// Basically store the content of all css files into the $mergedCSS variable. | |
foreach($cssFiles as $file) { | |
$mergedCSS .= file_get_contents($file); | |
} | |
// Do stuff with style.css | |
// Replace 'url' in the css with the full path, needed when injected into the head | |
$styles = file_get_contents( get_stylesheet_directory().'/style.css' ); | |
$styles = str_replace( "images", "/wp-content/themes/$theme->template/images", $styles ); | |
// Dont use if linking in google fonts | |
$styles = str_replace( "fonts", "/wp-content/themes/$theme->template/fonts", $styles ); | |
// Add style.css to $mergedCSS | |
$mergedCSS .= $styles; | |
// Minify the css | |
$mergedCSS = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $mergedCSS); | |
$mergedCSS = str_replace(': ', ':', $mergedCSS); | |
$mergedCSS = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $mergedCSS); | |
// Place the minified css into _css.php and inject into header. | |
// Using .php just incase we need to put php (acfs) into our stylesheet. | |
file_put_contents( get_stylesheet_directory().'/speed/_css.php', $mergedCSS ); | |
// Print it -> will end up in the head because of add action wp_head | |
echo '<style>'; | |
include_once get_stylesheet_directory().'/speed/_css.php'; | |
echo '</style>'; | |
} | |
/* Inject minified js files in the footer | |
--------------------------------------------------------------------------------------- */ | |
// Takes all third party js files and injects them into the footer. Increases pagespeed on google's light house audit. | |
// You will need to create a js file called _js.js and put it in a folder called speed in your theme directory. | |
// Make sure to remove the links to these js files and deregister jQuery (see top of this file), since we dont need them anymore. | |
// If you are getting errors check this out: https://stackoverflow.com/questions/20307462/js-cant-combine-lib-files | |
// Also be careful of the order of the javascript files, `glob` grabs them in alphabetical order. If the order in which you | |
// declare your javascript matters, either rename your files to be in alphabetical order or manually declare your array instead of using `glob` | |
// If you are using gravity forms make sure to include the js files needed. Each functionality adds a new script (ex: datepicker.js) | |
// I've included the main ones we use alot. If you arent using gravity forms, delete lines 84 to 94. | |
// Lastly, include JSMin.php into your speed folder, download here: https://github.com/mrclay/jsmin_minify | |
add_action( 'wp_footer', 'merge_js' ); | |
function merge_js() { | |
// Include the js minifier | |
include(get_stylesheet_directory() . '/speed/JSMin.php'); | |
// Initialize variable to store js into with jQuery since some scripts depend on it | |
$mergedJs = file_get_contents(ABSPATH . WPINC . '/js/jquery/jquery.js'); | |
$gravityFiles = array( | |
WP_PLUGIN_DIR."/gravityforms/js/jquery.json.min.js", | |
WP_PLUGIN_DIR."/gravityforms/js/gravityforms.min.js", | |
WP_PLUGIN_DIR."/gravityforms/js/jquery.maskedinput.min.js", | |
WP_PLUGIN_DIR."/gravityforms/js/placeholders.jquery.min.js" | |
); | |
// Loop through each gravity forms file and keep appending its contents to the $mergedJs variable. | |
foreach ($gravityFiles as $gravityFormJsFile) { | |
$mergedJs .= file_get_contents($gravityFormJsFile); | |
} | |
// Grab all of the js files in the /js folder | |
$files = glob(get_stylesheet_directory() . '/js/*.js'); | |
// Loop through each js file and keep appending its contents to the $js variable. | |
foreach($files as $file) { | |
$mergedJs .= file_get_contents($file); | |
} | |
// Minify the final js | |
$mergedJs = JSMin::minify($mergedJs); | |
// Store the contents of the $mergedJs variable into _js.js | |
file_put_contents(get_stylesheet_directory() . '/speed/_js.js', $mergedJs); | |
// Print it -> will end up in the footer because of add action wp_footer | |
echo '<script>'; | |
include_once get_stylesheet_directory().'/speed/_js.js'; | |
echo '</script>'; | |
// If you want cacheing use this instead of echo/include above. Slower initial load but faster future loads | |
// $path = get_stylesheet_directory_uri() . '/speed/_js.js'; | |
// echo '<script src='. $path .'></script>'; | |
} | |
/* Minify Html | |
--------------------------------------------------------------------------------------- */ | |
// Minifies the HTML | |
// Download 'html-compressor.php' from https://github.com/tylerhall/html-compressor and include it into the speed folder | |
require get_stylesheet_directory() . '/speed/html-compressor.php'; | |
function wp_html_compressor() | |
{ | |
function wp_html_compressor_main($data) | |
{ | |
return html_compress($data); | |
} | |
ob_start('wp_html_compressor_main'); | |
} | |
add_action('get_header', 'wp_html_compressor'); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment