Divi no es un creador de páginas cualquiera. Divi lleva el proceso de diseño a un nivel completamente nuevo con un sistema de diseño web completo que le permite diseñar visualmente cada parte de su sitio web, sin tener que depender tanto de un software de diseño complicado de terceros (como Photoshop o Sketch). Lo que significa que el tema Divi (y el complemento Divi Builder) requerirán más recursos que, digamos, el tema básico de WordPress TwentyNineteen. Pero eso no significa que Divi tenga que ser lento.

De hecho, Divi tiene muchas mejoras de rendimiento que se han agregado en actualizaciones anteriores que han hecho que los sitios de Divi (y Divi Builder) funcionen más rápido que nunca. Además, Divi está diseñado teniendo en cuenta la optimización de terceros. Muchos de los complementos de optimización de rendimiento que se usan para WordPress también se pueden usar para aumentar el rendimiento de la velocidad de su sitio web Divi.

En esta publicación, vamos a explorar lo que ya se ha hecho para acelerar Divi y lo que podemos hacer para hacerlo aún más rápido. Aquí hay algunos temas clave que cubriremos:

  • Cómo se muestra un sitio web
  • Rendimiento de velocidad Divi incorporado
  • Optimización de bases de datos
  • Optimización de DNS
  • Buen alojamiento
  • TTFB Optimization
  • Almacenamiento en caché
  • Minificación y Agregación
  • Compresión Gzip
  • CDN
  • Optimización de imagen
  • Optimización de video
  • Usar complementos de calidad
  • Realización de pruebas de velocidad
  • Otros consejos
  • Cómo evitar posibles conflictos con complementos de terceros
  • Lista rápida de prácticas y recursos sugeridos.

Beneficios de un sitio web Fast Divi

No tiene sentido hacer grandes esfuerzos para convencerlo de que necesita un sitio web más rápido. Pero aquí hay algunos beneficios obvios que no puede ignorar.

  • Disminución de la tasa de rebote: los visitantes no abandonarán tanto su sitio.
  • Mayores conversiones: obtener su sitio más rápido puede generar mejores conversiones.
  • SEO: a Google le gustan los sitios optimizados para la velocidad.
  • Credibilidad: los sitios web lentos crean una mala primera impresión para sus visitantes.

¿Qué tan rápido es lo suficientemente rápido?

En general, un buen objetivo es que sus páginas web se carguen en 3 segundos o menos. Aunque parece que la mayoría de los clientes esperan que sea 2 segundos o menos en estos días. Pero obviamente, cada sitio web y página web es diferente.

Cómo se muestra un sitio web Divi

Para comprender cómo acelerar su sitio Divi, puede ser útil comprender qué implica la visualización de un sitio web. Por supuesto, esto no es exclusivo de Divi. Esto se aplicaría a la mayoría de los sitios web de WordPress.

Esto es lo que pasa …

  1. Ingrese una URL (o haga clic en un enlace) a la página web que desea visitar.
  2. Su navegador encuentra la dirección IP de esa URL a través de su DNS (servidor de nombres de dominio) y realiza una solicitud de esa dirección IP en un servidor web (donde aloja su sitio).
  3. El servidor web (generalmente Apache) recibe la solicitud y luego busca la página web que ha almacenado (la que diseñó en Divi y publicó en WordPress).
    • Pero como la página se basa en CSS y JavaScript externos utilizados por WordPress y Divi Theme, estos también deben descargarse del servidor.
    • La página también contiene PHP utilizado para recuperar datos (como imágenes) de la base de datos MySQL.
  4. Una vez que se han recuperado todos los recursos necesarios del servidor y la base de datos, la página finalmente se sirve al navegador del cliente.

Esto puede parecer muchos pasos solo para mostrar una página web, pero para un sitio de WordPress, esto es bastante estándar, independientemente del tema que utilice. Y si lo piensas, todo el proceso es bastante milagroso. Pero desafortunadamente, es algo que los usuarios damos por sentado. Hoy, hemos crecido esperar que todo esto suceda en menos de 3 segundos.

Entonces, ¿qué podemos hacer para ayudar en el proceso? Primero, debemos reconocer que cuando se trata de acelerar un sitio web, hay cosas que están fuera de nuestro control. Por ejemplo, no tiene control sobre el tipo de navegador que usa un visitante o la velocidad de su conexión a Internet. Pero, aparte de esas cosas, hay cosas que podemos y debemos hacer para que nuestro sitio web Divi sea más rápido.

Primero, echemos un vistazo a algunas de las optimizaciones de velocidad incorporadas que Divi ya tiene.

Rendimiento de velocidad Divi incorporado

Generación de archivos CSS estáticos

Las primeras mejoras de rendimiento de velocidad de Divi llegaron con la generación de archivos CSS estáticos .

Antes de esta actualización, todos los CSS generados por Divi Builder se mostraban en línea al pie de página. Pero con esta mejora, Divi ahora tomará todo el CSS creado por Divi Builder (y agregado al Personalizador de temas y Opciones de tema) y los servirá como un archivo CSS estático que se ha minimizado automáticamente para usted. Esto reduce el tamaño del documento de una página y permite que el navegador sirva una versión en caché del archivo CSS estático para una carga de página más rápida.

