La guía definitiva para la optimización de la velocidad de la página para WordPress

Siguiendo esta guía, aprenderá todas las técnicas para acelerar drásticamente un sitio de WordPress. Estas son las razones más importantes por las que tener un gran tiempo de carga de velocidad de página en WordPress beneficia a su negocio: los usuarios no abandonarán su sitio web, gastarán más tiempo y dinero allí, y los motores de búsqueda clasificarán mejor su sitio web en los resultados de búsqueda. ¿Listo?

Introducción

Los usuarios de Internet no tienen mucha paciencia cuando se trata de tiempos de carga de la página. Hacemos clic en un enlace o ingresamos la URL y esperamos un segundo, dos, tres y listo. Las estadísticas de Google indican que el 50 % de los usuarios esperan que un sitio móvil se cargue en 2 segundos y es probable que el 53 % de los usuarios abandonen la página si se carga durante más de 3 segundos. Ese es un período muy corto, si consideras que el tiempo promedio de carga de una página de inicio, en un dispositivo móvil, es de 19 segundos (en una red 3G). Los tiempos de carga en las computadoras son más rápidos y un tiempo de carga promedio es de 5 segundos, pero aún así es demasiado tiempo.

Tomar los benchmarks de sitios web de escritorio como referencia ya no es una excusa. Para la mayoría de los sitios web actuales, la mayor parte del tráfico proviene de dispositivos móviles. En este artículo, echaremos un vistazo completo a las técnicas más actualizadas para la optimización de la velocidad de la página para los sitios de WordPress. Siguiendo esta guía, podrá acelerar el sitio de WordPress, reducir drásticamente los tiempos de carga de dispositivos móviles y de escritorio y, por lo tanto, hacerlo mucho más fácil de usar.

Si no tienes un sitio de WordPress, no cierres la guía todavía. La mayoría de las técnicas de optimización de velocidad explicadas en esta guía paso a paso se pueden aplicar a cualquier tipo de sitio web.

Si su sitio se creó teniendo en cuenta la monetización, ya sea una tienda de comercio electrónico en línea o si vende servicios en línea/fuera de línea, perder clientes potenciales nunca es bueno. Básicamente estás dejando dinero sobre la mesa. Mejorar la velocidad de su página debería tener un impacto positivo en sus ganancias. Dato curioso: la campaña de recaudación de fondos de Obama aumentó la conversión de donaciones en un 14 % con la optimización del sitio y la reducción del tiempo de carga de la página de 5 a 2 segundos.

Como propietarios o desarrolladores de sitios web, queremos que nuestros visitantes tengan la mejor experiencia. Creamos sitios atractivos con una funcionalidad increíble, pero generalmente olvidamos la importancia de un sitio web rápido. Un sitio web rápido genera confianza con nuestros visitantes, aumenta la posibilidad de que un visitante permanezca en nuestra página por más tiempo y, por lo tanto, podría gastar más. Por otro lado, si nuestro sitio web es lento, es posible que los visitantes se den por vencidos y ni siquiera vean nuestro increíble sitio web, con nuestra oferta igualmente increíble.

Si las razones anteriores no fueron lo suficientemente persuasivas, tengo una más. Google y otros motores de búsqueda (SE) revelaron que tener un sitio web lento hará que su clasificación en el motor de búsqueda baje, dejándolo con aún menos visitantes. Por lo tanto, tener un sitio web rápido significa que le gustará más a Google y esto puede cambiar drásticamente su clasificación SE a su favor.

Por supuesto, los tiempos de carga varían por un par de razones, por ejemplo, la velocidad de Internet del visitante, la ubicación del visitante y cuán "pesado" o inflado es nuestro sitio web. No hay nada que podamos hacer con respecto a la velocidad de Internet del visitante, pero podemos ocuparnos de otros aspectos y mejorar la experiencia para todos. En esta guía, veremos cómo optimizar la velocidad de nuestro sitio web de WordPress, para que sea rápido y ágil, ¡así que vamos!

Tabla de contenido

• Cimientos
  • Alojamiento WordPress
    • Alojamiento Compartido
    • Alojamiento gestionado
    • Servidores VPS o Dedicados
  • Tema de WordPress
  • Complementos de WordPress
• Pasos de optimización de la velocidad de la página de WordPress
  • Herramientas de velocidad de página
    • Perspectivas de velocidad de página de Google
    • GT Metrix
    • Prueba de velocidad del sitio web de Pingdom
    • Prueba de página web
  • Optimización de imagen
    • Mini guía para la optimización de imágenes
    • Imágenes optimizadas de Google PageSpeed
    • Otras mejoras de imagen
    • Mejoras en el estudio de caso
  • Almacenamiento en caché del navegador
  • Compresión de recursos (Gzip o Deflate)
  • Eliminar archivos JS o CSS innecesarios
  • JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página
  • Almacenamiento en caché del lado del servidor
    • WP Rocket (complemento de almacenamiento en caché del lado del servidor)
  • Red de entrega de contenidos
    • Llamarada de nube
• Resultados finales
• Conclusión

Cimientos

Para que su sitio web sea lo más rápido posible, debemos construirlo sobre buenos cimientos. Al igual que construir una casa, no querrás construirla sobre arenas movedizas y tener problemas desde el principio. Desea construirlo sobre cimientos sólidos, para que dure mucho tiempo sin ningún problema. Las tres cosas principales a verificar son:

• alojamiento
• el tema de wordpress
• los complementos de WordPress

Alojamiento WordPress

El alojamiento es la base misma de su sitio web de WordPress y, por lo tanto, es un componente crucial que no debe pasarse por alto, incluso si ya tiene un alojamiento. Cambiar a un mejor proveedor de alojamiento acelerará el tiempo de carga de WordPress durante varios segundos.

Seleccionar el alojamiento web adecuado es importante y no debe basar su decisión en el precio del alojamiento. Por lo general, con precios bajos, se obtiene un bajo rendimiento y eso es lo que queremos evitar. Veamos las opciones de alojamiento disponibles y expliquemos cuáles son las diferencias.

Alojamiento Compartido

Esta es la solución de alojamiento más extendida porque es barata. Pero como dijimos, con precios bajos, obtienes un rendimiento bajo. En un alojamiento compartido, hay miles de cuentas en un servidor físico, lo que significa que los recursos del servidor se comparten entre todos los sitios web creados por estas cuentas de alojamiento.

