✅ Noticias, temas, complementos de WEB y WordPress. Aquí compartimos consejos y las mejores soluciones para sitios web.

Cómo optimizar su sitio de WordPress con WP Rocket

15

¿Recuerdas Space Jam?

Disney ha mantenido en línea el sitio web original de Space Jam desde 1996.

Echar un vistazo:

Cómo optimizar su sitio de WordPress con WP Rocket

¡Bruto!

Los sitios web como ese solían estar hechos completamente con HTML y algunas imágenes. Como puede ver, los sitios web están muy lejos de eso ahora.

¿Cuál es el problema?

A menudo, cuando visito uno de los sitios web de los usuarios de mi tema, veo que se cargan más de 100 archivos en cada página. Por el contrario, el sitio web de Space Jam solo carga 7 archivos y ese sitio web fue creado para una película de gran éxito.

Entonces, ¿qué está pasando aquí?

Bueno, los sitios web modernos cargan archivos CSS para diseñar, tienen archivos Javascript para agregar interacción del usuario y scripts de análisis, y tienden a tener muchas más imágenes.

¿Y sabes qué lo empeora? Complementos.

Puede tener cinco complementos, cada uno cargando sus propias hojas de estilo. Eso significa cinco archivos CSS adicionales para enviar a cada visitante que ingrese a su sitio.

No estoy diciendo que los complementos sean malos, pero los sitios de WordPress tienden a cargar una tonelada de archivos porque cada complemento carga archivos independientemente de los demás.

WordPress o no, no es realista crear un sitio moderno que solo cargue siete archivos, pero si optimizamos nuestros sitios correctamente, podemos hacerlo mucho mejor que 100.

¿Cual es la solución?

WP Rocket puede ayudar a mediar estos problemas de manera muy efectiva y es un elemento básico de nuestra optimización de rendimiento aquí en Compete Themes.

Voy a cubrir las tres áreas donde verá las mayores ganancias de rendimiento con este complemento. También compartiré capturas de pantalla de todos los menús al final de la publicación para que pueda revisar todas las configuraciones disponibles.

Comencemos con la característica más importante, el almacenamiento en caché.

Actualización: hice un video tutorial paso a paso que lo guiará a través de los pasos para configurar WP Rocket en su sitio web.

Suscríbete para competir temas en Youtube

1 almacenamiento en caché

Una vez que cargue e instale WP Rocket, tendrá acceso a su hermoso tablero donde puede comenzar a optimizar.

Cómo optimizar su sitio de WordPress con WP Rocket

WP Rocket activa el almacenamiento en caché en el momento en que lo activas. Literalmente, podría activar el complemento y cerrar sesión en su sitio para siempre y aún así se cargaría más rápido.

¿Cómo ayuda el almacenamiento en caché?

Es difícil apreciar el almacenamiento en caché automático si no está seguro de cómo afecta a su sitio.

Piense en el almacenamiento en caché de esta manera:

Imagine que necesita un documento para encontrarlo en su archivador y luego devolverlo al armario cuando haya terminado. La próxima vez que necesite ese documento, tendrá que volver a sacarlo del archivador.

El almacenamiento en caché es como mantener el documento en su escritorio una vez que lo encuentra para que pueda volver a usarlo inmediatamente. Al igual que obtener el documento de su escritorio es más rápido que obtenerlo de su archivador, el almacenamiento en caché evita viajes innecesarios a la base de datos.

El punto es que, independientemente de la cantidad de archivos que cargue su sitio o de su tamaño, todos se cargan mucho más rápido con el almacenamiento en caché habilitado.

Configurar el almacenamiento en caché

Como se mencionó, no es necesario cambiar ninguna configuración para que el almacenamiento en caché funcione. Sin embargo, es posible que desee realizar algunos cambios en el menú de configuración básica de la caché.

Cómo optimizar su sitio de WordPress con WP Rocket

Haga clic para ver la imagen a tamaño completo

La configuración aquí es principalmente para ajustar la caché para que funcione mejor en su sitio. Por ejemplo, si tiene un diseño móvil completamente diferente al que usa un complemento como WPTouch, WP Rocket puede almacenar en caché esos archivos por separado.

