8 cosas pasadas por alto que ralentizan el rendimiento de un sitio web

8 cosas pasadas por alto que ralentizan el rendimiento del sitio web

Para el usuario típico de Internet, no hay nada más frustrante que un sitio web lento. Como propietario de un sitio web, es su trabajo reducir o eliminar esa frustración acelerando el rendimiento de su sitio web.

¿Cuánto necesitas para acelerarlo? Bueno, según Nielsen Norman Group, solo tiene 10 segundos para comunicar el valor de su sitio web . Con solo 10 segundos para influir en un lector potencial, cada segundo que pasa cargando su página es una oportunidad desperdiciada.

Todos sabemos que la carga lenta de un sitio web puede desviar el tráfico. Probablemente haya escuchado que el 40 por ciento de los visitantes abandonarán un sitio web que tarde más de 3 segundos en cargarse. Pero para los usuarios de dispositivos móviles, las cifras son aún peores. Los estudios de Google muestran que es probable que el 53 por ciento de las visitas se abandonen si las páginas tardan más de 3 segundos en cargarse .

Eso es más de la mitad de su tráfico. Más de la mitad de las personas que ya han decidido visitar su sitio cambiarán de opinión y se irán después de solo unos segundos de pantalla en blanco.

Está claro que la velocidad ya no es un lujo, se ha convertido en una necesidad. Debería preguntarse: "¿Cómo puedo acelerar mi sitio web?" y aprovechando cada fracción de segundo puedes reducir el tiempo de carga.

En este artículo, cubriremos ocho cosas que puede haber pasado por alto y que podrían estar ralentizando el rendimiento de su sitio web.

Antes de comenzar

Para medir la velocidad y el rendimiento, necesita una herramienta de análisis.
Yo uso
Google PageSpeed ​​Insights . Si usa el navegador web Chrome, el motor que impulsa PageSpeed ​​Insight, Lighthouse, está disponible como una extensión . La instalación de la extensión hará que las tareas de solución de problemas de su sitio web lento sean mucho más manejables.

Evalúe la velocidad de su sitio antes de realizar cualquier cambio y utilícelo como referencia para mediciones posteriores. Realice una prueba después de cada cambio para determinar cuál de los métodos descritos aquí le brinda el mayor éxito.

1. Lo primero es lo primero: alojamiento web

Alojamiento ecológico de alto rendimiento de GreenGeeks

Si bien vamos a cubrir varias cosas que puede controlar para combatir un sitio web lento, quizás lo más importante que puede controlar es qué empresa de alojamiento web utiliza. Si bien las opciones pueden parecer infinitas, el hecho es que uno o dos grandes conglomerados poseen muchos servidores web. GreenGeeks es una empresa de hospedaje de propiedad y operación independiente que ha brindado hospedaje ecológico y de alto rendimiento desde 2008.

Además de brindarles a nuestros usuarios la elección de ubicaciones de centros de datos y recursos escalables, también hemos desarrollado un conjunto de herramientas y servicios patentados llamado PowerCacher que brinda aceleración de la velocidad de la página en nuestras cuentas de alojamiento Ecosite Pro o Ecosite Premium . Estamos seguros de que la tecnología PowerCacher proporciona la plataforma de sitio web más rápida que puede encontrar en cualquier lugar. Agregue el hecho de que igualamos cada kilovatio de energía que tomamos de la red eléctrica con tres veces la cantidad en forma de energía renovable a través de la Fundación Ambiental Bonneville, y tendrá la mejor opción de hospedaje disponible para su sitio web.

Bien, ese es el final del argumento de venta. Estos consejos te serán útiles donde sea que esté alojado tu sitio web (pero prueba GreenGeeks de todos modos, no te arrepentirás).

2. Imágenes

Optimizar imágenes para mejorar la velocidad de la página

Al hacer la pregunta, "¿Cómo arreglo un sitio web lento?" la primera respuesta que probablemente obtendrá de casi todo el mundo es la optimización de imágenes . Y por una buena razón. Las imágenes suelen ser un cuello de botella principal, pero solo porque no se han tomado medidas para eliminarlas como una de las causas de un sitio web lento.