Puede optar por habilitar o deshabilitar esta opción en las opciones de tema o en la configuración de la página.

Minificación y agregación de archivos CSS y JavaScript y entrega optimizada de fuentes de Google

La segunda ola de mejoras en el rendimiento de la velocidad Divi mejoró aún más la velocidad de carga de la página al optimizar la entrega de CSS, JavaScript y Google Fonts.

La actualización incluyó lo siguiente:

  • Minificación de archivos CSS y JavaScript : Divi minimizará automáticamente todos los archivos CSS y JavaScript del tema, reduciendo el tamaño de la página y mejorando los tiempos de carga.
  • Combinación de archivos CSS y JavaScript : Divi ahora agregará (o combinará) automáticamente todos los activos CSS y JavaScript en un solo archivo. Esto reduce el total de solicitudes en la página y acelera los tiempos de carga para sus visitantes.
  • Optimización de solicitud de fuente de Google : Divi optimiza la entrega de fuente de Google combinando solicitudes de fuente y eliminando archivos de fuente duplicados. Para las páginas que utilizan varias fuentes personalizadas, esta actualización ayudará a acelerar los tiempos de carga.

También puede habilitar o deshabilitar estas opciones en las opciones del tema.

Un tema Divi más rápido y un generador visual

Aunque la mayoría está preocupada por la rapidez con que su sitio Divi puede cargar para los visitantes en el front-end, también ayuda a tener un backend más rápido. Los desarrolladores (y clientes) también quieren poder editar y diseñar su sitio web Divi con rapidez.

Es por eso que la tercera ola de mejoras en la velocidad y el rendimiento de Divi incluyó actualizaciones tanto para Divi Theme como para Divi Builder . Mediante el uso de mecanismos creativos de almacenamiento en caché y otras optimizaciones de rendimiento, las velocidades de carga de la página se mejoraron en las instalaciones estándar de Divi. Además, WordPress Admin y Divi Builder también funcionan mucho más rápido, lo que hace que el proceso de edición y diseño sea mucho más rápido.

El almacenamiento en caché está detrás de escena y tiene más que ver con cómo se genera Divi HTML / CSS y no con cómo se sirven las páginas a sus visitantes. Esto se aplica a los archivos de tema Divi. Divi no intenta almacenar en caché, minificar o combinar archivos de terceros. Por lo tanto, todavía hay espacio para más mejoras utilizando el almacenamiento en caché de terceros y los complementos de rendimiento que minimizarán y combinarán CSS o JavaScript adicionales utilizados por su sitio (como los que están incluidos en su Divi Child Theme u otros complementos de terceros) y entregarán en caché Páginas HTML estáticas para los visitantes.

Estado del sistema Divi

Aunque técnicamente no es una mejora de velocidad, la actualización de Divi para incluir un informe de estado del sistema incorporado definitivamente ayudará a identificar cualquier problema con el entorno de su sitio web que pueda estar causando tiempos de carga de página más lentos.

Por ejemplo, el estado de su sistema puede mostrar que está utilizando una versión anterior de PHP que puede estar ralentizando su sitio. Recomendamos utilizar la última versión estable de PHP. Esto no solo garantizará la compatibilidad con WordPress y Divi, sino que también acelerará su sitio web y generará menos problemas relacionados con la memoria y la CPU. Para obtener más información, consulte nuestra publicación sobre cómo actualizar su versión de PHP .

Haciendo su sitio Divi aún más rápido

Hacer que su sitio Divi sea más rápido requiere muchas de las mismas mejoras de rendimiento necesarias para la mayoría de los sitios web de WordPress. Aquellos de ustedes que han estado usando WordPress pueden haber hecho algunas o todas estas optimizaciones ya. Con suerte, estas sugerencias ayudarán a llevar la velocidad de su sitio web Divi al siguiente nivel.

Optimización y limpieza de bases de datos

A diferencia de los sitios HTML estáticos, WordPress es un CMS dinámico que utiliza PHP para recuperar datos almacenados en una base de datos MySQL para mostrar esos datos en una página web. Esto facilita la administración de su sitio, pero la desventaja es que las páginas tardan más en cargarse porque tiene que ubicar los datos en la base de datos antes de cargar la página. En general, los sitios web HTML estáticos serán más rápidos que los sitios web de WordPress por este motivo.

Una forma de mantener un sitio Divi lo más rápido posible es asegurarse de tener una base de datos limpia . Los archivos del sitio de WordPress están organizados en su base de datos por tablas y cada vez que agrega nuevos datos a su sitio (como temas y complementos), crea nuevas tablas y más datos. Como era de esperar, cuanto más desordenada sea su base de datos, más difícil será encontrar los datos. Esto lleva a un sitio web más lento.

Entonces, si agregó el tema Divi a su sitio web después de años de probar otros temas e innumerables complementos, es probable que tenga algunos datos almacenados que ya no necesita. Incluso si desinstala un complemento, no significa que todos los datos hayan desaparecido en la base de datos. A los complementos les gusta dejar algunos datos allí en caso de que reinstales el complemento. No es genial, lo sé. Esta información sobrante puede generar desorden innecesario y ralentizar su sitio.

