Los 5 mandamientos de las p√°ginas web r√°pidas

Por Ricardo Cruz, 10 de Diciembre de 2018. Publicado en Rendimiento. 11 minutos de lectura.

Detrás de cada página web hay un sinfín de motivos por los que pueda tardar demasiado en cargar. Este artículo te ayudará a entender las razones y a tomar las decisiones necesarias para corregirlos.

Se reducen a cinco puntos, que se corresponden a los cinco pasos que realiza el navegador a la hora de descargar el HTML de una página web y sus recursos, tales como tipografías, hojas de estilo, imágenes o cualquier otro contenido audiovisual.

  1. Configura el almacenamiento en la caché del navegador
  2. Usa un CDN
  3. Mejora el tiempo de respuesta del servidor
  4. Reduce el tama√Īo de los recursos de tu p√°gina
  5. Reduce el uso de JavaScript

1. Configura el almacenamiento en la caché del navegador

La petición más rápida a un servidor web, es aquella que no se hace.

Al introducir una dirección en el navegador, lo primero que hace es buscar, en su almacenamiento interno, una copia reciente de la página que quieres visitar. De ser así, la petición acaba aquí, consiguiendo tiempos de respuesta de entre 0 y 5 milisegundos (la milésima parte de un segundo).

Salvo en casos particulares, como por ejemplo servicios críticos que tengan que mostrar la cotización de la bolsa en tiempo real, el contenido de una página puede almacenarse en la caché del navegador durante minutos, horas o incluso días. En el caso de los recursos asociados a una página, como las hojas de estilo, pueden permanecer muchísimo más tiempo.

Hay dos maneras de hacerlo: Por tiempo o por contenido.

Una cach√© por tiempo es la opci√≥n m√°s sencilla de entender y configurar. Basta con decirle al navegador, mediante una Cabecera HTTP de Respuesta, que el recurso es p√ļblico y que puede almacenarlo durante la cantidad arbitraria de tiempo que t√ļ quieras.

Piensa en las tipografías especiales que tiene mi página, la primera vez que visitas este artículo, se descargarán junto a la página del HTML, una hoja de estilos CSS y la tipografía que utilizo en los títulos. El contenido de ese fichero con la tipografía nunca lo voy a cambiar, y así se lo he especificado a tu navegador, por lo que la siguiente página de mi sitio web que visites no tendrá que descargarlo de nuevo.

Las imágenes, las hojas de estilo, las tipografías y el JavaScript, salvo necesidades especiales de tu sitio, pueden guardarse durante al menos 15 días en el navegador.

Es tan crucial, o más, planificar y tener bajo control la manera de hacer expirar la caché de un recurso de tu sitio web. Si modificas una zona del HTML de tu página, que depende de un cambio en tus hojas de estilo, hará que se muestre mal, si el navegador no refresca este recurso.

En sitios web sencillos y est√°ticos, tu servidor web, junto con el navegador de tu visitante, har√°n todo el trabajo de manera transparente, el navegador har√° una petici√≥n con una cabecera ‚ÄúIf-Modified-Since‚ÄĚ. Quiere decir algo como ‚ÄúNecesito que me env√≠es de nuevo este recurso, si se ha modificado desde la √ļltima vez que me lo enviaste‚ÄĚ.

Al igual que por tiempo, tambi√©n se puede generar un identificador √ļnico de cada versi√≥n del fichero, por ejemplo, mediante el c√°lculo en MD5 del contenido. El navegador le pedir√° al servidor que le env√≠e el recurso de nuevo en el caso de que el identificador haya cambiado.

En t√©rminos de velocidad, el m√©todo m√°s eficiente para cachear un recurso (CSS, JS, Tipograf√≠as, ‚Ķ), es decirle al navegador que ese fichero no expirar√° nunca. Si haces cualquier modificaci√≥n en ese fichero, deber√°s servirlo bajo otro nombre, por ejemplo, a√Īadi√©ndole los primeros 6 caracteres del c√°lculo MD5 del contenido.

En lugar de estilos.css, por ejemplo, pasaría a llamarse estilos-a1b2c3.css, cambiando a estilos-b1c2d3.css al modificarle el contenido.

Este √ļltimo m√©todo requiere algo m√°s de trabajo, ya que las cabeceras del HTML deber√°n tener calculado el MD5 de la versi√≥n m√°s reciente.

2. Usa un CDN

Si el navegador no ha conseguido mostrar una página web utilizando la memoria caché del paso anterior, le hará una petición a tu servidor pidiéndole el contenido.

Cuanto más cerca esté tu servidor de tu usuario, físicamente, menor tiempo de latencia habrá entre el inicio de la petición y el inicio de la descarga, ya que los datos tendrán que viajar menos distancia durante la ida y la vuelta.

Un Content Delivery Network, Content Distribution Network o, en espa√Īol, Red de Distribuci√≥n de Contenidos, cumple precisamente con esta funci√≥n. Se trata de una red de servidores distribuidos a lo largo y ancho del planeta, que guardan copias de los recursos de tu sitio web.