La regla general para las imágenes es: nunca publiques una imagen que sea más grande de lo necesario. Esa es una regla simple que es difícil de seguir, teniendo en cuenta los diferentes tamaños de pantalla o ventanas gráficas que los visitantes de su sitio web probablemente usarán.

Cuando hablamos de imágenes, el tamaño no son solo las dimensiones de medición de píxeles, también es el tamaño del archivo, que está controlado por la calidad de la imagen.

Aquí hay algunas vías a seguir:

  • Cree múltiples versiones (tamaños) de cada imagen. Se utilizan junto con el código para detectar el tamaño de la ventana gráfica y mostrar imágenes del tamaño adecuado, por lo que no está enviando una imagen de 3000 píxeles a un dispositivo portátil o una imagen de 200 píxeles a una pantalla Retina.
  • Pruebe diferentes formatos de imagen, como .webp de Google o archivos .svg de tamaño variable para logotipos.
  • Lazy Loading, un método para evitar la carga de imágenes (y algunos otros elementos) que actualmente no están visibles en el navegador. Por ejemplo, en un artículo extenso con imágenes en todas partes, las imágenes que aparecen más adelante en el artículo, que no son necesarias para esa primera ventana del navegador, no se cargarán en la carga de la página inicial. Implementar Lazy Loading en su sitio web no es la tarea más simple, pero si ejecuta un sitio web con muchas imágenes, puede valer la pena la curva de aprendizaje. Si su sitio web usa WordPress, hay complementos de Lazy Loading que puede usar (como a3 Lazy Load ).

3. Recursos y secuencias de comandos

correctamente incluyendo activos y scripts para la velocidad

JavaScript y las hojas de estilo en cascada (CSS), que alguna vez fueron maravillas raras y exóticas de la web, ahora son herramientas básicas utilizadas por la gran mayoría de los sitios web. Sería difícil crear incluso el sitio web moderno más básico sin usar JavaScript y CSS. Pero las razones de la carga lenta del sitio web a menudo se remontan al uso de estos archivos.

El problema es que JavaScript y CSS son "recursos de bloqueo de procesamiento", lo que significa que el análisis de HTML se detiene mientras JavaScript y CSS se están cargando. Entonces, cuando el analizador llega a una etiqueta, se detiene para buscar el script y ejecutarlo, luego continúa cargando el HTML.

Puede ver dónde podría conducir eso a un problema de rendimiento (y por qué es mejor evitar el CSS en línea siempre que sea posible). Afortunadamente, existen métodos para combatir los problemas comunes de ralentización de JavaScript y CSS.

Cuando se trata de archivos .js y .css, la mejor práctica es cargar solo lo que necesita una página. Es tentador hacer su vida más fácil mediante el uso de archivos de encabezado y pie de página que cargan todos los scripts y activos que usa su sitio en cada página, pero cuando hace eso, está creando una sobrecarga para las páginas que no usan todos los activos y innecesariamente aumentando los tiempos de carga.

Cuando sea necesario incluir secuencias de comandos, considere mover las etiquetas al pie de página, en lugar del encabezado. A veces, cuando usa varios archivos JavaScript, deben cargarse en un orden particular, pero siempre que ese orden sea correcto, es posible mover todas las etiquetas al pie de página.

En aquellos casos en los que un archivo .js o .css deba estar en el encabezado de la página, puede beneficiarse ejecutándolo con una opción asíncrona o diferida . Cuando carga un activo de forma asincrónica, el documento HTML continúa cargándose mientras se carga el activo, lo que, por supuesto, es preferible al comportamiento predeterminado de "bloqueo de procesamiento".

Para implementar la carga asíncrona o diferida:

La opción de diferir le dará la mayor ganancia en velocidad, pero puede que no siempre sea preferible, dependiendo de lo que suceda en su página. Experimente con ambas opciones para ver cuál funciona mejor para usted.

4. Minimizar

Minimice los activos para ahorrar tiempo de descarga

Hablando de archivos JavaScript y CSS, son los principales candidatos para lo que se conoce como minificación. Cuando los humanos trabajamos en archivos JavaScript o CSS, organizamos el código de manera que nos sea más fácil ver lo que sucede en el archivo.

