Portada Wordpress WP Scripts & Styles Optimizer puede hacer que TU SITE cargue MÁS RÁPIDO
¡Todos queremos que nuestro WordPress cargue más rápido! Es prácticamente una obsesión, por lo que optimizar el código, elegir un buen plugin de caché, y comprimir las imágenes son algunos de los métodos más comunes para conseguirlo. De hecho, en Hostinet hablamos con frecuencia sobre todo esto en nuestro blog de formación, ya que queremos que las webs de nuestros clientes funcionen lo más rápido posible SIEMPRE.
El caso es que vale la pena mirar la posibilidad de optimizar JavaScrip y estilos CSS, puesto que también son muy importantes para aumentar la velocidad de carga de tu sitio web.
Muchos plugins de WordPress vienen con múltiples archivos JavaScript de terceros o que a menudo se incluyen en cada página de WordPress. En el peor de los casos, tendrás más de uno del mismo tipo en tu sitio. ¡Y eso lo ralentizará bastante!
Todos los archivos externos de JavaScript o CSS, que se incluyen en el encabezado (Header) de tu web, bloquean el sitio hasta que se cargan por completo. Es una práctica común mover todos estos scripts y estilos (excepto CSS críticos) al pie de página (Footer) para hacer que TU SITE cargue MÁS RÁPIDO.
Aquí es donde entra en escena WP Scripts & Styles Optimizer, un plugin que ayuda a controlar cada archivo JavaScript o CSS, pudiendo crear reglas para cada uno de ellos o desactivarlos completamente. También se pueden mover al pie de página (footer) o viceversa como comentábamos previamente.
El plugin WP Scripts & Styles Optimizer se puede instalar sin problemas desde el Escritorio de WordPress vía Plugins -> Añadir nuevo (1). Tan solo tienes que buscarlo por su nombre (palabra clave) “WP Scripts & Styles Optimizer (2)”, pulsar en el recuadro de “Instalar ahora (3)” y, después, hacer click en “Activar”. ¡Más sencillo imposible! 😉
Activado el plugin con éxito, tienes que dirigirte hasta su correspondiente sección en el menú principal de WordPress. Podrás ver una sección llamada como el plugin en sí: WP Scripts & Styles Optimizer, junto a 2 opciones: Global y Single Pages.
Global corresponda a la página principal y Singles Pages a las páginas internas de tu web.
Al acceder no te aparecerá ningún archivo, por lo que para cargarlos tendrás que hacer click en el botón “Get/Upadate Global Scrips & Styles”.
De esta forma aparecerán todos los archivos .jss y .css que contiene tu página principal en la cabecera (Header) y en el pie de página (Footer). En la fila de la izquierda los .jss y en la de la derecha los .css
Al pasar el ratón por encima de cualquier archivo, bien el Header o en el Footer, se mostrarán 3 opciones a la derecha: Desactivar (con el icono de un ojo tachado), Enviar el archivo al pie de página y/o footer (icono de flecha hacia abajo) y Cambiar condiciones (icono como una especie de embudo). Todas estas acciones también se pueden llevar a cabo en “lote”, es decir, a la vez para múltiples archivos mediante un selector que hay para ello.
Obviamente lo primero que tienes que hacer es revisar no tener múltiples archivos que hagan la misma función, ya que esto ralentiza con creces WordPress, así como después mover al footer todos archivos .jss y .css que puedas del header.
Nota: Si pasas algún archivo al footer por error, puedes revertir el proceso, pinchando sobre un botón que habrá para ese archivo en la pestaña de footer con la opción “Reset to original state”. Lo ilustramos en esta captura de pantalla:
En lo que respecta a Single Pages es para hacer lo mismo que en Global, pero en páginas internas de tu web. Para ello tienes que indicar la url de la página y darle al botón “Get Scrips & Styles”.
Con ello lo que conseguirías es que al igual que en Global se mostraran dos bloques; uno con todos los .jss y otro con los .css para tu poder realizar las mismas acciones que indicamos antes en Global. Además, hay un botón que permite sincronizar la configuración de la página principal de tu site (global) con la de la página que hayas puesto, ahórrate así mucho tiempo en caso de que quieras optimizar algo acorde a como lo tienes en tu página principal. El botón en cuestión es el siguiente “Syn page with global”.
IMPORTANTE:
Los archivos que pertenezcan al núcleo de WordPress lo mejor es no tocarlos y dejarlos donde estén para evitar problemas. Si están en el Header que se queden en el Header y si están en el Footer que se queden en el Footer. Estos archivos se pueden localizar fácilmente, ya que al lado izquierdo de los mismos aparece una interrogación sobre un círculo con fondo rojo, y si se pasa el ratón por encima del icono, se indica que es un archivo del “core” de WordPress.
El plugin no puede decir que archivos son necesarios o no para una situación específica. Tus configuraciones pueden estropear algunas funciones de tu web. En ese caso, puedes restablecer todo a como estaba antes borrando todas las configuraciones que has realizado con el botón que hay para ello “Delete global lists”. Con esta opción, tanto el bloque de Scrips como de Styles volvería a salir en blanco, sin mostrar archivos. Para que vuelvan a aparecer habría que volverlos a cargar con el botón “Get/Upadate Global Scrips & Styles”.
Para saberlo todo sobre los plugins de WordPress… ¡Síguenos en nuestras redes sociales: Facebook y Twitter @hostinet!