Al igual que toda organización humana necesita trabajar de manera más eficiente, cada sitio de WordPress (Divi o no) necesita una base de datos limpia para cargar páginas más rápido. Entonces, si ha tenido su sitio web por un tiempo, limpiarlo puede acelerar significativamente las cosas.

Sugeriría usar un complemento para esto. WP Optimize parece ser una opción creíble. Pero hay otros complementos de base de datos de WordPress para considerar .

O si sabe lo que está haciendo, siempre puede hacerlo manualmente en MySQL.

Además de limpiar su base de datos de WordPress, puede hacer que WordPress sea aún más liviano reduciendo los datos que almacena. Por ejemplo, WordPress mantendrá automáticamente los elementos eliminados en la papelera durante 30 días. Es posible que desee reducir ese período de tiempo a 7.

Optimización de DNS

Lo primero que debe suceder cuando un usuario visita la URL de una de sus páginas web se llama Búsqueda de DNS. Tan pronto como se ingresa la URL (o se hace clic en ella), el ISP del visitante envía una consulta DNS a los servidores de nombres para encontrar la dirección IP asociada con su dominio (cada dominio / sitio web tiene una dirección IP específica). En esencia, una búsqueda de DNS es como buscar su nombre de dominio en una guía telefónica para encontrar la dirección IP de ese dominio.

Pero cuando un usuario visita una página en su sitio, la página puede tener múltiples dominios a los que se debe acceder para abrir la página. Por lo tanto, podría estar haciendo 3 o 4 búsquedas de dominio en una sola carga de página (tal vez más).

En términos generales, la mayoría de los proveedores de DNS gratuitos como Godaddy y Namecheap generalmente serán más lentos de lo que probablemente le gustaría.

La mejor opción gratuita que aumentará su velocidad de búsqueda de DNS es probablemente Cloudflare . Tienen el rendimiento de DNS más rápido registrado en DNSPerf.com . Esto será significativamente más rápido que GoDaddy y Namecheap. Y, incluso puede optimizar Cloudflare para ser utilizado para DNS sin sus otros servicios (como CDN o WAF) si lo desea.

Por ejemplo, es posible que desee utilizar Cloudflare para DNS y seguridad (detección de DDOS) y KeyCDN (o MaxCDN) para su CDN. Parece que sería una gran combinación.

Configurando CloudFlare

Cloudflare es realmente fácil de configurar. No tiene que preocuparse por cambiar su alojamiento ni nada de antemano. Todo lo que necesita hacer es recorrer su configuración de 5 minutos que comienza con el ingreso a su dominio.

Recuperarán sus registros DNS actuales automáticamente.

Lo principal que deberá hacer para completar la configuración es cambiar los servidores de nombres predeterminados en su proveedor de DNS actual (como GoDaddy) a los servidores de nombres de Cloudflare.

Luego puede administrar su DNS fácilmente desde su Tablero.

Y así, tiene un impulso en la velocidad de búsqueda de DNS, más seguridad y un CDN para su sitio web (y más).

Buen alojamiento

Si te tomas en serio la velocidad (y el rendimiento) de tu sitio web, comienza con la elección de un buen proveedor de alojamiento . De hecho, puede hacer todo bien para optimizar su sitio web para la velocidad y aún así tener un sitio lento debido a su host. Y los proveedores de alojamiento realmente buenos harán muchas de esas optimizaciones de velocidad para que no tenga que preocuparse por eso.

Tipos de alojamiento

Hosting tradicional (compartido)

Este es, con mucho, el tipo de alojamiento más popular para los usuarios de WordPress / Divi. Pero desafortunadamente, es la peor opción para la optimización de la velocidad. Con el alojamiento compartido tradicional, compartirás todos los recursos disponibles de un servidor con otros. Debido a que está compartiendo, el costo de este tipo de alojamiento es bajo. Pero la desventaja es que no puede controlar cuánto tráfico reciben esos otros sitios en su servidor compartido. Por lo tanto, puede caer fácilmente en períodos de tiempos de carga extremadamente lentos e incluso en momentos en que su sitio está completamente inactivo. Por lo tanto, es mejor que tenga una buena idea de cuánto tráfico puede manejar su alojamiento compartido .

Hosting Dedicado

Con el hosting dedicado, tienes tu propio servidor dedicado solo para ti. No es necesario compartir ningún recurso con nadie más. Esto significa que tendrá tiempos de carga rápidos más predecibles y consistentes para su sitio web. Esto generalmente se ofrece como una opción de nivel superior para grandes corporaciones a un alto costo premium.

Alojamiento VPS

El alojamiento del servidor privado virtual (VPS) es básicamente un punto medio entre el alojamiento compartido y el dedicado. El espacio de su servidor es «privado», lo que significa que está completamente separado de todos los demás (algo así como una comunidad cerrada para los archivos de su sitio). Por lo tanto, los archivos de su sitio no están expuestos a otros en el servidor. A diferencia del alojamiento compartido, un VPS tiene una cantidad dedicada de recursos del sistema (o energía) a su disposición para garantizar que su sitio siempre obtenga lo que necesita para entregar tiempos de carga rápidos de manera consistente. Por lo tanto, no tendrá que preocuparse por los picos de tráfico de otros sitios web que afectan la velocidad de su sitio.

