Las 36 formas de acelerar su sitio de WordPress

Esta publicación se publicó originalmente el 3 de diciembre de 2019 y se actualizó para incluir herramientas más modernas.

La mayoría de las publicaciones de blog sobre cómo acelerar WordPress son un desastre.

En la parte superior de la lista, incluyen consejos que solo acelerarán su menú de administración en 0.01 segundos o, literalmente, no mejorarán el rendimiento en absoluto.

Luego, cerca del final, incluyen algunas de las técnicas de rendimiento más impactantes disponibles.

Eso es una locura. Así es como está organizada esta guía de rendimiento...

Comience con los pasos de alto impacto .

En primer lugar, he enumerado las 9 formas más impactantes de acelerar su sitio. Estos son, con mucho, los pasos más importantes que puede tomar para que su sitio se cargue más rápido.

De hecho, si no usa ninguna táctica más allá de los primeros 9, estará bien.

Luego, después de eso, encontrará 27 formas adicionales de acelerar WordPress. Cada una de estas tácticas hará que su sitio sea un poco más rápido, lo que se sumará a los resultados que ya ha logrado.

Y hay una cosa más que debes saber.

Estas son las tácticas exactas que uso

No estoy enumerando ninguna táctica aquí que no esté usando en este momento.

De hecho, antes de escribir esta publicación, se me ocurrió una gran lista de técnicas de interpretación, incluidas algunas cosas que nunca antes había probado, y las probé todas.

Competethemes.com ya se estaba cargando rápidamente, pero después de usar todas las tácticas de rendimiento que se enumeran a continuación, es increíblemente rápido.

Aquí están los resultados de GTMetrix:

Desde la primera publicación de esta publicación, las métricas de rendimiento han cambiado mucho.

En el pasado, el tiempo de carga total se consideraba muy importante, pero ahora no es una gran preocupación. Lo que es más importante es que su sitio parezca ser rápido para el visitante .

Google ha tratado de cuantificar esta idea con su Core Web Vitals. Estas métricas de rendimiento giran en torno a la velocidad perceptible de su sitio web.

La verdad es que en realidad no importa si tu sitio tarda 5 segundos en cargarse si todo es visible e interactivo en 1 segundo.

Pero hay un problema.

¡Los Core Web Vitals son complicados!

Son mucho más difíciles de entender que las métricas antiguas y aún más difíciles de optimizar.

Y aquí está la cosa.

Para acelerar su sitio, no tiene que entenderlos todos por completo. Las técnicas descritas aquí le ayudarán independientemente de su comprensión de las CWV.

Así que aquí está mi propuesta...

Implemente las tácticas aquí y vea dónde aterriza. Lo más probable es que no tenga que dedicar tiempo a investigar estas métricas de rendimiento porque su sitio ya se cargará lo suficientemente rápido.

Crea un antes y un después

Si desea seguir esta guía, comience midiendo el rendimiento de su sitio con GTMetrix y la herramienta Page Speed ​​de Google.

Haz una captura de pantalla de tus resultados y guárdalos para más tarde.

Luego implemente las primeras 9 tácticas aquí, y le garantizo que verá un aumento significativo en sus puntajes. Si quieres llevar las cosas aún más lejos, también puedes probar las siguientes 27 tácticas.

Si aún no está satisfecho con su rendimiento, es probable que desee hablar con un desarrollador experimentado que pueda realizar los últimos cambios que harán que su sitio obtenga una puntuación del 100 %.

1. Cambie a un host más rápido

El alojamiento es la potencia de su sitio.

Con un alojamiento más potente, todo su sitio se cargará más rápido.

Puede implementar cualquier otra técnica con gran efecto, pero todas funcionarán mejor con un host de alto rendimiento. Además, cambiar de host en estos días es realmente fácil.

He utilizado muchas empresas de hosting durante la última década y finalmente he encontrado mi pareja.

Uso Rocket.net para hospedar este sitio y todos mis sitios, y son, con mucho, el mejor hospedaje que he usado.

Su atención al cliente es increíble, el panel de control es intuitivo y está repleto de funciones, y el rendimiento es de primera categoría.

Como host premium de WP, hay muchas ventajas dentro del tablero además de las cosas de alojamiento estándar.

Por ejemplo, cada sitio tiene copias de seguridad diarias automatizadas y copias de seguridad manuales, hay seguridad integrada y protección DDoS a través de Cloudflare Enterprise, y obtiene sitios de prueba con un solo clic.

Y tienen una excelente prueba de $1 durante el primer mes.

Más información sobre Rocket.net

Si desea llevar su sitio al siguiente nivel, no puedo recomendarlos lo suficiente.

2. Agregar almacenamiento en caché

¿Cuánto es 9,027 dividido por 17?

Para responder esto, debe sacar una calculadora, ingresar los números y luego puede decir con confianza la respuesta, que es 531.

Ahora, si te vuelvo a preguntar, ¿cuánto es 9027 dividido por 17?

Esta vez supiste la respuesta al instante porque la tienes almacenada en tu memoria.

Así es el almacenamiento en caché.

Cuando alguien visita su sitio web, ejecuta un montón de procesos para generar la página. Sin almacenamiento en caché, esto sucede cada vez que alguien visita su sitio web. Es como usar una calculadora para obtener la misma respuesta una y otra vez.

Como usted puede entender, esto es extremadamente derrochador.

Con el almacenamiento en caché, su sitio genera una página una vez y luego la guarda como guardó el número 531 en su memoria. Cuando alguien visita su sitio, la copia en caché se entrega de inmediato sin necesidad de ejecutar todos los procesos utilizados originalmente para crear la página.

¿Tener sentido?

Ahora hablemos de cómo aprovechar esta tecnología en su sitio web.

Cómo agregar almacenamiento en caché a su sitio

En primer lugar, su host puede proporcionar almacenamiento en caché incorporado. Esto es cierto para Rocket.net y muchos otros hosts de alto rendimiento.

