por 
La velocidad y rendimiento con los que carga un sitio web son vitales. Si su sitio sube muy lento muchos no regresarán y posiblemente ese sea un cliente potencial. A Google tampoco la agrada esto, así que cada milisegundo cuenta.
Raphael Caixeta es un desarrollador en PHP y para iOS. El hombre generosamente comparte con con sus seguidores en la red, los 10 Tips for Optimizing Your Website’s Speed. A continuación un breve sumario de esos tips a tomar en cuenta cuando administra un blog o un sitio web.
- 1. Retrase la carga del contenido cuando sea posible – Aplique el concepto lazy loading para diferir Ajax. Las librerías como jQuery, Prototype, y MooTools pueden conseguir precisamente eso, aplazar la carga de los contenidos en su sitio.
2. Utilice archivos JS y CSS externos – Evite contratiempos con el mantenimiento de su sitio y ayude a su website con un adecuado rendering. Cuando un usuario visita su página, lo que el navegador primero carga son son los archivos de CSS y JavaScript. Así que mejor que tenerlos internamente, sirve ponerlos en archivos externos.
3. Utilice sistemas de ‘catching’ – Database caching mejora el rendimiento de sus aplicaciones web reduciendo el trabajo asociado con las doble conexiones de su página a la base de datos, sea para leer, escribir, o simplemente acceder a dichas aplicaciones. PHP por ejemplo tiene aceleradores y dos buenas referencias son APC y memcached.
4. Evite cambiar el tamaño de imágenes usando HTML – Tenemos la costumbre de subir una foto con muchos pixeles y para hacerla pequeña utilizamos los atributos width y height. (así, <img width="400" height="280" src="geeksroom.jpg" /> ). Naturalmente una foto grande es también un archivo más grande. Utilice un editor de fotos para reducir el tamaño de esos pics.
5. No utilice imágenes para reemplazar texto – Los textos a base de imágenes no pueden ser leídos por los lectores de pantalla y no sirven en nada para efectos de SEO. Si necesita fonts a su medida lo mejor es aprender CSS font face.
6. Optimice el tamaño de las imágenes utilizando el formato de archivo apropiado – Al menos que usted necesite de alpha layers (transparencia de imágenes) tal y conforme el formato PNG ofrece, el formato JPG desplega fotos en tamaño menor sin perder la calidad de la imagen. Aquí 8 herramientas para optimizar sus imágenes.
7. Optimice la forma como escribe código – Necesita realmente las tags en HTML o es usted capaz de introducir CSS para mostrar los encabezados? En lugar, por ejemplo, de usar <h1><em>Título</em></h1> usted puede fácilmente —para el que sabe, usar CSS para conseguir las itálicas usando adecuadamente la propiedad font-style.
8. Cargue sus Javascript al final de un documento – La mejor forma para diferir la carga de los Javascripts es al final de la página. Y si es posible, incluya el JavaScript justo antes del cierre de la tag <body> en sus documentos HTML. Su sitio responderá mejor porque el Javascript bloquea que se cargue cualesquier cosa justo debajo de este, antes que él mismo termine descargándose.
9. Trate de utilizar Content Delivery Network (CDN) – Su website se ve afectado por la distancia geográfica del usuario respecto del server que aloja el sitio. El tener ese contenido catched a través de varios lugares solucionará ese problema. Necesitará dinero, pero vale la pena. La recomendación es MaxCDN y Amazon S3.
10. Optimice el Web Catching – Nos referimos al Web caching cuando los archivos son guardados por el navegador para uso ulterior. Los navegadores pueden capturar archivos CSS files, JavaScript e images. Establezca los HTTP response headers tal como Expires y Last-Modified para no tener que re-descargar ciertos archivos cuando un usuario retorne a su sitio web. Para saber más sobre estos protocolos HTTP y el leveraging browser catching visite los enlaces.
[Fuente SixRevisions][imagen CC *n3wjack’s world in pixels]
Concuerdo con la mayoría, sin embargo, hay sitios web o aplicaciones en el que dejar cargar Javascript al ultimo no es ni mucho menos lo mas recomendable, a menos que tu sitio utilice Js para realizar tareas básicas y que el usuario no ejecutara a la primera como validación de un formulario puede ser recomendable, pero cuando es imprescindible Js para la correcta navegación de un sitio puede dar mas dolores de cabeza ya que al ser lo ultimo que carga es muy probable que algunas funciones primordiales no respondan, tal como peticiones Ajax, transiciones en menus (para el despliegue de secciones o sub secciones), etc, y aun mas hoy en día que la mayoría de sitios son enriquecidos con Js, la otra solución es implementar un sitio que realmente no requiera de Js para su navegación en su expresión mas básica(que es lo recomendable), sin embargo hay que ser realistas, la mayoría de desarrolladores no se preocupan por esto…
PD. Me explaye mucho en mi comentario, una disculpa por eso…
Muy interesantes recomendaciones para optimizar un sitio web no sólo de cara a los usuarios, sino también para los buscadores, pues cada día tienen más en cuenta factores para el posicionamiento como el tiempo de carga de una landing page.
Sin intención ninguna de molestar o atacar a nadie. El artículo trae bastantes imprecisiones:
1- El Lazy Loading sirve para aplazar los contenidos en una página de mucho scrolldown, pero no sirve de nada en una página home standar, que ocupe un tamaño medio.
2- La carga de un archivo externo no acelera la descarga en cliente, aunque disminuya el tráfico en nuestro servidor.
4- NO es una práctica habitual transformar el tamaño de imágenes mediante HTML. Se considera un error garrafal digno de principiantes, no «una costumbre».
5- El font face no permite fuentes como Frutiger, pero es verdad que siempre deberían utilizarse fuentes en vez de imágenes.
6- Aunque queramos estar todos en contra de pagar licencias gzip, el GIF suele estar más optimizado en muchos ejemplos. JPEG para fotos. PNG para semitransparencias.
9- Las compañías líderes son AKAMAI y en Europa Cotendo.
10- En realidad tocar los headers se hace para justo lo contrario, eliminar de caché cliente. Porque por defecto no se eliminan ni tienen que caducar.
Emilio – Advertimos que solo se trataba de un sumario y si a vuestro criterio existen impercisiones, apreciamos mucho que las puntualice y así generamos discusión amplia sobre un tema que interesa a todos.
No molesta a nadie, al contrario, eso muestra la calidad de lectores que GeeksRoom tiene. Gracias a Ud. por las puntualizaciones.
También es bueno:
-Disminuir el peso de nuestros archivos HTML, CSS, JS. Hay muchas herramientas para quitar espacios en blanco, comentarios, etc. Podemos tener nuestra versión identada a la que le hacemos cambios y subir la versión ya «comprimida».
-Usar CSS Sprites
-Tratar de usar los menos posibles plugins o scripts de 3eros, es mejor colocar las funcionalidades específicas de lo que queremos y nada extra.