Merged files
Technique of merge files for css & js
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);
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.
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:
<?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){
//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
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);
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);
The way of keeping <script tag & all you need to do is rename
src attribute to data-srcUsing 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);
Last modified 1yr ago