¿Pueden cien milisegundos determinar el éxito o el fracaso de un negocio digital? En el proceso de carga de una web, este lapso es suficiente para provocar una caída del 7% de sus visitantes, según reveló un estudio de Akamai. Y si hablamos de un segundo, Google cifra esta pérdida en el 12%, nada menos.

Dicen que el tiempo es oro, y quienes se dedican al diseño web lo saben a la perfección. La velocidad de carga no influye únicamente en la experiencia de navegación. También impacta en el posicionamiento SEO de una tienda o empresa en los motores de búsqueda. Tanto es así que los primeros resultados de las SERPs tardan, por lo general, menos de 1,5 segundos en mostrarse.

De ahí que acelerar la carga de páginas web sea una de las prioridades de cualquier empresa con presencia online. Los gigantes de cada sector invierten fortunas en su optimización… para no perderlas de no hacerlo. Amazon, por ejemplo, estimó en 2012 que perdía 1,600 millones de dólares por cada segundo de carga adicional.

Antes de empezar, ¿conoces la velocidad de tu sitio web?

Para optimizar la velocidad de carga de un sitio web, es importante conocer y monitorear sus métricas clave. Diversos recursos online permiten medirlas con exactitud, gratuitamente además: Google PageSpeed Insights, GTMetrix y Pingdom principalmente, ya analizadas en nuestro artículo dedicado a las herramientas para hacer test de velocidad web.

Pero ¿cuáles son las métricas que debemos monitorear? Cada herramienta aporta sus propias KPIs, en mayor número de las necesarias, incluyendo siempre dos datos clave: Primer renderizado con contenido (lapso necesario para visualizar la página web) y Tiempo hasta que está interactiva (lapso invertido en visualizarse y ser interactiva y funcional una página web); sus denominaciones pueden variar, pero no la información que reflejan.

Además, estas métricas oscilarán en función del dispositivo utilizado para conectarse. Lo más recomendable es monitorear separadamente las KPIs de la versión desktop y de la versión mobile. En este sentido, quizá te interese conocer más acerca del diseño web para dispositivos móviles.

¡Adiós a la lentitud de carga! 5 pasos para acelerar la velocidad de una página web

Paso 1: usa un hosting de calidad y un CDN

La elección del hosting determina la calidad del servidor web o HTTP, responsable de procesar las solicitudes entrantes de los internautas y de proporcionarles códigos que les permitan visualizar la página web. En otras palabras, un servidor opera de forma similar a un dependiente. ¿Y qué sucede si el dependiente actúa con lentitud? Que su ‘tienda’ pierde clientes.

Para aumentar la velocidad de carga web es importante, pues, contratar un hosting con servidores de alta calidad, para garantizar un veloz proceso de la comunicación entre el cliente o internauta y el servidor. De lo contrario, perderás un tiempo valioso optimizando otros aspectos, sin posibilidad de acortar la respuesta de tu servidor web.

La localización del servidor en relación a los clientes influye, por otra parte, en la brevedad de los tiempos de espera. Porque, en teoría, un internauta radicado en España disfrutará de una respuesta más rápida del servidor si éste se ubica en el mismo país; por contra, si el servidor pertenece a un proveedor de hosting extranjero, las solicitudes tardarán un mayor tiempo en procesarse.

Esta dificultad añadida ha popularizado los servicios de CDN o Content Delivery Network. Con el uso de esta redes, tu página web podrá procesar las solicitudes entrantes de tus internautas desde múltiples servidores, en lugar de redirigirlas a un único servidor. Siguiendo la analogía anterior, un CND equivale a disponer de múltiples dependientes, que agilizan la atención al cliente de esta tienda hipotética.

Además de acelerar la carga de páginas web, un CDN evita la saturación del servidor en caso de experimentar picos de tráfico web. Esta sobrecarga, frecuente en épocas señaladas (Black Friday, Ciber Monday, etc.), es a veces consecuencia de ataques DDoS, de manera que una red de distribución de contenidos actúa como escudo frente a ciberamenazas. Cloudflare, MaxCDN y KeyCDN figuran entre los servicios de CDN más populares de internet.

Paso 2: estructura y minifica tu HTML, CSS y JavaScript

Las buenas prácticas en el uso de lenguajes de marcado y programación contribuyen a acelerar la carga de un sitio web. HTML, CSS y JavaScript son los lenguajes básicos, los pilares maestros en los que se constituye una página web. Su estructuración tiene el mayor interés, pues un emplazamiento incorrecto de sus códigos provocaría graves retrasos en el proceso de carga.

Tradicionalmente los recursos de CSS han permanecido en la cabecera del sitio web. Sin embargo, tanto el archivo style.css como los códigos JavaScript deben ubicarse en el footer o pie de página, para así priorizar la carga de otros recursos esenciales, según recomiendan los especialistas en diseño web.