Imagina una gran pizza (¿hmmm?…), cada sitio web en un alojamiento compartido recibe una porción muy pequeña. Pero debido a que su sitio tiene muchos visitantes, ¡necesita más pizza! Todavía tiene hambre, pero ya no hay pizza :(, porque otros sitios web también tienen hambre...

Si obtener solo una pequeña porción de pizza no es lo suficientemente malo, entonces los posibles riesgos de seguridad probablemente empeorarán aún más el caso del alojamiento compartido. Un sitio web infectado en un alojamiento compartido podría causar problemas de velocidad y rendimiento para todo el servidor y también poner en peligro su sitio de WordPress.

La configuración del servidor en los alojamientos compartidos es muy limitada y no tiene mucho espacio para respirar para configurarlo a su gusto. El servidor está preconfigurado con configuraciones específicas, generalmente muy genéricas, y debería ejecutar WordPress sin ningún problema. Los problemas surgen más tarde, en forma de quedarse sin memoria o en forma de una configuración de PHP restringida, que un complemento necesitaría para funcionar correctamente.

Realmente no puedo recomendar el alojamiento compartido para ningún sitio web comercial, pero si tuviera que hacerlo, tendría que decir que es más adecuado para sitios con muy poco tráfico.

Alojamiento gestionado

Esta es una gran actualización del alojamiento compartido, porque su sitio web obtiene una porción de pizza más grande (¡una porción de pizza entera, sí!), pero cuesta más.

Los servidores en el alojamiento administrado están menos poblados y eso se traduce en más recursos de servidor para su sitio. Estos servidores generalmente están optimizados para ejecutar WordPress de la mejor manera posible, tienen más memoria, potencia de procesamiento y un sistema de almacenamiento en caché.

La instalación y configuración de hardware y software de estos servidores de alojamiento gestionados la realiza la empresa de alojamiento (de ahí la palabra "gestionado"). Otros servicios, como copias de seguridad, equilibradores de carga, recuperación ante desastres y controles/prevenciones de seguridad, también pueden formar parte del alojamiento gestionado, según la oferta de la empresa de alojamiento.

El alojamiento administrado de WordPress se recomienda para sitios web de tráfico bajo a medio.

Servidores VPS o Dedicados

Si nos atenemos a la analogía de la pizza, con VPS (servidor privado virtual) obtienes algunas porciones de pizza, pero no toda la pizza y con servidores dedicados, obtienes la pizza entera.

Esto significa que con los servidores dedicados, usted tiene el control de todo el servidor con todos sus recursos y con el VPS, obtiene una parte del servidor porque aún comparte la máquina del servidor físico con otros. Cuando se trata de la optimización de la velocidad de la página para WordPress, no existen limitaciones del lado del servidor cuando configura su WordPress en VPS o en un servidor dedicado. Sabe exactamente cuántos recursos hay disponibles para su sitio web y puede configurarlo a su gusto. Puede implementar funciones de vanguardia antes de que los proveedores de alojamiento estándar las admitan (lo que puede retrasarse años con respecto a la tecnología de software del servidor).

Ambas opciones ofrecen mayor control y recursos, pero también tienen precios más altos y exigen más habilidades para configurarlas y mantenerlas a largo plazo. Los servidores VPS/Dedicados también se pueden administrar, por lo que no necesita ser un gurú de los servidores para usar uno. Son apropiados para sitios web con alto volumen de tráfico.

Si no está seguro de qué alojamiento elegir, le sugiero la opción de alojamiento administrado de WordPress, que también debería poder escalar (asignar más recursos del servidor), si es necesario.

Una optimización de sitio web gratuita, que todo hosting decente ofrece ahora, es actualizar la versión de PHP a 7.x. Si su sitio de WordPress se ejecuta en PHP anterior a 7, como 5.6 o incluso anterior, comuníquese con el soporte de alojamiento y pídales que lo actualicen a la última versión estable. Si está buscando un nuevo alojamiento, puede solicitar su soporte, si tienen la versión PHP 7.x. Todos deberían responder con un rotundo “sí”, pero si no tienen la opción de usar PHP 7.x, entonces recomendaría mantenerse alejado de ellos. PHP 7 es, en comparación con versiones anteriores, una gran mejora cuando se trata de velocidad y rendimiento y es muy fácil cambiar a él, así que aprovéchalo.

Una buena elección de alojamiento le ahorrará mucho dolor en el futuro y, si se encuentra con un problema, un buen servicio de atención al cliente debería poder ayudarlo, por lo que también debería tener en cuenta elegir un alojamiento que ofrezca un buen soporte. . Un truco rápido que puede utilizar: hágales una pregunta previa a la compra y controle su tiempo de respuesta, actitud y nivel de profesionalismo.

Tema de WordPress

Cuando elegimos un tema de WordPress para nuestro sitio, siempre comenzamos con el diseño del tema y eso está bien. Primero debemos elegir algunos temas que nos gusten, porque queremos que nuestro sitio sea increíble y un gran diseño es lo primero que ve un visitante. Lo segundo es probablemente la funcionalidad del tema. ¿El tema o los complementos recomendados del tema ofrecen la funcionalidad que queremos? Si lo hace, ¡genial! ¡Estamos en el negocio! Lo que casi siempre olvidamos es verificar qué tan rápido carga el tema.

Podemos probar el tiempo de carga de la página de demostración del tema y veremos rápidamente si el tema está optimizado para la velocidad. Verificaremos qué herramientas de velocidad de página usar y cómo usarlas en una sección a continuación, pero por ahora, solo quiero informarle sobre este paso adicional de verificación del tema, antes de la compra. Por supuesto, el tiempo de carga de la página de demostración probablemente se puede mejorar, por lo que si no obtiene una puntuación perfecta, no se preocupe, ningún tema de WordPress obtendrá una puntuación perfecta del 100 %, excepto si tiene muy poco contenido. en su página de demostración. Como regla general, debe buscar temas que no estén en las cifras rojas (puntuación de 50 o menos en las herramientas de velocidad de página).

Todo se reduce a un buen equilibrio entre el diseño y la funcionalidad del tema frente a la velocidad del tema. Por ejemplo, un tema de WordPress vacío con un poco de texto se cargará muy rápido, pero un tema inflado con muchas funciones (la mayoría de las cuales quizás no necesite), con mucho contenido multimedia, se cargará mucho más lento. Alcanzar ese punto óptimo es el objetivo, al seleccionar un tema de WordPress bueno y con buen rendimiento.

Complementos de WordPress

Una pregunta que veo aparecer mucho es: "¿Cuántos complementos son demasiados?". No es un problema en la cantidad de complementos de WordPress, sino en la calidad del código y el impacto que tiene el complemento en el sistema. Puede tener más de 50 complementos activos, cada uno de los cuales se ocupa de una pequeña funcionalidad específica (con un buen código) y el sitio funcionará correctamente. Por otro lado, puede tener 5 complementos activos y uno de ellos podría estar obstruyendo su sistema, haciendo que su WordPress sea lento.

Repasar el código de cada complemento es una buena idea, pero "nadie tiene tiempo para eso", además, necesitaría un buen conocimiento de programación para hacerlo. Si sigue ese camino, las cosas que debe tener en cuenta son los complementos que ponen en cola muchos recursos externos, realizan muchas solicitudes HTTP, realizan consultas de base de datos innecesarias (no optimizadas), etc. (básicamente cualquier cosa que ralentizaría el sitio web de WordPress, sin una razón adecuada detrás de él).

Lo que recomendaría es no instalar y activar cada complemento que crea que necesita.

Primero piénselo, ¿su sitio realmente necesita esta funcionalidad adicional? Por ejemplo, si necesita un código abreviado de botón, consulte la documentación de su tema, tal vez el tema tenga un código abreviado y no necesite instalar y activar un complemento de paquete de código abreviado completo solo para usar un código abreviado de un solo botón. Este es un ejemplo trivial, pero quiero que pienses antes de instalar y activar nuevos complementos. Cada complemento no verificado podría hacer que su sitio sea más pesado y, por lo tanto, más lento, además de que podría provocar una violación de la seguridad, si el complemento está mal codificado o no recibe mantenimiento.

Por último, una gran cosa que puede aprovechar, al seleccionar el complemento, es una gran participación global de WordPress y, en consecuencia, una gran comunidad. Con la falta de conocimiento de codificación, una buena regla general es quedarse con los complementos populares con muchas instalaciones activas, un buen puntaje de calificación promedio y críticas positivas. ¡Los compañeros de WordPress harán que su selección sea mucho más fácil!

Pasos de optimización de la velocidad de la página de WordPress

Antes de comenzar con la optimización, me gustaría mencionar algunas cosas.

En primer lugar, debe crear una copia de seguridad de su sitio de WordPress, aquí hay una guía sobre cómo hacerlo con un complemento de WordPress. ¡Más vale prevenir que lamentar!

En segundo lugar, te advierto que no esperes una puntuación de 100/100 en las herramientas de velocidad de página que usaremos en nuestra guía. Buscar la puntuación 100/100 no es una buena idea ni es posible en algunos sitios. Todo depende del tipo de contenido que muestre su sitio. Si un sitio solo tiene un poco de texto y una imagen, entonces seguro, una puntuación perfecta es totalmente posible. Pero si tiene una página larga, con una gran cantidad de contenido multimedia y otras integraciones de aplicaciones de terceros, como Google Maps, etc., entonces el puntaje 100 no está en su mira y tampoco debe buscarlo.

¿Por qué no es buena idea apostar por el 100/100? Si sigue las instrucciones de las herramientas de velocidad de la página y optimiza todo como dicen, es posible que su sitio no funcione correctamente. Si mueve todos los archivos JS o CSS de bloqueo al pie de página, aparecerá el parpadeo de CSS (el contenido sin estilo aparecerá primero y cuando se cargue el CSS, el sitio "parpadeará" en su lugar), lo mismo sucederá con el código JS , que modificaría cualquier elemento DOM después de que se cargara el código JS.

Puede romper su sitio, si sigue ciegamente las instrucciones y sigue optimizando su sitio de WordPress para un mejor tiempo de carga, solo para obtener la puntuación perfecta. El puntaje de velocidad de página perfecto es solo un número, que en realidad no importa, si sus visitantes terminan con un sitio roto. Tenemos que buscar el equilibrio entre la velocidad de la página y la experiencia del usuario.

Para la demostración de la optimización de la velocidad de la página de WordPress, usaremos mi cuenta de alojamiento compartido y nuestro tema médico de WordPress (con los complementos recomendados del tema). Sí, sí, sé que básicamente dije que no usara un alojamiento compartido, pero veremos de qué es capaz y cuáles son las limitaciones, además, esto es solo una prueba de optimización de la velocidad de la página, no un sitio web de negocios real de WordPress.

Instalé la última versión de WordPress, el tema MedicPress, todos los complementos recomendados del tema e importé el contenido de demostración. Este es nuestro punto de partida para el sitio de prueba.

Herramientas de velocidad de página

La optimización de la velocidad de la página puede ser difícil, pero afortunadamente, existen herramientas en línea que nos facilitan la vida y nos aconsejan qué hacer para mejorar la velocidad de nuestro sitio web.

La primera regla para optimizar tu WordPress para la velocidad es esta: ¡siempre mide!

Ejecute las herramientas (o al menos una de ellas), que veremos en la siguiente sección, después de cada paso de optimización y realice un seguimiento de las mejoras. De esta manera, sabrá qué tareas aportan las mayores mejoras. También debe ejecutar pruebas varias veces para ver el tiempo de carga promedio real.

Las páginas se cargan de manera diferente, dependiendo de dónde se encuentre el servidor de alojamiento. Por ejemplo, si su servidor está ubicado en América del Norte y el visitante es de Europa, la página se cargará más lentamente para él que para un visitante canadiense. Este problema se puede solucionar con una CDN (red de entrega de contenido), pero lo veremos un poco más adelante en este artículo. Por ahora, solo quería señalar que este problema está presente para los visitantes de todo el mundo y también para las herramientas de optimización de la velocidad de la página. Algunas herramientas también le permiten realizar la prueba desde diferentes ubicaciones, para que pueda ver cómo eso afecta el tiempo de carga.

Las herramientas de velocidad de página que veremos son:

• Perspectivas de velocidad de página de Google
• GTmetrix
• Prueba de velocidad del sitio web de Pingdom
• Prueba de página web

Hay otras herramientas, pero estas son las más populares y nos quedaremos con ellas.

Perspectivas de velocidad de página de Google

Como puede ver en el título de esta herramienta, este es un producto de Google. Además de la puntuación (dividida en escritorio y móvil) y las instrucciones útiles sobre qué hacer para mejorar el tiempo de carga de su página, también podemos sacar una conclusión sobre lo que a Google le gusta ver en un sitio web. Qué cosas quiere optimizar en un sitio web para clasificarse bien en los resultados del motor de búsqueda.

Si tiene imágenes o archivos de recursos no optimizados (JS o CSS), generará un archivo zip con sus equivalentes optimizados, que puede reemplazar en su servidor. Bastante ordenado, ¿verdad? Veremos la optimización de imágenes y códigos más adelante, solo sepa que Google PageSpeed ​​puede ayudarlo con eso.

Google PageSpeed ​​Insights no tiene mucha información detallada, como otras herramientas, pero es un buen punto de partida, que cubre todos los aspectos importantes de la optimización de la velocidad de la página. Enumera los pasos que mejorarán más su sitio.

Ejecuté esta herramienta con la URL de nuestro sitio de prueba y obtuve una puntuación de 71 para computadoras de escritorio y 67 para dispositivos móviles, por lo que se puede mejorar. La lista de posibles sugerencias de optimización incluye:

• Habilitar la compresión (comprimir recursos con gzip o deflate),
• optimizar imágenes,
• reducir el tiempo de respuesta del servidor,
• eliminar JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página,
• minificar JavaScript.

GTmetrix

Esta herramienta le brinda información más detallada sobre qué cosas están optimizadas y cuáles no. Cada detalle de optimización se enumera y califica en una escala de 0 a 100. La lista está ordenada por importancia, por lo que si sigues las tareas de arriba a abajo y optimizas las que no tienen un puntaje del 100 %, estarás en el buen camino para acelerar el sitio de WordPress lo más rápido posible.

Con las herramientas de prueba PageSpeed ​​e YSlow, GTmetrix genera puntajes para su página y muestra las tareas que deben mejorarse. Una buena característica de esta herramienta es también el informe Waterfall, que representará gráficamente cómo se está cargando su sitio y podrá detectar los cuellos de botella más rápido. En la imagen a continuación, puede ver que mi alojamiento compartido lento tardó 1,13 segundos en responder con la primera información. Eso es demasiado tiempo, pero podremos mejorarlo.

También puede probar su página desde 7 ubicaciones diferentes en todo el mundo, lo cual es bueno y también es algo importante para probar, que veremos más adelante en el artículo.

Ejecuté la herramienta GTmetrix (ubicación: Vancouver, Canadá) en nuestro sitio de prueba y obtuve un puntaje de PageSpeed ​​de 77 y un puntaje de YSlow de 71. Con esta herramienta, también obtenemos esta información útil:

• Tiempo de carga completa: 3,1 s,
• Tamaño total de la página: 803 KB
• Solicitudes: 54

Me gusta más la herramienta GTmetrix, ya que obtienes mucha información relevante en un solo lugar. Usaremos principalmente la herramienta GTmetrix para medir nuestro progreso de optimización en esta guía.

Prueba de velocidad del sitio web de Pingdom

Pingdom es otra herramienta que muestra la información de optimización de forma un poco diferente. Obtiene los mismos datos de resumen básicos que en la herramienta GTmetrix (sin la puntuación YSlow). Con Pingdom, tiene la opción de probar la velocidad de la página en 4 ubicaciones diferentes. Los resultados son diferentes para cada ubicación, lo que muestra que la ubicación del servidor es importante, pero también podremos mejorarla (con CDN más adelante en este artículo). Usaremos la herramienta Pingdom para probar los tiempos de carga de la página en las 4 ubicaciones disponibles, ya que las pruebas de Pingdom se completan más rápido.

Pingdom también muestra algunas tablas interesantes, como el tamaño del contenido o la cantidad de solicitudes, filtradas por el tipo de contenido o por dominio y también tiene un informe en cascada.

Prueba de página web

La herramienta WebPageTest tiene incluso más opciones de configuración que las herramientas anteriores. Tiene más ubicaciones para elegir, se puede seleccionar una velocidad de Internet, puede habilitar/deshabilitar algunas opciones del navegador y puede probar dispositivos específicos.

Es una buena herramienta, que muestra un informe en cascada detallado para cada ejecución (de manera predeterminada, realiza 3 ejecuciones, pero puede cambiar eso en la configuración) y muestra una calificación de A a F para cada uno de estos factores de optimización de velocidad:

• Tiempo del primer byte (tiempo de respuesta),
• Keep-alive habilitado,
• comprimir transferencia (gzip),
• comprimir imagenes,
• caché de contenido estático,
• uso efectivo de CDN.

Puede entrar en detalles revisando todas las pestañas de resultados, donde encontrará mucha información útil. Usaría esta herramienta, si necesitara un informe detallado o si necesitara probar una ubicación disponible en su sitio, de lo contrario, creo que GTmetrix tiene información más concisa.

Ejecuté esta herramienta para nuestro sitio de prueba. Puedes ver los resultados en la siguiente captura de pantalla:

Analizamos las herramientas de velocidad de página más populares e hicimos las pruebas iniciales de velocidad de página, por lo que finalmente estamos listos para comenzar a optimizar nuestro sitio de WordPress. Como referencia, estos son los resultados del punto de partida de las herramientas de velocidad de página que usaremos para medir nuestro progreso de optimización de velocidad:

• Perspectivas de velocidad de página de Google
  • Móvil: 67
  • Escritorio: 71
• GTmetrix
  • Velocidad de página: 77
  • YLento: 71

Optimización de imagen

Este es probablemente el aspecto más ignorado del rendimiento del sitio y, al mismo tiempo, puede brindar la mayor mejora en la velocidad de su sitio. Si nunca piensa en optimizar la imagen antes de subirla a su sitio de WordPress, entonces este es un excelente primer paso para la optimización del tiempo de carga de WordPress.

Cargar imágenes grandes, no optimizadas, usadas en un lugar pequeño en su sitio web es un gran "no, no". Ejemplo: tiene un espacio de imagen que no será más grande que 600 x 400 px en su sitio y carga una imagen de 1920 x 1080 px (¡o incluso más grande!). Ahora, repite este error un par de veces y su sitio será muy lento.

Lo primero que debe hacer es cambiar el tamaño de la imagen al tamaño adecuado. En nuestro ejemplo, la ranura de la imagen nunca será más grande que 600 x 400 px, por lo que debemos cambiar el tamaño de la imagen a ese tamaño.

"Eso es todo, trabajo hecho, ¿verdad?" No. Podemos mejorar la imagen aún más. Hay muchas herramientas que optimizan (comprimen) la imagen sin perder su calidad (nuestros ojos no pueden detectar la pérdida de calidad con estas herramientas). Esto también reducirá drásticamente el tamaño del archivo de imagen, lo que hará que se cargue más rápido.

La compresión de imágenes se puede hacer manualmente o con complementos de WordPress. Mi compañero de trabajo Marko escribió una guía fenomenal para la optimización de imágenes, por lo que usaremos el conocimiento obtenido de su artículo y repasaremos rápidamente las técnicas que puede usar para optimizar sus imágenes.

Mini guía para la optimización de imágenes

Elija el formato de imagen correcto : los formatos de imagen más populares para uso en línea son JPEG y PNG. Puede ahorrar mucho en el tamaño del archivo de imagen seleccionando el formato de imagen correcto (Marko ahorró un 45 % en su artículo). Deberías usar:

• El formato .jpg para fotos, imágenes con degradados e imágenes con millones de colores.
• El formato .png para imágenes con colores limitados (logotipos) e imágenes con transparencia.

Cambie el tamaño de sus imágenes : como mencioné anteriormente, siempre debe cambiar el tamaño de las imágenes antes de cargarlas en su sitio de WordPress. En primer lugar, verifique qué tan grande es el espacio donde usará la imagen y cambie su tamaño en consecuencia. Puede cambiar el tamaño de las imágenes con un programa de manipulación de imágenes, como GIMP o Photoshop.

Comprime tus imágenes : esto se puede hacer con una herramienta de compresión de imágenes en línea o con un complemento de WordPress:

Herramienta de compresión en línea : Marko recomienda la herramienta en línea Optimizilla. Simplemente cargue sus imágenes en la aplicación Optimizilla y una vez que se complete el proceso, descargue las imágenes optimizadas, que luego debe cargar en su sitio de WordPress. Esto suena un poco tedioso, por lo que, por supuesto, hay un complemento de WordPress que puede simplificar este proceso.

Complemento de compresión de imágenes WP : una vez más, Marko probó los complementos de compresión de imágenes más populares y declaró ganador: ShortPixel Image Optimizer. Después de instalar el complemento, deberá solicitar una clave API para usar el complemento (un proceso muy simple). La configuración predeterminada del complemento es excelente, por lo que no necesita configurar nada, simplemente vaya a Medios -> Bulk ShortPixel y haga clic en el botón "Comenzar a optimizar". Cualquier imagen recién cargada también se optimizará. Nota: la versión gratuita de este complemento solo permite 100 optimizaciones de imagen por mes, si necesita más, deberá cambiar a su plan pago. Queremos que nuestros clientes tengan acceso a las mejores herramientas que existen, por lo que nos asociamos con ShortPixel y ahora nuestros miembros de ProteusClub también obtienen 1,000 créditos de uso gratuito con el complemento ShortPixel WordPress.

Por último, no puedo recomendar lo suficiente que lea el artículo completo sobre la optimización de imágenes en WordPress.

Imágenes optimizadas de Google PageSpeed

Esta es una forma alternativa de cómo optimizar sus imágenes existentes en su sitio de WordPress. Si siguió los pasos anteriores, en la sección Mini guía para la optimización de imágenes, probablemente ya haya optimizado las imágenes y, por lo tanto, Google PageSpeed ​​no tendrá ninguna imagen para usted. ¡Buen trabajo! Todavía puede leer esta sección con fines informativos

Mencioné en la introducción de la herramienta Google PageSpeed ​​que Google genera un archivo zip con archivos optimizados que puedes usar en tu sitio. Puede descargar el archivo zip, haciendo clic en este enlace:

En este archivo zip, tienes una carpeta llamada imagen , que tiene las imágenes optimizadas. Puede cargarlos a través de FTP o su cargador de archivos de alojamiento. Reemplace/sobrescriba las imágenes en las carpetas de carga correctas (…/wp-content/uploads/…). Después de eso, también debe generar las versiones más pequeñas (miniaturas) de estas imágenes en su sitio de WordPress. Puede hacerlo con el complemento Regenerar miniaturas.

Otras mejoras de imagen

En esta sección, veremos algunas mejoras adicionales relacionadas con las imágenes, que podemos aprovechar para exprimir un poco más el rendimiento.

Imágenes de carga perezosa

Lazy Loading es una técnica para cargar imágenes, donde las imágenes se cargan de forma asíncrona. Las imágenes que no están en la parte superior de la página no se cargan al cargar la página (se cargan después o incluso solo cuando se necesitan). Esto significa que las imágenes que se pueden ver en la parte superior de la página se cargan, mientras que otras imágenes (que no se ven) se cargan después de que se carga la página o cuando los usuarios se desplazan hacia abajo en la página (bajo demanda). Si tiene una página larga con muchas imágenes, puede ahorrar mucho tiempo de carga inicial de la página con esta técnica.

La carga diferida se puede implementar con algún código personalizado o con un complemento WP. Usaremos el complemento de almacenamiento en caché WP Rocket más adelante y también tiene una función de carga diferida.

Vinculación de imágenes

¿Qué es el enlace activo? Está mostrando una imagen que está alojada en otro servidor. Por ejemplo, si tienes una publicación muy popular y en esa publicación tienes una imagen agradable. Un visitante (ladrón) puede copiar la URL de origen de la imagen y usarla en su propio sitio. Eso significa que la imagen será solicitada y servida desde su servidor. Multiplique al ladrón por 100 y tendrá miles de solicitudes externas a las que su servidor debe responder, lo que puede ralentizar su servidor.

Esta no es una optimización directa de la velocidad de la página, sino una optimización del servidor. Puede resolver el problema de hotlinking con algún código en el archivo .htaccess. Puedes ir un paso más allá (ser un poco malvado) y reemplazar la imagen robada con otra imagen, tal vez no tan agradable :). Eso también se puede hacer en el archivo .htaccess. Abra su archivo .htaccess en su servidor y agréguele este código. Reemplace your-website.com con su dominio, google.com con cualquier otro dominio al que desee permitir el acceso a sus imágenes y reemplace http://replaceing-stolen-image-url-goes-here.jpg con la URL de la imagen que desea mostrar para cualquier imagen robada.

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

