GNU/Linux >> Tutoriales Linux >  >> Panels >> Plesk

Cómo acelerar WordPress

Esta guía incluye 9 consejos para mostrarle cómo llevar casi cualquier sitio de WordPress a un tiempo de carga máximo de 1-2 segundos. Recibe actualizaciones periódicas y se amplió en el primer trimestre de 2020 para incluir un par de consejos extra adicionales.

Si ha seleccionado un socio de hospedaje y recursos (temas, complementos, etc.) creados desde cero para lograr velocidad y esperar que funcionen bien con grandes cantidades de tráfico (muchos no lo hacen), entonces puede comunicarse con fracciones de segundos de carga por página, su sitio almacenado en caché debería manejar fácilmente picos de más de 500 visitantes simultáneos y 20k o más diariamente las visitas a la página no deberían ser un problema. Esta guía también lo ayudará a obtener las mejores calificaciones en puntos de referencia sintéticos como GTMetrix y Google Page Speed.

Aquí hay una descripción general de lo que estamos a punto de sumergirnos:

EN ESTE ARTÍCULO

  • 1. Utilice un proveedor de alojamiento web que se preocupe por el rendimiento
  • 2. Utilice la última versión de PHP
  • 3. Habilitar compresión Brotli o Gzip
  • 4. Habilitar caducidad prolongada para la memoria caché del navegador
    • ¿Utiliza el servidor web apache?
    • Uso de nginx con Plesk
    • Usando barebones nginx
  • 5. Use un generador de caché estático del lado del servidor
  • 6. Utilice un complemento de minimización y optimización de código
    • WP Rocket (nuestro favorito, de pago)
    • WP Super Cache + Optimización automática (gratis)
      • Configuración de optimización automática
    • Resolución de problemas de elementos rotos
      • Faltan imágenes o videos:
      • Las partes globales de mi sitio no funcionan, como un menú
      • Exclusiones por página
      • Si está utilizando Eliminar CSS no utilizado (WP Rocket)
  • 7. Comprimir archivos de imagen
    • Almacenamiento en caché de Gravatars
  • 8. Configurar Nginx para cargar la salida de caché estática [Avanzado]
    • Configurar nginx para cargar archivos de caché estáticos de WP Super Cache
    • Configurar nginx para cargar archivos de caché estáticos de WP Rocket
  • 9. Deshabilitar módulos PHP no utilizados [Avanzado]
  • Consejo adicional n.º 1:ReCAPTCHA v3
  • Consejo adicional n.º 2:Detecte y reduzca el procesamiento dinámico
Toma el camino fácil...

Simplemente alojando su sitio web de WordPress con Websavers y habilitando un complemento de almacenamiento en caché como WP Super Cache o WP Rocket + complementos de optimización de imágenes como Imagify o ShortPixel, obtendrá cada paso de esta guía hecho por usted o automatizado. Genial, ¿eh?

ÉCHALE UN VISTAZO

¡Sigue leyendo para empezar!

Esta guía no :

  • Ayudarlo a solucionar problemas con su proveedor de alojamiento o su bajo rendimiento. Usar un host de WordPress de alta calidad hace una gran diferencia.
  • Ayudarlo con problemas con complementos o temas que podrían ralentizar mucho las cosas o contribuir a puntajes de referencia sintéticos bajos. Por ejemplo, muchos complementos y temas realizan llamadas de recursos externos que no puede controlar, lo que reducirá inherentemente la velocidad (y las puntuaciones de referencia) de su sitio. De manera similar, muchos complementos y temas utilizan prácticas de codificación deficientes que requieren un procesamiento pesado de datos innecesariamente. Por lo tanto, es posible que deba deshabilitar partes de su sitio web (tema, complementos, etc.) para que funcione bien con su complemento de almacenamiento en caché. Si está utilizando temas y complementos que optimizan el rendimiento, descubrirá que habilitar el almacenamiento en caché funcionará perfectamente sin mucha manipulación.
  • Permítale tener su pastel y comérselo también:es posible que deba aceptar una pérdida de funcionalidad o calidad a favor de un mejor rendimiento y las mejores calificaciones en puntos de referencia sintéticos como Google PageSpeed ​​Insights . Si le encantan las imágenes de calidad excepcionalmente alta que tienen más de 1 MB cada una o archivos de video no lo suficientemente comprimidos, entonces nunca obtendrá las mejores calificaciones en las utilidades de evaluación comparativa de sitios web. De manera similar, si tiene una parte de su sitio que carga contenido dinámico en cada carga de página, es posible que deba desactivar esa funcionalidad o encontrar otra forma de cargarlo para un rendimiento óptimo.

Si tiene un problema en el que una página tarda más de 10 segundos antes de que comience a cargar contenido, a menudo hay un problema subyacente con WordPress o la configuración de alojamiento que debe resolver antes de recurrir al almacenamiento en caché para encontrar una solución. Haga clic aquí para obtener ayuda para solucionar problemas con páginas que se cargan repentinamente muy lentamente.