La minificación de códigos HTML, CSS y JavaScript es un paso prioritario para agilizar la carga web.

Después de estructurar estos códigos, procederemos a optimizarlos. Por este motivo, los espacios, comentarios y tabulaciones, tan útiles durante la creación del sitio web, deben ser suprimidos al completar este proceso. La razón es simple: entorpecen su lectura para el programa responsable de interpretarlos, que no necesita anotaciones del tipo «estilo de menú en móviles» para procesar los códigos correspondientes.

De ahí que la minificación de estos recursos sea un paso primordial para cargar páginas web más rápido. Minificar es, según la versión inglesa de Wikipedia, el «proceso de eliminar todos los caracteres innecesarios del código fuente de los lenguajes de programación interpretados o los lenguajes de marcado, sin alterar su funcionalidad». Aunque el HTML, CSS y JavaScript pueden minificarse de manera manual, recomendamos utilizar plugins como WP Super Minify o de recursos online como CSS Minifier, Minify Code o CSS Compressor.

Paso 3: comprime el contenido visual y textual

El llamado Roshal Archive o RAR permitió ahorrar un valioso espacio en disco a los ordenadores de los años noventa, cuando estas unidades contaban con apenas 80 megas. ¿Puede hacerse lo mismo con el contenido de una página web?, ¿comprimirse en una especie de RAR online? La respuesta es sí, y su nombre es Gzip.

Desarrollado en 1992, el Gnu Zip o simplemente Gzip permite comprimir hasta un 70% el contenido de archivos HTML, JavaScript y CSS. Así ocupan un menor espacio y se obtiene mejores tiempos de carga, aunque a costa de la CPU, cuyo uso se incrementará de manera sensible.

Las imágenes y códigos desoptimizados son fuente de retrasos en el proceso de carga.

Además de comprimir los recursos de estilo y marcado, es imprescindible optimizar las imágenes, por su elevado consumo de recursos durante el proceso de carga. Dicha optimización se logra, por ejemplo, especificando al navegar las dimensiones de las fotografías utilizadas; también reduciendo al mínimo el peso de las imágenes con ayuda de plugins como Imagify o de herramientas online como TinyJPG.

Paso 4: habilita y gestiona el almacenamiento en caché

El siguiente paso para acelerar la carga de mi página web consiste en activar el almacenamiento en caché del navegador. Porque Chrome, Edge, Opera y otros navegadores pueden acumular una gran cantidad de información en su memoria interna. La finalidad del caché es ‘conservar’ la información clave de cada página web, para recuperarla rápidamente si el usuario decide regresar, en lugar de enviar de nuevo las peticiones al servidor web. Plugins como W3 Total Cache permiten habilitar esta función en WordPress. Otros CMS, como Joomla, disponen de sus propias opciones, como Speed Cache.

Tan importante como activar el almacenamiento en cache, es especificar el tiempo que permanecerá esta información en la memoria interna del navegador. Este parámetro, conocido ampliamente como leverage browser caching, debe ampliarse o acortarse, de acuerdo al tipo de recurso que procedamos a almacenar. Por ejemplo, determinadas imágenes se actualizan cada mes, no debiendo permanecer en caché más de una semana, mientras que otras jamás se modificarán, por lo que pueden conservarse meses en la memoria interna del navegador.

Paso 5: soluciona errores de sintáxis y plugins conflictivos

Los errores de sintáxis comprenden un amplio abanico de fallos leves y graves, que entorpecen el proceso de carga, así como el buen rendimiento del sitio web. Un ejemplo de fallo leve sería una errata en la escritura del código HTML, CSS o JavaScript, fáciles de detectar y de solucionar. Más graves, sin embargo, son los errores relacionados con enlaces y etiquetas de imágenes rotas, por su dificultad para reemplazar dichos recursos.

Los plugins ahorran un tiempo valioso a los diseñadores webs pero, por contra, tienden a lastrar los tiempos de carga. Reducirlos al mínimo esencial es lo recomendable.

Por otra parte, los sitios web construidos con plantillas de CMS pueden verse ralentizados por el mal uso de plugins. Para acelerar la carga de páginas web en WordPress, por ejemplo, aconsejamos pasar revista a estos complementos, que generan a veces conflictos con el theme e incluso con otros plugins, perjudicando el rendimiento de la página web.

Los plugins, no obstante, no son enemigos de la velocidad de carga en sitios web. En el mercado es posible encontrar complementos destinados a optimizar este aspecto y proporcionar una mejor experiencia de navegación a los usuarios, como WP Optimize, Autoptimize o WP Super Cache, que analizamos en este artículo.