Si no desea reemplazar la imagen robada con su imagen personalizada, use este código. Esto deshabilitará la imagen en su sitio web:

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Mejoras en el estudio de caso

Veamos el progreso que hemos hecho con nuestro sitio de prueba hasta ahora, después de optimizar las imágenes. Como saben, he importado datos de demostración para nuestro tema médico, que estamos usando como nuestro sitio de prueba. Estas imágenes de demostración usaban los formatos de archivo correctos y ya tenían el tamaño correcto, por lo que pude omitir estos dos pasos. Si tuviera que subir una nueva imagen, ¡no las saltaría!

Entonces, instalé el complemento ShortPixel y ejecuté el optimizador masivo. El complemento informó una optimización de imagen promedio del 38%. ¡Genial!

Ejecuté la herramienta PageSpeed ​​Insights y Google señaló que algunas de las imágenes se pueden comprimir aún más, así que seguí mi propio consejo, usé las imágenes que Google preparó para mí y las subí a mi servidor a través de FTP.

Después de ordenar las imágenes, los resultados de las herramientas de velocidad de página fueron:

• Perspectivas de velocidad de página de Google
  • Móvil: 72
  • Escritorio: 77
• GTmetrix
  • Velocidad de página: 81
  • YLento: 71

No es una gran mejora, ya que las imágenes utilizadas en los datos de demostración ya estaban bastante optimizadas, pero aun así, estamos un paso más cerca de nuestro objetivo. Si tiene imágenes no optimizadas en su sitio, este paso de optimización de imágenes le brindará un gran aumento en los puntajes y reducirá el tiempo de carga de la página.

