Jak odroczyć lub asynchronizować ten fragment javascript WordPress, aby załadować się w końcu, aby przyspieszyć ładowanie strony?
Mam różne skrypty JavaScript, które są niezbędnymi wtyczkami w jednej z moich domen WordPress i wiem, skąd w pliku php się nazywa.
Biorę każdą miarę mogę podjąć przyspieszyć czas ładowania strony, i każdy Tester Prędkości w Internecie mówi, aby odroczyć javascripts, jeśli to możliwe.
Czytałem o defer='defer' i async funkcje w javascript i myślę, że jedna z nich osiągnie to, co próbuję osiągnąć. Ale nie jestem zrozumienie, jak to zrobić w pliku php.
Na przykład, oto fragment z pliku php jednej konkretnej wtyczki, gdzie plik javascript jest wywoływany:
function add_dcsnt_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'dcsnt', dc_jqsocialtabs::get_plugin_directory() . '/js/jquery.social.media.tabs.1.7.1.min.js' );
}
Czytałem, że najlepiej zrobić coś takiego dla szybszego ładowania strony:
<script defer async src="..."></script>
Ale Nie wiem jak to osiągnąć w pliku php. Chcę to zrobić ze wszystkimi moimi plikami javascript.
Jak osiągnąć odroczenie lub asynchronizowanie tego fragmentu javascript jest ładuje się ostatni i przyspiesza czas ładowania strony? Jaki byłby idealny sposób na zwiększenie czasu ładowania strony we wszystkich przeglądarkach? Dzięki za wszelkie wskazówki, które każdy może zaoferować!
11 answers
This blog post links to two plugins of interest:
Asynchroniczny Javascript
Popraw wydajność ładowania strony poprzez asynchronicznie Ładowanie javascript za pomocą head.js
WP Deferred JavaScript
odroczenie ładowania wszystkich skryptów javascripts dodanych za pomocą wp_enqueue_scripts, przy użyciu LABJS (asynchronicznej biblioteki javascript).
Nie testowałem ich, ale sprawdziłem kod i robią całkiem fajne rzeczy ze skryptami WordPress.
Ale wtedy WPSE przychodzi na ratunek :
// Adapted from https://gist.github.com/toscho/1584783
add_filter( 'clean_url', function( $url )
{
if ( FALSE === strpos( $url, '.js' ) )
{ // not our file
return $url;
}
// Must be a ', not "!
return "$url' defer='defer";
}, 11, 1 );
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-13 12:37:31
Lub bardziej uniwersalny sposób:
function add_async_forscript($url)
{
if (strpos($url, '#asyncload')===false)
return $url;
else if (is_admin())
return str_replace('#asyncload', '', $url);
else
return str_replace('#asyncload', '', $url)."' async='async";
}
add_filter('clean_url', 'add_async_forscript', 11, 1);
Aby można było dodać async do dowolnego skryptu bez zmian kodu, wystarczy dodać #asyncload do adresu URL skryptu jako:
wp_enqueue_script('dcsnt', '/js/jquery.social.media.tabs.1.7.1.min.js#asyncload' )
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-19 02:21:31
Starając się zachować modułowość i wszechstronność, następujące podejście dynamicznie wybiera sposób osadzenia znacznika z asynchronizacją lub odroczenia atrybutów poprzez dodanie małego identyfikatora do nazwy uchwytu$:
/**
* Add async or defer attributes to script enqueues
* @author Mike Kormendy
* @param String $tag The original enqueued <script src="...> tag
* @param String $handle The registered unique name of the script
* @return String $tag The modified <script async|defer src="...> tag
*/
// only on the front-end
if(!is_admin()) {
function add_asyncdefer_attribute($tag, $handle) {
// if the unique handle/name of the registered script has 'async' in it
if (strpos($handle, 'async') !== false) {
// return the tag with the async attribute
return str_replace( '<script ', '<script async ', $tag );
}
// if the unique handle/name of the registered script has 'defer' in it
else if (strpos($handle, 'defer') !== false) {
// return the tag with the defer attribute
return str_replace( '<script ', '<script defer ', $tag );
}
// otherwise skip
else {
return $tag;
}
}
add_filter('script_loader_tag', 'add_asyncdefer_attribute', 10, 2);
}
Przykładowe użycie:
function enqueue_my_scripts() {
// script to load asynchronously
wp_register_script('firstscript-async', '//www.domain.com/somescript.js', '', 2, false);
wp_enqueue_script('firstscript-async');
// script to be deferred
wp_register_script('secondscript-defer', '//www.domain.com/otherscript.js', '', 2, false);
wp_enqueue_script('secondscript-defer');
// standard script embed
wp_register_script('thirdscript', '//www.domain.com/anotherscript.js', '', 2, false);
wp_enqueue_script('thirdscript');
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts', 9999);
Wyjścia:
<script async type='text/javascript' src='//www.domain.com/somescript.js'></script>
<script defer type='text/javascript' src='//www.domain.com/otherscript.js'></script>
<script type='text/javascript' src='//www.domain.com/anothercript.js'></script>
Dzięki @ MattKeys @ crissoca za inspirowanie mojej odpowiedzi tutaj.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-11 18:13:40
Inne rozwiązanie wykorzystujące Inny filtr, który może być użyty do kierowania określonego uchwytu skryptu:
function frontend_scripts()
{
wp_enqueue_script( 'my-unique-script-handle', 'path/to/my/script.js' );
}
add_action( 'wp_enqueue_scripts', 'frontend_script' );
function make_script_async( $tag, $handle, $src )
{
if ( 'my-unique-script-handle' != $handle ) {
return $tag;
}
return str_replace( '<script', '<script async', $tag );
}
add_filter( 'script_loader_tag', 'make_script_async', 10, 3 );
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-05 01:41:19
Uproszczona metoda. Dodaj do swoich funkcji.plik php do tworzenia asynchronicznego JavaScript w WordPressie
// Make JavaScript Asynchronous in Wordpress
add_filter( 'script_loader_tag', function ( $tag, $handle ) {
if( is_admin() ) {
return $tag;
}
return str_replace( ' src', ' async src', $tag );
}, 10, 2 );
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-01 19:59:39
Aby uzyskać kontrolę nad tym, które Pliki js odłożyć i uniknąć konfliktów, możesz dołączyć zmienną do adresu url w funkcji wp_register_script, jak poniżej.
wp_register_script( 'menu', get_template_directory_uri() . '/js/script.js?defer', array('jquery'), '1.0', true );
Następnie zmień linię:
if ( FALSE === strpos( $url, '.js' ))
Do:
if ( FALSE === strpos( $url, '.js?defer' ))
Nowy filtr wygląda tak.
add_filter( 'clean_url', function( $url )
{
if ( FALSE === strpos( $url, '.js?defer' ) )
{ // not our file
return $url;
}
// Must be a ', not "!
return "$url' defer='defer";
}, 11, 1 );
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-02 14:51:01
Włącz atrybut async
do skryptów tak, aby były ładowane tylko po załadowaniu całej strony
<script type="text/javascript">
function ngfbJavascript( d, s, id, url ) {
var js, ngfb_js = d.getElementsByTagName( s )[0];
if ( d.getElementById( id ) ) return;
js = d.createElement( s );
js.id = id;
js.async = true;
js.src = url;
ngfb_js.parentNode.insertBefore( js, ngfb_js );
};
</script>
Źródło: Tutaj
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-10 11:18:00
Coś dodać clean_url
rozwiązanie filtra, upewnij się, aby sprawdzić, aby używać go tylko na końcu czcionki może przy użyciu if( ! is_admin() ){}
popularne wtyczki, takie jak ACF może przyprawić Cię o ból głowy.
Update
Oto moja zmodyfikowana wersja rozwiązania:
if( ! is_admin() ){
add_filter( 'clean_url', 'so_18944027_front_end_defer', 11, 1 );
function so_18944027_front_end_defer( $url ) {
if ( FALSE === strpos( $url, '.js' ) )
{ // not our file
return $url;
}
// Must be a ', not "!
return "$url' defer='defer";
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-28 04:37:12
Uważam, że to zła praktyka, aby odroczyć / async WordPress jQuery. Lepszym rozwiązaniem byłoby wykluczenie jQuery z filtra:
if (!is_admin()) {
add_filter( 'script_loader_tag', function ( $tag, $handle ) {
if ( strpos( $tag, "jquery.js" ) || strpos( $tag, "jquery-migrate.min.js") ) {
return $tag;
}
return str_replace( ' src', ' async src', $tag );
}, 10, 2 );
}
Możesz użyć defer
zamiast async
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-08 12:49:52
Bardzo mały kod modyfikacji Mike Kormendy , który pozwala na dodanie 2 atrybutów jednocześnie:
// Async load
function add_asyncdefer_attribute($tag, $handle)
{
$param = '';
if ( strpos($handle, 'async') !== false ) $param = 'async ';
if ( strpos($handle, 'defer') !== false ) $param .= 'defer ';
if ( $param )
return str_replace('<script ', '<script ' . $param, $tag);
else
return $tag;
}
Wynik:
<script async defer type='text/javascript' src='#URL'></script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-08 10:37:23
The proper way to do this
wp_script_add_data( 'script-handle', 'async/defer' , true );
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-02 08:47:55