Si su host no proporciona almacenamiento en caché, hay muchos complementos para elegir. En mi opinión, la mejor opción es WP Rocket.

WP Rocket proporciona almacenamiento en caché ultrarrápido y un montón de otras optimizaciones de rendimiento. Voy a hacer referencia a este complemento unas cien veces más a lo largo de esta publicación, para que vea todo lo que puede hacer.

Aunque Kinsta proporciona almacenamiento en caché, también uso WP Rocket debido a las otras herramientas de rendimiento incluidas.

Puede seguir mi tutorial de configuración de WP Rocket para comenzar:

Echa un vistazo a WP Rocket →

Si desea una alternativa gratuita, le recomiendo WP Super Cache si desea algo fácil de usar y W3 Total Cache si desea opciones más avanzadas.

El alojamiento de alto rendimiento y el almacenamiento en caché son definitivamente las características de velocidad más importantes que necesita su sitio. Dicho esto…

Solo queda una cosa que puede descarrilar por completo tu rendimiento.

TIENE que usar estos tres pasos siguientes

Una vez que haya configurado su almacenamiento en caché, dirija su atención a las imágenes de su sitio.

Si no optimiza sus imágenes, su sitio nunca alcanzará tiempos de carga de 2 a 3 segundos, nunca obtendrá una puntuación de PageSpeed ​​optimizada.

Las imágenes pueden ser un lastre absolutamente enorme en los tiempos de carga, por lo que incluyo las tres formas en que puede optimizarlas aquí.

La primera forma de optimizar sus imágenes es comprimiéndolas.

3. Comprime tus imágenes

Los algoritmos modernos de compresión de imágenes son asombrosos.

Pueden reducir el tamaño de archivo de una imagen en un 70 % sin afectar su calidad de manera notable. El punto es que puedes hacer que todas las imágenes de tu sitio se carguen mucho más rápido sin degradar su calidad. No hay inconveniente, ¡en serio!

Cuando se trata de optimización de imágenes, mi complemento favorito es Optimole.

Aprenderá más sobre Optimole en los próximos dos pasos, pero esto es lo que necesita saber primero:

Optimole utiliza un algoritmo de compresión muy efectivo para comprimir sus imágenes a una fracción de su tamaño de archivo anterior. Lo que es aún mejor es que es tan fácil de usar.

Otros complementos de optimización de imágenes editan las imágenes en su sitio y utilizan los recursos de su servidor. Optimole no toca sus originales: copian sus imágenes en su servidor y luego las optimizan allí. Esto mantiene su biblioteca de medios organizada y su sitio no se ralentizará cuando se compriman las imágenes.

Si desea aprender a configurar Optimole en su sitio, puede seguir mi video tutorial completo:

Una excelente alternativa es el complemento ShortPixel. Es un poco más de trabajo de configurar, pero aún así es bastante fácil de usar.

Usé felizmente ShortPixel en este sitio durante años y solo cambié a Optimole para esta próxima táctica.

4. Cambia el tamaño de tus imágenes

Presta mucha atención porque los detalles son críticos.

Aquí está la gran idea:

Cuanto mayores sean las dimensiones de una imagen, mayor será su tamaño de archivo.

Por ejemplo, una imagen que tiene 3000 píxeles de ancho puede tener 900 kb, pero cuando se cambia el tamaño a 600 píxeles de ancho, solo tiene 60 kb. ¡Esa es una reducción de 15 veces en el tamaño del archivo!

He aquí por qué es tan importante.

Las imágenes en esta publicación de blog solo se mostrarán con un ancho de 600 px en su punto más ancho. Ejecutando con mi ejemplo, esta imagen cambió de tamaño a 600 px de ancho y solo tiene 60 kb.

Si no cambiara el tamaño de la imagen y usara la versión de 3000 píxeles, solo se mostraría con un ancho de 600 píxeles en esta publicación . La imagen se vería igual para usted, pero tardaría 15 veces más en cargarse.

En otras palabras, dimensionar sus imágenes correctamente antes de insertarlas en sus publicaciones puede marcar una gran diferencia en la velocidad de carga de su sitio.

Aquí está el problema.

Probablemente no sepa exactamente qué tan anchas se muestran sus imágenes en sus publicaciones. Además, los dispositivos móviles hacen que este camino sea más complicado. Cuando se trata del tamaño de la pantalla, si consideramos todos los diferentes monitores y dispositivos móviles, hay literalmente miles para tener en cuenta.

Si desea servir imágenes que tengan el tamaño perfecto para sus visitantes, deben tener un tamaño dinámico , y es por eso que comencé a usar Optimole.

Optimole genera automáticamente versiones de tamaño perfecto de sus imágenes. Si alguien visita su sitio y la imagen se muestra con un ancho de 400 px, entonces Optimole le brinda una versión de esa imagen con un ancho de 400 px.

Otro visitante podría aterrizar en la página un segundo después usando una tableta que muestra la imagen a 510 px de ancho, y Optimole cargará una copia diferente de la imagen que tiene exactamente 510 px de ancho.

Las ganancias de rendimiento que obtiene de esto son enormes, y la mejor parte es que no tiene que hacer nada más que instalar el complemento Optimole. Funciona en el momento en que lo activa sin siquiera tocar ninguna configuración. ¡Es asombroso!

Prueba Optimole en tu sitio →

Hay una forma más de optimizar las imágenes en su sitio que potencialmente puede marcar una gran diferencia.

5. Carga perezosa tus imágenes

Esta publicación de blog es realmente larga y tiene muchas imágenes.

Si has leído hasta aquí, es probable que hayas estado en esta página durante al menos un minuto. Sabiendo esto, ¿qué tan tonto sería hacer que cargues todas las imágenes en la publicación completa cuando cargaste esta página por primera vez? Todavía no ha llegado a muchas de las imágenes, por lo que no es necesario que las cargue todavía.

