Estamos en un momento donde el tiempo de respuesta de los sitios se ha convertido en algo fundamental para obtener y conservar usuarios.
Las personas que ingresan a una página web esperan una respuesta casi inmediata, y de obtener lo contrario, el abandono se convierte en una acción inminente.
Vamos explicar qué técnicas podéis utilizar para mejorar la velocidad de carga de una página web.
Este fenómeno se vuelve más común día con día, y es que en la actualidad el usuario es una persona cuyo tiempo de espera es muy limitado, ya que esta acostumbrado a trabajar con grandes velocidades de Internet.
Atrás quedaron los días, donde las personas que navegaban podían esperar minutos con tal de poder ver correctamente el contenido de un sitio.
Aunado a esto, el hecho de que los dispositivos móviles sean tan importantes en estos días, hace que la velocidad de los sitios web sea un factor determinante para el éxito o fracaso de un sitio.
La lentitud en la carga está relacionada con el “peso” o “tamaño” de la página. Esto nos indica que si queremos que nuestros usuarios accedan rápidamente a los contenidos de nuestro diseño, debemos hacer que los elementos incluidos en el diseño no tengan demasiado peso y desechar aquellos que haga que el tiempo de carga de la página se eleve.
Un sitio que tenga un buen rendimiento, mantendrá a los usuarios conformes. Es por esto, que en este artículo destacaremos las principales formas en que se puede mejorar el rendimiento de un sitio.
Reducir las peticiones HTTP
Uno de los aspectos básicos que debemos tomar en cuenta para mejorar el rendimiento del sitio, es llevar un control de las peticiones que se realizan al servidor de nuestro sitio. Si queremos que las páginas carguen de manera rápida, debemos mantener una cuota baja de viajes entre el navegador y el servidor.
Todos los archivos que utilizamos para que nuestro sitio funcione, necesitan ser descargados por parte del navegador para que el usuario pueda observar correctamente el contenido.
Es decir, todos los css, javascript e imágenes que incluimos serán pedidas por el navegador al servidor, para guardarlas temporalmente en el ordenador del usuario.
Si reducimos estas peticiones, reduciremos el tiempo de respuesta en gran manera. Para lograrlo, podemos incluir todas las llamadas a hojas de estilos en un solo documento, igual con los javascripts y otros recursos.
La forma en que realizamos los llamados también influye, por ejemplo, el tiempo de respuesta es mucho mayor si utilizamos “@import” para incluir un CSS en vez de utilizar la etiqueta nativa “link”.
Ver en que orden se cargan los elementos de tu web
Pingdom Tools es una aplicación online que te muestra mediante una gráfica de barras el orden de carga de todos los elementos de tu página web, así como el tiempo que tarda en cargar cada uno por separado y de forma global.
Esto significa que analiza tanto el código HTML, como las imágenes, elementos JavaScript, CSS e incluso el RSS de la web y te da una gráfica indicando el tiempo que ha tardado en cargar cada uno de dichos objetos (momento de inicio de la carga, cuando se descargó el primer y último byte…).
De esta forma, puedes ver el modo en que se cargan las páginas en el navegador de tus usuarios y qué elementos de tu web son los que más retardan la carga de la misma para hacer los cambios oportunos.
Minificar los archivos CSS y Javascript
Otra opción relacionada a los recursos es la compresión de archivos CSS y JS.
Comúnmente cuando estamos trabajando con el código de un sitio, agregamos varios espacios entre sentencias y saltos de líneas entre elementos, para distinguir cada parte y que nos resulte más sencillo trabajar, esto es totalmente correcto.
Sin embargo, entre más espacios existan, más pesará el archivo y por lo tanto más tardará en ser descargado.
Para evitar esto, se puede optar por crear versiones minimizadas de los archivos utilizados para definir los estilos CSS o los scripts de la página.
Una técnica muy útil cuando diseñamos páginas web que requieren el uso de JavaScript, o que por motivos de diseño necesitan más de una Hoja de Estilos, es minificar el código, en ingles minify.
¿Qué significa minificar el código de una web?
Simple, se trata de comprimir el código CSS y/o JavaScript para que la página cargue más rápido. O lo que es lo mismo, Minificación es la práctica de la eliminación de caracteres innecesarios del código para reducir su tamaño, mejorando así los tiempos de carga.
Cuando hacemos esto, generalmente eliminamos todos los comentarios, los espacios en blanco, los saltos de línea y las tabulaciones.
Como resultado queda un código dificilmente comprensible de entender, pero que cumple bien su función de reducir el tamaño de los archivos y así reducir el tiempo de carga de la web.
Lo normal cuando se usan estas técnica es tener dos versiones de tus JS y tus CSS, una versión minificada y otra para desarrollo, con los comentarios, espacios, tabulaciones y demás intactos, con la que sea más fácil trabajar si tienes que editar esos archivos en un futuro.
Cuando haces cambios en algún archivo hay que volver a comprimir los archivos y guardarlos, pero no olvidar nunca tener una copia legible del código para poder editarlo con facilidad.
Algunas herramientas online para comprimir el código bastante populares son: JSMin, minify JavaScript y CSS minifier
Compresión de imágenes
Si queremos realizar un cambio notable en los tiempos de respuesta, debemos optimizar las imágenes que utilizamos en nuestro sitio.
Sería imposible de concebir una página web que no utilice imágenes. Tanto para hacer que la parte estética del diseño resulte atractiva como para ilustrar los contenidos, es imprescindible el uso de imágenes.
Sin embargo, las imágenes son unos de los elementos que pueden comprometer más el tiempo de carga de una página web.
Muchas imágenes que son tomadas con cámaras profesionales o que son editadas con programas de diseño, tienden a guardar muchísima información que no es necesaria para el usuario, pero que sin embargo se incluye en la petición de descarga.
Para poder mejorar el rendimiento es necesario remover dicha información y empezar a trabajar con imágenes más ligeras.
Muchas personas se niegan a realizar una compresión de imágenes, porque piensan que esto significa una reducción en la calidad de la imagen en sí, pero la mayor parte del tiempo esto es incorrecto.
Las imágenes se pueden comprimir en cierta forma que no afecte la calidad, removiendo perfiles de color innecesarios y comentarios.
En ocasiones, los iconos y botones pueden ser sustituidas por elementos diseñados con CSS. Esta sustitución resulta muy conveniente, ya que estamos sustituyendo imágenes por unas pocas líneas de código, lo que en el caso de que los iconos o botones sean varios, representa una buena cantidad de kb reducidos.
Para poder realizar esta tarea se pueden utilizar herramientas como ImageOptim o PNGGauntlet.
Uso de CSS sprites
Otra forma de poder optimizar el uso de imágenes en tu sitio, es utilizando sprites. Un sprite consiste básicamente en una imagen grande donde pongas todos los iconos, botones, banners, entre otras gráficas, y a partir de ahí uses un conjunto de coordenadas CSS (background-position) para desplegar cada una de estas imágenes en el sitio que le corresponde.
Con esta técnica se hace sólo una petición a servidor, haciendo que las imágenes carguen más rápido y el navegador no tenga que descargar tantos archivos.
El lado negativo del manejo de sprites, es que puede ser muy difícil para nosotros crear este tipo de imágenes, pero afortunadamente existen una gran variedad de herramientas que nos ayudan a crear CSS sprites:
CSS Sprites Generator: subes las imágenes a juntar en el sprite y la aplicación te crea la imagen padre junto con el background-position adecuado para cada imagen.
Manejo de caché
Más de la mitad de los usuarios que ingresan a tu sitio lo hacen con el cache vacío, por lo que ofrecer una respuesta rápida es fundamental para mejorar su experiencia.
Tanto el navegador como el servidor permiten el almacenamiento de caché, esto significa que puedan guardar peticiones anteriores. Esto significa que todas imágenes, archivos CSS o JavaScript que se pidieron a servidor, fueron guardadas y como tal se presentan ante el usuario, haciendo que el rendimiento sea mejor.
La aplicación de caché se hace sobre archivos que normalmente no cambian, o que lo hacen cada cierto período. Para manejar este segundo tipo de archivos, se puede programar un borrado de caché después de que transcurra cierto tiempo.
En el lado servidor, existen varias herramientas que nos permiten llevar un control de caché, entre ellas encontramos a Varnish y Memcache.
Si usas Wordpress, hay plugins geniales que hacen el trabajo por ti: echa un vistazo a WP Super Cache o WP Total Cache.
Reducción de elementos en Flash
Los ficheros de Flash se cargan en forma muy lenta ya que su volumen suele ser bastante grande.
Nada más tedioso que esperar frente al monitor mientras vemos una barra que nos indica el tiempo de carga, cuando lo que deseamos es acceder a otros contenidos que no se encuentran incluidos en estas animaciones.
Si es posible, hay que evitar que los diseños web tengan este tipo de animaciones, que no redundan en grandes beneficios, ya que seguramente el usuario no ingrese a la página para ver este tipo de elementos y si los contenidos que incluimos.
Enfócate en lo importante, nadie quiere ver tu increíble intro hecha en flash, sino lo que ofreces al los usuarios, ya sean productos, servicios o contenido.
Herramientas online para medir la velocidad de carga
Page Speed Insights
La más recomendable es Page Speed Insights, de Google.
Te realiza un análisis de cómo carga tu web en ordenador y en móvil, y sobre todo, te da recomendaciones de mejora. Hazle bastante caso a lo que te sugiere, porque cada vez es más importante la velocidad de carga para posicionar una web, y a día de hoy dale mucha importancia a la velocidad en el móvil.
Web Page Optimization
También puedes probar Web Page Optimization
Es una herramienta que te ofrece pautas en base a un análisis de los diferentes componentes de tu web, de cosas que podrías cambiar para mejorar la velocidad de carga de tu web.
Al ingresar la url de tu web para el análisis, te devuelve una serie de datos organizados en tablas; como el tamaño de los distintos componentes de tu web (HTML, JavaScript, Flash, CSS, contenido multimedia…), así como el tiempo que tarda en cargar, según la conexión del usuario, cada componente por separado y la web en total.
Lo más interesante de esta herramienta para mí son los datos finales, que ellos llaman “Analysis and Recommendations” ya que son los más fáciles de entender.
Básicamente para cada aspecto analizado (HTML, objetos externos, CSS, imágenes…) te dice si su peso es adecuado o no, y alguna sugerencia general para mejorarlo si procede.
modificado el 3 junio, 2018 12:30
Ver comentarios (14)
se ve bastante buena la herramienta, vamos a probarla a ver que resultados trae
Hola Verónica.
Pues no sabía yo sobre esta técnica de los css sprites. Y realmente se le ve mucha utilidad.
Como tú bien dices, la optimización de sitios web, es fundamental en todo desarrollo web, que vayamos a realizar.
Optimizar el código, siempre lo máximo posible. Y fundamental el apartado de usabilidad y experiencia del usuario.
Ya puedes trabajar en el seo de un sitio web, para aparecer los primeros y que tengas muchas visitas, que como tu web no reúna aspectos básicos en optimización y usabilidad, como también una buena imagen de diseño, el usuario, tal como entra se va.
Saludos
Nosotros pensamos que es una buena opción. Sin embargo, tener que llegar a esos extremos no creemos que sea un síntoma de un Código CSS bien estructurado. Así lo advierten los Organismos oficiales competentes en la materia y principales Herramientas de análisis SEO.
Realmente muy util este articulo..
gracias por compartir..
Mauro.
TuProgramador.com
Muchas gracias por la info, muy importante.
Saludos!!!
Espero que os sirva. Desde luego para mí lo más útil son las recomendaciones finales, muy fáciles de entender a simple vista.
Saludos.
lo mejor de estas aplicasiones son la simplicidad con que muestran los resultados tanto asi que hasta nosotros podemos entenderlos
Creo que, antes de embarcarse en este tipo de optimizaciones, muchas webs deberían optimizar lo obvio; las imágenes, cuyo tamaño en algunas web hace dudar sobre si saben para que existe la comprensión con pérdida o si son conscientes de las posibilidades de los background repetidos, ajustados, o el uso de un simple png con transparencia.
Apurar 50kb comprimiendo un html para volverlo 'ilegible' es algo carente de sentido si la imagen de fondo ocupa 160kb o si las imágens de la página estan redimensionadas a menos.
Vamos, que no es por no optimizar pero... empecemos por lo gordo.
Desde luego que sí, hay cosas más importantes para optimizar. Evidentemente este post no pretende cubrirlas todas ni mucho menos, sólo mostrar al lector una opción más de las existentes a la hora de optimizar páginas web.
Mismamente en otros post y artículos hemos escrito algunas cosas sobre el tema que comentas:
https://www.lawebera.es/xhtml-css/optimizar-editar-imagenes-paginas-web.php
https://www.lawebera.es/como-hacer/ejemplos-html-xhml/anadir-imagenes-web.php
Saludos,
¡Creo que es una opción muy válida!
Hay que optimizar nuestras webs aunque esto requiera esfuerzos, el tiempo de carga cada vez esta más penalizado; porcentaje de rebote y poscionamiento.
Creo que comprimir css es un acierto.
Yo uso este recurso y también el plug-in de Google llamado PageSpeed
que nos da una lista completa de lo que debemos mejorar para que la
carga sea más veloz.
La verdad que la tecnica CSS sprite es verdaderamente muy util, la trato de utilizar cada vez que puedo. Aunque es verdad que no es una tecnica muy moderna ya hace tiempo que se utiliza. En el primer sitio que la vi implementada fue en http://www.google.com hace ya unos años, y todavia la siguen utilizando...asi que debe ser porque todavia es una muy buena tecnica y no muy compleja.
Saludos
Saludos, es buenos saber que hay personas que compartan sus conocimientos sobre las diversas tecnologías y métodos para el posicionamiento de páginas web.
Gracias por su aporte a la comunidad...
Los consejos para mejorar el rendimiento están muy bien. Pero te olvidaste de mencionar la importancia del contenido. Como dices ahora los usuarios buscan respuestas más rápidas por eso para mejorar el contenido se recomienda usar títulos atractivos, dividir el texto en párrafos pequeños y cada uno con un subtitulo.