# Merge files

### 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:

```php
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:

```php
<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
<?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.

```php
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.

```php
//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.

```php
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);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://optimize.pencidesign.net/documentation-for-devs/merge-files.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.