Si se siente cómodo con todas las instrucciones de este artículo, debe seguirlas todas para mejorar el rendimiento de su sitio web. Si es un usuario básico, también está bien completar solo las secciones con las que se sienta cómodo. Seguirá viendo una mejora en el rendimiento, pero no tanto como cuando puede completar todas las opciones.

Algunas partes proporcionarán mejoras masivas en el tiempo de carga, mientras que otras serán insignificantes. Algunas partes harán que una prueba de velocidad sintética, como la prueba de velocidad PageSpeed ​​o GTMetrix de Google, piense muy bien en su sitio, pero es posible que no cree una diferencia en los tiempos de carga del mundo real. Tal es la naturaleza de las herramientas sintéticas de evaluación comparativa.

Sin más preámbulos, aquí hay 9 cosas que puede hacer para mejorar drásticamente el rendimiento de su sitio web:

1. Utilice un proveedor de alojamiento web que se preocupe por el rendimiento

Si su proveedor de alojamiento web sobrecarga sus servidores con miles de sitios web o no sabe cómo aprovechar al máximo sus servidores, entonces es inevitable que se encuentre con ralentizaciones frecuentes.

Si está en un alojamiento compartido, asegúrese de que su host limite artificialmente la cantidad total de sitios por servidor para garantizar que su sitio tenga los recursos que necesita para funcionar bien. Si tiene su propio VPS, pregúntele a su anfitrión cómo está configurado y qué partes de la configuración están diseñadas para garantizar el máximo rendimiento. Si su respuesta no incluye cosas como almacenamiento SSD, nginx o servidor web de velocidad ligera y configuraciones optimizadas personalizadas para servir archivos de caché estáticos, entonces es hora de encontrar un mejor servidor web de WordPress.

Si eres muy preocupado por el rendimiento, se recomienda obtener un VPS propio para asegurarse de que su sitio tenga recursos dedicados. A menudo recomendamos probar primero nuestro alojamiento compartido con poca carga y, si descubre que necesita un rendimiento aún mayor, siempre puede pasar a un VPS.

2. Utilice la última versión de PHP

Puedes echar un vistazo a algunas de las métricas aquí. Si puede usar PHP 8.x o 7.4, proporcionará una mejora adicional del 30-70 % en el rendimiento con respecto a 7.2 y versiones anteriores. Pero tome nota:no notará esta mejora en las páginas frontales almacenadas en caché. Esta mejora en el rendimiento se verá en los tiempos de carga de la página cuando su complemento de almacenamiento en caché primero almacena en caché la página y cuando atraviesa el área de administración de WordPress.

Eso suena genial... pero ¿cómo lo uso?

  • Primero, inicie sesión en Plesk
  • Bajo el dominio en cuestión, vaya a "Configuración de PHP"
  • Habrá dos menús desplegables en la parte superior de la página; uno para la versión de PHP, uno para el controlador de PHP. Para la versión, pruebe la última versión, luego, si encuentra problemas repetidamente, baje una versión hasta que el sitio funcione. Si haces encuentra problemas con la última versión de PHP, en última instancia, su mejor opción será encontrar el origen del problema y solucionarlo, como actualizar un complemento o tema incompatible, sin embargo, reconocemos que esto no siempre es posible.
  • Desplácese hasta la parte inferior y haga clic en "Aceptar" o "Aplicar"

3. Habilitar compresión Brotli o Gzip

¿Está utilizando el alojamiento compartido de Websavers o un VPS con soporte práctico? Si es así, ¡ya hemos habilitado la compresión Brotli (con gzip fallback) para usted! ¿Aún no experimenta la diferencia de Websavers? Bueno, esperamos verte pronto.

Si no aloja con nosotros, la mayoría de los complementos de almacenamiento en caché se encargan de esto por usted; sin embargo, si el suyo no lo hace, agregue estos valores a su archivo .htaccess para agregar compresión GZIP en su sitio web:

<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
</IfModule>

Esto le dice a Apache que comprima todo el contenido compatible antes de enviarlo, ¡ahorrando tiempo y ancho de banda!

¿Usas solo Nginx? Use esto en sus directivas de Nginx para habilitar brotli con respaldo de gzip:

brotli on;
brotli_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

gzip on;
gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
gzip_proxied any;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml;
gzip_vary on;

4. Habilitar caducidad prolongada para la memoria caché del navegador

Primero, es importante comprender qué es exactamente el almacenamiento en caché del navegador. ¿Alguna vez alguien te ha dicho que "borres tu caché" en tu navegador? Esto se debe a que los navegadores modernos están configurados para descargar copias de recursos (HTML/CSS/JS/Images) para acelerar la velocidad de la página en visitas posteriores. Sin embargo, de forma predeterminada, algunos de estos elementos están configurados para "caducar" muy rápidamente, ¡lo que no ayuda mucho con la velocidad!