Pero, a menos que tenga un VPS administrado, este tipo de alojamiento es principalmente para aquellos tipos de bricolaje que son lo suficientemente expertos en tecnología para manejar las cosas por sí mismos. Para obtener más información, aquí hay una comparación de rendimiento entre el alojamiento VPS y el alojamiento compartido .

Alojamiento en la nube

Con el alojamiento en la nube, tiene acceso a una red de servidores (en la nube) en lugar de un único servidor físico. Esto le permite extraer todos los recursos que necesita de esta red de servidores según sea necesario. En esencia, tiene una partición virtual del espacio del servidor que está respaldada por la potencia y los recursos de toda la red. Por lo tanto, no tiene que preocuparse por los picos de tráfico como lo haría en un alojamiento compartido. El alojamiento en la nube es extremadamente flexible y escalable a sus necesidades.

Una diferencia principal entre el alojamiento en la nube y el alojamiento VPS es que el alojamiento VPS tiene una cantidad dedicada (o limitada) de recursos para extraer que puede agotarse o no. Cloud Hosting, por otro lado, es capaz de mantener sus recursos disponibles sin agotarse porque siempre puede extraerse de los otros servidores en la nube. En teoría, el alojamiento en la nube ofrece altas velocidades más consistentes y confiables. Entonces, si te tomas en serio la velocidad, el alojamiento en la nube es una gran opción (quizás incluso la mejor).

Hospedaje administrado de WordPress

El alojamiento administrado de WordPress generalmente se refiere al alojamiento compartido administrado por expertos de WordPress. No es tan «privado» como un VPS o tan poderoso como un entorno de alojamiento dedicado. Pero sí ayuda a maximizar la velocidad de su entorno compartido al hacer que los expertos de WordPress hagan el trabajo. Lo hacen bien porque adaptan sus servicios y configuran sus servidores estrictamente para los sitios de WordPress. Y muchos de ellos vienen con muchas funciones integradas interesantes y convenientes como entornos de preparación con un solo clic, almacenamiento en caché del sitio, implementación de CDN con un solo clic, copias de seguridad automáticas, SSL y más. Son perfectos para aquellos de nosotros que no queremos depender (o administrar) un montón de complementos para la optimización básica de la velocidad, la seguridad y la administración.

Empresas de alojamiento a considerar

Hay muchas empresas de alojamiento de WordPress por ahí. Y si es posible, querrás evitar el alojamiento compartido tradicional (no administrado) si te tomas en serio la optimización de la velocidad. Pero si tiene un sitio simple y no está dispuesto a pagar el dinero extra por administrarlo, Siteground parece ser uno de los mejores para el alojamiento compartido.

Por ahora, aquí hay una lista rápida de hosts a tener en cuenta para un sitio web Divi más rápido.

Esa lista es la punta del iceberg. Estoy seguro de que hay otros que funcionarán muy bien para su sitio Divi / WordPress. Si está buscando un sitio de revisión de hosting creíble, consulte la Señal de revisión .

También puede consultar esta guía para ayudarlo a elegir.

Optimización del tiempo hasta el primer byte (TTFB)

El Tiempo hasta el primer byte (TTFB) es la cantidad de tiempo que le toma al usuario recibir el primer byte de datos del sitio web desde su servidor / servidor. Entonces, cuando un usuario realiza una solicitud HTTP (carga su página web), el TTFB será esencialmente ese período de espera antes de recibir cualquier información.

Piense en ello como conseguir comida rápida. El restaurante puede estar optimizado para entregar su comida rápidamente. De hecho, pueden tener una hamburguesa esperándote. Pero aún tiene que esperar en línea para ordenar. Ese período de espera es lo que puede pensar como el momento de la primera mordida (vea lo que hice allí).

El TTFB debería estar alrededor de 200 ms (según Google). Pero para los sitios que tienen un alojamiento pobre y no han sido optimizados, el TTFB puede ser fácilmente de 2 segundos o más.

El retraso de TTFB en su sitio Divi generalmente es causado por lo siguiente:

  • La cantidad de contenido dinámico que debe recibirse. Esto se puede reducir con el almacenamiento en caché, la optimización de la base de datos y un CDN.
  • La cantidad de tráfico que está experimentando su servidor en ese momento. Los proveedores de alojamiento tradicionales (o compartidos) hacen que sea difícil reducir ese TTFB porque está compartiendo recursos con otros en el mismo servidor. Los picos en su tráfico reducirán la velocidad de procesamiento de su servidor.
  • La configuración de su servidor web . Un buen proveedor de alojamiento de WordPress puede ayudar con el TTFB de su sitio al proporcionar una infraestructura de back-end sólida y optimizar la configuración de su servidor web (cosas que están fuera de su control).

En resumen, si desea un impulso rápido en TTFB, obtenga un mejor alojamiento y siga el resto de los pasos a continuación.

Almacenamiento en caché