Con la carga diferida, solo se cargan las imágenes que aparecen en pantalla. Luego, a medida que se desplaza hacia abajo en la página, las imágenes restantes se cargan a medida que aparecen.

Hice una visualización en este video que ilustra cómo funciona esto más claramente de lo que puedo explicar por escrito:

Ahora que comprende cómo funciona la carga diferida, hablemos de la implementación.

Cómo agregar carga diferida

Agregar carga diferida es realmente fácil, por lo que es una táctica imprescindible, en mi opinión.

Primero, si instaló Optimole, agrega automáticamente la carga diferida, por lo que ya terminó con esta táctica.

En segundo lugar, si no está usando Optimole pero decidió usar WP Rocket, simplemente marque esta casilla aquí en la configuración:

Por último, WordPress en realidad tiene su propia implementación de carga diferida ahora, por lo que no tiene que usar ninguno de estos complementos si no lo desea.

Creo que estos complementos hacen un mejor trabajo porque tienen características adicionales, como la carga diferida de video y la capacidad de cargar primero un marcador de posición de baja calidad, pero técnicamente podría omitir este paso por completo.

Las siguientes dos optimizaciones van de la mano y son especialmente importantes para los sitios web de WordPress.

6. Minifica tus archivos

Acabas de aprender que comprimir tus imágenes hace que se carguen más rápido porque las imágenes comprimidas tienen un tamaño de archivo más pequeño.

A veces nos referimos al tamaño del archivo como peso , por lo que comprimir una imagen reduce su peso.

La gran idea es que reducir el peso de su sitio hace que se cargue más rápido . Eso significa que desea reducir el tamaño de archivo de cada archivo que carga su sitio web.

Además de las imágenes, su sitio web carga archivos CSS, archivos Javascript y archivos de fuentes, entre otros tipos de archivos. Mantenga ese pensamiento por un momento y hablemos de minificación.

Minificación es un término de programación elegante que básicamente significa compresión para archivos basados ​​en texto. Comprimes imágenes y minimizas archivos. Para nuestros propósitos, no necesitamos ser más detallados que eso.

Al igual que comprimió sus imágenes, puede minimizar sus archivos CSS y Javascript (y HTML) para hacerlos más pequeños y reducir el peso de su página.

Cómo minificar archivos

Una vez más, agregar minificación a su sitio es simple.

Con WP Rocket, hay casillas de verificación para habilitar la minificación para CSS, JS y HTML.

Eso es todo lo que necesitas hacer.

Minificar es muy importante para los sitios de WordPress porque es probable que tenga al menos seis complementos y un tema que carga archivos en su sitio. Muchas veces, los desarrolladores no minimizan los archivos por sí mismos, por lo que WP Rocket se encarga de eso por usted.

Si desea una alternativa gratuita para la minificación, consulte el complemento Autoptimize.

7. Concatena tus archivos

Concatenar es otro término técnico que significa "combinar".

Cuando concatenas archivos, los combinas.

Una vez más, dado que tiene todos estos complementos en su sitio cargando archivos, es importante usar un complemento como WP Rocket para combinarlos en la menor cantidad de archivos posible. Este es el por qué…

Ha aprendido que disminuir el peso de su página hace que se cargue más rápido, pero hay otro factor de rendimiento importante para optimizar: las solicitudes HTTP.

Sé que esta publicación se está volviendo bastante técnica, así que lo mantendré lo más simple posible.

Cada archivo que cargue requiere una solicitud HTTP. Cada imagen, archivo JS, archivo CSS, etc., todos requieren una solicitud HTTP.

Su sitio web tiene un número fijo de solicitudes HTTP que puede manejar a la vez, por lo que se produce un efecto de cuello de botella al cargar archivos. Por esta razón, cuantas menos solicitudes HTTP realice su sitio, más rápido se cargará.

Como ejemplo, si su sitio web tiene 5 archivos CSS que tienen un tamaño de 5 kb, se cargará más rápido si los combina en un archivo CSS de 25 kb.

Con la minificación, reducimos el peso de los archivos de su sitio y luego, con la concatenación, los combinamos para reducir las solicitudes HTTP.

Cómo agregar concatenación

También podemos recurrir al complemento WP Rocket para esta optimización.

Hay casillas de verificación para concatenar archivos CSS y archivos JS.

Solo necesita marcar ambas casillas, guardar los cambios y listo.

Estas opciones también están disponibles en el complemento Autoptimize.

Este próximo consejo puede sorprenderte, pero en mi opinión es otra optimización imprescindible.

8. Cargar archivos con un CDN

Internet es mágico.

¿Bien?

Pero realmente, no, no lo es.

Es una red de computadoras, y las conexiones en esta red son, en última instancia, físicas.

Puede parecer extraño pensar en ello, pero la distancia entre el servidor donde se almacena el contenido de su sitio y la ubicación de un visitante es muy importante.

Si su servidor está en Nueva York y alguien de Tokio visita su sitio web, los archivos tardarán más en llegar que si lo visita otra persona en Nueva York.

Dije que era raro pensar en eso.

Entonces, ¿qué sucede si también almacenó una copia de su sitio en un servidor en Tokio? ¿No cargaría más rápido para los visitantes en Japón?

¡Sí!

Y eso es exactamente lo que hace una CDN.

CDN significa red de entrega de contenido, y es esencialmente una red de servidores que almacenan copias en caché de su sitio web en todo el mundo.

De esta manera, no importa dónde esté alguien cuando lo visite, hay un servidor cerca de ellos para entregar el contenido de su sitio.

Cuando activa una CDN por primera vez, puede parecer que no está ayudando si vive cerca del servidor de origen de su host. Lo que es más importante es qué tan rápido se carga el sitio web para el resto del mundo.

Cómo agregar un CDN a su sitio