En una sección posterior, hablaremos sobre el uso de un complemento de almacenamiento en caché para WordPress. Si está utilizando estrictamente el servidor web apache, todos los complementos de almacenamiento en caché también habilitarán valores de caducidad prolongados para el almacenamiento en caché del navegador .

Esto no se recomienda si todavía está desarrollando su sitio. Solo aplique esta configuración cuando el sitio esté activo.

Dicho esto, si su sitio está activo y desea exprimir un poco más su rendimiento, puede configurar su servidor para que les diga a los visitantes cuánto tiempo conservar ciertos recursos.

Estas directivas son enviadas por el servidor para indicarle al navegador de cada visitante cuánto tiempo "retener" varios tipos de archivos.

¿Utiliza el servidor web apache?

Agregue lo siguiente a su archivo .htaccess.

## EXPIRES CACHING ## 
<IfModule mod_expires.c> 
ExpiresActive On 
ExpiresByType image/jpg "access plus 1 year" 
ExpiresByType image/jpeg "access plus 1 year" 
ExpiresByType image/gif "access plus 1 year" 
ExpiresByType image/png "access plus 1 year" 
ExpiresByType text/css "access plus 1 month" 
ExpiresByType text/html "access plus 1 week" 
ExpiresByType application/x-compressed "access plus 1 week" ExpiresByType application/x-gzip "access plus 1 week" 
ExpiresByType application/pdf "access plus 1 month" 
ExpiresByType text/x-javascript "access plus 1 month" 
ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" 
ExpiresDefault "access plus 1 week" 
</IfModule> 
## EXPIRES CACHING END ##

Uso de nginx con Plesk

  • Inicie sesión en Plesk y vaya a "Configuración de Apache y nginx" en el dominio que está optimizando
  • Bajo Caduca> Ingrese un valor personalizado ingrese 365 días . y marque la casilla:respuesta con encabezados Expires solo para archivos estáticos
  • Marque las casillas junto a Procesamiento inteligente de archivos estáticos y servir archivos estáticos directamente mediante nginx

En caso de que la opción "Servir archivos estáticos directamente mediante nginx" no tenga todas estas extensiones de archivos estáticos en la lista (ya sea con espacios o | entre ellos), pegue esto en el cuadro provisto:

ac3|atom|avi|bmp|bz2|css|csv|cue|dat|doc|docx|dts|eot|exe|flv|gif|gz|htm|html|ico|img|iso|jpeg|jpg|js|map|mid|midi|mkv|mp3|mp4|mpeg|mpg|m4a|ogg|ogv|otf|pdf|png|ppt|pptx|qt|rar|rm|rss|rtf|svg|svgz|swf|tar|tgz|ttf|txt|wav|webp|woff|woff2|xls|xlsx|zip

Ahora haga clic en Aplicar o en Aceptar para guardar los cambios.

Usando barebones nginx

Agregue esto a su configuración de nginx:

location ~* \.(css|js)$ {
        gzip_vary on;
        expires 30d;
}
location ~* \.(ac3|atom|avi|bmp|bz2|css|csv|cue|dat|doc|docx|dts|eot|exe|flv|gif|gz|htm|html|ico|img|iso|jpeg|jpg|js|map|mid|midi|mkv|mp3|mp4|mpeg|mpg|m4a|ogg|ogv|otf|pdf|png|ppt|pptx|qt|rar|rm|rss|rtf|svg|svgz|swf|tar|tgz|ttf|txt|wav|webp|woff|woff2|xls|xlsx|zip)$ {      
        gzip_vary on;
        expires max;  
        log_not_found off;
}

5. Utilice un generador de caché estático del lado del servidor

En nuestras pruebas, la mejor opción comercial para esto es WP Rocket y la mejor opción gratuita para esto es WP Super Cache. Ambos crearán archivos de caché estáticos para cada una de las páginas y publicaciones de su sitio y ambos funcionarán excepcionalmente bien con nuestra configuración nginx personalizada que detecta automáticamente los archivos estáticos y los sirve sin la necesidad de iniciar un proceso más pesado de Apache y/o PHP. Las ventajas que hemos encontrado al pagar WP Rocket sobre los complementos de almacenamiento en caché gratuitos se encuentran casi exclusivamente en la parte de optimización y minificación del código del sitio web. Consulte la parte 6 de esta guía a continuación para obtener más información al respecto.