Sin embargo, el servidor web no necesita todo ese espacio. Minification toma su archivo legible por humanos y elimina cosas como espacios en blanco y saltos de línea, que el servidor no necesita, y en el proceso reduce el tamaño del archivo, a veces sustancialmente.

La desventaja de la minificación es que una vez que ha minimizado un archivo, es un desafío para un humano editarlo, ya que todos esos útiles saltos de línea y espacios en blanco han desaparecido. Por lo tanto, la minificación generalmente se maneja automáticamente como parte de un flujo de trabajo más grande o un sistema de administración del sitio.

Pero si eres del tipo DIY, aún puedes usar la minificación a través de sitios como minifier.org . Solo asegúrese de mantener su copia funcional y legible por humanos de sus archivos JavaScript y CSS y minimícelos cada vez que realice un cambio. También hay herramientas para "des-minificar" un archivo, pero me parece mejor mantener el archivo original y minimizarlo cada vez que cambia.

5. Redes de entrega de contenido (CDN)

Las redes de entrega de contenido (CDN) aceleran el rendimiento del sitio web

Durante la primera década que existió la web, la mayoría de los sitios web estaban ubicados en un solo servidor. Lo que significa que si estuviera en California y un visitante del sitio web estuviera en el otro lado del mundo en Madagascar (bueno, el mapa de las antípodas dice casi Madagascar), el visitante se conectaría a su servidor y esperaría mientras los archivos hacían el viaje de 11,000 millas desde su servidor a su escritorio.

Los CDN se desarrollaron para reducir esa distancia. Una CDN es una red global de servidores que entregan contenido a los visitantes del sitio web en función de dónde se encuentre el visitante. Entonces, en los términos más simples, carga un archivo, la CDN copia ese archivo en varios servidores, luego, cuando un visitante ingresa a su sitio web, la CDN determina qué servidor está más cerca del visitante y entrega los archivos desde ese servidor. .

Entonces, en lugar de que su amigo en Madagascar vea los archivos de su sitio desde California, es posible que los cargue desde un servidor en Europa, a menos de la mitad de la distancia. Y a medida que las CDN crecieron y se expandieron, más servidores se acercaron a sectores más grandes de la población.

Puede ver cómo un CDN ahorraría tiempo con archivos como imágenes (¡y algunos de ellos incluso pueden cambiar el tamaño de las imágenes automáticamente sobre la marcha!), pero también pueden ayudar con los otros tipos de archivos de activos de los que hablamos.

Por ejemplo, si usa el marco Bootstrap para su sitio, puede cargar versiones minimizadas de las bibliotecas CSS y JavaScript desde una CDN , en lugar de desde su servidor web. Existen CDN similares para bibliotecas de JavaScript populares como jQuery .

Y, por supuesto, también hay algunos CDN de sitios web generales muy populares ( Cloudflare , etc.) que prometen aumentar el rendimiento y la seguridad del sitio. La conclusión es que a veces su sitio web es lento por razones fuera de su control, como la distancia física. En esos casos, puede usar una CDN para mejorar los tiempos de respuesta para una parte más significativa del mundo.

6. Almacenamiento en caché del navegador

Navegador almacenando en caché la ganancia de velocidad oculta

Una forma segura de combatir un sitio web lento es a través del almacenamiento en caché de archivos. El almacenamiento en caché es el almacenamiento temporal de archivos de sitios web en el navegador de un visitante (o en la computadora de un visitante). El almacenamiento local significa que no es necesario solicitar el mismo archivo al servidor en cada carga de página. Entonces, si su sitio usa un solo archivo CSS, el visitante lo descarga una vez, luego se llama al archivo desde su caché local para cada carga de página después de eso, lo que hace que la visualización de la página sea mucho más rápida.

¿Mencioné que GreenGeeks PowerCacher funciona automáticamente en nuestras cuentas de alojamiento Ecosite Pro o Ecosite Premium ? ¿Hice? Bueno, valía la pena mencionarlo de nuevo. Pero, en términos generales, el almacenamiento en caché beneficiará a casi todos los tipos de sitios web, y especialmente a aquellos que usan muchos tipos de activos de los que hablamos anteriormente: archivos JavaScript, archivos CSS, imágenes comunes de encabezado o pie de página, logotipos, etc.

