Si eres de los que te gusta hurgar bajo el capot de tu wordpress, te recordamos que su core hace uso de extensiones PHP para su correcto y óptimo funcionamiento, si falta la extensión requerida WordPress tendrá que trabajar más para realizar la tarea con la que ayuda dicha extensión o, en el peor de los casos, eliminará la funcionalidad relacionada.

Es por esto que te recomendamos que el servicio de hosting que contrates cuente (y se activen) las extensiones de PHP que te enumeramos a continuación.

• curl: realiza operaciones de solicitud remota.
• dom: se utiliza para validar contenidos de texto de widgets y configurar automáticamente IIS7+.
• exif: funciona con metadatos almacenados en imágenes.
• fileinfo: se utiliza para detectar el tipo MIME de las cargas de archivos.
• hash: se utiliza para hash, incluidas las contraseñas y los paquetes de actualización.
• imagick: proporciona una mejor calidad para las cargas de imágenes. Cambio de tamaño de imagen más inteligente (para imágenes más pequeñas) y compatibilidad con miniaturas de PDF, cuando Ghost Script también está disponible.
• json: se utiliza para las comunicaciones con otros servidores.
• mbstring: se utiliza para manejar correctamente el texto UTF8.
• mysqli: se conecta a MySQL para interacciones con bases de datos .
• openssl: permite conexiones basadas en SSL a otros hosts.
• pcre: aumenta el rendimiento de la coincidencia de patrones en las búsquedas de código.
• sodium: valida las firmas y proporciona bytes aleatorios de forma segura.
• xml: se utiliza para el análisis de XML, por ejemplo, desde un sitio de terceros.
• zip: se utiliza para descomprimir plugins, temas y paquetes de actualización de WordPress.

Si eres más detallista, a continuación te mostramos una lista de algunas extensiones restantes que WordPress puede usar en ciertas situaciones, o en caso de que otras extensiones no estén disponibles. Estas son opcionales y no necesariamente imprescindibles, pero instalarlas -si es posible- no hará daño a nadie.

• bcmath: para matemáticas de precisión arbitraria, que admite números de cualquier tamaño y precisión hasta 2147483647 dígitos decimales.
• filter: se utiliza para filtrar de forma segura la entrada del usuario.
• gd: si Imagick no está instalado, la biblioteca de gráficos GD se utiliza como un respaldo funcionalmente limitado para la manipulación de imágenes.
• iconv: se utiliza para convertir entre conjuntos de caracteres.
• intl: se habilita para realizar operaciones con reconocimiento de configuración regional que incluyen, entre otras, formateo, transliteración, conversión de codificación, operaciones de calendario, clasificación conforme, ubicación de límites de texto y trabajo con identificadores de configuración regional, zonas horarias y grafemas.
• mcrypt: genera bytes aleatorios cuando libsodiumy /dev/urandomno están disponibles.
• simplexml: se utiliza para el análisis de XML.
• xmlreader: se utiliza para el análisis de XML.
• zlib: compresión y descompresión Gzip.

Finalmente estas otras extensiones se utilizan para cambios de archivos, como actualizaciones e instalación de plugins o temas, cuando los archivos no se pueden escribir directamente en el servidor.

• ssh2: proporciona acceso a los recursos (shell, ejecutivo remoto, tunelización, transferencia de archivos) en una máquina remota mediante un transporte criptográfico seguro.
• ftp: implementa el acceso del cliente a los servidores de archivos que utilizan el protocolo de transferencia de archivos ( FTP ).
• Sockets: implementa una interfaz de bajo nivel para las funciones de comunicación del socket basada en los populares sockets BSD.

Cada actualización de WordPress trae una gran cantidad de nuevas funciones, pero debido a su gran volumen (o falta de tiempo por parte de nosotros) es sencillo pasarse alguna(s) por alto, en especial, una variedad de trucos y atajos.

1. Escritura sin distracciones

Una de las partes más difíciles de escribir en WordPress es tratar de concentrarse con toda la interfaz que distrae: la barra lateral ocupando una quinta parte de la pantalla, junto con todo otro tipo de herramientas, iconos y botones.