Usamos una configuración de nginx personalizada construida internamente en todos nuestros servidores para detectar automáticamente el uso de los complementos de almacenamiento en caché de páginas del lado del servidor más comunes y servir automáticamente sus archivos html estáticos directamente con nginx sin tener que canalizar a través de apache o el Procesador PHP, lo que reduce el uso de CPU y memoria. Nuestros sistemas pueden detectar automáticamente y servir la salida de caché estática de WP Rocket, WP Super Cache, WP Fastest Cache, W3 Total Cache y WP Optimize. Lamentablemente, Hummingbird no puede funcionar con nuestros sistemas, ya que utilizan nombres de archivos de caché estáticos generados aleatoriamente. Si desea utilizar Hummingbird, solicite al soporte de WPMUDEV que corrija sus nombres de archivo de caché.

¡Estos complementos de generación de caché estática pueden permitir que su sitio maneje picos masivos en el tráfico sin sudar, incluso en nuestros servicios de alojamiento compartido!

Hemos utilizado estas configuraciones para llevar un sitio en alojamiento compartido a alrededor de 100 000 vistas únicas diarias sin ningún problema, y ​​un sitio en su propio VPS a más de 500 000 vistas de página únicas diarias con una carga promedio de 1.0.

Si su host no puede mantenerse al día, consulte nuestras opciones de alojamiento de WordPress canadienses. Aún mejor, con las optimizaciones descritas en este paso, el paso 6 (optimización) y el paso 7 (compresión de imágenes), su sitio puede pasar de una puntuación de velocidad de página de Google fallida o baja a más de 90, según el tema. y complementos utilizados.

Aquí se explica cómo obtener una salida de caché estática de nuestros dos complementos de almacenamiento en caché favoritos:

  • WP Rocket :Aquí se explica cómo instalar y activar WP Rocket usando su guía. Una vez activado, automáticamente comenzará a crear un caché estático.
  • WP Super Caché :inicie sesión en su instalación de WordPress y vaya a Complementos> Agregar nuevo. Instale WP Super Cache y actívelo. Dirígete a Configuración> WP Super Cache y selecciona "Activar almacenamiento en caché" y presiona el botón Actualizar estado. Haga clic en la pestaña Avanzado. Marque todo con "Recomendado" al lado. Pulse el botón Actualizar estado. Desplácese hacia abajo hasta la sección "Tiempo de caducidad y recolección de basura" y establezca el intervalo en una o dos veces al día, luego presione el botón "Cambiar caducidad".

Algunas personas prefieren W3 Total Cache y otras prefieren WP Fastest Cache, entre muchas otros complementos de almacenamiento en caché. En general, estos complementos son excelentes para manejar las mejoras de rendimiento, y cualquiera de los enumerados anteriormente funcionará muy bien para generar archivos de caché estáticos para un rendimiento más rápido del sitio web. No todos tienden a ser tan consistentemente buenos en la optimización como se describe en el paso 6 a continuación.

Ahora, abra un navegador diferente al que inició sesión en WordPress y cargue cualquier página en su sitio. Una vez que haya terminado de cargarse, actualice la página. Debería encontrar que la actualización ahora es significativamente más rápida que la carga de la página inicial. Esto no se debe *solo* a que su navegador haya utilizado la carga de la primera página para almacenar en caché los recursos, sino también (lo que es más significativo) a que el servidor utilizó esa carga de la página inicial para crear un archivo de caché estático que luego se sirve en visitas posteriores.

Habilitar el almacenamiento en caché de páginas estáticas no debería tener ningún efecto en la funcionalidad de su sitio, pero mejorará drásticamente el TTFB (tiempo hasta el primer byte) de su sitio web, ya que el servidor podrá proporcionar cada página mucho más rápido que antes. La única excepción a esto es si tiene datos dinámicos que cambian en el sitio que no usa AJAX; esa parte de su sitio no se actualizará automáticamente en cada carga de página. Si esto ocurre, hable con el desarrollador de su sitio web y pídale que cambie la función para que use AJAX.

En la parte 6 a continuación, puede leer acerca de cómo configurar WP Rocket o SuperCache + Autoptimize para manejar optimizaciones en el sitio más agresivas que mejorarán drásticamente su puntaje de velocidad de página de Google.

6. Utilice un complemento de minimización y optimización de código

En términos generales, desea ceñirse a un solo complemento de optimización a la vez, sin embargo, WP Super Cache y Autoptimize están diseñados para funcionar juntos. WP Rocket tiene la funcionalidad de WP Super Cache y Autoptimize combinados, ya que genera archivos de caché estáticos (como se describe en la parte 5 anterior) y minimiza y optimiza el código del sitio.

Autoptimize funciona con WP Rocket, en el sentido de que WP Rocket simplemente deshabilitará su funcionalidad de optimización cuando se detecte Autoptimze, sin embargo, en la mayoría de los casos, lo consideramos innecesario ya que WP Rocket ya tiene la misma funcionalidad incorporada. La funcionalidad de optimización de WP Rocket también tiende a ser mejor para no romper sitios web que Autoptimize cuando funciones como minificación y aplazamiento de scripts están habilitadas.