Hay cuatro tipos principales de almacenamiento en caché que se pueden implementar para acelerar su sitio.

  • Almacenamiento en caché de página : este proceso almacena versiones HTML estáticas en caché de su página para una entrega rápida.
  • Almacenamiento en caché del navegador : esto le brinda más control sobre el contenido que el navegador puede almacenar en caché y durante cuánto tiempo. Solo algunos complementos pueden hacer esto, por lo que sería mejor hacerlo manualmente para tener más control. Esto ayudará a cuidar esa metrix de «Aprovechar el almacenamiento en caché del navegador» al realizar pruebas de velocidad.
  • Almacenamiento en caché de CDN : sirve páginas / archivos de sitio web en caché desde un CDN más cercano a sus usuarios.
  • Almacenamiento en caché de objetos: el almacenamiento en caché de objetos almacena resultados de consultas repetidas que PHP inicia para recuperar datos de la base de datos y entregarlos al usuario. Esto es diferente del almacenamiento en caché de bytecode que almacena una versión en caché del código PHP compilado utilizado para mostrar su sitio web.

Divi realiza el almacenamiento en caché para servir los archivos JS y CSS estáticos de Divi detrás de escena. Pero esto es principalmente para los archivos de tema Divi para una mejor funcionalidad de Divi Builder.

Todavía es necesario usar el almacenamiento en caché para su sitio de WordPress en su conjunto. La mayoría de los sitios tienen múltiples complementos que vienen con sus propios archivos CSS que pueden necesitar combinarse, minimizarse y almacenarse en caché. Por lo tanto, definitivamente puede aprovechar un complemento de terceros para servir versiones html estáticas en caché de todas sus páginas.

Los complementos de almacenamiento en caché populares incluyen:

Sugerencia: Siempre que tenga habilitado el almacenamiento en caché de la página en su sitio utilizando un complemento, querrá asegurarse y eliminar (o borrar) el caché cada vez que realice cambios en su sitio web para asegurarse de que usted y sus visitantes reciban la última versión de su sitio. sitio.

Minificación y Agregación

La minificación reduce los archivos de su sitio. Al minimizar los archivos de su sitio (CSS, JavaScript, HTML), se eliminan todos esos caracteres innecesarios (como espacios y saltos de página) para que el tamaño del archivo se reduzca. Esto reduce el tiempo que tarda el navegador en cargar el contenido de una página.

La agregación implica combinar los archivos del sitio para reducir el total de solicitudes en la página y acelerar los tiempos de carga para sus visitantes.

Como se mencionó anteriormente, Divi minimiza y combina los archivos Javascript y CSS que usa el tema Divi por defecto. Por lo tanto, técnicamente no tiene que preocuparse por usar un complemento de terceros para minimizar y combinar aún más los archivos Javascript y CSS de Divi. Sin embargo, Divi no minimiza la salida HTML. Por lo tanto, puede beneficiarse de un complemento de terceros para minimizar (y almacenar en caché) todo el HTML de una página.

Además, casi todos los sitios Divi dependerán de archivos fuera del Divi Theme (como complementos u otros archivos agregados al Child Theme) que se beneficiarán al minimizar y combinar los archivos CSS y JS. Esto puede ser manejado fácilmente por un complemento.

Algunos complementos creíbles que minimizarán los archivos de su sitio incluyen:

Estos complementos deberían funcionar con Divi. Pero no hay forma de evaluar todos los matices de un sitio web para decir que uno funcionará mejor para todos. A veces, los complementos de terceros minimizan automáticamente los archivos JavaScript de una manera que puede causar errores / problemas, así que asegúrese de probar su sitio web a fondo. En general, siempre es seguro minificar archivos CSS. Pero ten cuidado con esos archivos JavaScript.

Y si hay un conflicto, es posible que deba deshabilitar las opciones integradas de Divi y dejar que el complemento de terceros maneje las cosas.

Y si no desea confiar en un complemento para esto, siempre puede hacerlo manualmente. Para obtener más información sobre cómo hacer esto, consulte esta publicación completa sobre cómo minimizar el CSS, HTML y JavaScript de su sitio web .

Compresión Gzip

La compresión Gzip es más importante que la minificación porque puede reducir el tamaño de la página hasta en un 70%.

Habilitar la compresión Gzip en tu sitio Divi puede darte un gran impulso en la velocidad. Si está familiarizado con la creación de archivos comprimidos (o comprimidos) en su computadora, ya tiene una comprensión básica de cómo funciona la compresión Gzip. Creamos archivos zip (o carpetas) para hacer que el contenido del archivo (o carpeta) sea más pequeño. ¿Por qué? ¡Para que podamos cargar y descargar el archivo mucho más rápido! La compresión Gzip hace lo mismo para su sitio web. Le dice al servidor que comprima todos los archivos que pueda en versiones más pequeñas para que pueda ser entregado al cliente mucho más rápido. Esto realmente puede aumentar la velocidad de carga de la página.

Esta es una de esas áreas en las que puede mejorar la velocidad de Divi incluso en una nueva instalación del tema. Dado que Divi ya minimiza los archivos del tema central de todos modos, la compresión Gzip hará que esos archivos sean aún más pequeños. La compresión Gzip hará que sus archivos sean mucho más pequeños que la minificación.