Afortunadamente, existe un modo de escritura sin distracciones para desactivar gran parte de estas molestias visuales. Es tan simple como ubicar (una vez en la pantalla de edición de cualquier Post o Página) el link de Modo a pantalla completa en tu barra de herramientas, haciendo clic en los tres puntos de la esquina superior derecha, para poder acceder a él.

2. Ocultar elementos y personalizar menús con opciones de pantalla

Con las Opciones de pantalla puedes deshacerte de otras distracciones tan fácil como marcar una casilla de verificación; búscalas dentro del menú de los tres puntos, en la esquina superior derecha de Posts y Páginas.

Deberías ver un menú desplegable de Opciones de pantalla. Allí podrás deshabilitar fácilmente los elementos que desees ocultar. 

3. Publicaciones Fijas

Hay un gran problema que surge cuando se ordenan cronológicamente las estradas o posts de tu blog: una vez que una publicación sale o se mueve de la página principal (por el ingreso de otras), pierde mucho tráfico. Afortunadamente, puedes fijar publicaciones en la parte superior, haciendo que siempre estén visible allí para tus visitantes (si eso es lo que deseas, necesitas o te conviene).

Para fijar una publicación, ábrela en el editor, en la barra lateral derecha ubica la pestaña  Documento, y allí seleccionas Fíjalo a la parte superior del blog.

4. Salto de página y bloque de lectura "Más"

Por lo general a nadie le gusta leer, y mucho menos textos tan largos, por ello es bueno dividirlos; en este caso estos dos bloques de Gutenberg te podrán ayudar (ambos dentro del renglón de Elementos de Diseño).

El primero es el bloque de Salto de página, que insertará una pausa donde lo especifiques. Es una excelente manera de agregar paginación a las publicaciones de tu blog. Puedes agregarlo haciendo clic en el botón Añadir un bloque y buscando Salto de página.

Luego está el bloque Más , que agrega un mensaje para continuar leyendo en situaciones en las que solo aparece una parte de tu artículo (extracto).

El bloque Más se puede agregar como cualquier otro bloque.

5. Cambiar el intervalo de autoguardado

De forma predeterminada, WordPress guarda automáticamente cada 60 segundos. Para la mayoría de las personas, esto no es un problema. Si esto te atormenta (y quieres alargar el tiempo de guardado automático), puedes solucionarlo con una función sencilla: simplemente agregua el siguiente fragmento en la parte inferior del archivo wp-config.php de tu sitio :

define('AUTOSAVE_INTERVAL', 600);

Esto establecerá el intervalo de guardado automático cada 600 segundos o 10 minutos, así puedes cambiarlo por el valor que desees.

6. Limitar las revisiones posteriores

Las revisiones de publicaciones de WordPress pueden salirse de control rápidamente, especialmente cuando alguien es propenso a hacer numerosos cambios en una misma publicación. Ese contenido (infinidad de revisiones) puede terminar ocupando mucho espacio en tu base de datos. Por ello es posible desees limitar las revisiones de publicaciones con una sencilla función.

Accede al wp-config.php y en la parte inferior, pega el siguiente código:

define( 'WP_POST_REVISIONS', 5 );

Cambia el número por el que desees, y las revisiones anteriores se eliminarán a partir de ese momento. También puedes configurarlo a 0 para desactivar las revisiones por completo.

7. Cambiar o deshabilitar el cambio de tamaño de las imágenes

Seguro ya has notado que WordPress cambia automáticamente el tamaño de todas tus imágenes cargadas en tres tamaños diferentes. Si bien esto es útil para imágenes en miniatura, también ocupa mucho más espacio en tu sitio. Si te molesta, siempre podrás desactivarlo en la configuración de Medios.

Abre Ajustes > Medios en tu administrador wordpress y busca Tamaño de las imágenes. Aquí verás los tamaños en miniatura, mediano y grande. Puedes cambiarlos a las dimensiones que desees, pero si lo que buscas es que alguno o ninguno de estos tamaños se genere de forma automática, simplemente ingresa 0 en los valores correspondientes.

8. Vistas previas de páginas responsive.

