Cómo acelerar su sitio web

Una guía para principiantes sobre la optimización de la velocidad de carga de sitios web

Artem Minaev
Actualizado: 4 de octubre de 2023
Lectura de 12 min
FirstSiteGuide cuenta con el apoyo de nuestros lectores. Cuando compra a través de enlaces en nuestro sitio, podemos ganar una comisión. Ver más
Cómo acelerar su sitio web

Si es principiante y nuevo propietario de un sitio web, en la mayoría de los casos no tendrá que preocuparse por la velocidad del sitio web. 

Después de Construye tu sitio web or inicia tu blog, puede parecer que todo está en su lugar. Su sitio es hermoso, eso debe significar que la gente no tendrá ningún problema en esperar un par de segundos más para que se cargue correctamente, ¿verdad?

No, ese no es el caso.

Según Investigación de Google, cuanto más tarde una página en cargarse, más personas abandonarían un sitio web.

tiempos de carga de la página

Además, Google ha introducido Web Core Vitals (que cuenta como un factor de clasificación para los sitios web) que detalla aún más la velocidad de carga de los sitios web. Cuanto más rápido sea su sitio web, mayores serán sus posibilidades de llegar a la primera página de resultados de búsqueda de Google.

Hola, mi nombre es Artem.

Compartiré nuestra experiencia, conocimiento de nuestro equipo de desarrollo y técnicas que utilizamos para mejorar la velocidad de carga de nuestro propio sitio web (FirstSiteGuide.com). 

Siguiendo este tutorial, comprenderá los elementos que influyen en la velocidad de su sitio web. Con cada elemento, Te mostraré una herramienta que te ayudará a acelerar el sitio web. o resolver un problema particular. Además, cuando sea posible, mencionaré servicios que puedes utilizar de forma segura, sin tener que pasar horas investigando.

PS Algunos pasos dentro de esta guía son específicos para sitios web creados con WordPress software ya que eso es lo que utilizamos para nuestro sitio. Si estás usando algún otro herramientas de creación de sitios web puede aplicar técnicas de optimización de velocidad similares según las funciones disponibles.

14 pasos para mejorar la velocidad del sitio web

Paso 1: ejecuta una prueba de velocidad

Antes de hacer cualquier cosa, es importante que realices una prueba adecuada. Aunque puedes hacer mucho incluso sin uno, te recomiendo encarecidamente realizar al menos una prueba de velocidad para tener un punto de referencia que te ayudará a comprender qué tan bien funciona tu sitio y qué tan bueno es el resultado una vez que hayas terminado todas las mejoras. pasos.

Herramientas gratuitas

Por suerte, existen pruebas de velocidad gratuitas al alcance de cualquiera. Sólo tienes que elegir uno, ingresar tu URL y dejar que la herramienta haga su magia.

PageSpeed ​​Insights de Google

Dado que la mayoría de las personas optimizan su sitio para Google, la primera herramienta que mencionaré es PageSpeed ​​Insights de Google. Es bastante sencillo y puedes tener el resultado en cuestión de segundos.

  1. Abierto PageSpeed ​​Insights de Google.
  2. Ingrese la URL de su sitio.
  3. Haga clic en el botón "Analizar".

En mi caso, la prueba tardó entre 10 y 15 segundos en completarse y mostrarme los resultados compartidos en la captura de pantalla a continuación.

prueba de información sobre la velocidad de la página

Después de ver el número verde en la parte superior donde desea obtener una puntuación de 100, habrá varios otros segmentos que querrá examinar. Esos son:

  • Primera pintura con contenido (FCP)
  • Pintura contenta más grande (LCP)
  • Cambio de diseño acumulativo (CLS)

Los tres elementos son parte de Web Vitals que ahora se incluyen en las métricas principales de Google que mostrarán qué tan rápido o lento es su sitio. Puede obtener más información sobre Web Vitals en nuestra guía sobre Cómo optimizar su sitio móvil.

GTmetrix

Una de las pruebas de velocidad de sitios web más populares es GTmetrix. Es completamente gratis y se puede realizar en menos de un minuto:

  1. Ve a GTmetrix.
  2. Escriba la URL completa de su sitio.
  3. Presione el botón "Ejecutar prueba" y espere unos 30 segundos.