Muchos de los complementos de rendimiento de WordPress (como W3 Total Cache y WP Super Cache) incluirán la compresión Gzip como una opción.

Aquí hay algunos complementos que admiten la compresión Gzip:

Y algunos proveedores de hosting habilitarán la compresión gzip automáticamente porque es una obviedad para el rendimiento del sitio. No dude en verificar si la compresión Gzip está habilitada en su sitio.

La forma más común de habilitar la compresión Gzip (en servidores Apache) es hacerlo manualmente usando mod_deflate. Y todo lo que tiene que hacer es acceder a su sitio web (la raíz) a través de FTP (asegúrese de mostrar los archivos ocultos). Luego copie y pegue el siguiente bloque de código en la parte inferior de su archivo .htaccess.

Aquí está el código:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18 años
19
20
21
22
23
24
25
26
27
28
29
30
<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

CDN

StackPath CDN PoPs

Una red de entrega de contenido (CDN) lleva la velocidad del sitio a otro nivel. Como su nombre lo indica, un CDN es una red para entregar contenido. La red consta de servidores en todo el mundo que almacenan archivos estáticos en caché (imágenes, videos, scripts, etc.) del contenido de su sitio web. Luego, cuando una persona envía una solicitud de ese contenido (visitando su sitio web), el servidor (o PoP) más cercano a la persona entregará el contenido. Sin una CDN, los archivos de su sitio web son accesibles desde la ubicación de un servidor (donde sea que su host esté almacenando esos archivos), por lo que cuanto más lejos esté de ese servidor, más lento será entregar el contenido de ese sitio web a su navegador.

Piénselo, cuando quiere una pizza entregada en su casa, no elige la pizzería a 30 millas de distancia. Eliges el que está a 5 millas de distancia porque quieres que te lo entreguen lo antes posible (si eres un humano normal que ama la pizza tanto como yo). Un CDN funciona de manera similar. Como desea que el sitio web aparezca en su navegador lo antes posible, un CDN tendrá los archivos de su sitio listos para ser entregados desde el servidor más cercano a su ubicación. Entonces, si los archivos de su sitio se almacenan en un servidor en San Francisco y alguien en Londres detiene su sitio, puede tomar 1 o 2 segundos recibir esos datos desde un servidor a miles de millas de distancia. Pero con un CDN, puede entregar esos mismos datos desde un servidor en Londres en la mitad del tiempo. Esa es una gran diferencia!

Entonces, incluso si no ve el alcance completo de los resultados en su hogar, está acelerando la entrega de su sitio web a lugares de todo el mundo.

Hay muchas formas de obtener un CDN para su sitio. Muchas compañías de hosting incluirán una opción para implementar un CDN con su servicio. Y hay plataformas de red como Cloudflare y MaxCDN (ahora StackPath) que ofrecen capacidades CDN junto con otras características de rendimiento y seguridad.

Aquí hay algunas plataformas de CDN creíbles para considerar:

Hay algunos complementos de almacenamiento en caché como WP Total Cache o CDN Enabler que incluyen una opción para integrar múltiples proveedores de CDN automáticamente, lo cual es bastante conveniente.

Aquí hay algunos complementos con soporte CDN:

Optimización de imagen

La optimización de imagen es uno de los principales culpables de la velocidad de carga lenta de la página. Esto probablemente se deba a lo fácil que es ignorarlo. Después de todo, ¿cuánto daño puede causar una imagen de fondo a una página web? Bueno, puede que te sorprendas. Solo unas pocas imágenes grandes que no han sido optimizadas para la web podrían tener ramificaciones catastróficas en la velocidad de carga de la página. Y seamos sinceros, su sitio probablemente tendrá muchas imágenes.

Realmente no hay suficiente énfasis en la necesidad esencial de optimización de imagen. Cada sitio web debería estar haciendo esto. La compresión de imágenes por sí sola puede hacer que su sitio sea notablemente más rápido y los tamaños de imagen más pequeños ahorrarán espacio de almacenamiento y ancho de banda (¡todos ganan!). Pero hay otras optimizaciones de imagen importantes en las que también debe pensar.

En resumen, querrá hacer lo siguiente al optimizar su imagen para la web:

Use el tipo de archivo correcto

Cuando se trata de imágenes en la web, realmente debe seguir con los siguientes tipos de archivos de imagen:

  • JPG: este debería ser su tipo de archivo para la mayoría de las imágenes / fotografías que utiliza en su sitio, ya que puede obtener imágenes de gran apariencia en un tamaño de archivo más pequeño que PNG o GIF. Evite usar el formato PNG para cosas como imágenes de fondo o fotografías a menos que necesite un fondo transparente.
  • PNG: utilice PNG para imágenes que necesitan un fondo transparente. JPG no es compatible con la transparencia.
  • SVG: este es un formato vectorial que ofrece detalles extremadamente nítidos utilizando código HTML. Los SVG son excelentes para logotipos, iconos y otras animaciones vectoriales.

Cambiar el tamaño y recortar sus imágenes

Nunca quieres que tu imagen sea más grande de lo que debe ser. Por ejemplo, si está agregando un logotipo en las opciones de tema de Divi, en la mayoría de los casos solo necesita que tenga un ancho de 100px. Así que no cargue un logotipo con un ancho de 5000px y obligue a Divi a cambiar el tamaño de esa imagen por usted. El resultado puede ser similar en la parte frontal, pero ese gran tamaño está matando el tiempo de carga de la página.