También puede utilizar el caché para los visitantes registrados si tiene un sitio de membresía y habilitar el almacenamiento en caché para SSL (necesario si su sitio usa "https: //").

Una vez más, no hay mucho que hacer aquí además de activar el complemento.

2 Optimización de archivos

La sección de optimización de archivos es donde reducirá la cantidad de archivos que carga su sitio, así como el tamaño de esos archivos.

Cómo optimizar su sitio de WordPress con WP Rocket

Haga clic para ver la imagen a tamaño completo

Ajustes básicos

La primera opción le permite "minimizar" el HTML de su sitio, entonces, ¿qué significa eso?

Minificación

Los desarrolladores escriben código con mucho espacio, formato y comentarios para que sea fácil de leer. Cuando cargamos estos archivos en nuestros sitios, no es necesario que sean fáciles de leer. La minificación elimina todo el espacio entre los caracteres y también elimina todo el texto del comentario. En realidad, esto reduce el tamaño del archivo para que se cargue más rápido.

Si ve el código fuente de cualquier página aquí en Compete Themes, verá cómo la minificación de WP Rocket ha afectado el HTML:

Cómo optimizar su sitio de WordPress con WP Rocket

La minificación es increíble porque obtiene una mejora de rendimiento rápida y fácil y rara vez tiene algún impacto en el funcionamiento de su sitio.

¿Listo para aprender tu próximo trimestre tecnológico?

Concatenación

La otra característica interesante en la configuración básica es la opción de combinar archivos de fuentes de Google. La mayoría de los temas de WordPress usan fuentes de Google, por lo que probablemente esté cargando una o dos fuentes desde allí. Este proceso de combinación de archivos se denomina "concatenación".

En general, es más rápido cargar un archivo en lugar de dos porque ha reducido el número de solicitudes HTTP y no necesitamos ser más técnicos que eso.

Para revisar, la minificación reduce el tamaño de los archivos y la concatenación los combina. Con menos archivos más pequeños, su sitio web se cargará más rápido. Estos dos procesos son increíbles para el rendimiento y ningún complemento los maneja mejor que WP Rocket.

Archivos CSS

¿Recuerda mi ejemplo de los cinco complementos que cargan cada uno su propia hoja de estilo? Así es como lo arreglas.

Cómo optimizar su sitio de WordPress con WP Rocket

Puede minimizar todos los archivos CSS, lo que le dará un pequeño aumento de rendimiento y luego habilitar la opción "combinar" para concatenarlos en la menor cantidad de archivos posible. Si bien es posible terminar con problemas de visualización en su sitio al usar esta opción, generalmente no es un problema.

El Optimizar CSS entrega también puede ayudar a su sitio de carga visualmente más rápidamente que sin ella.

Archivos JavaScript

Las mismas opciones exactas de minificación y concatenación también están disponibles para archivos Javascript.

Cómo optimizar su sitio de WordPress con WP Rocket

No quiero asustarlo, pero estas opciones a veces pueden romper partes de su sitio (en el front-end, no en su tablero). Lo importante es que pruebe estas configuraciones y si algo deja de funcionar, simplemente puede apagarlas. Todo es reversible.

Optimiza sin errores

La minimización de los archivos JS generalmente no es un problema, pero cuando los combina, a veces puede terminar rompiendo la funcionalidad de su sitio. Esto es lo que debe hacer …

Active las opciones de minificación y concatenación y luego borre el caché de su sitio con WP Rocket. Luego visite su sitio y haga todo. Prueba los botones para compartir en redes sociales, visita publicaciones y páginas, prueba el menú móvil, etc. Si todo funciona bien, entonces estás listo.

También hay una opción para "diferir" los archivos Javascript. Esto permite que su sitio se muestre visualmente en la pantalla antes de que los archivos Javascript terminen de cargarse. Si habilita esta opción, asegúrese de probar todas las funciones de su sitio nuevamente para verificar si hay errores.