Si está utilizando Rocket.net, entonces ya ha terminado.

Ejecutan su sitio con Cloudflare Enterprise, por lo que su sitio ya se entrega desde servidores cercanos en todo el mundo.

Si no usa Rocket.net, le recomiendo que se registre en el nivel gratuito de Cloudflare.

Pero, si realmente no está interesado en hacer nada técnico y no desea realizar cambios de DNS en su sitio, puede usar RocketCDN, creado por el equipo de WP Rocket.

Funciona con la CDN de Stackpath, por lo que existe una red global establecida de servidores para entregar el contenido de su sitio. Cuesta $ 8 / mes, pero es muy simple de integrar. Después de registrarse, todo lo que tiene que hacer es marcar la casilla para habilitarlo, y listo.

9. Elige un tema rápido

Bien, tengo que admitir que este último consejo es un poco diferente.

Muchos blogueros de WP te dirán que elijas un tema que se cargue rápido, pero como desarrollador de temas, déjame explicarte cómo funciona esto realmente.

Un tema de WordPress no acelerará su sitio. Más bien, está buscando uno que no ralentice su sitio. Dicho esto, a menos que el tema esté mal hecho, no ralentizará mucho su sitio si está utilizando las tácticas que he enumerado anteriormente. Lo explicaré.

Con todos mis temas, cargo lo mínimo mientras sigo creando una experiencia de usuario elegante y moderna. Eso significa que los temas solo se cargan:

• Un archivo CSS
• Un archivo Javascript minimizado
• Una solicitud de fuentes de Google
• La fuente de iconos Font Awesome (para iconos sociales)

Sin hacer sacrificios de diseño (como usar una fuente del sistema), eso es lo mínimo que puede ser un tema.

No todos los temas están tan optimizados, pero en mi opinión no es una gran preocupación. Esto se debe a que incluso si su tema no está bien optimizado y carga dos archivos CSS y tres archivos Javascript, y ninguno de ellos está minimizado, un complemento como WP Rocket aún los concatenará y minimizará por usted, por lo que el resultado final es similar.

Básicamente, es poco probable que su tema ralentice mucho su sitio si utiliza las estrategias de rendimiento enumeradas anteriormente.

Elija un tema de un desarrollador de confianza y el rendimiento del tema no será un problema.

Optimizaciones adicionales

¡Uf!

Esta publicación ya es mucho más larga de lo que anticipé, y si llegaste hasta aquí, espero que estés emocionado de aprender aún más sobre la optimización del rendimiento.

En el resto de esta publicación, cubriré optimizaciones más específicas y técnicas. He hecho estos consejos tan amigables para principiantes como sea posible. Algunos de ellos son fáciles de implementar, pero para ser honesto, algunos son muy avanzados, y así es como debe ser.

Utilice tantas como pueda en su sitio y recuerde, si implementó las primeras 9 tácticas y está siguiendo las mejores prácticas de rendimiento, entonces ya obtuvo la mayor parte de los resultados.

10. Deja de usar Google Analytics

He mencionado Google Analytics varias veces hasta ahora porque es una pérdida de rendimiento inevitable.

Al menos, así ha sido hasta hace poco.

Ahora hay opciones mucho mejores para los usuarios de WordPress, como Independent Analytics.

A diferencia de Google Analytics, Independent Analytics no carga ningún archivo externo. De hecho, no carga ningún archivo en absoluto. Hace una solicitud API REST interna a su propio sitio, y eso es todo.

En otras palabras, prácticamente no tiene impacto en su sitio. Al cambiar a Independent Analytics, acelerará instantáneamente su sitio web, además de obtener análisis amigables con la privacidad y un tablero que es mucho más fácil de usar.

Obtenga más información sobre el análisis independiente.

11. Aplazar Javascript

Si usa solo una táctica del resto de esta lista, use esta.

Sin perderse demasiado en los detalles técnicos, el orden en que carga los archivos en su sitio es muy importante. Este concepto se denomina optimización de ruta de representación .

La idea es que el CSS de su sitio se cargue primero porque su sitio web será una pantalla blanca en blanco hasta que eso suceda. En cuanto a los archivos de Javascript, probablemente se usen para cosas como análisis que no necesitan cargarse de inmediato.

En lugar de mantener una página en blanco en blanco mientras se carga el JS, difiere los archivos JS hasta que todo lo demás en su sitio se haya cargado. De esta manera, su sitio se carga en la misma cantidad de tiempo pero aparece visualmente antes, lo que hace que aparezca más rápido.

El concepto es bastante avanzado, pero una vez más, no es tan difícil de implementar.

Cómo diferir Javascript

Te va a encantar esto.

Tan avanzada como es la táctica, todo lo que necesita hacer es marcar una casilla en la configuración de WP Rocket.

A menos que sepa lo que está haciendo, le recomiendo que también deje marcada la opción "Modo seguro".

También hay una manera de optimizar su CSS para la ruta de representación.

12. Optimice la entrega de CSS

Al igual que Javascript, CSS bloquea el procesamiento, por lo que también podemos diferirlo para un mejor rendimiento.

Ahora sé lo que estás pensando: ¿no acabamos de aplazar JS para que el CSS pudiera cargarse, y ahora también estamos aplazando el CSS?

Esto es lo que está pasando...

Para eliminar el CSS que bloquea la representación, incorporará el CSS crítico utilizado para diseñar las partes de su sitio que se muestran de inmediato. Luego, el resto del CSS de su sitio se carga más tarde. Una vez más, esto significa que su sitio se muestra visualmente incluso antes.

Esta es una táctica muy avanzada y no me molestaría si WP Rocket no lo hubiera hecho tan fácil.

Cómo optimizar la entrega de CSS

Probablemente te estés acostumbrando a esto ahora...

Todo lo que tiene que hacer para optimizar su entrega de CSS con WP Rocket es marcar esta casilla:

WP Rocket luego genera el CSS crítico necesario para cada página y lo integra en el HTML. El resto del CSS luego se aplaza.

Nunca intentaría hacer esto manualmente, por lo que es una optimización increíble haberlo automatizado de esta manera.

A continuación, tengo dos victorias rápidas más para acelerar su sitio.

13. Desactiva la compatibilidad con emojis de WordPress

WordPress agregó soporte emoji en la versión 4.2.

Para garantizar que los emojis funcionen en su sitio, WordPress carga un pequeño archivo Javascript en cada página de su sitio. Aquí está la cosa…

En realidad, no necesitamos este archivo para la compatibilidad con emoji porque prácticamente todos los dispositivos ya tienen una fuente de emoji instalada. Eliminé la compatibilidad con emojis de este sitio, por ejemplo, pero ¿sigues viendo emojis porque tu dispositivo los tiene instalados?

Al eliminar la compatibilidad con emoji, su sitio ya no cargará el archivo Javascript adicional, lo que lo hará un poco más rápido.

Puede marcar esta casilla en WP Rocket para eliminar la compatibilidad con emoji:

El complemento Disable Emojis es una alternativa simple y gratuita.

14. Deshabilitar incrustaciones de WordPress

Cuando pega un enlace de Twitter en una publicación, WordPress creará automáticamente un bonito cuadro de inserción.

Eso está bien, pero lo que me molesta es que también hace esto cuando pega enlaces a sitios de WordPress como este. Nunca uso esta función, así que prefiero desactivarla.

Dado que WordPress carga un archivo Javascript adicional para esta función de inserción, eliminarlo reduce el peso de la página y elimina otra solicitud HTTP.

WP Rocket tiene otra casilla de verificación para agregar fácilmente esta optimización a su sitio.

Es una pequeña optimización, pero todo ayuda.

15. Actualiza tu versión de PHP

Los lenguajes de codificación modernos son asombrosamente rápidos.

La mayoría de las tácticas de rendimiento no tienen nada que ver con la rapidez con la que se ejecuta el código en su sitio. Más bien, estamos optimizando la velocidad con la que el contenido de su sitio web se envía al dispositivo del visitante. Esa es la parte que lleva tiempo.

Esta táctica es diferente porque en realidad acelera la velocidad de ejecución del código en su sitio.

Las versiones más nuevas de PHP son cada vez más rápidas, por lo que si todavía usa PHP 5, verá grandes ganancias al cambiar a 7 u 8.

He aquí un vistazo a cómo PHP 8 ha mejorado el rendimiento con respecto a PHP 7, y las ganancias de 5 a 7 también fueron enormes.

Es importante comprender que duplicar la velocidad de PHP de su sitio no hará que su sitio se cargue el doble de rápido. Solo hace que el código PHP se ejecute el doble de rápido, lo que probablemente sea una pequeña parte del tiempo de carga de su sitio.

Dicho esto, es potencialmente una ganancia de rendimiento muy fácil y también es mejor para la seguridad y la compatibilidad de complementos.

Cómo actualizar tu versión de PHP

Esto es algo que he aprendido a lo largo de los años.

Prácticamente todos los servidores web incluyen una opción en el panel donde puede cambiar la versión de PHP de su sitio. Por ejemplo, aquí hay un menú desplegable en el tablero de Rocket.net donde puede cambiarlo con unos pocos clics.

La mayoría de los hosts tienen este control en algún lugar del tablero, por lo que debería ser fácil de actualizar.

Pero antes de hacerlo, asegúrese de hacer una copia de seguridad de su sitio y prepárese para volver a una versión anterior. Si actualiza a la última versión de PHP, existe la posibilidad de que al menos un complemento en su sitio no sea compatible, por lo que es una buena idea realizar este tipo de cambio en un momento en el que esté preparado para revertir el PHP. versión o hacer los cambios necesarios.

16. Reduce los complementos

¿Los complementos ralentizan su sitio?

Algo así como. Es complicado. Te daré algunos ejemplos.

Algunos complementos pueden cargar uno o dos archivos en cada página de su sitio, lo que lo ralentiza.

Uso el complemento WPForms para todos mis formularios de contacto, que está más cuidadosamente diseñado. WPForms carga un archivo CSS y, según las funciones que esté utilizando, también algunos archivos JS. Sin embargo, solo carga estos archivos en páginas que tienen formularios de contacto. Esto significa que no tiene ningún impacto en el rendimiento de mi sitio , excepto en la página de contacto .

Por otro lado, también uso un complemento llamado Formatear títulos de medios para agregar automáticamente títulos a mis imágenes según el nombre del archivo. Este complemento ejecuta un poco de PHP en el panel de administración cuando subo imágenes, y eso es todo. Tiene cero impacto en el rendimiento de mi sitio.

Ahora puede ver por qué decir "los complementos ralentizan su sitio" no es cierto. A veces lo hacen, a veces no, ya veces lo hacen bajo ciertas condiciones.

Como regla general, si el complemento cambia algo en la interfaz de su sitio, afectará el rendimiento. Por el contrario, si el complemento solo afecta el panel de administración, probablemente no ralentizará su sitio.

El "front-end" de su sitio es lo que ven los visitantes. El "back-end" es su panel de administración.

Eche un vistazo a su menú de Complementos y seleccione cualquier complemento que realice cambios en la parte frontal de su sitio. Si encuentra alguno que está activo, pero que no está utilizando, es probable que esté ralentizando su sitio, así que desactívelo.

17. Usa imágenes webP

Estoy seguro de que está familiarizado con formatos de imagen como JPG y PNG.

Bueno, Google lanzó un nuevo formato de imagen llamado webP que ha sido diseñado para un rendimiento óptimo. Cuando usa el formato webP, la imagen se ve idéntica pero se carga más rápido.

Suena genial al principio, pero aquí es donde se complica.

