В по-новите версии на Autoptimize има възможност чрез филтър да съставите списък с разрешени за обединяване скриптове. Това позволява да обедините скриптовете, които са задължителни за всички страници в сайта и да оставите скриптовете, които се зареждат само на определени страници извън пакета. Това решава и един друг проблем с Autoptimize – когато различни скриптове се зареждат на различни страници, пакетите, които се генерират са различни. Това води до безконтролно увеличаване на кеша на Autoptimize и до забавяне на зареждането за потребителите, защото вместо да заредят кеширан файл, всеки път теглят различен.
И така, да започнем с обединяването на задължителните скриптове:
/**
* Whitelist scripts to autoptimize
*
* @return: whitelist
*/
function gonzo_js_whitelist() {
$whitelist = array(
'jquery.js',
'jquery-migrate.min.js',
'wp-embed.min.js'
);
return join( ',', $whitelist );
}
add_filter( 'autoptimize_filter_js_whitelist', 'gonzo_js_whitelist' );След като вече имаме пакет с най-важните скриптове, нужни за сайта, трябва да се погрижим за две неща:
- Да зареждаме обединените скриптове преди останалите, защото пакетът съдържа jQuery, а някои от останалите скриптове най-вероятно разчитат на него.
- Да зареждаме скриптовете асинхронно, за да не блокират изобразяването на страницата.
Генерираният от Autoptimize скрипт елемент може да поставим веднага след елемента title така:
/**
* Where in the HTML optimized JS is injected.
*
* @param array $replacetag, containing the html-tag and the method (inject "before", "after" or "replace")
* @return array with updated values
*/
function gonzo_override_js_replacetag( $replacetag ) {
return array( '</title>', "after" );
}
add_filter( 'autoptimize_filter_js_replacetag', 'gonzo_override_js_replacetag', 10, 1 );
За да зареждаме всички скриптове асинхронно, и в същото време последователно, ще добавим атрибут defer към тях. Така скриптовете не само се зареждат асинхронно, но и не блокират изобразяването на страницата когато се изтеглят. Освен това атрибута defer кара скриптовете да се изпълнят по реда в документа.
/*
* Defer all javascripts
*/
function gonzo_defer_js($tag, $handle) {
if( ! is_admin() ){
$tag = str_replace( ' src', ' defer="defer" src', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'gonzo_defer_js', 10, 2 );
/**
* Change flag added to Javascript.
*
* @param $defer: default value, "" when forced in head, "defer " when not forced in head
* @return: new value
*/
function gonzo_override_defer( $defer ) {
return "defer ";
}
add_filter( 'autoptimize_filter_js_defer', 'gonzo_override_defer', 10, 1 );
И на края, за да гарантираме, че скриптовете ще се кешират правилно от браузърите и прокситата, ще премахнем GET променливата с версията, която WordPress добавя към адресите на всички ресурси:
/*
* Remove query string from static assets
*/
function gonzo_remove_script_version( $src ){
return remove_query_arg( 'ver', $src );
}
add_filter( 'script_loader_src', 'gonzo_remove_script_version' );
Естествено, подобен подход можем да приложим и към CSS файловете, които сайта зарежда. На края ще имаме бърз сайт за удоволствие на потребителите и печалба на клиента.