Por último, aplazar los archivos Javascript habilita el Modo seguro para jQuery. Desmarcarlo le dará una ligera ganancia de rendimiento, pero casi puedo garantizar que romperá algo, por lo que recomendaría mantenerlo marcado.

WP Rocket tiene algunas opciones interesantes para optimizar los medios en su sitio, incluida la carga diferida, que puede ser extremadamente efectiva.

Cómo optimizar su sitio de WordPress con WP Rocket

Haga clic para ver la imagen a tamaño completo

¿Qué es la carga diferida?

Imagina que tienes un blog y hay 10 publicaciones en la página de inicio, cada una con una imagen. Cuando llega un visitante, solo la primera publicación es visible en la pantalla. Esta es la pregunta:

¿Por qué cargar las 10 imágenes de publicaciones si el visitante solo puede ver una? Además, ¿por qué cargaría los diez cuando la mayoría de los visitantes solo pueden desplazarse hasta la tercera o cuarta publicación antes de hacer clic en una?

Con la carga diferida habilitada, WP Rocket realizará un seguimiento de qué tan lejos se han desplazado los visitantes de la página y no cargará imágenes hasta que los visitantes estén cerca de alcanzarlas.

Cómo cargar imágenes de forma diferida en WordPress (solo 1 paso)

El beneficio es que su sitio se carga inmediatamente más rápido porque está cargando muchas menos imágenes. Esto también reduce el ancho de banda que usa su sitio.

Vídeos e iframes

También puede habilitar la carga diferida para videos e iframes (los iframes se utilizan para incrustar contenido de otros sitios).

Cómo optimizar su sitio de WordPress con WP Rocket

También hay una característica increíble que le permite mostrar la miniatura de un video de Youtube hasta que termine de cargarse.

Inconvenientes de la carga diferida

La carga diferida funciona muy bien para un sitio como Pinterest con muchas imágenes pequeñas, pero no siempre funciona bien si tienes imágenes enormes. El problema es que la imagen no se carga hasta que los visitantes se desplazan hacia ella y, si es una imagen grande, es posible que deban esperar un segundo mientras termina de cargarse. Esto puede resultar molesto si ocurre con todas las imágenes de la página.

De hecho, la única razón por la que no tengo esta opción habilitada para Compete Themes es porque a los visitantes les gusta desplazarse muy rápido hacia abajo en algunas publicaciones y las imágenes no están listas cuando llegan a ellas.

Emojis e incrustaciones

WP Rocket también tiene opciones convenientes para deshabilitar la compatibilidad con emoji y la tecnología de inserción de WordPress. Cada una de estas funciones carga un pequeño archivo JS, por lo que al desactivarlas se eliminarán dos archivos más de su sitio.

Cómo optimizar su sitio de WordPress con WP Rocket

Como habrás deducido, me gustan los emojis, ¿así que los mantengo habilitados?

Sin embargo, recomiendo deshabilitar las incrustaciones porque son más molestas que útiles. Si alguna vez ingresó una URL en el editor de publicaciones y WordPress la convierte en un cuadro como un Tweet incrustado, esa es la incrustación que está deshabilitando. Esta opción no afectará a las incrustaciones de Youtube o Vimeo.

¿Qué más puedes hacer con WP Rocket?

Esos son los pasos principales para optimizar su sitio con WP Rocket.

Las configuraciones restantes son para ajustar y corregir posibles errores, aunque se pueden obtener algunas mejoras de rendimiento.

Como se prometió, aquí hay capturas de pantalla de todos los menús restantes en WP Rocket:

Acelera tu sitio

Utilizo WP Rocket aquí en Compete Themes y es uno de los primeros complementos que instalo en cada sitio que construyo.

Si está listo para optimizar su sitio, obtenga una copia de WP Rocket y acelere su sitio.

Haga clic aquí para ver WP Rocket ahora

Y si no ha considerado cambiar de host, le recomiendo que consulte esta revisión de WP Engine. Un host más rápido puede tener un impacto enorme e inmediato en los tiempos de carga de su sitio.

Haga clic aquí para encontrar otras formas de acelerar su sitio

Fuente de grabación: www.competethemes.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More