No todos los navegadores admiten imágenes webP todavía. Eso significa que si usó webP para todas sus imágenes, es posible que no aparezcan en navegadores como Safari. Por ahora, necesita servir imágenes webP y también tener una versión de respaldo en JPG o PNG de cada imagen.

Obviamente, eso suena como más trabajo de lo que vale, pero una vez más, hay una solución muy simple.

Cómo usar imágenes webP

Si usa el complemento Optimole, se maneja completamente por usted.

De hecho, ni siquiera hay una configuración para esto.

Optimole crea automáticamente versiones webP de sus imágenes y las sirve a los visitantes si su navegador lo admite. Se carga un pequeño archivo Javascript con un polyfill para servir versiones JPG/PNG de las imágenes cuando el navegador del visitante no es compatible con webP.

18. Utilice la búsqueda previa de DNS

La precarga de DNS es genial.

La mayoría de los archivos de su sitio se cargarán desde su dominio. Por ejemplo, el archivo CSS en su tema que le da estilo a su sitio web está alojado en su sitio web.

Si usa Google Analytics, su sitio web cargará los archivos Javascript necesarios de los servidores de Google en lugar de los suyos. Esto lleva más tiempo que cargar archivos alojados en su dominio.

Básicamente, cuando utiliza la precarga de DNS, su sitio web comienza el proceso de carga de archivos externos antes. De hecho, cuando alguien escribe su dominio en su barra de direcciones, la búsqueda previa de DNS comienza el trabajo para preparar los archivos externos incluso antes de que visiten su sitio web.

Los detalles son bastante técnicos, pero esa es la idea detrás de esta táctica.

Cómo usar la precarga de DNS

Hay una opción simple provista por WP Rocket para la búsqueda previa.

En el menú Precargar, puede ingresar URL para todos los archivos externos que carga su sitio web.

Es probable que su sitio utilice Google Fonts, por lo que agregar "//fonts.googleapis.com" permitiría la obtención previa de ese nombre de dominio.

19. Limita las publicaciones por página

Si ejecuta un blog activo, entonces su página principal de publicaciones es la página más importante de su sitio. También puede ser uno de los más lentos.

He visto blogueros que muestran cada una de sus publicaciones en su página de inicio. Cuando visitas, el indicador de carga gira y gira, y la página nunca se carga por completo. Es una experiencia de usuario terrible y, lo que es peor, les está costando una enorme cantidad de ancho de banda.

En algún momento, la gran cantidad de HTML necesario para las publicaciones se convierte en un problema, pero el problema principal son todas las imágenes. Esta es la razón por la que es tan importante que agregue la carga diferida a su sitio.

Además, debe establecer un límite razonable para la cantidad de publicaciones que muestra en cada página de su blog.

Cómo limitar tus publicaciones por página

WordPress tiene una opción integrada para controlar tus publicaciones por página en el menú Configuración de lectura.

Siempre que tenga habilitada la carga diferida, puede mostrar de 10 a 30 publicaciones por página sin problemas. Dicho esto, 10 es probablemente el número promedio que usan los bloggers, y no iría más allá de 10 sin usar la carga diferida.

20. Combine las solicitudes de fuentes de Google

Estoy casi 100 % seguro de que tu tema carga Google Fonts.

Si es un tema bien codificado, solo debería haber una solicitud de fuentes de Google, por lo que no hay problemas.

Sin embargo, existe la posibilidad de que los complementos en su sitio también estén cargando Google Fonts o que usted mismo haya agregado más fuentes. Si este es el caso, su sitio está realizando múltiples solicitudes de fuentes de Google, lo que significa múltiples solicitudes HTTP. Remember, the fewer HTTP requests, the better.

How to combine Google Fonts request

You're probably used to this by now…

To combine the Google Fonts requests on your site with WP Rocket, check this box:

If you're not sure if your site is making multiple Google Fonts requests, there's no harm in using this option, so I would recommend always turning it on.

21. Optimize Gravatar requests

When people leave comments on your site, their avatars show up automatically. That's because WordPress integrates with Gravatar to get the avatars.

Gravatar is a free service and all it does is associate an avatar with an email address. If you create an account and add an avatar, you'll see it show up on your site and all over the web automatically.

Here's the problem.

Every single one of those images makes another external request to the Gravatar servers. That means that if you get 10 comments on a post, your website is going to make up to 10 external HTTP requests – that's a lot!

There are three ways to optimize Gravatar, so it doesn't slow down your site.

How to optimize Gravatar avatars

The first option is very simple: lazy load Gravatar images.

Unfortunately, Optimole's lazy loading doesn't work with Gravatar images. In order to lazy load Gravatar images, you can use the free a3 Lazy Load plugin.

Alternatively, you can disable Gravatar entirely. In the Discussion settings, turn off avatars with this option:

As the setting implies, this disables avatars in the comments entirely. If you still want default avatars to show up, you can install the Disable User Gravatar plugin instead.

If commenters have their own accounts on your site, you can use the WP User Avatar plugin to let them upload their own avatars.

The third option is to cache the Gravatar images with a plugin like FV Gravatar Cache, but this plugin has been getting mixed user reviews.

While those three options are all viable, this next performance optimization is a fourth approach and the solution I use for this website.

22. Lazy load your comments

This is a really cool performance optimization I just started using.

Comments on your site don't show up until after all the post content, so why load them right away?

Since Optimole wasn't working to lazy load Gravatar images, I installed the Lazy Load for Comments plugin to lazy load the entire comments section. Problem solved!

Now when someone visits a post, none of the comments or Gravatar images are loaded until they scroll all the way down to the comments section. This removes all of the HTTP requests from Gravatar until well after the initial load.

While we're talking lazy loading , let's keep going with one more implementation.

23. Lazy load all videos

Do you embed Youtube videos in your posts?

Loading videos can be a major drag on performance, especially if you have more than one on the page.

