He decidido realizar un nuevo artículo en el cual quiero compartir con ustedes un poco de mi experiencia como diseñador web, en particular todos los consejos para hacer más rápida tú pagina web que vamos a exponer en este artículo los hemos aplicado aquí en Frogx Three, obviamente para beneficio de todos, y no fue tarea fácil.
Estos consejos para diseñadores web son validos y aplicables para cualquier tipo de sitio, desde un blog hasta una landing page, tipos de sitio completamente distintos, vamos a intentar explicar de la manera más clara estos consejos, bien pues espero les sean de utilidad.
Consejos para hacer más rápida tú pagina web
1. Retrasa la carga de tus imágenes
Cuando nosotros cargamos una pagina web el navegador carga todos los elementos en ella hasta completar la misma, un blog como este en el cual utilizamos muchas imágenes puede resultar lento si intentamos cargar el código y las imágenes al mismo tiempo, pero para todo hay soluciones.
Puedes utilizar un script que retarde la carga de imágenes, te recomiendo LazyLoad es un excelente plugin que utiliza jQuery para identificar las imágenes en tu código y retrasar la carga de las mismas, por default el plugin carga las imágenes cuando estas son visibles en el navegador es decir conforme vayamos haciendo un scroll ya sea vertical o de forma horizontal.
Pero también puedes retrasar la carga de las imágenes un par de segundos, en particular esto fue lo que hicimos en este blog con este código.
$(function() {
$("img[data-original]").lazyload({
event : "sporty",
effect: "fadeIn"
});
});
$(window).bind(“load”, function() {
var timeout = setTimeout(function() {
$(“img[data-original]”).trigger(“sporty”)
}, 2000);
});
2. Utiliza imágenes JPG y optimiza su tamaño
El formato de imágenes PNG es un excelente formato, conserva la calidad de las imágenes, permite transparencias e incluso comprime los archivos, PERO no tanto con un archivo JPG, si estas leyendo este artículo es porque necesitas aumentar la velocidad y como los autos de carreras para ser mas rápidos necesitamos optimizar y eliminar algunas cosas, en este caso necesitamos comprimir las imágenes, y para conseguir imágenes comprimidas y de calidad JPG es la mejor opción así que empieza a priorizar el uso de archivos JPG y limita el uso de archivos PNG.
De cualquier modo en ocasiones incluso los archivos JPG son muy pesados, el peso ideal de una imagen es variable según las dimensiones pero consideremos que un tamaño idea es de 65kb, si tu imagen rebasa esta cantidad de kb puedes utilizar Smush It un servicio de Yahoo para comprimir imágenes, si utilizas WordPress puedes instalar el plugin WP Smush.It el cual se encarga de comprimir de forma automática tus imágenes cuando las subas al blog.
3. Optimiza la carga de tus scripts
Es uso de plugins javascript en diseño web es algo muy común ya que permiten realizar muchas acciones de optimización, dotan de interactividad y también ofrecen soporte no nativo a funciones que recién aparecen en Internet pero que no todos los navegadores web soportan.
El uso de Adsense, Google Analytics, jQuery, el mismo LazyLoad que mencionamos más arriba, e incluso el uso de Web Fonts de servicios de terceros resultan ser algunos de los scripts mas comunes en un sitio web, y la gran mayoría son insertados en la cabecera del sitio web en el tag <head> esto no es una regla de oro, conforme las tecnologías han avanzado y la aparición de la carga Asyncronica de scripts esta tarea ha encontrado alternativas.
Mi recomendación es que inserten sus script al final de la pagina justo antes de cerrar el BODY </body>, existen algunos scripts que no funcionan correctamente al insertarlos al final de nuestra pagina así que tengan cuidado, mi recomendación es que al menos jQuery lo sigan insertando en el <head> pero los demás al final, este cambio acelerara significativamente la carga de tu pagina web.
4. Servicios CDN
También es recomendable utilizar los servicios CDN tanto para imágenes como para Scripts y archivos CSS, ya que reducimos la carga y el ping a nuestro sitio resulta más rápido, si no tienes para pagar un servicio CDN en el caso de los Scripts puedes buscar servidores de scripts, Google en particular ofrece este servicio de forma gratuita para algunos de los Frameworks más populares en la pagina Google Hosted Libraries podrán encontrar los enlaces a los archivos que solo tendrán que insertarlos en su archivo HTML, sin tener que descargar nada.
Sobre los servicios CDN no vamos a recomendar ninguno porque no nos pagaron, no se crean es mentira, claro que si recomendaremos, uno muy bueno es Max CDN el cual es utilizado por multiples blogs de renombre, también WordPress y Amazon ofrecen estos servicios los cuales tienen tarifas de acuerdo al consumo de banda ancha y sus bastante atractivas.
5. Utiliza la carga Asyncronica
Para cargar de forma Asyncronica tus scripts existen dos métodos, primero agregando el atributo async, esto solo es posible en HTML5 por lo que solo funciona con los navegadores web modernos:
<script async src="http://tupagina/script.js/">
Otra forma es utilizando el siguiente código:
(function(d, t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = '//third-party.com/resource.js'; s.parentNode.insertBefore(g, s); }(document, 'script'));
6. Más texto que código
Este consejo aplica también para SEO, un sitio web con más código que texto suele cargar más lento por la cantidad de código que el navegador debe interpretar y cargar, todo se trata de escribir menos no es gran ciencia, ¿cierto? pero ¿como lograr resumir tu código?
HTML no esta solo, tiene CSS y JavaScript que son de gran ayuda, un ejemplo es, si tienes botones que ejecuten una acción javascript como abrir un popup evita escribir el código de la función en el enlace, por ejemplo esto:
<a href="#"
onclick="javascript:window.open('yourpage.htm','','height=250,width=400');">
Link or image</a>
Mejor crear un archivo javascript y crear una función por ejemplo:
<script>
function abrirPopup(){
window.open('yourpage.htm','','height=250,width=400');
}
</script>
y convierte tu enlace a esto:
<a href="#" onclick="javascript:abrirPopup">Link or image</a>
El ejemplo es muy simple pero si esto lo consideramos para todo nuestro sitio, obviamente vamos a reducir la cantidad de código, otras recomendaciones es evitar aplicar los estilos CSS directamente al atributo style del elemento HTML, mejor utiliza las clases, es mejor en todos los sentidos, es menos código en tu archivo HTML, resultado en una programación más ordenada y optimiza la velocidad de tu sitio.
Tanto el código CSS, como el código JavaScript evitar insertarlo en los archivos HTML, mejor utiliza archivos externos.
7. Comprime tu código
Al igual que las imágenes el código se puede comprimir, la recomendación básica es siempre comprimir tú código CSS y también el JavaScript, esto resultara en archivos más pequeños y por consiguiente una carga más rápida de nuestro sitio, pero hacer esto de forma manual puede ser un cuento de nunca acabar, por ello les recomiendo CSS Minifer un sitio en el cual podemos comprimir nuestro código CSS y JavaScript, otra recomendación es que siempre tengan dos versiones de sus archivos la comprimida y la descomprimida la cual les servirá para hacer cambios en un futuro si esto fuese necesario.
Si utilizas WordPress existen muchos plugins para WordPress que hacen esta tarea de forma automática con las plantillas de nuestro blog, uno de ellos y muy bueno es WP Minify el cual comprime nuestros archivos e incluso los fusiona en un solo archivo reduciendo las llamadas de archivos CSS o JS a una sola.
8. Carga lo necesario
El último de los consejos para hacer más rápida tú pagina web esta enfocado en el diseño de paginas web responsivas, un pagina web responsiva se refiere a que un sitio web detecta las dimensiones de la ventana de nuestro navegador y muestra o oculta los elementos necesarios que permitan una mejor visualización.
¿Cual es el problema? es que solo oculta los elementos pero estos si son cargados por el navegador, esto es algo imposible de evitar con los CSS Media Queries, la solución la tendremos que implementar con JavaScript o PHP, con cualquiera de estos dos lenguajes podemos detectar el dispositivo desde el cual una persona carga nuestro sitio, una vez detectado podemos saber la resolución del dispositivo y también sabemos que esta no varia mucho a menos que giremos el dispositivo.
Bueno habiendo detectado esto simplemente tenemos que decidir que vamos a cargar, si en el diseño web hemos decidido no cargar las imágenes pero si los títulos entonces, con PHP o Javascript podemos hacer que esto no suceda, un plugin muy bueno para PHP es Mobile Detect, se los recomiendo.
De este modo podemos detectar el dispositivo y cargar únicamente lo necesario para que el sitio funcione correctamente en el dispositivo desde el cual es cargada la pagina.