Al cargar imágenes a su página usando Divi, es útil saber qué tan grandes deben ser esas imágenes dentro de la estructura de columnas de Divi. Esta guía definitiva puede ayudarlo a orientarse en la dirección correcta. (Sin embargo, hay nuevas estructuras de columnas que se han agregado desde esa publicación, por lo que intentaremos actualizarlo pronto).

Comprimir tamaño de archivo

Deberá reducir el tamaño del archivo de imagen hasta el punto antes de notar una disminución en la calidad. Esto se realiza mediante compresión de imagen. La mayoría de los editores de fotos, complementos y sitios como tinypng.com comprimen imágenes usando compresión sin pérdida (que reduce el archivo de imagen sin perder calidad de imagen) y compresión inteligente con pérdida (que disminuye el tamaño del archivo de imagen al reducir los metadatos y la calidad de imagen en un de manera que el usuario no lo note realmente).

Aproveche las herramientas de optimización de imagen

Si puede, le sugiero que optimice sus imágenes para Internet antes de subirlas a su sitio Divi. Esto se puede hacer a través de editores de fotos como Photoshop que incluyen la opción «Guardar para Web». Además, puede usar un sitio de terceros gratuito como TinyPNG.com o Compressor.io para comprimir la imagen antes de subirla a su sitio.

Hay algunos complementos geniales que llevarán a cabo la compresión de imágenes por usted. Algunos complementos (como Imagify) comprimirán las imágenes que ya se utilizan en su sitio y las comprimirán automáticamente a medida que las cargue en su biblioteca de WordPress Media. Tenga en cuenta que el uso de un complemento para esto puede ser gravoso en su sitio al comprimir esas imágenes, por lo que es una buena práctica hacer la optimización de la imagen de antemano si es posible.

Aquí hay algunas excelentes herramientas y complementos de optimización de imágenes que puede usar:

Para obtener más información, consulte una comparación de 6 complementos de optimización de imagen de calidad .

Soporte SRCSET incorporado de Divi

Las imágenes receptivas con soporte nativo SRCSET también están integradas en Divi. Esto mejora aún más la optimización de las imágenes utilizadas en Divi al ofrecer las imágenes escaladas que tienen el tamaño adecuado para diferentes pantallas receptivas (como tabletas y teléfonos).

Optimización de video

La optimización de video es un poco más difícil que la optimización de imagen, pero definitivamente no es menos importante. Los archivos de video pueden ser grandes y, por lo tanto, extremadamente exigentes con la velocidad de carga de la página. Y si aloja muchos videos en su servidor (en la Galería de medios de WordPress, por ejemplo), se encontrará con el problema adicional de espacio en disco. Es por eso que a menudo se recomienda utilizar servicios de terceros (como YouTube o Vimeo ) para alojar sus videos por usted. O bien, puede considerar descargar su contenido multimedia de video en una plataforma de almacenamiento como Amazon S3 . Esto le permitirá vincular a esos videos desde el módulo de video de Divi sin que tengan que ralentizar su servidor.

Si vas a alojar tus videos por tu cuenta, definitivamente necesitarás reducir el tamaño del video para una carga más rápida . Puede reducir archivos de video fácilmente usando una herramienta gratuita como Handbrake (que es fácil de usar ).

Para obtener más información sobre cómo usar el video en Divi (como agregar una URL de video alojada por un tercero a un Módulo de video), consulte esta guía definitiva .

Usar complementos de calidad

Obviamente, cuantos menos archivos tenga que cargar un sitio web, más rápido será. Por lo tanto, debe tener en cuenta la cantidad de complementos que utiliza. Si tiene complementos (o Temas) que no está utilizando, asegúrese de eliminarlos. Pueden ser perjudiciales para el rendimiento de su sitio web y un grave riesgo de seguridad. Pero la calidad es el factor más importante cuando se trata de complementos. De hecho, puede tener entre 20 y 30 complementos de calidad que no ralentizarán su sitio tanto como uno malo. En general, asegúrese de elegir complementos que hayan resistido el paso del tiempo y tengan excelentes críticas. Y siempre pruebe cómo un complemento afecta el rendimiento de su sitio web con pruebas de velocidad antes y después para asegurarse.

Realización de pruebas de velocidad

Probablemente no estaría leyendo este artículo si no ha realizado al menos una prueba de velocidad en su sitio web. Y con razón, es importante saber qué tan rápido se están cargando sus páginas para los visitantes. Realizar una prueba de velocidad es una de las cosas más fáciles que puede hacer . Hay toneladas de sitios web que lo harán de forma gratuita. Y las métricas que proporcionan serán invaluables para identificar formas en que puede optimizar aún más su sitio para un mejor rendimiento.

Aquí hay algunos buenos lugares para comenzar:

Los resultados de estas pruebas son lo que impulsa a muchos de nosotros a comenzar a optimizar nuestro sitio Divi para tiempos de carga más rápidos. Proporcionan un desglose útil de cómo funciona su página web en una variedad de áreas. Luego, puede usar sus recomendaciones como una lista de verificación para trabajar mientras optimiza su sitio.

