15 Consejos para Mejorar los Tiempos de Carga de Sitio Web

>>15 Consejos para Mejorar los Tiempos de Carga de Sitio Web

La velocidad de carga de una página web, esa parte tan importante de cualquier optimización on-page y a la vez tan desatendida. Son muchas las personas que me preguntan y clientes a los que he hecho una auditoria SEO, y después de tanto análisis y recomendación he encontrado mi inspiración para escribir algunos consejos y trucos que puedan hacer bajar el tiempo de carga de las páginas tanto como sea posible. Cualquier motor de búsqueda, véase Google, quiere proporcionar a sus usuarios una gran experiencia de usuario,  ya que una página web rápida mejora la calidad del sitio y aumenta la satisfacción del usuario.

como mejorar velocidad de carga pagina web

Todos merecemos una experiencia web rápida, ya que en los tiempos que corren no nos podemos permitir estar esperando a que cargue el contenido más de 2 segundos (era ironía, si el contenido de la página merece la pena, bien se merece esperar 2, 3, 4 o los segundos que haga falta). Algunos de los siguientes consejos harán que tu página mejore sus tiempos de carga.

“Algunos experimentos han demostrado que si se aumenta la latencia de búsqueda de la web de 100 a 400 ms se reduce el número diario de búsquedas por usuario un 0,2% hasta un 0,6%. Además, los usuarios hacen menos búsquedas cuanto mayor sea el tiempo de exposición. Para tiempos de espera mayores, la pérdida de búsquedas es grande durante bastante tiempo, incluso después de que el nivel latencia vuelva a niveles anteriores” dice Google.

En este artículo voy a enumerar una serie de factores (consejos útiles de Yahoo y Google) donde usaré mi propia página como ejemplo.

Nota: Si vas a seguir cualquiera de los consejos, haz primero una copia de seguridad

También te puede interesar:

Servidor

como mejorar velocidad de carga pagina web servidor

Elegir un alojamiento adecuado para tu página web es el primer paso que tienes que dar y uno de los más importantes. Un hosting con una configuración profesional puede ser de gran ayuda. Aquí te dejo un artículo donde podrás aprender más sobre los requisitos de un buen alojamiento.

#1 Implementar Leverage browser caching

Los Expires headers dicen al navegador si el recurso de una página web tiene que ser solicitada a la fuente o puede ser traído desde el caché del navegador. Al establecer un expires header para un recurso como, por ejemplo, las imágenes en formato JPEG, el navegador las almacenará en su caché. La próxima vez que el visitante vuelva a tu página web este recurso se cargará más rápido, ya que el navegador ya tendrá descargadas esas imágenes.

#2 Habilitar Keep-Alive

Una señal Keep-Alive se suele enviar a intervalos predefinidos y juega un papel importante en Internet. Después de que se haya enviado la señal, si no se recibe respuesta, se sume que el enlace no funciona y los datos que envíen en el futuro serán enviados de otra manera, hasta el enlace está activo de nuevo. HTTP Keep-Alive permite conexiones TCP para mantenerse activa y ayuda a reducir la latencia de las solicitudes posteriores. Si te pones en contacto con tu proveedor de hosting y coméntale que se lo piense dos veces antes de implementar nada. La mayoría de empresas de alojamiento desactivan esta función, ya que es una función opcional (siempre que transfiera menos de 60 bytes por petición).

#3 Habilitar la compresión gzip

Gzip es el método de compresión más popular y eficaz disponible en la actualidad y, en general, reduce el tamaño de respuesta alrededor de un 70%. Aproximadamente el 90% del tráfico de Internet actual viaja a través de navegadores que “dicen soportar gzip“, dice Yahoo.

Habilitar la compresión gzip reduce el tamaño de la respuesta HTTP y ayuda a reducir el tiempo de respuesta. Es una manera fácil de reducir el peso de la página. Puede activarlo de diferentes maneras:

  • Añadiendo el siguiente código en tu archivo .htaccess

# comprime texto, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Comprime ciertos archivos por extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

  • Usando el siguiente código PHP en la parte superior de tu archivo HTML/PHP