Almacenamiento en caché del navegador

Cuando un usuario visita su sitio a través del navegador, tiene que descargar todos los recursos (HTML, imágenes, JS, CSS, …) de su servidor para mostrar el sitio al visitante. Cuando el mismo usuario visita otra página en su sitio, los archivos CSS y JS generalmente permanecen iguales, pero el navegador aún puede descargarlos nuevamente desde su servidor, si no tiene una configuración de servidor adecuada.

Los encabezados de almacenamiento en caché y las fechas de caducidad deben configurarse en su servidor para permitir que los recursos estáticos (JS, CSS y otros archivos) se almacenen en la memoria caché del navegador. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Perspectivas de velocidad de página de Google
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Perspectivas de velocidad de página de Google
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. ¡Buen trabajo!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This is a tricky one. Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

Veamos las configuraciones que ofrece el complemento WP Rocket. WP Rocket tiene un buen menú de acceso directo en la barra de menú superior de administración de WP. Desde allí, puede acceder a la página de configuración, borrar el caché y acceder a otra información útil sobre este complemento.

Antes de continuar y probar diferentes configuraciones de WP Rocket, me gustaría mencionar que después de cada cambio que realice, debe verificar su sitio en una pestaña de incógnito/navegador privado . Si ha iniciado sesión en su sitio de WordPress, no verá la versión en caché del sitio. En la pestaña del navegador de incógnito, no iniciará sesión y obtendrá una versión en caché del sitio, para que pueda verificar si funciona correctamente.

