Merged 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 & same applies to css. Note: only inserted files via the hook wp_enqueue_script wp_enqueue_style
In 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 do merge files for css the page look different to the origin version. Why? remember that: in order 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 they merge works. After remove error code press the [purge all] button to re-create all merge files.

Exclude file from merging

Sometimes, using merged technical for all js files make the website not work properly and cause some features lost. In this case, you want to exclude merge for the specific files. See bellow:
* 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){
//some merge not work:
if(hpp_in_str(join(',',$handles),['jquery-slick','jet-engine-frontend'],1) && in_array($handle,['jquery-slick','jet-engine-frontend'])) return 0;
return $ok;
}, 10, 4);


Many people got error JS in chrome dev tool after merges files. Because of wrong js files in order. With wp2speed you can modify dependencies of scripts to make ordering you own & other file attributes to control everything before they got right 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
if($tp=='css') {
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);