Puede cargar sus videos (e iframes) de forma diferida como si fueran imágenes.

Cómo cargar videos de forma diferida

Utilizo la función de carga diferida de Optimole para imágenes, pero WP Rocket tiene una opción específica para iframes y videos que puede habilitar de esta manera:

También hay una opción para cargar una miniatura en lugar del video, pero personalmente, no me gusta esta opción porque hace que los visitantes hagan clic dos veces en el video, lo que me resulta molesto.

24. Reduce las redirecciones

Si visita este sitio web usando "http", lo redirigirá a la versión "https".

Además, si visita sin el "www", será redirigido a la versión con el "www".

Ambos redireccionamientos son muy rápidos, pero aún toman tiempo, y cuando se trata de rendimiento, cada fracción de segundo cuenta.

Al vincular a su propio sitio web, ya sea internamente o desde otro sitio web, asegúrese de usar siempre la URL final a la que llegan los visitantes. Siempre uso "https://www.competethemes.com/" para que no haya redireccionamientos.

Al vincular siempre a la versión correcta de su URL, evita enviar a los visitantes a través de redireccionamientos que hacen que su sitio parezca más lento.

25. Usa menos fuentes

Ya ha optimizado su JS y CSS, así que tomemos en serio la optimización de las fuentes también.

Cuando se trata de rendimiento, las fuentes son caras.

Si lees mi publicación sobre cómo hacer que tu sitio sea más hermoso, sabrás que defiendo el uso de una o dos fuentes como máximo. Además de ser una buena regla de diseño, también es una buena regla de desempeño.

Cada fuente que carga tiene un impacto en el rendimiento de su sitio, por lo que cuanto menos use, mejor.

Ahora vamos a ser un poco más detallados.

26. Usa menos pesos de fuente

Cada peso de fuente multiplica el peaje de rendimiento de su elección de fuente.

Por ejemplo, si usa la fuente Roboto, cargará el peso predeterminado. Si también lo quiere en cursiva y negrita, esos son conjuntos de caracteres completamente diferentes y significa que ahora está cargando tres archivos de fuente, todos aproximadamente del mismo tamaño.

Si también usa la fuente Playfair Display y carga una versión en negrita y cursiva, ahora está cargando seis archivos de fuente que tendrán un gran impacto en la velocidad de su sitio.

Su sitio puede verse genial y ser versátil con una sola fuente cargada en un estilo predeterminado, en cursiva y en negrita. Si absolutamente desea otra fuente, utilícela para los encabezados, por lo que no necesita tener múltiples pesos o cursiva.

27. Cargue solo el conjunto de caracteres de su idioma

Acabas de aprender que cargar una fuente en diferentes pesos multiplica la cantidad de archivos que tu sitio necesita cargar.

Siguiendo ese mismo hilo, cuantos más caracteres haya en la fuente, más grande será el archivo. El punto es que solo quieres cargar los caracteres que necesitas.

Asegúrate de que solo estás cargando Google Fonts en el idioma que usas. Para los usuarios de inglés, solo necesita el conjunto de caracteres latinos y no Latin Extended, que a menudo se carga de forma predeterminada.

Dependiendo de cómo agregue Google Fonts a su sitio, puede o no tener la capacidad de cambiar esto, así que verifique las opciones de complementos o temas disponibles.

28. Desactive las funciones OpenType en Adobe Fonts

Si usa Adobe Fonts (anteriormente TypeKit) para sus fuentes, entonces probablemente tenga acceso a algunas funciones de OpenType.

Si bien las funciones de OpenType son increíbles para agregar hermosas fracciones, versalitas y muchas otras funciones tipográficas, lo más probable es que no las necesite.

Dado que OpenType incluye muchos glifos de caracteres nuevos, hace que los archivos de fuentes sean más grandes, lo que resulta en tiempos de carga más prolongados.

Al editar su proyecto, desactive las funciones de OpenType aquí:

Como puede ver en mi ejemplo, solo estoy cargando los tres pesos de fuente que necesito y el subconjunto en inglés como se explica en las tácticas anteriores.

29. Reemplace Font Awesome con Fontello

Esta táctica es muy técnica, pero como me ayudó, la incluyo para cualquier otra persona que lea cuyo código se sienta cómodo escribiendo.

Si usa Font Awesome u otra fuente de iconos para su sitio, es probable que esté cargando la fuente completa, es decir, está cargando cientos de iconos. Lo más probable es que solo estés usando un puñado de íconos en tu sitio.

Con Fontello, puede crear su propio paquete de fuentes de íconos usando solo los íconos de Font Awesome que está usando.

Como solo estoy usando 26 íconos diferentes en este sitio, pude reducir enormemente el tamaño del archivo de fuente y su hoja de estilo (aproximadamente 100kb).

Si tiene control técnico total sobre su sitio, eliminar Font Awesome y reemplazarlo con un paquete de fuente web personalizado de Fontello es una excelente manera de mejorar aún más el rendimiento de su sitio.

Otras optimizaciones

Veo otros sitios web que recomiendan los siguientes consejos todo el tiempo, pero esta es la cuestión...

Estas tácticas finales no harán que su sitio se cargue más rápido. Optimizarán el rendimiento de su sitio web, pero no exactamente de manera que lo aceleren.

Reducirá la cantidad de espacio en disco que usa su sitio, potencialmente hará que su sitio sea más seguro e incluso reducirá el ancho de banda que usa. Eso es suficiente para que estas tácticas valgan la pena en mi opinión, y es por eso que las incluí al final de esta publicación.

Aquí están las últimas 7 tácticas.

30. Desactivar pingbacks y trackbacks

Ya nadie usa pingbacks o trackbacks por razones legítimas.

Antes de las redes sociales, cuando la gente tenía blogs personales, los pingbacks eran como @-ingear a alguien. En otras palabras, le informarán cuando otro blogger haga referencia a su sitio.

