Si eres un principiante y nuevo propietario de un sitio web, en la mayoría de los casos no te vas a preocupar por la velocidad del sitio web.
Después de crear tu sitio web o comenzar tu blog, es posible que sientas que todo está en su lugar. Su sitio es hermoso, por lo que 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 la investigación de Google, cuanto más tarde en cargar una página, más personas abandonarán un sitio web.
Además, Google ha introducido los signos vitales del núcleo Web (que cuenta como un factor de clasificación para los sitios web) que entra en más detalles cuando se trata de la velocidad de carga de los sitios web. Cuanto más rápido sea tu sitio web, mejores serán tus posibilidades de llegar a la primera página de los resultados de búsqueda de Google.
Hola, mi nombre es Artem.
Compartiré nuestra experiencia, el conocimiento de nuestro equipo de desarrollo y las 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 en particular. Además, cuando sea posible, mencionaré servicios que puede usar de forma segura, sin tener que pasar horas investigando.
P. S. Algunos pasos de esta guía son específicos para sitios web creados con software de WordPress, ya que eso es lo que usamos para nuestro sitio. Si está utilizando otras herramientas de creación de sitios web, puede aplicar técnicas de optimización de velocidad similares basadas en las funciones disponibles.
14 pasos para mejorar la velocidad del sitio web
- Paso 1: Ejecute una prueba de velocidad
- Paso 2: Obtenga alojamiento web rápido y confiable
- Paso 3: Implemente un servicio de Red de Entrega de contenido (CDN)
- Paso 4: Reduzca al mínimo los archivos CSS y JavaScript
- Paso 5: Habilite el almacenamiento en caché del navegador
- Paso 6: Optimice y limpie la base de datos de WordPress
- Paso 7: Use temas optimizados/premium y simples
- Paso 8: Optimice todas las imágenes en su sitio web
- Paso 9: Carga lenta de imágenes y videos
- Paso 10: Evite el hotlinking de imágenes
- Paso 11: Host videos en servicios de terceros y descarga de medios grandes
- Paso 12: Mantenga los complementos al mínimo/encuentre los complementos que lo están ralentizando
- Paso 13: Controle las redirecciones en su sitio web
- Paso 14: Optimice el contenido (utilice extractos, divida artículos y comentarios largos, etc)
Paso 1: Ejecute una prueba de velocidad
Antes de hacer nada, es importante que realice una prueba adecuada. Aunque puede hacer mucho incluso sin una, le sugiero encarecidamente que realice al menos una prueba de velocidad para tener un punto de referencia que lo ayude a comprender qué tan bien funciona su sitio y qué tan bueno es el resultado después de terminar todos los pasos de mejora.
Herramientas gratuitas
Afortunadamente, hay pruebas de velocidad gratuitas disponibles para cualquier persona. Solo tienes que elegir uno, ingresar tu URL y dejar que la herramienta realice 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 obtener el resultado en cuestión de segundos.
- Abre PageSpeed Insights de Google.
- Introduzca la URL de su sitio.
- haga Clic en el botón «Analizar».
En mi caso, la prueba tardó tan solo 10-15 segundos en completarse y mostrarme los resultados compartidos en la captura de pantalla a continuación.
Después de ver el número verde en la parte superior donde se pretende obtener una puntuación de 100, habrá varios otros segmentos que desea examinar. Esos son:
- Primera Pintura Llena de Contenido (FCP)
- Pintura llena de contenido más grande (LCP)
- Desplazamiento de diseño acumulativo (CLS)
Los tres elementos son parte de los signos vitales de la Web que ahora se incluyen en las principales métricas de Google que mostrarán qué tan rápido o lento es tu sitio. Puede obtener más información sobre los signos vitales Web 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 hacer en menos de un minuto:
- Ve a GTmetrix.
- Escriba la URL completa de su sitio.
- Pulse el botón «Ejecutar prueba» y espere unos 30 segundos.
Después de eso, obtendrás una calificación que te mostrará lo rápido que es tu sitio web. La prueba también le mostrará detalles como el rendimiento de su sitio, su estructura, así como signos vitales web que ahora son un factor de clasificación central para Google.
Si aún no has trabajado activamente para optimizar la velocidad de tu sitio, es probable que no obtengas una puntuación perfecta. Pero no se preocupe, puede trabajar para lograrlo si comienza a seguir todos los pasos.
Paso 2: Obtenga alojamiento web rápido y confiable
Un sitio web rápido comienza con un buen alojamiento. No importa cuánto intente ofrecer la mejor experiencia de usuario, si su alojamiento apesta, la velocidad de su sitio web se verá afectada.
Las mejores empresas de alojamiento se encargan de todo, y no es necesario que entiendas lo que pasa a puerta cerrada. Desde la calidad y el hardware bien mantenido hasta los componentes de software actualizados regularmente, hay mucho que un servicio de alojamiento puede hacer para mejorar la velocidad de su sitio.
Para comenzar de la manera correcta, aloje su sitio con Bluehost, una de las raras compañías de alojamiento 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: Implemente un servicio de Red de Distribución de Contenido (CDN)
Nuestro mundo es un lugar grande. Aunque las velocidades de Internet han mejorado drásticamente a lo largo de los años, la distancia física entre computadoras y 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, al igual que es más fácil para ti comprar una mesa de café de IKEA en tu ciudad natal en lugar de tener que conducir para obtener una en otro país.
Aquí es donde entran en juego las Redes de Distribución 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 persona 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 viene de Europa cargará su sitio a través de un servidor ubicado cerca de ellos, por ejemplo, en Londres.
Si está alojando 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 a personas de todo el mundo.
También puede obtener servicios de CDN de terceros. Las CDN más populares son:
- Cloudflare
- KeyCDN
- StackPath
- Google Cloud CDN
- Rackspace
- CacheFly
- Amazon CloudFront
Paso 4: Minificar archivos CSS y JavaScript
Los sitios web modernos están llenos de archivos CSS y JavaScript que funcionan juntos para que las páginas web se vean bien y funcionen 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 están creando las plantillas que terminas comprando) les gusta mantener su código limpio. 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 mediante la minificación.
he Aquí un ejemplo simple de código CSS:
body {
padding:10px;
color:#f35123;
fondo:#f22f12;
}
puede record en este:
body{padding:10px;color:#f35123;background:#f22f12}
Mientras que esta diferencia no hacer un impacto significativo en su sitio, imagínese lo que sucede cuando se tienen miles y miles de espacios en blanco innecesarios y líneas.
Afortunadamente, para reducir al mínimo sus archivos CSS y JavaScript, no tiene que revisar el código y realizar los cambios usted mismo. Hay complementos que harán esto automáticamente por usted y se asegurarán de que todo funcione correctamente:
- Vaya a «Complementos > Agregar nuevo».
- Búsqueda para «Autoptimize».
- Instalar y activar «Autoptimize».
- Vaya a «Configuración – > Autoptimizar».
- Marque » Optimizar código JavaScript?»y» Archivos JS agregados?».
- Marque » Optimizar código CSS?»y» Archivos CSS agregados?».
Paso 5: Habilitar 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 descargar todos los archivos del servidor de nuevo, ya que ya los tienen almacenados en su navegador.
El almacenamiento en caché del navegador puede mejorar significativamente la velocidad de su sitio web para los usuarios que regresan.
Para habilitar esto en su sitio, todo lo que necesita es un complemento gratuito para WordPress, como:
- Caché total W3
- Caché más rápida WP
- Caché Super WP
Si está utilizando Caché total W3, por ejemplo, todo lo que necesita hacer es instalar el complemento:
- Vaya a Complementos – > Agregar nuevo.
- Buscar «Caché total W3».
- Instale y Active el complemento.
- Pase por la configuración dejando que el complemento pruebe la configuración de su sitio y servidor.
El complemento configurará automáticamente sus ajustes de almacenamiento en caché y comenzarán a funcionar inmediatamente a su favor. Si decides entrar en más detalles, puedes 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 plugin. Aquí, puede cambiar otras opciones si es necesario.
Paso 6: Optimizar y limpiar la base de datos de WordPress
Su sitio web de WordPress no puede funcionar sin una base de datos. Todo lo que hace y tiene en el sitio se almacena allí. Como se puede imaginar, los temas y complementos no siempre lo mantienen limpio, por lo que incluso si desinstala un complemento específico, dejará algunos datos en su base de datos. Con el tiempo, la base de datos se volverá desordenada e ineficiente, lo que resultará en un sitio web lento.
Aunque es posible limpiar la base de datos manualmente, eso significaría que debe comprender cómo funciona. E incluso si lo haces, lo más probable es que aún 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 nada, asegúrese de crear una copia de seguridad completa de su sitio web o de tener una forma de deshacer los cambios. A pesar de que WP-Optimize es un complemento bien conocido y seguro, editar directamente una base de datos a veces puede salir mal.
Por lo tanto, en caso de que algo salga mal, sugiero reiniciar WP. Este complemento creará una instantánea de su sitio y le permitirá revertir rápidamente cualquier cambio realizado. Por lo tanto, 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 tomar más tiempo.
- Vaya a Complementos – > Agregar nuevo.
- Find WP-Optimizarlo, instalarlo y activarlo.
- Seleccione las opciones que desee y haga clic en el botón para iniciar la optimización.
Paso 7: Utilice temas optimizados / premium y simples
Las plantillas y los temas no solo son visuales. Para crearlos, los diseñadores web tienen que codificar en características, opciones e insertar imágenes que se combinarán en un solo tema de trabajo.
Como puedes imaginar, una plantilla que cargue cinco archivos y tres imágenes, por ejemplo, se cargará mucho más rápido que la que viene con diez archivos y veinte imágenes. El gran número no es el único factor importante, pero también se tiene en cuenta lo bien que se optimiza todo.
Dado que hay tantos temas y plantillas de WordPress disponibles, es difícil determinar los mejores. Estos son algunos de los temas populares de WordPress que están diseñados para verse bien y cargarse rápidamente:
- Hola Elementor
- Astra
- GeneratePress
- OceanWP
- Sydney
Paso 8: Optimice todas las imágenes en 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 utilizas demasiados, los usuarios tendrán dificultades para cargar toda la página de tu sitio web y probablemente terminen abandonándola antes de ver el contenido.
Afortunadamente, 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. A continuación, puede cuidar la imagen antes de cargarla cambiando el tamaño y la configuración de calidad.
Si solo necesita optimizar un par de imágenes, puede usar un servicio de terceros como TinyPNG. Esta herramienta de optimización de imágenes le permitirá cargar sus imágenes de origen y, a continuación, se optimizará automáticamente. Simplemente arrastre & suelte las imágenes y deje que el Panda haga su magia. A continuación, podrá descargar las versiones optimizadas de sus imágenes que puede colocar de forma segura en su sitio web.
Si ya tienes un sitio web activo y no tienes tiempo para optimizar imágenes de una en una, hay un complemento de freemium que resolverá todos tus problemas. ShortPixel Image Optimizer 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 otros complementos de galería y deslizador.
La versión gratuita le permite manejar hasta cien imágenes. Algunas de las características incluyen:
- Optimización del tamaño y la calidad de las imágenes.
- Convertir formatos en otro.
- Funciona con WebP y AVIF.
Todo lo que tiene que hacer es instalar el complemento y personalizar la configuración de la manera que desee. 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.
Paso 9: Carga lenta de imágenes y videos
Generalmente, cuando un usuario abre un sitio web, todo el contenido que debe mostrarse comienza a cargarse automáticamente. Por lo tanto, incluso si un usuario solo necesita el contenido de arriba del pliegue, todavía tendría todo lo disponible en esa página cargado.
En su lugar, mediante la carga lenta de imágenes y videos, puede hacer que los usuarios carguen solo contenido que esté visible en la pantalla. Una vez que el usuario comienza a desplazarse, las imágenes y videos que se mueven hacia el á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 lenta en WordPress:
- Vaya a Complementos – > Agregar nuevo.
- Búsqueda de carga perezosa por WP Rocket.
- Instale y active el complemento.
- Compruebe la configuración del contenido que desea cargar y guardar de forma perezosa.
Paso 10: Evitar el hotlinking de imágenes
El hotlinking es una acción que consiste en copiar el origen de una imagen de un sitio web para usarla en otro. Si bien la imagen se mostrará sin problemas, en realidad no se está cargando desde su servidor. En su lugar, utiliza todos los recursos del sitio original, y en realidad se considera ilegal.
Al evitar el hotlinking, puedes evitar que otras personas roben tus imágenes. De esta manera, está ahorrando recursos en su propio servicio de alojamiento, lo que significa que su sitio será el único que use esos recursos, lo que se traduce en un sitio web más rápido para sus visitantes.
Hay varias maneras de evitar el hotlinking:
- Uso de una CDN: las CDN más populares, como Cloudflare y KeyCDN, ya tienen activada la protección de enlace caliente.
- Uso de complementos de seguridad: Todo en Uno WP Security & El complemento de firewall le permite tener control sobre el enlace caliente.
- Desactivación haga clic con el botón derecho en sus imágenes: use un complemento como Prevenir el robo de contenido .
- Modificando .archivo htaccess: los usuarios más avanzados pueden deshabilitar el hotlinking directamente modificando el código en el .archivo htaccess.
Paso 11: Aloje videos en servicios de terceros y descargue archivos multimedia de gran tamaño
Cuando inicie 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 faltar es que almacenar y reproducir archivos de gran tamaño requiere recursos del servidor. Cuando se trata de la velocidad de su sitio, es mucho más conveniente descargar videos y archivos multimedia de gran tamaño en servicios de terceros para ahorrar ancho de banda.
Un video cargado desde YouTube funcionará igual de bien (si no mejor) que cargado desde su servidor. Y si tiene un 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 videos, usted puede acoger en:
- YouTube;
- Vimeo; o
- Wistia.
Paso 12: Mantenga los complementos al mínimo / encuentre los complementos que lo están ralentizando
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 tengas un complemento que ralentice tu sitio al cargar elementos innecesarios de los que tal vez ni siquiera seas consciente.
Antes de comenzar a deshabilitar todos los complementos, sugiero hacer una prueba de velocidad.
- Vaya a Complementos – > Agregar nuevo.
- Buscar P3 (Generador de perfiles de rendimiento de complementos).
- Instale y active el complemento.
- Vaya a Herramientas – > Generador de perfiles de complementos P3.
- Iniciar el escaneo.
Este plugin ejecutará algunas pruebas en su sitio web y le mostrará un gráfico y detalles. Lo que te interesa aquí es la pestaña «Tiempo de ejecución por Complemento» que dibujará un gráfico que te mostrará todos tus complementos activos y su impacto en el sitio.
Compruebe 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 tenga que deshacerse de ese complemento específico.
Esta prueba le permitirá analizar todos sus complementos, para que pueda sopesar los pros y los contras y decidir qué complementos lentos puede desinstalar o encontrar una alternativa.
Paso 13: Controla las redirecciones en tu sitio web
Tener redirecciones mejora la experiencia del usuario e incluso puede mejorar tu SEO si se hace correctamente. Tener redirecciones activas no tendrá un impacto negativo en tu sitio. Sin embargo, con cada redirección, tu sitio se vuelve un poco más lento. Por lo tanto, si termina teniendo demasiadas redirecciones (creando una llamada cadena de redirección), los milisegundos se sumarán y su sitio se volverá más lento.
Una de las herramientas más populares para manejar redirecciones es Screaming Frog. También puede consultar:
- Comprobador de redirección
- Sitebulb
- Deepcrawl
Al instalar el software o ejecutar un escaneo en línea (dependiendo de 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 solo saber que una URL es redirigida no tendrá mucho sentido, te encantará la función que te muestra la fuente de una redirección. Esto le ayudará a comprender su sitio web y le permitirá actuar en los redireccionamientos eliminando los que no son necesarios.
Si encuentra una cadena de redirección que está ralentizando su sitio, la solución es simple: en lugar de redirigir del enlace A al enlace B que va al enlace C, simplemente debe cambiar la redirección al último enlace de la cadena.
Para manejar redirecciones en WordPress, puedes usar un plugin gratuito de redirecciones WP 301 que te ayudará a administrar todas tus redirecciones.
Paso 14: Optimice el contenido (use extractos, divida artículos y comentarios largos, etc.)
A veces, puede hacer mucho cambiando cosas pequeñas. Si escribes un blog, puedes lograr un sitio más rápido controlando el contenido. Al mostrar los últimos artículos del blog, usa extractos en lugar de cargar el artículo completo.
Si está utilizando un editor clásico, mostrar un extracto personalizado es relativamente fácil:
- Vaya al Panel de WordPress – > Publicaciones – > Agregar nuevo.
- Haga clic en el botón ‘Opciones de pantalla’.
- Habilitar la opción caja de extractos.
- Desplácese hacia abajo, busque el cuadro de extracto y escriba un resumen personalizado.
Ahora, mostrar el extracto en tu página de inicio depende de tu tema. Es posible que ya esté activado o que tenga que marcar la opción en algún lugar de su tema. Sugiero revisar la documentación o contactar con el soporte porque cada tema es diferente.
Si tiendes a escribir artículos largos, 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 encuentre el bloque» Salto de página » que dividirá su artículo por la mitad.
Si está utilizando un editor clásico, simplemente agregue el <!–- nextpage tag> etiqueta que hará lo mismo.
Por último, para aquellos que tienen muchos comentarios, puede elegir paginar comentarios en lugar de cargarlos todos a la vez:
- Ve a Configuración de WordPress- > Discusión.
- Encuentra la opción «Dividir comentarios en páginas».
- Ingrese el número de comentarios que deben aparecer en una sola página.
- Guardar configuración.
Siga probando la velocidad de su sitio web
Incluso si realiza cada paso de este tutorial y acelera con éxito su sitio web, eso no significa que haya terminado. Las cosas pueden cambiar rápidamente, y nunca sabes qué tan bien se comportará tu sitio mañana o en un mes. Esta es la razón por la que es crucial que realice pruebas de velocidad regulares y mejore su sitio regularmente.
Puede marcar este tutorial 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 hacerte daño
Incluso si no te importa esperar a que se carguen los sitios, la mayoría de las personas tienen un problema con eso. Y si descuidas el problema, puede hacerte daño 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 su visita. Corres el riesgo de tasas de rebote más altas que harán que las personas abandonen tu sitio después de visitar la primera página.
- Pérdida de dinero: Si vende productos o servicios en su sitio web, un sitio lento repelerá a compradores potenciales y clientes futuros.
- Pérdida de tráfico: ¿Desea más tráfico que impulse su sitio hacia adelante? En ese caso, no puedes permitirte perder un visitante porque tu sitio no está optimizado adecuadamente.
- Clasificación SERP inferior: Google y otros motores de búsqueda tienen en cuenta la velocidad de carga. Una página más lenta puede resultar en ser empujada más abajo en la página de resultados del motor de búsqueda, incluso si su contenido es bueno.
¿Aún no cree que la velocidad sea importante? Espero que estas cuatro razones te convenzan de que la velocidad de un sitio web es crucial y de que estás listo para mejorar el tuyo.
Conclusión
A todo el mundo le encantan los sitios hermosos y bien diseñados. Sin embargo, si eso significa esperar un par de segundos adicionales para que el sitio web se cargue, es probable que pierda un cierto porcentaje de visitantes.
Así que, no importa lo que hagas, no sacrifiques la velocidad por la estética. Es posible tener ambos; solo necesita ser paciente y trabajar en su sitio web para mejorarlo.