La mejor manera de utilizar estas herramientas de prueba de velocidad en línea para su sitio Divi WordPress es ejecutar una prueba en una página antes de realizar cualquier optimización. Luego puede usar esto como base para comparar futuras pruebas a medida que realiza cambios. Después de cada optimización que realice, puede ver si su puntaje mejora.

Por ejemplo, puede notar que usar un complemento de almacenamiento en caché funcionará mejor que otro. No tenga miedo de probar varios complementos para obtener el mejor rendimiento.

Aquí hay una útil guía de optimización de WordPress de GTMetrix que será útil.

A medida que implementa las optimizaciones de velocidad en su sitio, debería ver mejoras en las siguientes áreas:

  • Tiempo de carga completa / Tiempo de carga (esta es la métrica más importante que está intentando derribar)
  • Tamaño total de página (cosas como minificación, optimización de imagen con ayuda con esto)
  • Peticiones
  • PageSpeed ​​/ YSlow puntajes
  • Servir imágenes escaladas
  • Optimizar imágenes
  • Aproveche el almacenamiento en caché del navegador
  • Minificar CSS / HTML
  • Habilitar la compresión gzip
  • Hacer menos solicitudes HTTP
  • Agregar encabezados caduca

Para obtener más información, consulte nuestra publicación sobre cómo mejorar la puntuación de velocidad de su página de Google .

El objetivo es la velocidad, no la perfección

Puede ser fácil empantanarse probando su sitio web y optimizándolo a la perfección. Pero ningún sitio web será perfecto. Incluso puede encontrar que mejorar ciertas calificaciones de rendimiento de la prueba de velocidad en realidad puede ralentizar el tiempo de carga de la página. Eso es porque incluso esas pruebas de velocidad tampoco son perfectas. Al igual que este artículo, son simplemente una guía para ayudar a mejorar el rendimiento y la velocidad de su sitio web.

Cómo evitar posibles conflictos con las optimizaciones de rendimiento integradas de Divi y los complementos de terceros

Cada vez que implementa un complemento de terceros para la minificación y el almacenamiento en caché, puede encontrar ciertos conflictos. Por ejemplo, puede encontrar que un módulo Divi no se muestra correctamente o que ciertos archivos JavaScript no se procesan correctamente.

Para evitar este tipo de conflictos, puede deshabilitar las optimizaciones integradas de Divi y dejar que el complemento de terceros lo maneje por usted. Las tres opciones que querrá deshabilitar son:

  • Generación de archivos CSS estáticos
  • Minificar y combinar archivos Javascript
  • Minificar y combinar archivos CSS

Puede deshabilitar las opciones para minimizar y combinar archivos Javascript y CSS yendo a Opciones de tema> pestaña General.

Puede deshabilitar la opción para la generación de archivos CSS estáticos en Opciones de tema> Generador> Avanzado.

Otros consejos

Hemos cubierto prácticamente todos los factores principales que contribuyen a los sitios web Divi / WordPress más rápidos. Pero hay muchas más cosas a considerar que podrían mejorar su velocidad aún más.

  • Tener una configuración correcta del tema Divi child
  • Cambiar su URL de inicio de sesión de WordPress para evitar que esos bots sobrecarguen su servidor. Esta sería una buena oportunidad para crear una página de inicio de sesión personalizada con Divi.
  • Evitar llamadas innecesarias a servicios externos. Algunos complementos e incrustaciones requieren que use archivos alojados en sus servidores. Estas llamadas adicionales ralentizarán la carga de la página.
  • Incorpora carga lenta para imágenes y videos para una mejor velocidad de carga de la página.

Descripción rápida de las prácticas y recursos sugeridos para sitios web Divi más rápidos

Aquí hay una descripción general rápida de las prácticas sugeridas y los recursos incluidos en este artículo para una fácil referencia.

Obtenga la última versión de PHP

Optimización de bases de datos

Puede usar estos complementos para optimizar y limpiar su base de datos para un sitio más rápido.

Búsqueda de DNS y detección de DDOS

Buen alojamiento

Una lista rápida de hosts a tener en cuenta para un sitio web Divi más rápido.

Si está buscando un sitio de revisión de hosting creíble, consulte la Señal de revisión .

También puede consultar esta guía para ayudarlo a elegir.

Optimización del tiempo hasta el primer byte (TTFB)

  • Obtenga un mejor alojamiento con la configuración adecuada del servidor web.
  • Optimizar el sitio para la velocidad

Almacenamiento en caché (página, objeto, navegador)

Los complementos de almacenamiento en caché populares incluyen:

Si su complemento no admite el almacenamiento en caché del navegador, querrá habilitar el almacenamiento en caché del navegador manualmente .

Minificar / Combinar archivos de sitio

Algunos complementos creíbles que minimizarán los archivos de su sitio incluyen:

Nuestro puedes hacerlo manualmente .

Compresión Gzip

CDN

Aquí hay algunas plataformas de CDN creíbles para considerar:

Aquí hay algunos complementos con soporte CDN:

Optimización de imagen

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!