Esta opción puede ser difícil de notar, ya que los íconos son bastante pequeños, pero es de gran ayuda cuando estás diseñando tu sitio.

En Apariencia > Personalizar, busca (abajo a la izquierda) los tres íconos que se asemejan a un monitor de computadora, tableta y teléfono. Haz clic en ellos y podrá ver automáticamente cómo se visualiza tu sitio en diferentes dispositivos.

9. Ocultar bloques de Gutenberg

Gutenberg ya tiene bastantes y siempre se le agregan bloques nuevos, pero algunos de ellos solo son útiles para casos especiales, y muchos pudieran no interesarte, estos que para tí sobran puedes ocultarlos, y así enfocarte sólo en lo que sabes que siempre usarás.

En el editor de cualquier publicación, busca los tres puntos en la esquina superior derecha de la pantalla y haz clic en Gestor de bloques .

Desde aquí puedes anular la selección de los bloques que no desees y ya no se interpondrán en tu camino.

10. Arrastrar y soltar fotos subidas

Normalmente al cargar imágenes debes hacer clic en el botón Subir, y luego navegar por tu computadora hasta encontrar dónde está almacenada la foto que deseas cargar.

Pero para aquellos que mantienen sus imágenes almacenadas en un lugar de fácil acceso, esta es una mejor manera: simplemente visita la Biblioteca de medios y arrastra el archivo desde la carpeta de tu computadora al navegador.

Aún mejor, mientras escribes en el editor de WordPress, simplemente arrastra y suelta la imagen donde deseas que aparezca. WordPress la cargará e insertará automáticamente.

11. Modo de accesibilidad de widgets

La funcionalidad de arrastrar y soltar a menudo se promociona como la forma más sencilla e intuitiva de navegar por una interfaz de usuario. Pero para algunas personas, el movimiento de arrastrar y soltar puede ser difícil o incluso doloroso de realizar. Afortunadamente, WordPress tiene una gran cantidad de opciones de accesibilidad integradas.

Si este es tu caso, ve a Apariencia > Widgets, busca (arriba a la derecha) Activar modo de accesibilidad y haz clic allí.

En lugar de arrastrar y soltar, ahora puedes hacer clic en el nuevo botón Agregar que aparece junto a cada widget disponible.

Luego puedes agregar y colocar los widgets donde los desees, simplemente seleccionándolos en los menús desplegables.

12. Agrega enlaces rápidamente