<?php if (substr_count($_SERVER

[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>

#4 Crear redirecciones cacheables

En ocasiones, las páginas móviles redirigen a los usuarios a URLs diferentes, (por ejemplo, de midominio.com a m.midominio.com) asi que hacer redirecciones cacheables puede acelerar el tiempo de carga de página para tus visitas recurrentes (las visitas que vuelven). Utiliza una redirección 302 con una duración de caché de 1 día. Deberás incluir un Vary: User-Agent , así como un Cache-Control: private. De esta manera, sólo redirigirás las visitas que vengan de dispositivos móviles.

También te puede interesar:

#5 Usar un CDN

Un CDN o content delivery network o red de entrega de contenidos es una colección de servidores web distribuidos a través de múltiples ubicaciones para entregar el contenido de manera más eficiente a los usuarios. El servidor seleccionado para la entrega de contenido a un usuario específico se basa típicamente en una medida de proximidad de red (también se puede elegir el servidor con menor cantidad de los saltos de red, aquel con el tiempo de respuesta más rápido, etc). El CDN se actiuva desde diferentes servidores, según la región del visitante. Puede comparar CDN hosting con alojamiento web estándar aquí.

Nota: Te recomiendo usar Amazon CloudFront o MaxCDN ya que te permiten administrar el caché y te ofrecen un montón de otras herramientas muy útiles si tienes una instalación de WordPress con W3 Total Cache

Elementos de contenido

como mejorar velocidad de carga pagina web contenido

Puesto que no se suele tener acceso total al servidor, los elementos de contenido son una de las cosas más importantes que puedes manipular. Vamos a ver uno por uno:

#6 Minimizar redirecciones

Cuando se quieee indicar una nueva ubicación de una UR, hacer el seguimiento de los clicks, conectar diferentes partes de una página web o reservar múltiples dominios es necesario redirigir el navegador de una URL a otra. Una redirección desencadenar una petición HTTP extra y añadir latencia. Mantén solo las redirecciones que sean técnicamente necesarias o que no se puedan evirar (redicción del dominio con www a sin www, por ejemplo). Estas son las recomendaciones de Google:

  • Nunca hagas referencia a URLs que sepas que redirigirem a otras direcciones URLs: Tu solicitud debe actualizar las referencias de las URLs estas cambian de ubicación.
  • Nunca se debe necesitar más de una redirección para llegar a un determinado recurso: Por ejemplo, si C es la página de destino, y hay dos puntos de inicio diferentes, A y B, A y B debe redirigir directamente a C; A nunca debe redirigir de forma intermedia a B
  • Minimiza el número de dominios adicionales que emiten redirecciones y que no sirven contenido: A veces existe la tentación de volver a redirigir páginas desde múltiples dominios con el fin de reservar espacio para nombres y captar nombres escritos incorrectamente

#7 Retirar las cadenas de consulta de recursos estáticos

No se puede almacenar en caché un enlace con un “?” en la URL, incluso cuando existe una cabecera Cache-Control:public. El signo de interrogación actúa igual que presionado Ctrl+F5. Utiliza cadenas de consulta sólo para recursos dinámicos.

#8 Especifica un conjunto de caracteres

Especifica un conjunto de caracteres (character set) en los encabezados HTTP para acelerar el renderizado del navegador. Esto se hace añadiendo un simple código en tu header (encabezado):

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

Nota: Algunos CMS usan funciones para el conjunto de caracteres (como WordPress con <bloginfo php (‘charset’);?>). Te recomiendo que, si conoces bien tu juego de caracteres lo escribas directamente, en lugar de utilizar funciones de PHP. Ayuda a minimizar el tamaño de la petición, así que trata de usar HTML en lugar de PHP, siempre que sea posible

#9 Miniza el código

Eliminar comentarios HTML, secciones CDATA, espacios y espacios vacíos disminuirá el tamaño de página, reducirá la latencia de red y acelerará la velocidad de carga. Para ello puedes utilizar herramientas online como Will Peavy minifier. Si utilizas WordPress, Autoptimize puede optimizar y comprimir tus códigos, además de que soporta CDN.

#10 Evitar peticiones erróneas

Los enlaces rotos dan como resultado errores 404/410. Esto ocasiona múltiples peticiones, que son totalmente innecesarias. Arregla tus URLs rotas (presta especial atención a las imágenes) ayudándote de herramientas online como Online broken link checker, el plugin WordPress link checker de forma totalmente gratuita. También puede usar Xenu Link SleuthScreaming Frog, ya que son muy útiles.

#11 Servir recursos desde una URL consistente

El problema que tenemos aquí es que estamos sirviendo exáctamente el mismo contenido estático, pero lo estamos cargado desde 2 URLs distintas. Esto es un gran error, ya que el navegador debe realizar dos peticiones para un mismo recurso, es decir, estás realizando siempre una petición y una carga de datos de más y podríamos estar ahorrando nada menos que 68.7KiB, un peso nada desdeñable. Por desgracia, estudiando las peticiones “culpables”, he encontrado que estas suelen ser del tipo:

  • http://platform.twitter.com/…/follow_button.1638939.html y:
  • https://platform.twitter.com/…/follow_button.1363139.html

Parece ser que el culpable es el follow button del widget de Twitter. Algún programador en Twitter ha utilizado en un sitio http y en otro https y esta sugerencia va a caer en saco roto en este caso.

#12 Reducir las búsquedas de DNS

Cuando escribes www.midominio.com en tu navegador, una resolución de DNS en contacto con el navegador, devuelve la dirección IP del servidor. El DNS tiene un coste en recursos, que  generalmente es de unos 20-120 milisegundos por DNS para encontrar la dirección IP del hostname. El navegador no puede descargar nada de este hostname hasta que la búsqueda DNS se haya completadoReducir el número de hostname (nombres de host) únicos tiene el potencial de reducir la cantidad de descargas paralelas que tienen lugar en la página. Si evitas ciertas búsquedas DNS acortas los tiempos de respuesta, pero reduciendo las descargas paralelas puedes llegar a aumentarlos. Usa la herramienta online Pingdom Tools para revisar este punto.

Nota: Mete tus imágenes en sprites. Esto significa que coloques las imágenes que se estén cargando en todas las páginas de tu página web juntas (por ejemplo los iconos del menú o sociales, fondo, etc), para así reducir las búsquedas DNS. Puede encontrar más información en SpriteMe.

CSS, JS e Imágenes

como mejorar velocidad de carga pagina web codigo

El código de tu páginas web se puede comprimir para que los servidores tarden menos en leerlo y, por tanto, en cargar la página web por completo. Vamos a ver qué puedes hacer para mejorar tu velocidad de carga.

#13 Especificar las dimensiones de las imágenes

Cuando un navegador muestra tu página web tiene que realizar varias acciones antes de que pueda mostrar el contenido. Una de las cosas más simples e importantes que hace es diseñar tu página web en torno a las imágenes. Sólo puede hacer esto sí sabe de qué tamaño son las imágenes.Si no le indicas al navegador las dimensiones de las imágenes, este tiene que “construir” la página no una vez sino dos veces (o más dependiendo de la cantidad de imágenes que tengas en la página). La construirá una vez para mostrar todo el texto y luego tiene que esperar hasta que una imagen se haya descargado. Cuando una imagen se descarga el navegador puede determinar el tamaño de la imagen y reconstruirá la página para ajustar el texto alrededor de esa imagen. Este proceso se va a repetir para cada imagen en tu página. Si has especificado las dimensiones de la imagen, el navegador conocerá el tamaño de las imágenes y puede utilizar esa información para dar forma a la página. No tendrá que reconstruir la página de un millón de veces.

  • Este es un ejemplo de una etiqueta imagen sin dimensiones: <img src=”image.jpg” />
  • Este es un ejemplo de una etiqueta imagen con dimensiones incluidas (ancho y alto): <img src=”image.jpg” width=”200″ height=”200″ />

Nota: No utilices dimensiones para escalar las imágenes sobre la marcha, ya que el usuario seguirá descargando el tamaño del archivo original (incluso si la imagen no ocupa tanto espacio en la pantalla)

#14 Optimizar las imágenes

Vale, es algo muy básico, pero quizás se te haya pasado por alto en algún documento concreto. Exporta las imágenes mediante herramientas de optimización web (la de Photoshop es casi perfecta), escoge el mejor formato de archivo y juega con el HTML para evitar el uso de imágenes donde no sea estrictamente necesario. Mira el peso de tu portada y páginas internas: seguramente la mayoría del peso sean las imágenes. Intenta conservar la página por debajo de 400kb siempre que sea posible (a la gente con conexiones lentas este tamaño ya les resultará pesada.

Las imágenes pueden contener comentarios adicionales y utilizar colores que no sirven para nada (dentro de la web). Si mantienes los tamaños de tus imágenes al mínimo, los usuarios con conexiones lentas te lo agradecerán. Trata de guardar en formato JPEG. Puedes utilizar Yahoo! Smush.it y, si utilizas WordPress, puedes instalar el plugin WP Smush.it.

También te puede interesar:

# 15 Pon el CSS en la parte superior y el JS en la parte inferior

Poner los stylelsheets en el encabezado del documento de la página web prohíbe el procesamiento progresivo, por lo que los navegadores bloquearán el renderizado para evitar tener que volver a dibujar los elementos de la página. En la mayoría de los casos los usuarios se enfrentan a una página web en blanco hasta que la página se carga por completo. Esto también te ayuda a hacer una página web estándar de acuerdo con las normas W3. La misma razón existe para poner el código javascript en la parte inferior de la página web.

Hay otras formas de acelerar la velocidad de carga de una página web, pero he tratado de escribir las más importantes, las cuales muchos bloggers profesionales pueden pasar por alto. Por supuesto, la velocidad del sitio no es el objetivo principal, pero incluso una página web ideal con un tiempo de carga malo tendrá dificultades para alcanzar el éxito. Optimiza tu página web que sea lo más rápida posible (siempre hay limitaciones), y así alcanzar tus objetivos más rápido.

Último consejo: que NO se olvide de hacer una copia de seguridad antes de hacer cualquier cambio y que no se olvide compartir tus sugerencias o preguntas en los comanetarios.

 
2017-10-03T17:41:15+00:00

El autor del contenido es

Ignacio Santiago
Soy muchas cosas, pero todo empezó como Blogger. Desde ahí he crecido como especialista en Marketing Online, aunque con mucha experiencia en Diseño Web, Blogging, SEO y WordPress. Ayudo a empresas y autónomos a crear, mejorar y potenciar su presencia y visibilidad en Internet, dándoles las herramientas que necesitan para tener un branding con una base muy fuerte, que inspire confianza y que genere ventas.

6 Comentarios

  1. Andres 20/12/2016 en 14:26 - Responder

    ¡Buen aporte! Quisiera hacerte una pregunta fuera del tema: ¿Cómo haces ese cargando que tiene esta pagina? Te lo agradecería y gracias nuevamente por el aporte.

  2. Mauricio Gonzalez 13/09/2016 en 12:10 - Responder

    Buen artículo. Quisiera preguntarte si utilizas la compresión Gzip y ademas como tu web esta realizada con wordpress utilizas u plugin de caché tipo WP Super Cache. Puede dar problemas o no interfieren las dos soluciones.

    Gracias

    • Ignacio Santiago
      Ignacio Santiago 03/11/2016 en 12:28 - Responder

      Hola Mauricio,

      Ambas opciones son complementarias y funcionan muy bien a la vez. En mi caso tengo eso (pero con el plugin WP Rocket) y un Varnish.

  3. Antonio Alcala 16/05/2016 en 12:22 - Responder

    Hola Ignacio,

    En el apartado 3, de habilitar compresión gzip, la segunda opción que dice: Usando el siguiente código PHP en la parte superior de tu archivo HTML/PHP; ¿te refieres a poner ese código en la URL principal o en todas las páginas PHP y HTML que tengamos dentro de nuestra web. Muchas gracias.

    Un saludo.

    • Ignacio Santiago
      Ignacio Santiago 24/05/2016 en 13:57 - Responder

      Hola Antonio,

      En todas, perdón. Gracias por tu comentario. Espero verte de vuelta pronto por aquí.

¡Es tu turno! Opina y deja tu comentario