La forma más sencilla de implementar el almacenamiento en caché es usar ExpiresByType en un archivo .htaccess. En el siguiente ejemplo, le estamos diciendo al servidor/navegador que queremos que el visitante almacene imágenes jpg en su caché local durante un año, y archivos CSS, JavaScript y HTML durante un mes.

La suposición es que una vez que cargue una imagen en su sitio web, es poco probable que cambie esa imagen, mientras que los archivos HTML y CSS pueden actualizarse con más frecuencia.

<IfModule mod_expires.c>

ExpiresActive On


ExpiresByType image/jpg “acceso 1 año”


ExpiresByType texto/css “acceso 1 mes”


ExpiresByType texto/html “acceso 1 mes”


ExpiresByType texto/x-javascript “acceso 1 mes”


ExpiresDefault “acceso 1 mes”


</IfModule>

Si este método parece un poco básico, lo es. Hay métodos de almacenamiento en caché más avanzados que puede usar en .htaccess, pero si recién está comenzando con el almacenamiento en caché, ExpiresByType es una manera fácil de comenzar.

7. Anuncios y widgets de terceros

los anuncios y los widgets pueden estar arrastrándote hacia abajo

Esto puede ser obvio, pero también es fácil olvidar que es posible que haya implementado scripts, widgets o programas publicitarios de terceros, y pueden ser factores que contribuyan a por qué un sitio web tarda en cargarse.

Algunos widgets del sitio se entregan mediante JavaScript, por lo que los métodos de los que hablamos anteriormente pueden ayudar a acelerarlos. Pero algunos se entregan a través de otros medios, como iframes, que son difíciles o imposibles de modificar.

Si la publicidad está ralentizando su sitio, pero usted confía en esa publicidad, es posible que no haya nada que pueda hacer para que las cosas sean más rápidas. Pero busque otros tipos de widgets: elementos de página de Google, , etc., que puede haber instalado pero que dejó de usar (o, como sucede a veces, el sitio de terceros dejó de admitirlos).

8. Problemas específicos de WordPress

pruebe un complemento de almacenamiento en caché de WordPress

WordPress es una herramienta maravillosa, pero no está exenta de inconvenientes, uno de los cuales es la hinchazón que puede causar lentitud. Si bien las cosas que hemos discutido en este artículo se aplican a cualquier sitio web, debemos tomarnos un momento para considerar algunas formas fáciles de mejorar el rendimiento de los sitios con tecnología de WordPress.

Uno de los grandes beneficios de usar WordPress es que puede usar complementos de fácil instalación para hacer muchas de las cosas de las que hemos hablado aquí, como la minificación y el almacenamiento en caché.

Para el almacenamiento en caché también hay varios complementos que puede probar, pero también puede comenzar con el mejor y más popular, WP Super Cache . Está hecho por las personas que le brindan WordPress, por lo que la instalación y la configuración básica son fáciles. Si dedica un poco de tiempo a conocer algunas de las funciones avanzadas, es posible que nunca necesite probar ningún otro complemento de almacenamiento en caché.

Como mencioné anteriormente, también hay complementos de WordPress para realizar Lazy Loading y muchas otras tareas de optimización. Pero finalmente, una de las mejores maneras de mejorar el rendimiento de WordPress (y, lo que es más importante, la seguridad) puede no ser instalar otro complemento, sino deshacerse de los complementos no utilizados . Un organizador de complementos puede ayudarlo a decidir de qué puede deshacerse al facilitar la desactivación temporal de complementos y probar si todavía son necesarios.

Al probar si puede eliminar un complemento de manera segura, asegúrese de volver a las publicaciones anteriores y asegúrese de que no usen elementos que dependan de complementos específicos.

¿Por qué mi sitio web es lento?

Tal vez implementar algunos de los cambios descritos aquí sea tan efectivo que nunca más tendrá que hacer esa pregunta. Hemos cubierto algunas de las razones por las que su sitio web puede ser lento y algunas formas de reducir o remediar esa lentitud. Pruebe algunos de los métodos y háganos saber cuáles son sus resultados.

Y recuerda, tus visitantes están mirando, ¡así que cada milisegundo cuenta!

Subir