También sepa que habilitar cada configuración de WP Rocket puede tener resultados diferentes o incluso efectos negativos en la velocidad de su WordPress, según el tema o los complementos que esté utilizando, por lo que habilitar todas las configuraciones de WP Rocket no es el camino a seguir. Debe probar cada configuración y medirla con herramientas de velocidad de página para ver la diferencia. Como verá, algunas técnicas no mejorarán la velocidad de nuestra página, por lo tanto, no las utilizaremos.

Limpiar cache

El almacenamiento en caché del lado del servidor comenzará a funcionar tan pronto como active el complemento WP Rocket, así que veamos cómo podemos borrarlo. Puede borrar el caché manualmente, si hace clic en el elemento de menú "Borrar caché" en el menú contextual de WP Rocket. El complemento también se encargará de borrar el caché automáticamente, cuando actualice la configuración del personalizador, cambie/actualice widgets, categorías, … y borrará parcialmente el caché cuando actualice una página. Para obtener más información sobre cuándo ocurrirá la limpieza automática de caché, consulte esta pregunta de WP Rocket.

El caché tiene una vida útil que se puede configurar en la pestaña "Básico" de la configuración de WP Rocket. Sugiero configurar esto a 1 día.

Precargar caché

Una buena característica de WP Rocket es "Precargar caché", que precargará el caché de su página de inicio y las páginas a las que se vincula, para que sus usuarios siempre obtengan una versión en caché de la página. Podría usar esta función antes de ejecutar las herramientas de velocidad de página y no tendría que ejecutar las herramientas varias veces para obtener los resultados de la versión en caché.

