Clicky

Cómo acelerar los tiempos de carga de tu página

cómo aumentar la velocidad de carga de una página web

Tener un sitio Web rápido es obligatorio para el éxito en la web

¿Quieres que tu sitio web cargue rápido como una bala? Este artículo te enseñará cómo hacer que tu sitio web cargue más rápido de lo que nunca creíste posible.

Para entender por qué es importante tener un sitio web rápido, echa un vistazo a estas estadísticas: el usuario promedio del smartphone dejará un sitio web si no se carga en 3 segundos, Google considera ahora la velocidad como importante para los buscadores, el 75% de los usuarios de Internet están de acuerdo en que no volverían a un sitio web si no se ha cargado dentro de los 4 segundos.

Tener un sitio web rápido es extremadamente crucial para mantenerse con vida en la era moderna del diseño web. Simplemente ya no hay espacio para los sitios web lentos.

Entendiendo los tiempos de carga de una página web

El tiempo de carga de una página web está directamente correlacionada con la demanda hecha por el servidor para cargar la página web. Cuantas más peticiones HTTP con el servidor y se tengan que representar más elementos, más lento será un sitio web.

Ejemplos de peticiones HTTP son:

 cargar hojas de estilo CSS;
 carga de scripts;
 carga de imágenes;
 carga de HTML.

Otro factor que juega en el tiempo de carga de un sitio web es el tamaño de los archivos y las imágenes. Grandes imágenes de alta resolución pueden tomar 10 veces más tiempo en cargarse que las imágenes normales y los archivos innecesariamente grandes pueden ralentizar drásticamente la renderización de las páginas.

El objetivo de hacer un sitio web rápido es hacer que la página web sea más eficiente. Podemos hacerlo a través de hacer una serie de ajustes en la codificación, imágenes y el diseño de nuestro sitio web.

Páginas de seguimiento de velocidad

Podemos rastrear nuestras calificaciones de velocidad a través de la página de Google Google"™s Page Speed Insights y de Yahoo YSlow. Google también tiene un plugin de velocidad de páginas que funciona muy bien con Firefox cuando está instalado Firebug (es el que yo normalmente utilizo). Una buena herramienta en línea, y que usa a la vez Page Speed y YSlow, es GTmetrix.

Firebug - logo

Paso 1: comprimir imágenes

El paso número uno es comprimir todas las imágenes para la web basadas en la calidad. Podemos hacer esto usando el compresor de imágenes predeterminado incorporado en el plug-in de Google Page Speed. Guarda la versión comprimida de la imagen en una carpeta local en el equipo y vuelve a cargar la imagen por FTP en lugar de la imagen sin comprimir.

spriteme

Paso 2: escalado de imágenes

Después de la compresión de las imágenes entonces necesitaremos modificar nuestras imágenes para que se escalen correctamente para el sitio web. Esto evita retrasos en el servidor que ya no tendrá que re-escalar las imágenes al tamaño necesario. Puedes reducir las imágenes en Photoshop adaptándolas a las mismas dimensiones en píxeles que van a estar en el código HTML.

Photoshop escalar imágenes

También es recomendable guardarlas en PhotoShop como "Para web y dispositivos" para reducir su tamaño en Kb (ajustar la opción a una calidad media es prácticamente inapreciable en la pantalla):

Photoshop guardar imagen para web y dispositivos

Paso 3: utilizar memoria caché del navegador

El almacenamiento en memoria caché guarda versiones en caché de los recursos estáticos. Esto acelera tremendamente la velocidad de la página y reduce el lag del servidor. Para habilitar el almacenamiento en caché, tendrás que añadir el siguiente código a tu archivo .htaccess:

# BEGIN Expire headers
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 2592000 seconds"
# END Expire headers

Paso 4: combinar imágenes en sprites CSS

Las imágenes se pueden combinar en sprites CSS para reducir el número de imágenes cargadas en una página determinada. Los Sprites CSS son básicamente una imagen grande que se compone de un número de imágenes más pequeñas. La combinación de 5 imágenes en un Sprites CSS es una forma rápida para acelerar un sitio web al permitir que un navegador cargue una imagen en lugar de 5 imágenes.

La manera más fácil de crear sprites CSS es utilizar Spriteme.

Asegúrate de hacer los cambios adecuados a tu CSS después de crear una imagen sprite. También presta atención a las instrucciones de instalación en su página web. Este programa se utiliza añadiéndolo como favorito (o marcador) a tu navegador.

Spriteme - bookmarks

A continuación edita (en Firefox "Propiedades") el marcador de Spriteme y en la caja localización sustituye la URL http://spriteme.org/ por el siguiente código:

javascript:(function(){spritemejs=document.createElement('SCRIPT');spritemejs.type='text/javascript';spritemejs.src='http://spriteme.org/spriteme.js';document.getElementsByTagName('head')[0].appendChild(spritemejs);})();

Spriteme, editar location

Si ahora pinchas en el marcador de Spriteme deberá aparecerte a la derecha de la página los archivos de CSS que puedes combinar:

Spriteme - rum

Paso 5: aplazar el análisis de JavaScript

El Javascript que se encuentre hacia la parte superior de un documento HTML puede bloquear la renderización de páginas y frenar enormemente una página. Con el fin de diferir el análisis de Javascript, lo mejor es llamar a estos scripts al final de un documento HTML en vez de al principio (Para los CMS hay varios plugins que lo hacen).

También se puede posponer el análisis de JavaScript mediante el atributo defer. El atributo defer se utiliza en el código HTML para diferir el análisis de los javascript hasta que la página se cargue. Por ejemplo:

<script type="text/javascript" src="/includes/general.js" defer="defer"></script>

Paso 6: minify HTML, CSS y JavaScript

HTML, CSS y JavaScript todo puede ser "minificado" o comprimido para acelerar el tiempo de carga. Hay una serie de recursos en la web que minifican estos tipos de archivos, minifier es un excelente ejemplo (también existen multitud de plugins para los diferentes CMS, desafortunadamente para Joomla 3.0 todavía no he encontrado ninguno que trabaje adecuadamente - en Joomla 1.5 y 2.5 uso JCH Optimize que va muy bien).

Otros ajustes y consideraciones

CDNs

También puedes considerar la carga de recursos estáticos de tu sitio web en un CDN o "Content Delivery Network" (Red de Entrega de Contenido). Un CDN es otra manera de reducir drásticamente el retraso del servidor mediante el almacenamiento de recursos estáticos en una red de servidores de carga rápida (para páginas con reducido número de visitas yo utilizo CloudFlare que es gratuito, para otras con mayor número de visitas uso en el server el módulo de Apache mod_clodflare - próximamente haré un tutorial para su instalación en CentOs 6. CloudFlare también tiene plugins para los CMS más populares como Joomla! o Wordpress).

Combinación de JavaScript y CSS

La carga de varios archivos JavaScript y CSS pueden matar el tiempo de carga de una página web. Sitios web basados en CMS que utilizan plugins y características de la plantilla o theme a menudo pueden tener 15 o más archivos JavaScript y otras tantas hojas de estilo en cascada. Estos scripts y hojas de estilo se pueden combinar cada uno en un archivo de gran tamaño. Hacer esto acelera de forma drástica el tiempo de carga de la página y hará que los visitantes del sitio web estén encantados con los tiempos de carga rápida de tu sitio web (como he dicho más arriba existen multitud plugins ya desarrollados para los diferentes CMS).

Desarrollo de sitios web móviles

Al crear aplicaciones de teléfonos inteligentes para los usuarios de teléfonos móviles es importante ceñirse a las directrices para webmasters de Google para aplicaciones de teléfonos inteligentes. Mientras que los sitios web móviles y la indexación de app es todavía un trabajo en progreso por Google, es importante prestar atención a los requisitos de Google para el desarrollo de teléfonos inteligentes. Se esperan importantes cambios en los próximos 5 años en la forma en que Google indexará los sitios web para móviles y aplicaciones móviles. No te sorprendas si la velocidad de la página es una consideración importante en la indexación de Google en las aplicaciones web móviles.

análisis con Page Speed

Conclusión

Al hacer varios ajustes para acelerar nuestro sitio web, reduciendo casi a la mitad el tiempo de carga del website, esto, literalmente, puede ser la diferencia entre la clasificación en la primera página de Google o en la 5ª página. También puede ser la diferencia entre el aterrizaje de 200 clientes y perder permanentemente el 75% de tus clientes debido a la lentitud tiempos de carga de la página.

Tener un sitio Web rápido es obligatorio para el éxito en la web. Como regla general, es una buena idea mantener una puntuación de velocidad de la página de 80 o más en todas las páginas dentro de un sitio web (esta página tiene ahora mismo un score de 95 sobre 100, imagen de arriba, y aún así va muy lenta - básicamente porque "pesa" 1.2Mb-, aplicaré todos los pasos de este artículo para ver si puedo incrementar en algo más su velocidad que ahora está entorno a 4 segundos).

Ver también: Optimizar velocidad de carga de página web con archivo .htaccess

Jesus_Caceres