Cuando un usuario le hace una petición a tu sitio web, a través del CDN, éste le envía el fichero que le envíe tu servidor web, guardándose para él mismo una copia en su memoria caché. Si otro usuario le hace la misma petición y el recurso está dentro del tiempo de expiración, se lo enviará desde su servidor sin necesidad de pedírselo de nuevo al tuyo.

Por hacer una analog√≠a, el funcionamiento ser√≠a similar al de la distribuci√≥n de un libro. Pudiendo comprar el mismo libro en Amazon o en tu librer√≠a local, lo conseguir√≠as tener en tus manos m√°s r√°pido compr√°ndoselo al peque√Īo comercio, siempre y cuando lo tenga en stock (o en la memoria cach√© del CDN, en nuestro caso).

Para usar correctamente un CDN y que aporte beneficios, previamente tendr√°s que haber configurado el paso anterior. En caso contrario, simplemente estar√°s a√Īadiendo un intermediario m√°s entre tu usuario y tu contenido.

Aun sin utilizar su principal característica, que sería mejorar la velocidad de tu web mediante su memoria caché, un CDN aporta beneficios colaterales relacionados con la seguridad, tales como ocultar la IP de tu servidor, o ayudar a mitigar ataques de Denegación de Servicio (DoS).

Algunos CDN populares son Cloudflare o Fastly.

3. Mejora el tiempo de respuesta del servidor

El proceso m√°s r√°pido es aquel que no se ejecuta.

Si ni la caché del navegador, ni la caché del CDN, han conseguido servir el recurso, será labor de tu servidor preparar y enviar el contenido lo más rápido posible.

¬ŅPero cu√°nto tiempo es r√°pido?. Para hacerte una idea, tu usuario percibir√° la carga de tu p√°gina web como instant√°nea si su navegador la reproduce en la pantalla en menos de 80 a 100ms (la d√©cima parte de un segundo). Por encima de ese tiempo, experimentar√°n diferentes escalas de lentitud y frustraci√≥n, siendo su paciencia lo √ļnico que te salve de perder a un posible seguidor, o cliente.

Ten en cuenta que, aun sin tener que procesar tu servidor nada, en esa min√ļscula cantidad de tiempo los datos tendr√°n que recorrer cierta distancia a trav√©s de un cable. Todo lo que tarde tu servidor en procesar la petici√≥n, ser√° tiempo que se le a√Īadir√° a la duraci√≥n del viaje de vuelta de los datos hasta el navegador del usuario.

En un mundo ideal, en cuanto a velocidad se refiere, las páginas web deberían ser conjuntos de ficheros HTML, CSS e imágenes estáticas. En la mayoría de los casos, salvo aplicaciones web, realmente podría ser así. Sin tratar de convencerte más allá de este párrafo, debería ser tu objetivo.

En la vida real, no siempre es posible. Ya sea por ser un sitio web heredado, limitaciones técnicas, o simplemente porque te apetezca utilizar cierta tecnología, o un gestor de contenidos concreto.

En el caso de sitios web basados en Wordpress, Drupal o Ghost, por poner varios ejemplos, es importante utilizar el sentido com√ļn. Todo plugin que sobre, elim√≠nalo. ¬ŅRealmente necesitas un plugin para que el usuario comparta la p√°gina en redes sociales?, les basta con copiar y pegar la URL donde les apetezca, y les apetecer√° m√°s compartirla si es muy r√°pida, gracias a quitar esas extensiones que no te sirven para nada.

A la hora de corregir los cuellos de botella que ocurren al procesar peticiones web de tu sitio, es importante no tratar de suponerlo. Si respaldas tus acciones con datos, podr√°s recortar una mayor cantidad de tiempo con menos esfuerzo, proporcionalmente.

Ya sea combinando herramientas de código libre, como Valgrind, Prometheus y Grafana, como con herramientas comerciales, NewRelic o Datadog, podrás detectar los puntos calientes de tu aplicación que requieran de una atención más urgente.

Indagando en estas herramientas, podrás comprobar si una página concreta de tu sitio web es lenta por estar esperando a una API externa, o porque a una tabla de tu base de datos le falte un índice. Lo importante es que tus decisiones estén respaldadas con datos y no por conjeturas, además de atacar siempre al problema más grave primero.

Y recuerda, una página web lenta propiciará que un atacante pueda colapsar tu servidor con muchísima facilidad.

4. Reduce el tama√Īo de los recursos de tu p√°gina

Incluso si tu sitio web es est√°tico y el tiempo que tarda el servidor en generar las p√°ginas es inexistente, puede que el contenido pese demasiado.

La mejora del ancho de banda en las conexiones a internet de nuestras casas y oficinas, ha propiciado que los desarrolladores web seamos descuidados a la hora de poner a dieta nuestros sitios. Y es un problema grave, porque aunque estas páginas web sean desarrolladas en un ordenador, el uso de dispositivos móviles para acceder a Internet, no deja de crecer.

Una tipograf√≠a demasiado grande, una imagen que no se ha redimensionado al tama√Īo final que va a tener, o sencillamente el uso indiscriminado de JavaScript (que tiene un apartado propio m√°s adelante, en este mismo art√≠culo), har√°n que la tarifa de datos de tus usuarios crezca, as√≠ como la de tu proveedor de hosting.