Después de eso, obtendrás una calificación que te mostrará qué tan rápido es tu sitio web. La prueba también le mostrará detalles como el rendimiento de su sitio, su estructura, así como los datos vitales web que ahora son un factor de clasificación fundamental para Google. 

prueba gtmetrix

Si aún no ha trabajado activamente para optimizar la velocidad de su sitio, es probable que no obtenga una puntuación perfecta. Pero no te preocupes, puedes lograrlo si comienzas a seguir todos los pasos.

Paso 2: obtenga alojamiento web rápido y confiable

Un sitio web rápido comienza con un buen hosting. No importa cuánto intente ofrecer la mejor experiencia de usuario, si su alojamiento es malo, la velocidad de su sitio web se verá afectada.

El mejores empresas de alojamiento ocúpate de todo, y no es necesario que entiendas lo que sucede detrás de puertas cerradas. Desde hardware de calidad y en buen estado hasta componentes de software actualizados periódicamente, un servicio de alojamiento puede hacer muchas cosas para mejorar la velocidad de su sitio.

Para comenzar de la manera correcta, aloje su sitio con Bluehost, una de las pocas empresas de hosting recomendadas oficialmente por WordPress.org. Años de experiencia y millones de sitios web alojados hacen de esta empresa de alojamiento una de las mejores en su campo, algo que se traducirá fácilmente en tener un sitio web sólido.

Paso 3: implementar un servicio de red de entrega de contenido (CDN)

Nuestro mundo es un lugar grande. Aunque la velocidad de Internet ha mejorado drásticamente a lo largo de los años, la distancia física entre las computadoras y los servidores sigue desempeñando un papel importante en la velocidad en línea. Esto significa que cargar información desde un servidor de tu país generalmente será más rápido que cargar datos de todo el mundo, del mismo modo que te resultará más fácil comprar una mesa de café de IKEA en tu ciudad natal en lugar de tener que conducir para conseguir una en otro país. .

Aquí es donde entran las redes de entrega de contenido. Le permiten tener su sitio web alojado en varios servidores en todo el mundo. CDN puede reconocer la ubicación más cercana a cada individuo que carga su sitio y cargar el contenido desde el servidor más cercano. Por lo tanto, si un visitante intenta cargar su sitio desde EE. UU., obtendrá el contenido de uno de los servidores de EE. UU., mientras que alguien que venga de Europa cargará su sitio a través de un servidor ubicado cerca de él, por ejemplo en Londres.

Si aloja el sitio en Bluehost, puede encontrar su CDN TrueSpeed ​​dentro del panel de control. Con solo configurarlo, su sitio se volverá global y se cargará más rápido para personas de todo el mundo.

También puede obtener servicios CDN de terceros. El CDN más populares son:

Paso 4: Minimizar archivos CSS y JavaScript

Los sitios web modernos están llenos de archivos CSS y JavaScript que funcionan juntos para mantener las páginas web con un aspecto agradable y funcionando a favor de los usuarios. Línea tras línea de código hace que esos archivos sean innecesariamente grandes, lo que puede ralentizar rápidamente su sitio.

A los diseñadores web (las mismas personas que crean las plantillas que usted termina comprando) les gusta mantener su código ordenado. Esto significa que mantienen el código con un aspecto agradable y fácilmente comprensible. Sin embargo, tener esos espacios en blanco, líneas adicionales y caracteres solo aumenta el peso del archivo, que se puede reducir fácilmente minimizándolo.

Aquí hay un ejemplo de código CSS simple:

cuerpo {

padding: 10px;

color:#f35123;

fondo:#f22f12;

}

Se puede minimizar a esto:

cuerpo{padding:10px;color:#f35123;fondo:#f22f12}

Si bien esta simple diferencia no tendrá un impacto significativo en su sitio, imagine lo que sucede cuando tiene miles y miles de líneas y espacios en blanco innecesarios.

Afortunadamente, para minimizar sus archivos CSS y JavaScript no es necesario revisar el código y realizar los cambios usted mismo. Hay complementos que harán esto automáticamente por usted y garantizarán que todo funcione correctamente:

  1. Vaya a "Complementos > Agregar nuevo".
  2. Busca"Autoptimize.
  3. Instala y activa “Autoptimizar”.
  4. Vaya a "Configuración -> Optimizar automáticamente".
  5. Marque "¿Optimizar el código JavaScript?" y "¿Archivos JS agregados?". 
  6. Marque "¿Optimizar el código CSS?" y "¿Archivos CSS agregados?". 

Paso 5: habilite el almacenamiento en caché del navegador

Al habilitar el almacenamiento en caché del navegador, permite que el contenido se almacene en los navegadores de las personas. Eso significa que si un visitante decide volver a su sitio, no tendrá que volver a descargar todos los archivos del servidor, ya que ya los tiene almacenados en su navegador.

El almacenamiento en caché del navegador puede mejorar significativamente la velocidad de su sitio web para los usuarios recurrentes.

Para habilitar esto en su sitio, todo lo que necesita es un complemento gratuito de WordPress como:

Si está utilizando W3 Total Cache, por ejemplo, todo lo que necesita hacer es instalar el complemento:

  1. Vaya a Complementos -> Agregar nuevo.
  2. Busque "Caché total W3".
  3. Instalar y activar el complemento.
  4. Realice la configuración dejando que el complemento pruebe la configuración de su sitio y servidor.
configuración de caché total w3

El complemento configurará automáticamente su configuración de almacenamiento en caché e inmediatamente comenzará a funcionar a su favor. Si decide entrar en más detalles, puede abrir la pestaña Rendimiento que ahora está visible en el lado izquierdo del menú de WordPress, donde están visibles todas las configuraciones del complemento. Aquí puede cambiar otras opciones si es necesario.

Paso 6: Optimice y limpie la base de datos de WordPress

Su sitio web de WordPress no puede funcionar sin una base de datos. Todo lo que haces y tienes en el sitio se almacena allí. Como puedes imaginar, los temas y complementos no siempre lo mantienen limpio, por lo que incluso si desinstalas un complemento específico, dejará algunos datos en tu base de datos. Con el tiempo, la base de datos se volverá desordenada e ineficiente, lo que dará como resultado un sitio web lento.

Aunque es posible limpiar la base de datos manualmente, eso significaría que debes entender cómo funciona. E incluso si lo haces, es probable que aun así puedas estropearlo.

Afortunadamente, hay complementos gratuitos de WordPress disponibles que optimizarán y limpiarán la base de datos por usted. Sin embargo, antes de hacer cualquier cosa, asegúrese de cree una copia de seguridad completa de su sitio web o tener una forma de deshacer los cambios. A pesar de WP Optimize es un complemento conocido y seguro; editar directamente una base de datos a veces puede salir mal. 

Entonces, en caso de que algo salga mal, sugiero Restablecimiento de WP. Este complemento creará una instantánea de su sitio y le permitirá revertir rápidamente cualquier cambio realizado. Entonces, en caso de que algo salga mal, puede restaurar su base de datos en un par de minutos, en lugar de restaurar una copia de seguridad completa que puede llevar más tiempo.

  1. Vaya a Complementos -> Agregar nuevo.
  2. Busque WP-Optimize, instálelo y actívelo.
  3. Seleccione las opciones que desee y haga clic en el botón para iniciar la optimización.
configuración optimizada de wp

Paso 7: Utilice temas optimizados/premium y simples

Las plantillas y los temas no son sólo visuales. Para crearlos, los diseñadores web deben codificar funciones, opciones e insertar imágenes que se combinarán en un único tema de trabajo.

Como puedes imaginar, una plantilla que carga cinco archivos y tres imágenes, por ejemplo, se cargará mucho más rápido que una que viene con diez archivos y veinte imágenes. El número no es el único factor importante, sino que también se tiene en cuenta lo bien que esté todo optimizado.

Dado que hay tantos temas y plantillas de WordPress disponibles, es difícil determinar cuáles son los mejores. Éstos son algunos de los temas populares de WordPress que están diseñados para verse bien y cargarse rápidamente:

Paso 8: Optimice todas las imágenes de su sitio web

Las imágenes pueden convertirse fácilmente en uno de los principales problemas de velocidad de su sitio. Las imágenes no optimizadas seguirán siendo innecesariamente grandes y difíciles de descargar. Si utiliza demasiados, los usuarios tendrán dificultades para cargar la página completa de su sitio web y probablemente terminarán abandonándolo antes de ver el contenido.

Por suerte, no es tan difícil mantener las imágenes optimizadas. Es importante que examine su tema/plantilla para saber qué tamaños de imagen necesita. Luego puedes cuidar la imagen antes de cargarla cambiando su tamaño y cambiando su configuración de calidad.

Si solo necesita optimizar un par de imágenes, puede utilizar un servicio de terceros como TinyPNG. Esta herramienta de optimización de imágenes le permitirá cargar sus imágenes de origen y luego se optimizará automáticamente. Simplemente arrastra y suelta las imágenes y deja que Panda haga su magia. Luego podrá descargar las versiones optimizadas de sus imágenes que podrá colocar de forma segura en su sitio web.

Si ya tienes un sitio web activo y no tienes tiempo para optimizar las imágenes una por una, existe un complemento freemium que resolverá todos tus problemas. Optimizador de imagen ShortPixel se encargará de todas las imágenes que estén disponibles en su biblioteca multimedia. También funciona muy bien con NextGEN, Foo Gallery, así como con otros complementos de galería y control deslizante.

La versión gratuita te permite manejar hasta cien imágenes. Algunas de las características incluyen:

  • Optimización del tamaño y calidad de las imágenes.
  • Conversión de formatos a otro.
  • Funciona con WebP y AVIF.

Todo lo que tienes que hacer es instalar el complemento y personalizar la configuración de la forma que desees. Elija la compresión que necesita, establezca el tamaño de las imágenes y presione el botón cuando esté listo para que el complemento inicie el proceso de optimización.

configuración de píxeles cortos

Paso 9: Carga diferida de imágenes y vídeos

Normalmente, cuando un usuario abre un sitio web, todo el contenido que debería mostrarse comienza a cargarse automáticamente. Por lo tanto, incluso si un usuario solo necesita el contenido de la mitad superior de la página, aún tendrá cargado todo lo disponible en esa página.

En cambio, al cargar imágenes y videos de forma diferida, puede hacer que los usuarios solo carguen contenido que sea visible en la pantalla. Una vez que el usuario comience a desplazarse, las imágenes y videos que se muevan al área visible de la pantalla comenzarán a cargarse. De esta manera, todo el sitio se cargará más rápido y permitirá una mejor experiencia de usuario.

Cómo habilitar la carga diferida en WordPress:

  1. Vaya a Complementos -> Agregar nuevo.
  2. Busque Carga perezosa por WP Rocket.
  3. Instale y active el complemento.
  4. Verifique el contenido que desea cargar de forma diferida y guarde la configuración.
configuración de carga diferida

Paso 10: Evitar el enlace directo de imágenes

Hotlinking es una acción que implica copiar la fuente de una imagen de un sitio web para usarla en otro. Si bien la imagen se mostrará sin problemas, en realidad no se carga desde su servidor. En cambio, utiliza todos los recursos del sitio original y, de hecho, se considera ilegal.

Al evitar los enlaces directos, puedes evitar que otras personas roben tus imágenes. De esta manera, estará ahorrando recursos en su propio servicio de alojamiento, lo que significa que su sitio será el único que utilizará esos recursos, lo que resultará en un sitio web más rápido para sus visitantes.

Hay varias formas de evitar los hotlinking:

  • Usando un CDN: las CDN más populares como Cloudflare y KeyCDN ya tienen activada la protección de enlaces directos.
  • Usando complementos de seguridad: Todo en uno WP Security & Firewall El complemento te permite tener control sobre los enlaces directos.
  • Deshabilitar el clic derecho en tus imágenes: use un complemento como Evite el robo de contenido [Desactivar clic derecho].
  • Modificando el archivo .htaccess: los usuarios más avanzados pueden desactivar los enlaces directos directamente modificando el código en el archivo .htaccess.

Paso 11: Aloje videos en servicios de terceros y descargue medios de gran tamaño

Cuando inicia un sitio web, tiene sentido tener todos sus videos y archivos multimedia de gran tamaño en su propio servidor. Sin embargo, lo que puede que le falte es que almacenar y reproducir archivos grandes consume recursos del servidor. Cuando se trata de la velocidad de su sitio, es mucho más conveniente descargar videos y archivos multimedia grandes en servicios de terceros para ahorrar ancho de banda.

Un vídeo cargado desde YouTube funcionará igual de bien (si no mejor) que uno cargado desde su servidor. Y si tiene mayor tráfico, esto significa un menor impacto en su ancho de banda, lo que resulta en un sitio más rápido.

Cuando se trata de vídeos, puedes alojarlos en:

Paso 12: Mantenga los complementos al mínimo/encuentre los complementos que lo están frenando

Cada complemento mejora su sitio web. Sin embargo, cada nueva característica también significa nuevos archivos que ocupan espacio y ancho de banda. Además, no todos los complementos están codificados de la misma manera, por lo que es probable que tenga un complemento que ralentice su sitio al cargar elementos innecesarios de los que quizás ni siquiera se dé cuenta.

Antes de comenzar a deshabilitar todos los complementos, le sugiero hacer una prueba de velocidad.

  1. Vaya a Complementos -> Agregar nuevo.
  2. Busque P3 (Programas Performance Profiler).
  3. Instale y active el complemento.
  4. Vaya a Herramientas -> P3 Plugin Profiler.
  5. Empiece a escanear.

Este complemento ejecutará algunas pruebas en su sitio web y le mostrará un gráfico y detalles. Lo que le interesa aquí es la pestaña "Tiempo de ejecución por complemento" que dibujará un gráfico que muestra todos sus complementos activos y su impacto en el sitio.

Busque los "trozos de pastel" más grandes en su gráfico que muestra los complementos que son los más lentos en su sitio. Tenga en cuenta que esto no significa que deba deshacerse de ese complemento específico. 

Esta prueba te permitirá analizar todos tus complementos, para que puedas sopesar los pros y los contras y decidir qué complementos lentos puedes desinstalar o encontrar una alternativa.

prueba del perfilador del complemento p3

Paso 13: Controla las redirecciones en tu sitio web

Tener redirecciones mejora la experiencia del usuario e incluso puede Mejora tu SEO si se hace correctamente. Tener redireccionamientos activos no tendrá un impacto negativo en su sitio. Sin embargo, con cada redireccionamiento, tu sitio se vuelve un poco más lento. Por lo tanto, si termina teniendo demasiadas redirecciones (creando la llamada cadena de redireccionamiento), los milisegundos se acumularán y su sitio se volverá más lento.

Una de las herramientas más populares para manejar redirecciones es Screaming Frog. También puedes consultar:

Al instalar el software o ejecutar un escaneo en línea (según la herramienta que elija), podrá escanear su sitio web. Le mostrará un análisis detallado del sitio web y le mostrará rápidamente las URL redirigidas. Dado que no tendrá mucho sentido saber únicamente que una URL está redirigida, le encantará la función que le muestra el origen de una redirección. Esto le ayudará a comprender su sitio web y le permitirá actuar sobre los redireccionamientos eliminando los que no sean necesarios.

Si encuentra una cadena de redireccionamiento que está ralentizando su sitio, la solución es simple: en lugar de redireccionar del enlace A al enlace B que va al enlace C, simplemente debe cambiar el redireccionamiento al último enlace de la cadena.

Para manejar redirecciones en WordPress, puede utilizar un programa gratuito Redirecciones WP 301 complemento que le ayudará a gestionar todas sus redirecciones.

Paso 14: Optimice el contenido (use extractos, divida artículos y comentarios largos, etc.)

A veces, puedes hacer mucho cambiando cosas pequeñas. Si usted escribir En un blog, puedes lograr un sitio más rápido controlando el contenido. Cuando muestre los últimos artículos del blog, utilice extractos en lugar de cargar el artículo completo.

Si está utilizando un editor clásico, mostrar un extracto personalizado es relativamente fácil:

  1. Ve a WordPress Dashboard -> Publicaciones -> Agregar nueva.
  2. Haga clic en el botón 'Opciones de pantalla'.
  3. Habilite la opción del cuadro de extracto. 
  4. Desplácese hacia abajo, busque el cuadro del extracto y escriba un resumen personalizado.
extracto personalizado

Ahora, mostrar el extracto en su página de inicio depende de su tema. Es posible que ya esté activado o que tengas que marcar la opción en algún lugar de tu tema. Sugiero consultar la documentación o contactar al soporte porque cada tema es diferente.

Si tiendes a escribir artículos extensos, puedes dividirlos rápidamente en dos o más partes. Si está utilizando un editor de bloques, no necesita complementos externos. Simplemente edite una publicación larga, haga clic en el símbolo "más" y busque el bloque "Salto de página" que dividirá su artículo por la mitad.

Si está utilizando un editor clásico, simplemente agregue el etiqueta que hará lo mismo.

Por último, para aquellos que tienen muchos comentarios, pueden optar por paginar los comentarios en lugar de cargarlos todos a la vez:

  1. Ve a Configuración de WordPress -> Discusión.
  2. Busque la opción "Dividir comentarios en páginas".
  3. Ingrese la cantidad de comentarios que deben aparecer en una sola página.
  4. Guardar ajustes.
comentarios paginados

Sigue probando la velocidad de tu sitio web

Incluso si sigues cada paso de este tutorial y aceleras con éxito tu sitio web, eso no significa que hayas terminado. Las cosas pueden cambiar rápidamente y nunca se sabe qué tan bien se comportará su sitio mañana o dentro de un mes. Por eso es fundamental que realice pruebas de velocidad periódicas y mejore su sitio con regularidad.

Puede marcar este tutorial como favorito en caso de que olvide dónde y cómo probar su sitio, así como para recordar qué pasos debe seguir para acelerarlo.

Cómo un sitio web lento puede perjudicarte

Incluso si no le importa esperar a que se carguen los sitios, la mayoría de la gente tiene problemas con eso. Y si descuida el problema, puede perjudicarlo a largo plazo. ¿Cómo?

  • Tasas de rebote más altas – Incluso si su visitante decide esperar a que se cargue una página, eso no significa que será paciente durante toda la visita. Corre el riesgo de tener tasas de rebote más altas que harán que las personas abandonen su sitio después de visitar la primera página.
  • Perdiendo dinero - Si tu vender productos o servicios En su sitio web, un sitio lento repelerá a compradores potenciales y futuros clientes.
  • Perdiendo trafico – ¿Quiere más tráfico que impulse su sitio hacia adelante? En ese caso, no puede darse el lujo de perder un visitante porque su sitio no está optimizado adecuadamente.
  • Clasificación SERP más baja – Google y otros motores de búsqueda tienen en cuenta la velocidad de carga. Una página más lenta puede provocar que se la empuje más abajo en la página de resultados del motor de búsqueda, incluso si su contenido es bueno.

¿Aún no crees que la velocidad es importante? Espero que estas cuatro razones te convenzan de que la velocidad de un sitio web es crucial y que estés listo para mejorar el tuyo.

Para Concluir

A todo el mundo le encantan los sitios bonitos y bien diseñados. Sin embargo, si eso significa esperar un par de segundos más para que se cargue el sitio web, es probable que pierda un cierto porcentaje de visitantes.

Así que, hagas lo que hagas, no sacrifiques la velocidad por la estética. Es posible tener ambos; sólo necesitas ser paciente y trabajar en tu sitio web para mejorarlo.

4 comentarios en "Cómo acelerar su sitio web"

  1. Equipo Koderey

    Oye, realmente disfruté leyendo la guía. Como especialista en marketing digital, puedo identificarme con todo lo que mencionaste anteriormente. Muchas gracias por compartir lo mismo.

  2. Nikita Shevchenko

    Me tomó bastante tiempo optimizar la velocidad de mi propio blog. Soy especialista en marketing online pero no soy especialista en codificación, por lo que el proceso fue un poco abrumador al principio.

    ¡Guías como esta me ayudaron mucho!

  3. scott duncan

    Gracias por compartir consejos tan útiles para aumentar la velocidad del sitio web, para mí la compresión de imágenes funcionó de maravilla, leí sobre este increíble consejo en WPblog y funcionó.

Deje un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados *

Enviar a un amigo