Agregar hipervínculos manualmente al texto es un esfuerzo pequeño pero tedioso, sin embargo WordPress ha agregado una forma de acelerarlo. Pruébalo por tí mismo: copia el enlace o URL que desees, selecciona el texto al que quieres activarle ese enlace, luego simplemente pega lo copiado (presionando como ya sabes Ctrl v y listo!, enlace creado.

En lugar de reemplazar el texto seleccionado con tu enlace, la(s) palabra(s) resaltada(s) se convierten automáticamente en el texto de anclaje; tan sólo recuerda configurar las opciones que necesites, como abrir el enlace en una nueva ventana.

13. Temas y plugins favoritos

Mientras navegas por los temas y complementos de WordPress, es posible que no hayas notado el botón ubicado debajo o cerca del botón de descarga: un ícono de corazón. (Nota: debes iniciar sesión en WordPress.org para poder ver esto).

Haz clic en él y podrás seleccionar los plugins y temas favoritos que desees volver a encontrar más tarde. Luego, cuando vayas a la página de tu cuenta de WordPress, verás la lista de ellos allí.

14. Bloques de Gutenberg reutilizables y el bloque de grupo

¿Te encuentras usando ciertos bloques de Gutenberg una y otra vez en la misma configuración de manera exacta? ¿Quizás una galería determinada o un mensaje al final de las publicaciones de tu blog que siempre es idéntico? ¡Los bloques de Gutenberg reutilizables significan que no tienes que rehacerlo todo una y otra vez!

Para guardar un bloque de Gutenberg y usarlo nuevamente más tarde, selecciónalo, haga clic en los tres puntos que aparecen en la barra, y luego selecciona Añadir a los bloques reutilizables.

Luego, para cargar un bloque que hayas guardado previamente, haz clic en el botón Agregar bloque como de costumbre, y selecciona la opción Reutilizable. Tu bloque guardado estará allí, listo para ser introducido con un clic.

Así es como estas pocas funciones (sólo una muy pequeña muestra de todas las disponibles), pueden llegar a cambiar por completo la forma en que trabajas, o por lo menos hacer que WordPress sea un poco más agradable de usar.

El plugin de carruseles de imágenes y vídeo Slider Revolution es uno de los más utilizados en WordPress. Es sencillo de usar, permite montones de personalizaciones y con él se pueden crear carruseles realmente impactantes.

El problema de Slider Revolution

Ahora bien, su potencia se le debe a montones de scripts, estilos y fuentes, que carga para poder ofrecer esos fantásticos efectos, y ahí es donde está el problema: Las webs con Slider Revolution suelen ser más lentas que las que no lo tienen, y obtienen peores puntuaciones en las métricas web principales.

Esto se debe principalmente a que (por default)…

• Carga todo su JavaScript globalmente en todas las páginas de tu web, da igual si tienen un carrusel de Slider Revolution o no.
• Carga todo su CSS globalmente en todas las páginas de tu web, da igual si tienen un carrusel de Slider Revolution o no.
• Carga todo su JS y CSS en la cabecera de tus páginas.
• Carga todas las fuentes de Google Fonts por defecto.
• Carga la biblioteca de iconos Font Awesome aunque no los uses.
• Hace un uso excesivo de jQuery.
• No hace carga diferida de las imágenes.

Como verás son unos cuantos problemas a abordar, pero todos con solución.

Uno estaría tentado rápidamente a potenciar mediante plugins de caché y optimización genéricos, pero vamos a echar el freno, porque se puede optimizar, y mucho, la carga de Slider Revolution sin plugins adicionales.

Cómo optimizar Slider Revolution

Optimiza las imágenes

Para esto no necesitas plugin alguno. El primer gran consejo es que subas imágenes a tus carruseles de Slider Revolution al tamaño adecuado de pantalla y con el menor peso de archivo posible.

Si necesitas una imagen de un máximo de 1900 píxeles de ancho no la subas a 2500, y optimiza esa imagen antes de subirla a tu carrusel, mejor si el archivo pesa 100 Kb que si pesa 2 Mb.

Tienes herramientas gratuitas como Squoosh que te facilitan ambas tareas de manera muy sencilla.

No incluyas las bibliotecas de código globalmente

Por defecto, Slider Revolution añade las bibliotecas de código JavaScript y estilos CSS globalmente, en todas las páginas de tu web, aunque solo tengas un carrusel en una de ellas (sólo el Home, por ejemplo).

Para evitarlo, y que solo se carguen en las páginas en las que realmente haya un carrusel de Slider Revolution haz lo siguiente:

1. Ve a la administración de Slider Revolution y haz clic en el icono «Globals» para acceder a los ajustes globales.
2. Desactiva la opción llamada «Include libraries globally» que es la que, por defecto, incluye todo este código en toda tu web.
3. En la caja a la derecha de «List of pages to include RevSlider libraries» añade, separados por comas, los IDs de las páginas en las que sí quieres que se carguen las bibliotecas que necesita Slider Revolution para que funcionen los carruseles. Para saber cuál es el ID de una página o entrada edítala y en la URL aparece el número ID como post=1234. Además, si quieres que se carguen en tu página de inicio incluye también el texto homepage.

Ejemplo de configuración correcta, incluyendo varios ID de páginas y la portada:

Inserta los scripts en el pie de página

Por defecto, Slider Revolution carga sus scripts en la cabecera de tus páginas. Un modo de mejorar la experiencia de navegación, velocidad y optimizar la carga de tus páginas es insertar estos scripts en el pie de página.

De nuevo, en los ajustes globales de Slider Revolution, activa la opción llamada «Insert scripts in footer»

Aplaza la carga del JavaScript

También mejorará el rendimiento de tu web aplazar la carga de todo el código JavaScript de Slider Revolution.

Para ello activa la opción «Defer JavaScript loading».

Usa la carga diferida (lazy loading) de tu plugin favorito

Slider Revolution no tiene ajustes avanzados globales para la carga diferida de imágenes, algo que sí puedes hacer con plugins como SG Optimizer o WP Rocket.

Si quieres usar los ajustes de tu plugin de optimización favorito para la carga diferida de imágenes añade el parámetro de carga diferida del plugin en la caja a continuación de «3rd Party lazy loading data»

Por ejemplo, si usas WP Rocket el parámetro de carga es lazy-src,  y en el caso de SG Optimizer lazyload.

Activa la caché interna de Slider Revolution

No mucha gente sabe que Slider Revolution tiene su propio sistema de caché interno que guarda los carruseles como HTML para servirlos más rápidamente.

Puedes activarla en la opción «Use internal caching» y hasta tienes un botón para vaciarla. Si no te aparece esta opción es porque no tienes activa la más reciente versión de Slider Revolution.

Optimiza la carga de fuentes de Google

También es recomendable activar la caché y precarga de las Google Fonts que usa Slider Revolution. En el ajuste «Enable Google Fonts download» puedes elegir entre:

• Load from Google: Carga las fuentes desde Google en cada carga de página.
• Cache fonts local: Precarga y almacena localmente las fuentes de Google necesarias para servirlas más rápidamente.
• Disable, Load on your own: También puedes desactivar totalmente el uso de Google Fonts si realmente no las utilizas en ninguna diapositiva de tus carruseles con esta opción.

Cualquier opción entre la segunda y la tercera son mejores que la primera, por defecto. Si sabes que no usas ninguna Google Font la mejor es la última, ante la duda opta al menos por la segunda opción: Cache fonts local.

Ajustes avanzados por diapositiva

Además de los anteriores ajustes globales, también hay ajustes avanzados en cada diapositiva (slide) que pueden ayudar a optimizar su carga.

Para ello, edita tus carruseles y, en cada diapositiva, pásate por el icono «Advanced» de la sección de contenido, donde encontrarás varios ajustes de optimización.

En concreto, debes revisar los siguientes ajustes:

• Lazy Loading: Ajustes de carga diferida de la diapositiva, con varias opciones…
  1. All: Carga diferida de todas las imágenes cada vez que se visualice la diapositiva.
  2. Smart: Carga diferida de la diapositiva actual, de la anterior y de la siguiente.
  3. Single: Carga diferida solo de la diapositiva actual
  4. No Lazy Loading: Carga de las imágenes inmediata, sin carga diferida.
• Use cache: Puedes activar la caché solo en esta diapositiva o usar los ajustes globales.
• jQuery No Conflict Mode: Útil cuando haya errores de visualización o scripts al interferir la versión de jQuery de Slider Revolution con la de otros plugins o incluso WordPress.
• Put JS to Body: Al igual que vimos en los ajustes globales, pero esta vez a nivel de cada diapositiva, puedes cargar el JavaScript en el pie de página en vez de en la cabecera. No es necesario si lo hiciste ya en los ajustes globales.

Estos serían los ajustes recomendables:

Nota: Verás en la captura de los ajustes avanzados por diapositiva que ponemos como recomendado no hacer carga diferida. Esto es debido a que normalmente estos carruseles suelen estar en la parte inicial de carga de la página, conocido como above the fold, y en esta sección las métricas web principales de Google no recomiendan aplicar carga diferida, para que el visitante vea de inmediato el contenido inicial de la página.

Nota: Si activaste la caché o poner el JS en el pie de página en los ajustes globales de Slider Revolution no es necesario que actives estos ajustes en cada diapositiva.

¡Pues ya está! Como habrás visto, el equipo de desarrollo de Slider Revolution no está parado ni muchísimo menos, y ofrece ajustes de optimización muy interesantes en su plugin, que marcan enormes diferencias en cuanto al rendimiento y velocidad de carga de tu web sin los configuras correctamente, como esperamos haberte ayudado a hacer.

A modo de resumen, aquí te dejo las capturas finales de cómo está configurado globalmente Slider Revolution por defecto y de cómo dejarlo configurado de manera óptima según hemos visto en esta guía: