Perú

Lima,Perú

WordPress optimizar archivos JavaScript y CSS

Fecha Publicación:       15 de Abril de 2020
Fecha Modificación:       12 de Julio de 2020

Instalar Plugin Autoptimize:   Muy buena optimiza  js y css 

Una vez instalado lo encuentras en Ajustes --> Autoptimize.

 

JavaScript Options:

   
Aggregate JS-files?

¿Agregar todos los archivos JS vinculados para que carguen el bloqueo sin renderizado? Si esta opción está desactivada, los archivos JS individuales permanecerán en su lugar pero serán minimizados.

Nota: Habilitar solo esta casilla en Js.

Also aggregate inline JS?

Deje que Autoptimize también extraiga JS del HTML. Advertencia: esto puede hacer que el tamaño de caché de Autoptimize crezca rápidamente, así que solo habilítelo si sabe lo que está haciendo.

Nota: Cuando lo habilito baja la optimizacion en pagespeed.

Force JavaScript in <head>?

Cargue JavaScript temprano, esto puede solucionar algunos errores JS, pero hace que el bloqueo de renderizado JS.

Nota: Cuando lo habilito baja la optimizacion en pagespeed.

Exclude scripts from Autoptimize:

wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.js

Una lista de scripts separados por comas que desea excluir de la optimización, por ejemplo, 'whatever.js, another.js' (sin las comillas) para excluir esos scripts de Autoptimize. Importante: Autoptimize sigue minimizando los archivos no minificados excluidos, a menos que la opción "misc" esté deshabilitada.

Add try-catch wrapping? Si sus scripts se rompen debido a un error JS, es posible que desee probar esto.

 

CSS Options:

Aggregate CSS-files?

¿Agregar todos los archivos CSS vinculados? Si esta opción está desactivada, los archivos CSS individuales permanecerán en su lugar pero serán minimizados.

Nota: Deja esto habilitado por defecto.

Also aggregate inline CSS?

Marque esta opción para Autoptimize para agregar también CSS en el HTML.

Nota: Deja esto habilitado por defecto.

   
   

Observando como trabaja Autoptimize:    Todas las css lo unifica y solo crea una en este caso sera:
autoptimize_7fe4b7b6d67058cf6a113f0b52af8364.css pero el nombre puede cambiar segun el proyecto y lo carga desde  la cabecera <head>.

 

<head>
<link media="all" href="http://midominio.pe/
wp-content/cache/autoptimize/css/
autoptimize_7fe4b7b6d67058cf6a113f0b52af8364.css" 
rel="stylesheet">
</head>

 

Ademas de  el archivo autoptimizexxxxx.css  Autoptimize todavia deja en <head> algunos Css y js :

 

<script src="/wp-includes/js/wp-emoji-release.min.js?ver=5.4" type="text/javascript" defer=""></script>
		
<link rel="stylesheet" id="dashicons-css" 
href="/wp-includes/css/dashicons.min.css?ver=5.4" type="text/css" media="all">

<link rel="stylesheet" id="admin-bar-css" 
href="/wp-includes/css/admin-bar.min.css?ver=5.4" type="text/css" media="all">

<link rel="stylesheet" id="chefscuisine-fonts-css" 
href="https://fonts.googleapis.com/css?family=ABeeZee%3A400%2C400i%7CRancho%7COswald
%3A200%2C300%2C400%2C500%2C600%2C700&amp;
subset=latin%2Clatin-ext" type="text/css" media="all">


<script async="" src="https://d5jmkjjpb7yfg.cloudfront.net/v2/latest/
optimole_lib_no_poly.min.js"></script>
	
<script type="text/javascript" charset="UTF-8" 
src="http://maps.googleapis.com/maps-api-v3/api/js/40/9/intl/es_419/common.js">

</script><script type="text/javascript" charset="UTF-8"
src="http://maps.googleapis.com/maps-api-v3/api/js/40/
9/intl/es_419/util.js"></script>

 

WordPress, JavaScript y PageSpeed ¿que problema tenéis?

 

Tambien hay otro plugin llamado minit , pero al activarlo, el sitio se desconfigura. Por qué? Porque el plugin mete todo el JS y el CSS en un único archivo. De todos modos debe existir una mejor manera de ir Combinando JS y CSS según directorios

 

Cómo mover los scripts de forma manual  al footer en WordPress

Apariencia --> Theme Editor --> Archivos del tema --> Funciones del tema --> functions.php

Cargar los archivos JS en el footer en lugar de en el head hará mejorar la velocidad del tiempo de carga y el rendimiento de nuestro sitio, mejorando el WPO y ofreciendo una mejor experiencia de usuario.

Para poder mover todo el JavaScript al footer de nuestro sitio es imprescindible que tanto nuestro tema como todos los plugins que usemos, carguen sus propios scripts utilizando la función de encolado wp_enqueue_script().

Esta función admite 5 parámetros (wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);)

  • $handle, nombre del script. Debe ser único.
  • $src, URL o ruta del script.
  • $deps, array de dependencias de otros scripts.
  • $ver, versión del script.
  • $in_footer, valor booleano. Si es true se anclará a wp_footer y si es false a wp_head. Por defecto es false.

El primer paso por lo tanto será cargar nuestros scripts (si el tema es nuestro o tenemos algún plugin propio) de la siguiente manera:

function load_myscripts() {
    wp_enqueue_script( 'my-scripts', get_template_directory_uri() 
    . '/js/scripts.min.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'load_myscripts' );
 

Como puede observarse el último parámetro es true para que envíe mi JS al footer.

Vale… ¿ahora qué pasa si el tema o los plugins no son nuestros? Afortunadamente no es necesario hardcodear un tema o plugin para mover sus scripts al footer (Siempre y cuando cargue sus scripts con la función wp_enqueue_script()). Basta con añadir esta función al archivo functions.php , lo ponemos en la parte final.

 

//* Mover javascripts al footer
function scripts_footer() {
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
 
    add_action('wp_footer', 'wp_print_scripts', 5);
    add_action('wp_footer', 'wp_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'scripts_footer' );

Despues de poner la función todavia cargaba algunos js en el <head>

 

<script src="/wp-includes/js/wp-emoji-release.min.js?ver=5.4" type="text/javascript" defer=""></script>

<script async="" src="https://d5jmkjjpb7yfg.cloudfront.net/v2/latest/
optimole_lib_no_poly.min.js"></script>

<script type="text/javascript" charset="UTF-8" 
src="http://maps.googleapis.com/maps-api-v3/api/js/40/9/
intl/es_419/common.js"></script>

<script type="text/javascript" charset="UTF-8" 
src="http://maps.googleapis.com/maps-api-v3/api/js/40/9/
intl/es_419/util.js"></script>

 

Por lo tanto, si el tema no es desarrollado por ti, ésta función debería ir en el functions.php de tu child-theme o en tu plugin de utilidades.

En algún caso he visto que el archivo jQuery de WordPress seguía cargándose en el head. Para enviarlo al footer agrega estas dos funciones más:

 

function force_jquery_to_footer() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'force_jquery_to_footer' );
 
// Remove jQuery from old wp_print_scripts
function remove_jquery_from_wp_print_scripts() {
    wp_deregister_script( 'jquery' );
}
add_action( 'wp_print_scripts', 'remove_jquery_from_wp_print_scripts' );

Vea tambien

https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/

https://desarrollowp.com/blog/tutoriales/mover-los-scripts-al-footer-wordpress/

¿Cómo Eliminar los Recursos que Bloquean el Renderizado en WordPress? (CSS + JavaScript)

https://kinsta.com/es/blog/eliminar-bloqueadores-de-visualizacion/

 

 

Leidas : 339 Veces
Compartir:

Artículos Relacionados