Cuando se trata de optimizar el código del sitio (como la minificación), que a menudo se necesita para obtener puntajes más altos con Google Page Speed ​​o GTMetrix, nunca hemos logrado que W3 Total Cache o WP Fastest Cache (entre otros) funcionen tan bien. como Autoptimize o las funciones de optimización de WP Rocket.

Tenga en cuenta:esta es la etapa en la que habilitar algunas optimizaciones puede romper partes de su sitio, especialmente si el tema, el complemento o el código personalizado no se ha escrito para que funcione bien con la optimización. Si esto le ocurre, consulte los pasos de solución de problemas a continuación para saber cómo solucionarlo.

WP Rocket (nuestro favorito, de pago)

Si no ha completado la parte 5 anterior, instale y active WP Rocket utilizando su guía. Luego ve a Configuración> WP Rocket para comenzar.

Pestaña Caché:

  • Habilitar almacenamiento en caché para dispositivos móviles . Si usa un sitio móvil completamente independiente (no recomendado) o si usa mucho de elementos que solo aparecen en dispositivos móviles (como intercambiar partes de una página entre una versión móvil y una versión de escritorio), luego marque la casilla para Separar archivos de caché para dispositivos móviles .
  • Habilitar el almacenamiento en caché para usuarios de WordPress que hayan iniciado sesión

Guardar cambios

Pestaña de optimización de archivos:

  • Minimizar CSS: habilitado
  • Combinar archivos CSS: deshabilitado*
  • Optimizar la entrega de CSS: Recomendamos usar la opción "Cargar CSS de forma asíncrona", ya que es mucho más confiable que (actualmente en versión beta) Eliminar CSS no utilizado. Remove Unused CSS brinda un aumento de rendimiento espectacular, pero no es confiable para el uso regular o para los débiles de corazón. Si lo usa, prepárese para una serie de ajustes manuales para hacerlo bien.
  • Minimizar archivos JavaScript: habilitado
  • Combinar archivos JavaScript:deshabilitado*
  • Cargar JavaScript diferido: habilitado
  • Retrasar la ejecución de JavaScript: habilitado**

Ahora borra el caché de WP Rocket y carga tu sitio en otro navegador

* archivos separados es mejor cuando su servidor web admite http/2 o http/3 (como el nuestro) porque el motor del servidor web enviará los archivos simultáneamente.

** Verifique la pestaña de la consola del inspector web de su navegador para ver si hay errores. Si ve algún error que se parece a:'jQuery no está definido' o 'jQuery no se encuentra', deberá averiguar por qué un complemento, tema o código personalizado no está cargando sus recursos correctamente y excluir los necesarios desde la funcionalidad Aplazar y/o Retrasar Javascript, o tomar la ruta fácil y aplicar las exclusiones predeterminadas para Retrasar la ejecución de Javascript que se muestra en esta página de configuración de WP Rocket.

Si ve otros errores de JavaScript, deberá deshabilitar la carga diferida de JavaScript o determinar por qué el archivo JavaScript no se puede diferir consultando con el desarrollador del complemento o tema.

Pestaña Medios:

  • Habilitar todo en esta página.

Pestaña Complementos:

  • Si tiene habilitado Google Analytics en su sitio (pero no a través de Google Tag Manager ) habilite el complemento de seguimiento de Google. [Nota:el complemento MonsterInsights no es compatible con este complemento. Si desea utilizar este complemento Rocket, deberá eliminar MonsterInsights e incluir el código de análisis utilizando otro complemento como SiteKit de Google, o copiando y pegando manualmente el código UA en el campo de código de encabezado de su tema.]
  • Si usa el código de seguimiento de Facebook Pixel en su sitio, habilite el complemento de Facebook Pixel.
  • Si su servidor usa caché Varnish (el nuestro no porque el almacenamiento en caché nginx está disponible en su lugar), debe habilitar el complemento Varnish aquí.
  • Si está utilizando Shortpixel o Imagify para generar imágenes WEBP para su sitio, puede habilitar la opción aquí para mostrarlas con preferencia sobre las imágenes JPG/PNG.

WP Super Cache + Optimización automática (gratis)

Si no ha completado la parte 5 anterior, hágalo ahora, luego inicie sesión en su instalación de WordPress y vaya a Complementos> Agregar nuevo e instale y active Autoptimize

Configurar la optimización automática

  • Vaya a Configuración> Optimización automática y asegúrese de que Javascript, CSS y la minimización de HTML estén habilitados.
  • En la pestaña Extra, junto a Google Fonts, pruebe la opción "Combinar y cargar fuentes de forma asíncrona con webfont.js", así como "Eliminar cadenas de consulta".
  • Presione "Guardar cambios".

Resolución de problemas de elementos rotos

