В по-новите версии на 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 файловете, които сайта зарежда. На края ще имаме бърз сайт за удоволствие на потребителите и печалба на клиента.