Se puede acceder a la configuración de caché de precarga en la página de configuración en la pestaña "Precarga". Busca la opción “Precargar bot”, allí encontrarás una opción manual y otra automática. Si habilita la opción de bot automático, el caché de precarga se ejecutará cada vez que actualice o cree una página o si el caché caduca. Esta opción puede influir en el rendimiento de su servidor, así que vigile los registros de rendimiento si la habilita. Si está actualizando y creando muchas publicaciones/páginas y tiene un alojamiento compartido, le aconsejo que no habilite esta opción. En su lugar, debe habilitar solo la opción de bot manual, que creará otro elemento del menú de acceso directo de WP Rocket, titulado "Precargar caché" y precargará el caché solo cuando haga clic en él (después de que haya terminado de editar publicaciones y páginas).

En la pestaña de configuración "Precargar", también encontrará configuraciones para precargar el caché desde un mapa del sitio, por lo que puede definir un mapa del sitio y usará las URL en el mapa del sitio para precargar el caché para esas páginas.

Carga lenta

Ya expliqué las imágenes de carga diferida en la sección de optimización de imágenes de este artículo, pero ahora que tenemos instalado WP Rocket, podemos habilitar esta función. Vaya a la pestaña "Básico" de la configuración de WP Rocket y habilite LazyLoad para imágenes y, si está utilizando videos o iframes, también puede habilitarlo.

Después de habilitar esta función, siempre debe revisar su sitio y ver cómo se cargan las imágenes. LazyLoad puede romper el diseño de su sitio o puede que no le guste cómo se cargan las imágenes (salto de contenido), así que siempre revise sus páginas. Esta función es realmente útil cuando tiene muchas imágenes debajo de la página y lo ayudará a reducir la cantidad de solicitudes de imágenes en la carga de la página original. En nuestro sitio de prueba, solo tenemos 5 imágenes en la parte inferior de la página, por lo que guardamos 5 solicitudes de imágenes y el tiempo de carga de nuestra página ahora se redujo a 1,7 segundos, mientras que las puntuaciones de las herramientas de velocidad de la página permanecieron iguales. Este es un buen indicador de que puede mejorar la velocidad de su página con ciertas tareas que las herramientas no sugieren.

Minificar archivos

Algunas de las sugerencias de GTMetrix que aún podemos mejorar son minimizar los archivos HTML, CSS y JS. Debido a que nuestro tema de WordPress y la mayoría de los complementos recomendados ya usan versiones reducidas para los archivos JS/CSS y tenemos Gzip habilitado en nuestro servidor, esta optimización de WP Rocket no traerá ninguna mejora significativa para nuestro sitio de prueba, pero su caso podría ser diferente. Vaya a la pestaña "Archivos estáticos" en la configuración de WP Rocket y marque las 3 opciones en la opción Minificar archivos . Guarde la configuración y vaya a revisar su sitio web en una pestaña de incógnito/privado, para que pueda buscar cualquier problema que estas opciones puedan traer a su sitio. En mi sitio de prueba de WordPress, la minificación de CSS rompió la puesta en cola del archivo css flexbox del generador de páginas, por lo que tuve que deshabilitar la opción de archivo minify de CSS. Las opciones HTML y JS funcionaron bien.

Le pregunté al soporte de WP Rocket cuál podría ser el problema y fueron lo suficientemente amables como para solucionar este problema en mi sitio. El problema fue causado por el caché Varnish utilizado en mi alojamiento compartido. Sugirieron cambiar la configuración de Varnish en mi servidor de alojamiento. Me puse en contacto con el soporte de mi alojamiento y, como sospechaba, no puedo cambiar la configuración de Varnish en mi alojamiento compartido, pero podría hacerlo si me actualizara al paquete de alojamiento VPS. Como puedes ver, usar un hosting compartido no es una buena idea

Si tuvo algunos problemas con la minificación de CSS o JS, puede agregar la URL del archivo que estaba causando los problemas al cuadro de archivos JS o CSS excluidos. Encontrar el archivo responsable de los problemas puede ser complicado, pero generalmente sabe qué funcionalidad está rota y qué complemento es responsable de esa funcionalidad, por lo que verifica el código fuente de su página e inspecciona los archivos incluidos por ese complemento. Si el complemento tiene varios archivos JS o CSS, puede intentar agregarlos a la lista de exclusión y ver si el problema desaparece.

Combinar archivos JS y CSS

La pestaña YSlow en la herramienta GTmetrix nos dice que "hagamos menos solicitudes HTTP". Dice que nuestro WordPress está usando 9 scripts JS externos y que deberíamos intentar combinarlos en 1 y que la página está usando 4 archivos CSS externos y también deberíamos intentar combinarlos en 1 archivo. Si recuerda, ya eliminamos los archivos JS y CSS innecesarios en la sección Eliminar archivos JS o CSS innecesarios de este artículo.

Combinar todos los archivos JS y CSS en un solo archivo no es una buena idea, porque los navegadores pueden descargar 6 archivos más pequeños en paralelo, más rápido que 1 o 2 archivos grandes. La otra razón es que algunos de los archivos se incluyen en el encabezado de los documentos HTML y otros al final del documento, por lo que debe dividirlos en al menos 2 archivos.

Para combinar archivos con WP Rocket, vaya a la pestaña "Archivos estáticos" en la configuración del complemento y habilite las opciones en Combinar archivos . Como siempre, verifique su sitio en una pestaña de incógnito/navegador privado para comprobar si hay algún problema.

En nuestro ejemplo, el WP Rocket volvió a tener problemas debido al problema de configuración Varnish del alojamiento compartido mencionado anteriormente, por lo que tuve que deshabilitar la opción de combinar archivos de JS.

Nuevamente, si tuvo algunos problemas con la concatenación de CSS o JS, puede agregar la URL del archivo que estaba causando los problemas al cuadro de archivos JS o CSS excluidos, al igual que en el paso de minificación anterior.

Eliminar cadenas de consulta de recursos estáticos

GTMetrix nos recomienda eliminar las cadenas de consulta de los recursos estáticos, porque algunos servidores proxy no almacenan en caché los recursos con cadenas de consulta.