Después de habilitar las optimizaciones en WP Rocket o Autoptimze, es posible que vea elementos rotos en el sitio, según los complementos utilizados, su tema y una variedad de otras cosas. Aquí hay algunas razones comunes y correcciones:

Faltan imágenes o videos:

Si su tema o creador de páginas usa Javascript para cargar imágenes en su sitio, Lazyload para imágenes y videos La opción puede romper eso y deberá deshabilitar la carga diferida en las páginas que tienen este contenido. Consulte la sección "Por página" a continuación para obtener información sobre cómo hacerlo.

Las partes globales de mi sitio no funcionan, como un menú

Si es un código personalizado, lo mejor es intentar arreglar el código responsable. Si es una funcionalidad provista por un tema o complemento, intente reemplazar esa funcionalidad con otro tema o complemento (ya que el tema o complemento probablemente no está diseñado para la velocidad). También puede informar el problema de compatibilidad al desarrollador del tema o complemento para que pueda solucionarlo.

Si no puede corregir el código o reemplazar el software que no está optimizado para la velocidad, deshabilite cada uno de los tipos de minificación (por ejemplo, en la pestaña de optimización de archivos en WP Rocket) uno por uno hasta que vea que el problema desaparece, luego habilite todo nuevamente excepto la última configuración que deshabilitó, ya que estaba causando el problema.

Si es un usuario avanzado, puede volver a habilitar la configuración que no funcionó para usted, luego use un inspector web para inspeccionar la página y averiguar qué archivo está causando el problema. Una vez que lo haya encontrado, vaya a la configuración de WP Rocket o Autoptimize y excluya solo ese archivo singular de la minificación. (Es probable que esto reduzca la puntuación de velocidad de su página)

Exclusiones por página

Si encuentra que solo páginas seleccionadas tienen problemas, puede deshabilitar la opción que causa problemas solo en esa página. Edite la página en WordPress y busque el cuadro "Opciones de caché" a la derecha.

Si sabe qué parte del complemento de almacenamiento en caché está causando problemas, desmárquelo. Si no lo hace, desmárquelos uno a la vez y vea la página para ver si el problema se resolvió. Repita esto para cada opción hasta que encuentre la configuración del problema.

Si está utilizando Eliminar CSS no utilizado (WP Rocket)

Hay dos opciones para arreglar esto, dependiendo de la situación:

  1. ¿Acabas de empezar con Eliminar CSS no utilizado? Bueno, te dijimos que esto probablemente sucedería. Sin embargo, no importa; simplemente busque los identificadores CSS de cualquier elemento que se haya 'estropeado' y agréguelos a la lista de exclusión en WP Rocket. Luego, vuelva a cargar la página en otro navegador y confirme que el problema se solucionó. De lo contrario, busque el siguiente elemento CSS y pruébelo:lo resolverá y aún debería ver ganancias significativas en el rendimiento de su sitio.
  2. Si ha estado ejecutando Remove Unused CSS durante un tiempo y de repente se rompe, intente actualizarlo yendo a WP Rocket -> Borrar CSS usado. Esto puede suceder en el caso de algunas actualizaciones de complementos/temas, y se debe solicitar a WP Rocket que regenere sus archivos.

7. Comprimir archivos de imagen

Esto solo le dará un pequeño aumento de velocidad notable a menos que use una conexión a Internet lenta o haya cargado imágenes extremadamente grandes en su sitio, pero puede mejorar bastante el puntaje de velocidad de su página de Google ya que sus puntajes móviles Core Web Vitals se basan en velocidades de Internet 3G.

Tenga en cuenta:si se toma en serio la optimización de su sitio para obtener hasta la última gota de rendimiento, debe esperar una caída en la calidad de la imagen . Si prefiere imágenes de mayor calidad, está eligiendo esta opción a expensas de a) los tiempos de carga de la página en conexiones más lentas yb) puntajes de referencia sintéticos como Google PageSpeed ​​y Core Web Vitals. Debe elegir cuál prefiere:imágenes de alta calidad o mejores puntajes de referencia. No puedes tener ambos.

Método manual original: Ejecute todos los archivos PNG a través de un compresor y luego cárguelos sobre sus versiones anteriores. Es posible que no tenga estas herramientas disponibles, pero abrí todos los archivos PNG en Photoshop y los exporté para la web. Si hace esto, asegúrese de que los archivos no incluya metadatos, ya que esto puede consumir grandes porciones de los archivos, especialmente para los íconos.

Método pago más fácil: Usamos Imagify para manejar esto por nosotros, todo del lado del servidor. Es un complemento fantástico proporcionado por las mismas personas que WP Rocket que administrará automáticamente la compresión de sus imágenes, ya sea como un trato único o continuo. Otra opción es el complemento llamado ShortPixel, funciona tan bien como Imagify en nuestras pruebas y también ofrece un precio muy justo. Echa un vistazo a todos de nuestros recursos recomendados aquí.

