10 Tips para que tú página cargue más rápido.
Posted on 14-10-2009 | By: Víctor Martínez | 
(No Ratings Yet)
Loading ...
Category : Customization, HTML, Internet, Soluciones, Tutoriales
Revisando unos de los artículos ya publicados llegué a la conclusión de que había mucho más que decir del tema, es por esto que ahora mejoro la lista agregando 5 nuevos elementos. La lista original la pueden encontrar aquí.
Tienes tu hermosa página de internet, con decenas de fotos, botones, estilos, colores y todo lo que las páginas de hoy utilizan. El único problema es que le toma más de 30 segundos cargar, lo que realmente minimiza la experiencia de tus usuarios. ¡Pero hay solución! He aquí algunos tips para mejorar el tiempo de carga de una página web o blog:
-
Utiliza firebug y YSlow.
Cómo empezar a mejorar la velocidad del sitio si no sabes lo que lo hace lento. Estas dos extensiones para firefox encuentran los puntos débiles de tu sitio en cuestión de segundos, reportandolos en tablas o gráficas comparativas. Incluso te permiten medir el tiempo de carga antes y despues. [Firebug para Firefox] [YSlow para Firefox] -
Comprime tus archivos utilizando GZIP.
Comprimir tus archivos utilizando GZIP es cuestión de agregar las siguientes líneas a tu archivo .htaccess (suponiendo que tu servidor, como muchos, es un Apache Server):#GZIP COMPRESSION
<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
#END GZIP COMPRESSIONComo pueden ver del código, si se tiene el módulo necesario para comprimir los archivos, entonces se comprimen. Los archivos a comprimir son del timpo .js o .css, pero uds pueden incluir cualquier tipo (como por ejemplo HTML).
-
Permite que tus imágenes y HTML,CSS,JS sea guardados en cache.
El cache es una colección de datos que duplica valores guardados o calculados previamente, donde la obtención de la información original resulta costoso. En español claro, es un medio para guardar información. Así, para mejorar la velocidad de carga de un sitio, podemos guardar las imágenes y scripts en cache para que el usuario no necesite volver a cargarlas desde nuestro servidor.
Para habilitar el cache desde el archivo .htaccess, será necesario agregar las siguientes líneas:##Turning the EXPIRES ENGINE
ExpiresActive ON#Cache
ExpiresDefault "access plus 48 hours"
ExpiresByType application/javascript A900
ExpiresByType application/x-javascript A900
ExpiresByType text/javascript A1800
ExpiresByType text/html A90
ExpiresByType text/xml A90
ExpiresByType text/css A900
ExpiresByType text/plain A62
#ExpiresByType TipodeArchivo ATiempoEnSegundos
#END CACHE DIRECTIVEEste código iniciará el motor de cache, necesario para las siguientes instrucciones, y dependiendo del tipo de archivo agrega un tiempo de expiración. Ese tiempo corresponde a los segundos que pasan desde la última vez que el usuario accedió al archivo (3600-1Hr, 86400-1Día, 604800-1Semana, 2678400-1Mes). Por defacto, utilizamos un tiempo de expiración de 48 horas desde el ingreso.
-
Utiliza CSS Sprites.
Sin lugar a dudas la técnica más singular de la lista. La idea detrás de los CSS Sprites es la misma que se les ocurrió a los programadores de videojuegos años atrás: Cargar todas las imágenes que se van a utilizar en una sola plantilla e irlas cortando y separando conforme se utilizen. Les recomiendo ojear este artículo donde explica a fondo como implementar las ideas de los CSS Sprites en su sitio. -
Evita las reducciones de tamaño en HTML.
Reducir o agrandar imágenes en tiempo de ejecución es bastante costoso. Resulta más efectivo que el explorador pida la imágen y sepa desde ese momento cuanto espacio requiere y dónde la va esa imagen.
Sigue un orden en tú código: HTML,CSS,JS.
Entender como funcionan los exploradores actuales es de primordial importancia a la hora de mejorar un sitio. Hoy en día, cuando un explorador encuentra un javascript en el sitio, se detiene a ejecutarlo y luego continua con el resto del documento. Ahora bien, cuando un explorador encuentra CSS lo interpreta y despliega un resultado rápido de acuerdo a los requisitos en la página.
Al escribir el CSS dentro de la cabecera del documento (<head>), obligamos a que el explorador muestre la página de manera progresiva, mientras que al escribir JS hasta abajo del documento, impide que el explorador se pasme al leer esa línea.-
Usa JS y CSS externos, minimiza la cantidad de solicitudes.
Al utilizar los scripts en archivos externos, estos pueden ser guardados en cache (ver punto 3) lo cual implica menos solicitudes HTTP, que nos lleva a una página más rápida. De la misma manera, se recomienda mezclar todos los documentos CSS y JS en un documento gigante que lo contenga todo, reduciendo todas las solicitudes a solo una.
-
Evita páginas personalizadas de 404.
Las páginas de error suelen ser un desperdicio de recursos, capturando muchas solicitudes HTTP para dar una respuesta inútil (404-No encontrado). Incluso páginas que contienen información útil (“No encontrado, pero tal vez le interese éstos artículos…”) representan un desperdicio de recursos por el lado del servidor. -
Optimiza tus imágenes.
Incluso después de comprimirlas, las imágenes son de los recursos más pesados que se solicitan muchas veces al servidor. Por esta razón es que dedicarles un poco más de tiempo antes de subirlas al servidor puede repercutir en una mejor experiencia para el usuario. Se recomienda el uso de PNG o JPEG comprimidos y optimizados para web. (The GIMP y Photoshop tienen la opción de optimizar las imágenes automáticamente. Otra recomendación sería utilizar el servicio Smush.it)
-
Simplifica tú página.
En caso de la experiencia del usuario, menos es más. Y citando el ejemplo más conocido por todos, ¿Cuántas imágenes ven en este sitio? ¿Cuántos GIF’s animados? ¿Cuántos archivos flash?
¿Les funcionaron estos tips? ¿Requieren ayuda? Nosotros la brindamos, sólo dejen sus comentarios.
[...] 2009Filed Under Blog, Customization, HTML, Internet, Links, Soluciones, TutorialesHace poco repasé 10 tips para hacer que tú página o blog cargara más rápido. Uno de los puntos tratados fue el uso de CSS Sprites, que por más difícil que suene son bastante [...]
[...] Les recomiendo checar la lista original, aunque está diseñada para usuarios avanzados. Si lo que buscan son opciones poco más terrenales los invito a visitar nuestra guía para hacer que una página web cargue más rápido. [...]