Hoy en día, se utilizan más o menos exclusivamente para enviar spam y explotar vulnerabilidades de seguridad (como DDoSing). Es mejor simplemente deshabilitarlos con estas dos opciones en la configuración de Discusión.

No se necesitan complementos.

31. Reduzca la velocidad de la API Heartbeat

La API Heartbeat se ejecuta en WordPress para mantener ciertas funciones en ejecución en su navegador. Por ejemplo, WordPress guarda automáticamente sus publicaciones mientras trabaja en ellas para evitar que pierda parte de su contenido en caso de error o error.

Esta API normalmente se ejecuta una vez por minuto, y es posible que lo ralentice un poco mientras trabaja en una publicación o usa otras funciones en su administrador.

Si bien no es un gran problema para la mayoría de las personas, también puede reducir la velocidad con esta configuración en el complemento WP Rocket:

La reducción de la actividad simplemente le dice a Heartbeat API que se ejecute una vez cada dos minutos en lugar de cada minuto.

32. Desactivar enlace activo

Hotlinking es cuando alguien muestra una imagen en su sitio web, pero usa una URL de imagen de su sitio para mostrar la imagen. Lo que sucede entonces es que cada vez que alguien visita su sitio, se solicita la imagen de su servidor en lugar del de ellos.

La conclusión es que cuando alguien vincula una de tus imágenes, pagas por el ancho de banda y no obtienes ninguno de los beneficios. es robar

Cloudflare incluye su servicio ScrapeShield en el nivel gratuito, que tiene la opción de evitar que las personas enlacen sus imágenes.

Encendí esto recientemente y me ahorró una tonelada de ancho de banda. Supongo que los hotlinking comenzaron a acumularse para mi dominio a lo largo de los años, y esta opción anuló instantáneamente estas solicitudes.

33. Optimiza tu base de datos

La limpieza de su base de datos probablemente no hará que su sitio sea más rápido, pero reducirá la cantidad de espacio en disco que utiliza.

Si tiene una gran cantidad de información en su base de datos, es más probable que esto ralentice su panel de administración que la parte frontal de su sitio. Por ejemplo, si tiene decenas de miles de comentarios no deseados, es posible que el menú Comentarios tarde más en cargarse debido al gran volumen de datos.

Hay muchos complementos disponibles para optimizar su base de datos, pero esto es algo que también hago con WP Rocket.

El menú Base de datos en la configuración de WP Rocket incluye opciones para eliminar automáticamente los comentarios de spam y otros datos inútiles de su base de datos también.

Aún mejor, puede programar esta automatización para que se ejecute todos los días, semanas o meses.

34. Deshabilitar o limitar las revisiones de publicaciones

Acaba de enterarse de que WordPress usa la API Heartbeat para guardar borradores de sus publicaciones de manera rutinaria. Bueno, WordPress también guarda revisiones que puedes restaurar más tarde si es necesario.

El problema de almacenar toneladas de revisiones es que ocupan espacio en su base de datos. Una publicación con 19 revisiones es como almacenar 20 publicaciones en su base de datos. Si bien puede deshabilitar las revisiones con un complemento o limitarlas, también puede simplemente eliminarlas.

El menú Base de datos en WP Rocket incluye una opción para eliminar revisiones de publicaciones.

Puede ejecutar esta opción manualmente o programarla.

Y solo un aviso, siempre debe hacer una copia de seguridad de su sitio antes de ejecutar cualquier optimización de la base de datos.

Tengo WP Rocket programado para ejecutar esta optimización todos los días porque Kinsta también realiza copias de seguridad de mi sitio a diario.

35. Eliminar cadenas de consulta

Hay mucho que explicar aquí, pero dado que no acelerará su sitio, solo iré directo al resultado final.

Las cadenas de consulta en las URL de los archivos pueden potencialmente evitar que se almacenen en caché. Con la mayoría de los complementos de almacenamiento en caché, como WP Rocket, este no es el caso, por lo que la presencia de cadenas de consulta no es un problema.

Además, las cadenas de consulta a menudo no deben eliminarse porque son necesarias para que los complementos funcionen correctamente.

Simplemente activa esta opción en WP Rocket y listo:

Han optimizado esta característica para que no rompa cosas en su sitio, y no verá advertencias de GTMetrix y otras herramientas de auditoría de rendimiento que necesita para eliminar cadenas de consulta de recursos estáticos.

36. Eliminar complementos inactivos

Cuando desactiva un complemento, simplemente lo está apagando. Puede reactivarlo y se restaurará su configuración anterior.

Sin embargo, si elimina un complemento, esto normalmente elimina su configuración y los datos creados por el complemento. Esto se debe a que la mayoría de los complementos tienen un proceso de limpieza que ejecutan cuando se eliminan, por lo que no dejan un desorden en su base de datos.

Si tiene complementos inactivos que aún no ha eliminado, eliminarlos puede ayudar a optimizar su base de datos. Además, es solo una buena práctica en general.

Disfruta de tu sitio web más rápido

Con más de 7000 palabras, esta es oficialmente la publicación de blog más larga que he escrito. ¡Quería incluir todo!

Sólo hay una cosa más que tengo que decirte...

Cuando se trata de la optimización del rendimiento, su trabajo nunca termina realmente. Una vez que haya implementado las tácticas que desea probar en su sitio, asegúrese de volver aquí una o dos veces al año para revisar la lista nuevamente y optimizar su sitio.

Me doy cuenta de que necesito volver a optimizar mi sitio al menos una vez al año para mantenerlo en plena forma.

También puede encontrar que la primera vez que usó esta lista, algunas de las tácticas eran demasiado técnicas para descifrarlas. A medida que se convierta en un profesional de WordPress, es posible que vuelva a encontrar estas tácticas mucho más sencillas de aplicar.

Si tiene alguna pregunta, dejaré abierta la sección de comentarios, ¡así que publíquela a continuación!