Almacenamiento en caché de Gravatars

Como esto se refiere a las imágenes (aquellas que usan los autores de publicaciones), este se sintió como el lugar adecuado para hablar sobre esto. WP Rocket y WP Super Cache no almacenan gravatares en caché de forma predeterminada, lo que significa que si tiene muchos comentarios en sus publicaciones de varios autores, la carga de imágenes de gravatar externas puede extender el tiempo total de procesamiento de su página.

El blog de WP Rocket tiene un gran artículo sobre cómo manejar esto, la esencia es instalar el complemento llamado "FV Gravatar Cache".

8. Configurar Nginx para cargar la salida de caché estática [avanzado]

Solo aquellos que usan un host con un proxy inverso nginx pueden aprovechar esta opción. Esto se aplica a cualquier persona que utilice Plesk 12 o posterior, a menos que el host esté haciendo cosas extrañas con la configuración de su servidor.

Debido a que nginx es un motor de servidor web más liviano que apache, al configurar nginx para servir directamente estos archivos estáticos, mejoramos drásticamente el rendimiento. Para cada solicitud individual, en lugar de usar un subproceso nginx para iniciar un proceso de apache para manejar la solicitud, vamos a configurar nginx para solo usar el subproceso nginx y no molestarnos en cargar apache para todas las páginas para las cuales tenemos un archivo de caché estático . Genial, ¿eh?

Si su alojamiento es con Websavers, no tiene que hacer nada de esto, ya que lo hacemos automáticamente con todo el alojamiento compartido y las cuentas de alojamiento VPS administrado.

Si su alojamiento no está con nosotros, entonces debe tener acceso de administrador a Plesk para poder aplicar estos cambios. Por lo general, solo tendrá acceso de administrador si tiene su propio VPS o servidor dedicado.

Configurar nginx para cargar archivos de caché estáticos de WP Super Cache

¿Recuerdas cuando le dijimos a WP Super Cache que usara mod_rewrite para servir nuestros archivos de caché? Esto es bastante automático si está utilizando apache porque WP Super Cache modificará automáticamente su archivo .htaccess para incluir las reglas mod_rewrite necesarias.

Insertar lo siguiente en su configuración de nginx le indicará a nginx que omita apache por completo cuando sirva la salida estática de WP Super Cache. En Plesk, haga esto en la "Configuración de Apache y nginx" del dominio y, a continuación, en el campo Directivas adicionales de nginx.

### WP Super Cache Below ###
set $cache_uri $request_uri;
 
# POST requests and urls with a query string should always go to PHP
if ($request_method = POST) {
    set $cache_uri 'null cache';
}   
if ($query_string != "") {
    set $cache_uri 'null cache';
}   
 
# Don't cache uris containing the following segments
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
    set $cache_uri 'null cache';
}   
 
# Don't use the cache for logged in users or recent commenters
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
     set $cache_uri 'null cache';
}
 
# Use cached or actual file if they exists, otherwise pass request to WordPress
location ~ / {
   try_files /wp-content/cache/supercache/$http_host/$cache_uri/index.html $uri /index.php;
}

Es importante tener en cuenta que puede tener algunos problemas con las reglas de nginx suministradas si usa WordPress en un subdirectorio, especialmente si tiene una instalación "anidada" (con WordPress en el directorio base y otra instalación de WordPress en un subdirectorio). Se puede hacer con muchos cambios complicados en las reglas proporcionadas, pero definitivamente es más fácil en todos los aspectos si cambia su estructura para usar un subdominio en lugar de una subcarpeta.

Configurar nginx para cargar archivos de caché estáticos de WP Rocket

Hicimos uso de esta práctica configuración nginx de WP Rocket al generar una configuración (siga las instrucciones de instalación) y luego pegar el resultado en la ubicación de directivas de configuración avanzada nginx en Plesk.

Hemos realizado ajustes a la configuración que hemos encontrado que funcionan mejor para nuestro entorno; si desea aprovechar nuestras optimizaciones, ¡busque hospedaje con Websavers!

9. Deshabilitar módulos PHP no utilizados [Avanzado]

Se requiere acceso de administrador a Plesk (solo VPS)

Si tiene acceso de administrador completo a su VPS, puede deshabilitar los módulos de PHP que no necesita. Menos cosas para cargar en la memoria, menos uso de memoria, procesamiento menos intensivo y un rendimiento más rápido. Sin embargo, esto es algo muy avanzado, así que asegúrate de saber lo que estás haciendo o no lo estás haciendo en un servidor en vivo, así que no estás rompiendo nada 😉

  • Ir a Herramientas y configuración en Plesk
  • En Configuración general haga clic en Configuración de PHP
  • Seleccione la versión de PHP y el controlador para el que desea cambiar la configuración
  • Desactiva los módulos de PHP que no estés usando
  • Haga clic en Aceptar o Aplicar para guardar