Si una imagen la vas a mostrar a un tama√Īo de 400 x 300px, comprueba que no se la est√°s enviando al usuario a un tama√Īo de 2000 x 1500px.

Es importante a√Īadir que los servidores web se pueden configurar para comprimir los datos antes de enviarlos al dispositivo de tu usuario, haciendo que los ficheros pesen menos, a cambio de tener que comprimirlos en el servidor y descomprimirlos en el navegador del usuario.

Si tu servidor web es Apache, necesitarás habilitar el módulo mod_deflate. En el caso de Nginx, basta con activar el soporte para gzip. En otra ocasión veremos cómo configurarlo en cada caso.

La mayoría de los problemas de este punto se pueden detectar de manera automatizada mediante el uso de servicios online, y destaco PageSpeed Insights, de Google. Una puntuación de 100 sobre 100 en este servicio es el mínimo a lo que debes aspirar, es el equivalente a una página que carga completamente en menos de un segundo.

5. Reduce el uso de JavaScript

Como punto especial en este artículo, está probablemente la tecnología que mayor cantidad de amor y odio está generando en el mundo de las páginas web: JavaScript.

Al igual que ha ocurrido con la mejora de las conexiones a Internet, la mejora en los procesadores de nuestros ordenadores ha hecho que los desarrolladores nos olvidemos de las limitaciones en los dispositivos móviles. Unido a este problema, se ha extendido un mantra universal que trata de convencernos de que JavaScript es rápido, y no lo es.

JavaScript es lento.

JavaScript es lento incluso en su implementación más rápida, y consume más memoria que el lenguaje que más chistes sobre consumo de memoria genera, Java. JavaScript es entre 12 y 64 veces más lento que un lenguaje de programación compilado, en cualquier test de rendimiento que encuentres, quedándose muy atrás incluso frente a algunos lenguajes dinámicos.

Te invito a que pruebes a navegar por tus p√°ginas web favoritas, activando y desactivando JavaScript.

Lejos de tratar de demonizar a JavaScript, te animo a usarlo siempre que lo necesites para resolver algo que no puedas resolver de otra manera. Men√ļs de acorde√≥n, pesta√Īas, popups y much√≠simos efectos se ejecutar√°n con una rapidez m√°s que aceptable, incluso en m√≥viles de gama baja.

El uso de Frameworks pesados, como Angular, React o Vue, deben quedarse relegados a aplicaciones de escritorio, siendo prohibitivos, a nivel de rendimiento, en dispositivos móviles. Si necesitas generar HTML a partir de JavaScript, siempre debes hacerlo en el lado del servidor, nunca en el navegador del usuario.

Navegadores como Chrome o Firefox, ofrecen herramientas para desarrolladores que te permiten encontrar los cuellos de botella de rendimiento, gracias al Profiling. También puedes simular la limitación de las CPU de dispositivos móviles. Aprenderemos cómo en próximos artículos.

Si el uso de JavaScript es fundamental para tu sitio web (de nuevo, porque no vivimos en un mundo ideal), y quieres mejorar la velocidad, o has detectado problemas de rendimiento, puedes hacer uso de Web Workers. Es la √ļnica manera de aprovechar en una web varios n√ļcleos del procesador, con JavaScript, ejecutando todo el trabajo pesado en ellos, de una manera independiente al interfaz del usuario.

En general, JavaScript debe entenderse como la sal en la cocina. Un plato sin sal puede resultarte soso, pero si te pasas, lo har√° incomestible. Al igual que en la cocina, es muy costoso rectificar un plato (o una p√°gina web de cierto tama√Īo) cuando las pruebas de rendimiento se han dejado para cuando es demasiado tarde.

Conclusión

Una página web rápida no se consigue corrigiendo algo aquí o allá. Como mínimo, será tan lenta como el eslabón más lento de estos cinco pasos:

  1. Una mala configuración de la caché, obligará al navegador a hacer más peticiones a tu servidor
  2. La ausencia de un CDN, hará que los datos viajen más kilómetros de cable
  3. Una tecnología de servidor lenta, afectará al tiempo de respuesta y hará tu sitio web más vulnerable ante ataques de Denegación de Servicio
  4. El tama√Īo de los ficheros que env√≠as a tus usuarios afecta especialmente a los visitantes de tu p√°gina con conexiones m√≥viles m√°s lentas
  5. De todos los problemas de rendimiento que puedas tener en tu página web, el más difícil de corregir es un uso indiscriminado de JavaScript

En próximos artículos podrás leer soluciones específicas para solucionar todos estos problemas.

Sigue leyendo

Las Métricas de Oro para monitorizar tu web

17 de Diciembre de 2018. 5 minutos de lectura
Monitorizar

Si todo lo que se puede medir, se puede mejorar, tiene sentido aprender los puntos más importantes que deberías estar monitorizando para mejorar, de manera constante, tu sitio web.

Descubre cómo hacer volar tu web con mi informe personalizado