Cómo acelerar la carga de páginas web en 5 pasos

acelerar la carga de p√°ginas

Cómo acelerar la carga de páginas web en 5 pasos

¬Ņ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.

acelerar la carga de p√°ginas web hosting

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.

acelerar la carga de páginas web minificar código

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.

acelerar la carga de p√°ginas web-imagenes

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.

acelerar la carga de p√°ginas web plugins

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.