Las cadenas de consulta en un recurso estático (generalmente un archivo JS o CSS) es un atributo de URL que marca la versión de dicho archivo. Tiene este aspecto: ?ver=2.5.8 y se adjunta al final de la URL: http://domain.com/css/front-flex.css?ver=2.5.8

Podemos eliminar fácilmente estas cadenas de consulta con WP Rocket. Vaya a la pestaña "Archivos estáticos" de la configuración del complemento y habilite la opción Eliminar cadenas de consulta .

Después de habilitar esta opción, nuestra puntuación de GTmetrix PageSpeed ​​cambió a 98, pero el tiempo de carga de la página no cambió.

CSS/JS de bloqueo de procesamiento

La única sugerencia de la herramienta Google PageSpeed ​​Insights que queda es "Eliminar el JavaScript que bloquea la representación y el CSS en el contenido de la mitad superior de la página". Esto significa que hay algunos archivos JS o CSS que bloquean la carga de la página en el contenido de la mitad superior de la página. Lo que la herramienta quiere que hagamos es diferir o cargar de forma asíncrona estos recursos de bloqueo.

Una vez más, el complemento WP Rocket viene al rescate. Vaya a la pestaña "Archivos estáticos" y busque las opciones de CSS/JS de bloqueo de procesamiento . Allí puede habilitar las opciones JS y CSS que pueden resolver este problema. Una vez que habilite la opción JS, aparecerá la opción Modo seguro (recomendado) . Este modo seguro cargará la biblioteca jQuery (biblioteca en cola predeterminada de WP) en el encabezado de la página, dejándola como un archivo de bloqueo, pero no romperá ninguna página que tenga código jQuery en línea en la página. Dado que jQuery todavía está cargado en la cabeza, la herramienta PageSpeed ​​todavía se queja de que tenemos un archivo JS que bloquea el procesamiento.

Entonces, si desactivo el modo seguro para nuestro sitio de prueba, la herramienta Google PageSpeed ​​nos da una puntuación perfecta, 100 en dispositivos móviles y 100 en computadoras de escritorio. Genial, ¿verdad? ¡Realmente no! Nuestro sitio web aún funciona correctamente, pero veamos cómo se carga el sitio web:

El flash de contenido sin estilo (FOUC) se puede corregir utilizando la opción CSS de ruta crítica en la configuración de WP Rocket (justo debajo de la opción CSS/JS de bloqueo de procesamiento). La teoría es que podría agregar el código CSS necesario para la parte superior de la página, de modo que este efecto de flash de texto sin estilo no aparezca en la carga de la página. Esto es más difícil de lo que parece. Hay herramientas que se supone que generan este CSS crítico para usted, pero no tuve mucho éxito con ellas.

Para generar el código CSS de ruta crítica:

1. Deshabilite el complemento WP Rocket en su sitio.
2. Vaya a la herramienta Critical Path CSS Generator.
3. Ingrese la URL de su sitio y ejecútelo.
4. Copie el código CSS de la ruta crítica.
5. Activa el complemento WP Rocket.
6. Pegue el código CSS en el cuadro "Ruta crítica CSS" en la configuración de WP Rocket.
7. Compruebe si hay rutas URL relativas en el código CSS crítico y cámbielas a rutas absolutas.

Así es como se ve ahora la carga de nuestro sitio de prueba de WordPress:

Es mejor, pero todavía no me gusta. Sí, la puntuación de Google PageSpeed ​​de 100/100 es excelente, pero el tiempo total de carga es más lento y también tenemos 2 solicitudes más porque habilitamos esta opción de CSS/JS de bloqueo de procesamiento. El problema principal para mí sigue siendo la experiencia del usuario al cargar la página, por lo que deshabilité esta opción de WP Rocket.

WP Rocket es definitivamente un complemento que todo propietario de un sitio web de WordPress debería usar, ya que tiene todas las funciones para acelerar su sitio. Simplemente activar el complemento le dará un gran impulso. Se deben probar otras características para cada sitio web, ya que cada tema y complemento puede traer sus propios problemas a la mezcla.

Estamos casi al final de nuestros pasos de optimización. Lo único que queda es usar un CDN para los activos de nuestro sitio web.

Red de entrega de contenido (CDN)

Ya he mencionado varias veces en este artículo que los tiempos de carga de la página difieren según la ubicación del servidor y la ubicación del visitante. Por ejemplo, mi servidor de alojamiento compartido que estamos usando para la prueba está ubicado en Austin, Texas (EE. UU.) y al principio, en la sección de herramientas de velocidad de página de Pingdom de este artículo, probamos 4 ubicaciones. Aquí están los resultados:

• Dallas, Texas (EE. UU.) = 1,65 s
• San José, California (EE. UU.) = 2,53 s
• Estocolmo, Suecia (UE) = 3,06 s
• Melbourne (Australia) = 5,38 s

Ahora que hemos optimizado el sitio, con todos los pasos mencionados en este artículo, nuestros tiempos de carga son:

• Dallas, Texas (EE. UU.) = 0,63 s
• San José, California (EE. UU.) = 0,76 s
• Estocolmo, Suecia (UE) = 1,21 s
• Melbourne (AUS) = 2,24 s

Usaremos estos tiempos para comparar nuestro tiempo de carga de WordPress, cuando configuremos nuestro sitio para usar un CDN.

Podemos ver que estos tiempos son muy diferentes; eso se debe a que los datos tienen que viajar un camino más largo desde la ubicación de nuestro servidor hasta el visitante australiano que hasta un visitante en Dallas. Aquí es donde un CDN nos ayudará a reducir esos tiempos de carga.

Una CDN es una red distribuida geográficamente de servidores proxy y sus centros de datos. Su objetivo principal es distribuir el contenido de su sitio a sus visitantes desde un servidor más cercano al visitante. Esto significa que el contenido estático de su sitio web (imágenes, JS, CSS, …) será atendido por sus servidores, que están repartidos por todo el mundo, lo que hace que su sitio se cargue más rápido para todos.

Utilizar un CDN de WordPress tiene una multitud de beneficios que incluyen:

• Latencia decreciente, que es el tiempo y/o retraso que tiene que recorrer la distancia.
• Reduce el tiempo hasta el primer byte (TTFB), que es una medida de cuánto tiempo tiene que esperar el navegador antes de recibir su primer byte de datos del servidor.
• Sirve contenido desde la memoria caché para tiempos de carga de página más rápidos y menos tensión en su servidor de alojamiento (origen).
• Utiliza HTTP/2 a través de conexiones seguras para aprovechar la multiplexación, el paralelismo, la inserción del servidor y la compresión HPACK.
• Comprime datos con GZIP o Brotli para garantizar archivos HTML, hojas de estilo y JavaScript más pequeños.

Los CDN en estos días ofrecen muchas otras características, especialmente en el departamento de seguridad. Por lo general, ofrecen protección DDoS, detección/prevención de bots, etc.

Veremos uno de los CDN más populares, llamado Cloudflare. Ofrecen un paquete gratuito, que incluye el uso de su CDN global y eso es lo que necesitamos.