¡Ahora vuelve a tu sitio web y asegúrate de que nada esté roto! Es posible que no sepa qué módulos se utilizan en cada aspecto de su sitio web, por lo que podría haber un poco de prueba y error para hacerlo bien.

Consejo adicional n.º 1:ReCAPTCHA v3

Si está utilizando Google ReCAPTCHA para la protección contra bots, ya sea en un formulario de contacto/presupuesto o para proteger los comentarios de las publicaciones de su blog, no lo culpamos, es un sistema decente para evitar que los bots envíen sus formularios.

ReCAPTCHA v2 es el tipo de captcha que todo el mundo conoce y odia un poco donde "marcas una casilla" para confirmar que no eres un bot. El odio surge cuando el sistema muestra una verificación en la que debe hacer clic en las imágenes que coinciden con una descripción como "seleccionar todas las imágenes con un camión en ellas". ¿Te suena familiar?

ReCAPTCHA v3 es "invisible" en el sentido de que no se requiere una casilla de verificación, lo que mejora la experiencia del usuario. Pero, tiene algunas desventajas en la velocidad del sitio, ya que debe cargar todas sus secuencias de comandos en cada página de su sitio web . Realiza un seguimiento de los usuarios mientras navegan por su sitio porque sus comportamientos ayudarán a determinar si son bots o no.

Debido a que estos scripts se cargan en cada página, la única forma de evitar que GTMetrix y otras herramientas sintéticas de evaluación comparativa marquen esos recursos es volviendo a v2 (si su formulario o complemento de recaptcha lo permite) porque entonces los recursos solo serán cargado en las páginas donde existen los formularios.

Advanced users:you can write a WordPress hook that dequeues the ReCAPTCHA v3 resources on all pages except those with your forms, but you should know that doing this will very likely decrease the effectiveness of ReCAPTCHA’s protection.

Bonus Tip #2:Detect and Reduce Dynamic Processing

There’s a few common cases where, regardless of all the caching and optimizations, we just implemented, your server will still launch dynamic PHP processes to serve the requests, thus requiring CPU and memory to handle that request.

Check out our guide to analyzing dynamic processing with WordPress!

UPDATE HISTORY:

  • Jan 12, 2022:Updates to PHP Versions, simplify wording, add brotli compression details
  • Aug 28, 2020:Add notes about content encoding headers, MonsterInsights incompatibility with WP Rocket’s GA Addon, Gravity Forms incompatibility with deferred jQuery
  • Apr 30, 2020:Add Bonus Tip 2:Detecting and Reducing Dynamic Processing
  • Apr 26, 2020:Add tip for caching Gravatar images.
  • Jan 10, 2020:Add improved instructions for configuring browser caching rules in Plesk to improve scores on synthetic benchmarks like Google Page Speed and GTMetrix.
  • Dec 31, 2019:Remove our recommendation to use nginx direct to PHP-FPM processing and instead use rules that will ensure nginx will directly serve your caching plugin’s static cache file output, bypassing apache. This results in identical performance for most website visitors, but much better security, if your host has Plesk’s web application firewall properly configured.
  • Oct 15, 2019:Split step 5 into 2 sections (now 5 and 6) — static cache generating in step 5 (which improves performance but doesn’t break websites) and optimization of resources in step 6 (which improves scores on things like Google Page Speed, but which can also break your website).
  • Feb 4, 2019:Replace Better WordPress Minification with Autoptimize as recommended minification system.
  • Jan 9, 2019:Add PHP 7.3 Info
  • Dec 3, 2018:Reformatted post for better understanding of difference between browser cache vs. nginx->php-fpm direct mode. Use Plesk recommended rewrite rules for nginx.
  • Jul 4, 2017:Added ShortPixel as an image compression option, reformatted post.
  • Feb 20, 2016:Added commercial option, WP Rocket, as a great paid replacement for WP Super Cache + WP Minify.
  • Jun 16, 2017:Added some hosting/server tips.
  • Dec 25, 2013:Original Post Date.

Plesk
  1. ¿Cómo acelerar la búsqueda en Dash?

  2. Cómo actualizar una URL de WordPress en Plesk

  3. Cómo clonar un sitio web de WordPress en Plesk

  4. Cómo administrar los complementos de WordPress en Plesk

  5. ¿Cómo configurar el almacenamiento en caché de Redis para acelerar WordPress en Ubuntu 18.04?

Cómo instalar WordPress

Cómo restaurar una instalación de WordPress en Plesk

Cómo instalar Litespeed Cache para WordPress

Cómo optimizar el complemento My W3 Total Cache para WordPress

Cómo instalar WordPress en Ubuntu 18.04

Cómo instalar WordPress Ubuntu 20.04