Merge files

Technique of merge files for css & js

Merge files

A WordPress site usually has a lot of js & CSS files, and the loading of such resources will affect the speed of the page. The solution is to merge all local JS files into a single file ( the same applies to CSS). Note: only merge files via the hook wp_enqueue_script wp_enqueue_style

In the principle of optimization, we should not edit directly to js, css files. So all you need to do is editing on the newly created file. However, the merged js / css file has quite long content, and makes it difficult for you to read or modify it. Do not worry, we have a tons of api to help you walk on every file before they are merged into a new file. See the example below:

add_filter('hpp_save_merge_file', function($text, $file) {
	if(strpos($file,'.css')!==false) {
		preg_match('#pose-mode\) .gem-icon .gem-icon-half-2 {.*?}#si', $text, $m);
		if(!empty($m[0]) && strpos($m[0],'opacity: 0')!==false) {
			$text = str_replace($m[0], str_replace('opacity: 0', 'opacity: 1', $m[0]), $text);
		}
	}
	if(strpos($file,'.js')!==false) {
		$text = str_replace(';docReady(',';_HWIO.readyjs(',$text);
	}
	return $text;
}, 10, 2);

Merge CSS files:

There are a few customers who complain to us that after doing merge files for CSS the page looks different to the original version. Why? remember that: in order to merged CSS files to work properly 100% , all single CSS files should have a valid syntax in CSS code.

So you don't forget to check on every CSS file that used in merges, and fix any error CSS syntax before the merge works. After removing the error code go to Dashboard > Settings > Page Speed Optimizer > and click to the [purge all] button to re-create all merge files.

Exclude file from merging

For example, we have JS code, you want to exclude the frontend-gtag.min.js script from merged or delay. See the original code:

<script type='text/javascript' id='monsterinsights-frontend-script-js-extra'>
/* <![CDATA[ */
var monsterinsights_frontend = {"js_events_tracking":"true","download_extensions":"doc,pdf,ppt,zip,xls,docx,pptx,xlsx","inbound_paths":"[{"path":"/visit/","label":"affiliate"},{"path":"https:\/\/usbettingreport.go.metabet.io\/bet\/","label":"affiliate_metabet"}]","home_url":"https:\/\/usbettingreport.com","hash_tracking":"false","ua":"UA-92665351-2"};
/* ]]> */
</script>
<script type='text/javascript' src='https://usbettingreport.com/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend-gtag.min.js' id='monsterinsights-frontend-script-js'></script>

We can exclude this file from merge and delay by using the hook below:

<?php
/**
 * exclude file from merge
 *@param $ok - 1: allow , 0: ignore
 *@param $handle - name of js file
 *@param $ext - 'css', 'js'
 *@param $handles - array of handle
 */
add_filter('hpp_can_merge_file', function($ok, $handle, $ext, $handles){
    if( in_array($handle,['monsterinsights-frontend-script'])) return 0;
    return $ok;
}, 10, 4);

add_filter('hpp_allow_delay_asset', function($ok, $url){
    if(strpos($url, 'google-analytics-for-wordpress/assets/js/frontend-gtag.min.js')!==false) return false;
    return $ok;
}, 10, 2);

Customization

Many people got error JS in the Chrome dev tool after merges files. Because of wrong js files in order. With Penci Speed Optimizer you can modify dependencies of scripts to make ordering your own & other file attributes to control everything before they got right to merge.

add_filter('hpp_delay_asset_att', function($att, $tp) {
	if($tp=='js' ) {
		//manage dependencies
		//`jquery-blockui` depends on `js-cookie`
		if($att['id']=='jquery-blockui') $att['deps'].=',js-cookie';	
		if($att['id']=='mediaelement-migrate') $att['deps'].=',mediaelement-core';
		if($att['id']=='mediaelement-vimeo') $att['deps'].=',mediaelement-core';
		if($att['id']=='wp-mediaelement') $att['deps'].=',mediaelement-core';

		if($att['id']=='jquery-masonry') $att['deps'].=',masonry-js';	

		//modify url
		if(isset($att['l']) && strpos($att['l'],'http://')!==false) {
			$att['l'] = str_replace('http://','https://', $att['l']);
		}
		//exclude file from merge: mean this file will not running on the page
		unset($att['id']);
	}
	if($tp=='css') {
		//exclude
		if(in_array($att['id'], ['hpp-s-0','hpp-s-1','google-fonts-1'])) unset($att['id']);
	}
	return $att;
}, 10, 2);

Exclude Lazy JS

For external JS files (which not store in current site hosting) can't be merged even it's appended by using the function wp_enqueue_script . Insert these files to the page in dynamic ways, by the way so you can't see <script tag when view-source because static <script tag was removed.

Any enqueue internal js files (which<script tags has src attribute), it should be merged but some js file need to keep <script tag. For example: embed code of getresponse service to print out the form on the document in same location on the page that script tag reside. In this case, you will need to remove lazy feature for this script.

//purpose for inline script to replace in current dom, like bitrix.
add_filter('hpp_allow_delay_asset', function($ok, $url){
	if(strpos($url, 'app.getresponse')!==false) return false;
	return $ok;
}, 10, 2);

Defer/lazyload JS

The way of keeping <script tag & all you need to do is rename src attribute to data-src

Using the hook hpp_prepare_buffer_html to catch full html of the page after php output result to the browser. So now i will do lazyload with above example.

add_filter('hpp_prepare_buffer_html', function($html, $merged=null){
	$html = str_replace(' src="https://app.getresponse', ' data-src="https://app.getresponse', $html);
	return $html;
},10, 2);