Llamarada de nube

Primero vaya a cloudflare.com y regístrese para obtener una nueva cuenta gratuita. Después de crear una cuenta, deberá configurar su sitio web en Cloudflare para que sirva su contenido estático (activos).

Cuando inicie sesión en su nueva cuenta de Cloudflare, se le pedirá que agregue su sitio web (dominio) para recuperar automáticamente los registros DNS.

Ingrese su dominio y haga clic en "Comenzar escaneo". Aunque estoy usando un subdominio ( speed.gregorcapuder.com ), tuve que ingresar solo el dominio raíz: gregorcapuder.com . La parte de escaneo tardó aproximadamente un minuto en completarse y, mientras tanto, puede ver un video breve que explicará lo que está sucediendo. Una vez que se realiza el escaneo, puede hacer clic en el botón "Continuar".

En el siguiente paso, verá todos los registros DNS que Cloudflare pudo encontrar para nuestro dominio. Aquí debe agregar cualquier registro que pueda faltar, así que revise la lista y verifique si falta algo. En nuestro ejemplo, faltaba el subdominio de velocidad, así que lo agregué a la lista. En la entrada del nombre ingresé "velocidad" (nombre de mi subdominio), en la dirección IPv4 ingresé la misma dirección IP que mi dominio principal (gregorcapuder.com) y luego hice clic en "Agregar registro". Como puede ver en la captura de pantalla a continuación, habilité Cloudflare para mi dominio principal, así como para el subdominio de velocidad (marcado por una nube naranja con una flecha que corre detrás de la nube). Esto significa que en estos dos sitios web, el tráfico será manejado y protegido por Cloudflare.

Cuando haya terminado con los registros DNS, puede continuar con el siguiente paso, donde selecciona el plan "Sitio web gratuito" y continúa.

El último paso para habilitar Cloudflare para su sitio web es iniciar sesión en el panel del registrador de su dominio (donde compró su dominio) y cambiar los servidores de nombres para su dominio. Se dice que los nuevos servidores de nombres pueden tardar hasta 48 horas en surtir efecto, pero en mi caso, se actualizó en 1 hora. Mientras tanto, no habrá tiempo de inactividad del sitio web, así que no se preocupe.

Una vez que los servidores de nombres se actualicen para su sitio, verá que el estado de su sitio web de Cloudflare cambia a "activo".

Dejé todas las configuraciones de Cloudflare en el tablero de forma predeterminada, lo único que cambié fue el nivel de seguridad. Vaya a la pestaña Firewall y ajuste el "Nivel de seguridad" a Bajo . Eso es porque no quiero que mis visitantes obtengan una "página de desafío" en la detección de un atacante falso.

Ahora que configuramos el lado de Cloudflare, también debemos habilitar la configuración de Cloudflare en nuestro complemento WP Rocket.

Inicie sesión en su panel de administración de WordPress y vaya a la configuración del complemento WP Rocket. Vaya a la pestaña "CDN", habilite la pestaña Mostrar configuración de Cloudflare y guarde la configuración. Esto mostrará una nueva pestaña "Cloudflare" en la configuración de WP Rocket y debe abrirla. Allí debe ingresar el correo electrónico de la cuenta de Cloudflare, el dominio y también debe copiar y pegar la clave API global de Cloudflare. Para recuperar la clave de API global, vaya al panel de control de Cloudflare (pestaña de descripción general) y haga clic en el enlace "Obtener su clave de API". Verá una sección "Clave API" en esta nueva página y debe hacer clic en el botón "Ver clave API" para la fila "Clave API global". Una vez que pegue la clave API global en la configuración de WP Rocket, también sugeriría habilitar la opción "Configuración óptima" en WP Rocket. Guarde la configuración y luego haga clic en el botón "Borrar caché de Cloudflare", solo para verificar que todo funciona bien.

Ahora que el CDN está configurado, podemos volver a probar los tiempos de carga desde diferentes ubicaciones y ver las mejoras (pruebas de Pingdom).

• Dallas, Texas (EE. UU.) = 0,54 s
• San José, California (EE. UU.) = 0,70 s
• Estocolmo, Suecia (UE) = 0,91 s
• Melbourne (AUS) = 1,16 s

Como era de esperar, los tiempos de carga europeos y australianos son los que más han mejorado. Y todos nuestros tiempos de carga son de alrededor de 1 segundo o menos. ¡Ese es un gran tiempo de carga!

Cuando esté probando su sitio, no lo haga con una sola ejecución de la herramienta de velocidad de página para una ubicación. Necesitas probarlo un par de veces. Cuando ejecuta la herramienta por primera vez para una ubicación determinada, los archivos almacenados en caché deben almacenarse primero en el servidor Cloudflare más cercano, cada prueba posterior debe mostrarle el tiempo de carga real de la versión almacenada en caché. Le sugiero que pruebe de 3 a 5 veces para obtener un buen promedio de qué tan rápido se cargará su página desde una ubicación en particular.

Resultados finales

Nuestros puntajes finales de la herramienta de velocidad de página son:

• Perspectivas de Google PageSpeed
  • Móvil: 91
  • Escritorio: 97

• GTmetrix
  • Velocidad de página: 98
  • YLento: 91

Aquí están las capturas de pantalla:

Comparemos los datos de GTmetrix antes y después de nuestra optimización:

Hemos mejorado el rendimiento de nuestro sitio web en todos los sentidos. El sitio web se carga más rápido, se necesitan menos solicitudes para mostrar el sitio al usuario, se necesita menos ancho de banda y se carga más rápido para los visitantes de todo el mundo. Al mismo tiempo, mantuvimos toda la funcionalidad y el estilo de nuestro sitio web como estaba al principio. ¡Impresionante!

Para el final, hemos preparado una buena representación visual de los resultados de cada paso de optimización individual que completamos:

Conclusión

En esta guía definitiva de optimización de la velocidad de la página de WordPress, analizamos los pasos más importantes que puede realizar para mejorar drásticamente el rendimiento de su sitio web. Seguir los consejos de este artículo hará que su sitio sea ágil y rápido, lo que mejorará el tiempo de carga de su página y, por lo tanto, la experiencia del usuario. Estas mejoras también pueden generar más dinero y ayudarlo a ahorrar algo en los costos del servidor, ¡así que es beneficioso para todos!

Me gustaría concluir este artículo diciendo que la velocidad no lo es todo, es otra pieza del rompecabezas de un sitio web. Construimos sitios web para humanos, clientes potenciales, así que siempre tenlo en cuenta. Encuentra un buen equilibrio entre contenido, multimedia, diseño, experiencia de usuario y velocidad de página. No se obsesione con la velocidad de la página y las puntuaciones de las herramientas de velocidad de la página. Mientras mejore la experiencia de sus visitantes, se logrará su objetivo.

¿Me perdí algún paso de optimización del sitio web que crees que puede aportar una mejora crucial en el tiempo de carga de la página? ¡Déjame saber abajo en los comentarios!

Si encuentra útil nuestro artículo y siguió sus pasos, hágame saber en los comentarios a continuación, qué tipo de mejoras ha logrado.