Advertisement
  1. Code
  2. General

¡Más de 15 Trucos para Aumentar la Velocidad de Tu Web, y Optimizar Tu Código!

Scroll to top
Read Time: 12 min

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Si ya has estado creando código por un tiempo, empezarás a dar algo por garantizado. Simplemente olvidas lo listo que eres realmente. ¿Cuántos cientos de atajos de teclado hemos memorizado? ¿Cuántos lenguajes hemos aprendido? ¿Cuántos frameworks? ¿Cuántos hacks? Decir que el diseño/desarrollo web es una industria extremadamente dura es ser muy suave. Además, añade el hecho de que gran parte de lo que sabes ahora será considerado obsoleto en pocos años.

Hoy vamos a ver una cosecha de consejos y trucos que ayudarán a los principiantes a acelerar su tiempo de desarrollo, y a codificar con mayor eficiencia. Verás una mezcla de consejos rápidos para ahorrar tiempo, así como trucos específicos de código para aumentar la eficiencia de tus aplicaciones web.

Comprime Aun Más Tus Imágenes

compress imagescompress imagescompress images

Cuando usamos la herramienta "Guardar para Web" de Photoshop, podemos comprimir nuestras imágenes para bajar el peso del archivo.  ¿Pero, sabías que la compresión puede ser más extrema sin por perdida de calidad? Un sitio llamado Smush.it convierte este proceso en una tarea simple.

¿Cómo Es Esto Posible?

El equipo de Smush.it usa una variedad de herramientas.

  • ImageMagic para identificar el tipo de imagen y convertir Gifs en PNG.
  • pngcrush para eliminar porciones innecesarias de los PNGs. Nosotros estamos actualmente experimentando con otras herramientas PNG como pngout, optipng o pngrewrite que te permiten incluso una mejor optimización de archivos png.
  • jpegtran para eliminar todos los metadatos de JPEGs (actualmente deshabilitado) y probar con los JPEGs progresivos.
  • gifsicle para optimizar animaciones GIF eliminando pixeles repetidos en diferentes secuencias.

Los elementos listados arriba se recogieron de Smush.it FAQ Page.

Así que, antes de poner en circulación tu nueva web, procesa tu URL a través de su servicio para reducir todas tus imágenes - y consiguientemente acelerar tu web. Mantente atento - el servicio podría convertir tus archivos GIF en PNG.  También podrías necesitar actualizar consecuentemente tus archivos HTML y CSS. Ya que estamos con el tema, el 99% del tiempo, guardar en PNG es la mejor decisión. A menos que estés usando un pegajoso GIF animado, considera el formato PNG como la mejor práctica.

Sé Astuto. Usa Snippets (fragmentos de código).

snippetssnippetssnippets

Muchos IDEs ofrecen un panel "snippet de código" que te permitirá guardar código para un uso ulterior. ¿Te imaginas a ti mismo visitando lipsum.com con mucha frecuencia para copiar el texto genérico? ¿Porqué no guardarlo simplemente como un snippet? En Dreamweaver, pulsa "Shift F9" para abrir la pestaña de snippets. Ahora podrás arrastrar el snippet apropiado a la ubicación deseada. Esta funcionalidad me ahorra MUCHO tiempo a lo largo de la semana.

Usa Console.log() para Depurar

console.logconsole.logconsole.log

Has descargado la librería jQuery, y estás intentando poco a poco entender la sintaxis. Por el camino, te encuentras en un escollo y te das cuenta de que no eres capaz de descubrir el valor equivalente de $someVariable. Fácil, solo haz…

Ahora, abre Firerfox - asegúrate de que tienes instalado FireBug - y pulsa F12. Te mostrará el valor correcto.

Después - multiplica esto infinitamente y aun así no sabrás lo útil que Firebug y console.log pueden ser. :)

Descarga la Barra de Herramientas para Desarrolladores

web developer toolbarweb developer toolbarweb developer toolbar

Creada por Chris Pederick, este plugin para Firefox increíblemente útil te muestra una plétora de opciones. Muchos de vosotros que seguís mis grabaciones de pantalla ya sabéis que soy fan de la opción "Editar CSS" para ajustar mis estilos en tiempo real. Otras opciones útiles son…

  • Deshabilitar JavaScript facilmente
  • Deshabilitar CSS facilmente
  • Validación Rápida de enlaces HTML/CSS
  • Reglas
  • Deshabilitar cookies
  • ¡Demasiadas buenas características para listarlas todas!

Barra de Herramientas de Desarrollador

Considera Ubicar las Etiquetas de Scripts al Final

snippetssnippetssnippets

Este es un procedimiento que ninguno de nosotros usamos demasiado. Aunque no es siempre factible, en muchas ocasiones puede acelerar tu web colocando las etiquetas de tus scripts cerca de la etiqueta de cierre del <body>.

¿Por qué ayuda esto?

Muchos navegadores actuales pueden descargar hasta un máximo de dos componentes en paralelo para cada nombre de host. Sin embargo, cuando descargas un script, no se pueden ejecutar otras descargas. La descarga del script debe finalizar antes de poder avanzar.

Así que, cuando sea posible, tiene perfecto sentido mover estos archivos al final de tu documento para que otros componentes (imágenes, css, etc) se carguen más rápido.

Cuando Vayas a Publicar, Comprime los Archivos CSS y JavaScript

compress filescompress filescompress files

Si el rendimiento es primordial en tu web, te recomiendo que consideres seriamente comprimir tus archivos CSS y JavaScript justo antes de hacer público el sitio. Tampoco importa que lo hagas al principio de tu desarrollo. Solo causará más frustración que ayuda. En cualquier caso, una vez la proa esté atada, comprime estas criaturas.

Servicios de Compresión para JavaScript

CSS Compression Services

Otras dos herramientas útiles para empaquetar código JavaScript son YUI Compressor y JSMin.

Adicionalmente, tienes la opción de comprimir tu HTML - aunque yo no lo recomendaría. La reducción es inapreciable.

Resumen de "Truco Rápido" para JQuery

jQuery TipsjQuery TipsjQuery Tips

Hace no mucho, Jon Hobbs-Smith de tvidesign.co.uk publicó un fantástico artículo que detallaba 25 trucos para jQuery. ¡Asegúrate de guardar esta página en marcadores! Aquí te indico algunos de mis favoritos.

Comprobar la existencia de un elemento.

Usar un Contexto

Mucha gente no se da cuenta que, cuando se accede a elementos dom, la función jQuery acepta un segundo parámetro - "context". Considera lo siguiente…

Este código requerirá que jQuery surque todo el DOM. Podemos mejorar la velocidad usando un contexto como segundo parámetro.

Ahora le estamos indicando a jQuery que solo busque dentro del elemento .someContainer, e ignore todo lo que queda fuera de él.

Usa IDs en Lugar de Clases

Cuando se accede a IDs con jQuery, la librería usa el método tradicional "getElementById". Pero cuando accede a las clases, jQuery debe usar sus propios métodos para atravesar el dom ( no existe un método "getElementByClass"). Como resultado, ¡el proceso lleva mucho más tiempo!

¡Consulta Todos los 25 Consejos!

Usa $_GET en lugar de $_POST, si es posible

querystringsquerystringsquerystrings

Si tienes la opción de elegir entre $_GET o $_POST al realizar peticiones AJAX, elige el primero.

"El equipo de Yahoo! Mail encontró que cuando se usa XMLHttpRequest, POST es implementado en los navegadores como un proceso de dos pasos: enviando primero los headers, y después los datos. Así que es mejor usar GET, lo cual solo necesita enviar un paquete TCP (a menos que tengas muchas cookies)." - Developer.Yahoo.com 

Recuerda - no uses $_GET a ciegas. Asegúrate primero que sabes exactamente lo que estás haciendo. or ejemplo, bajo ninguna circunstancia deberías mezclar los accesos de la querystring y la base de datos. Hace no mucho tiempo, uno de mis colegas en Twitter me envió una imagen de una web pública que contenía una MYSQL query en la url. ¡NO HAGAS ESTO! :)

Cuando sea Práctico, Usa Librerías y Frameworks

use frameworksuse frameworksuse frameworks

Sea que estés usando PHP, ASP.net, Mootools, jQuery - o una combinación de todos ellos, considera usar frameworks cuando sea adecuado.

Por ejemplo:

  • si estoy gestionando una simple web estática y solo necesitas un poco de Javascript para crear un efecto rollover, importar el script jQuery sería inapropiado.
  • Si la función más complicada de mi web estática es extraer un documento XML, no necesito usar un framework. En esas circunstancias, mi sitio sufrirá y además me costará más dinero en pagos extra por consumo de ancho de banda.

Pero, si estuviese construyendo un sitio complicado que requiere un CMS completo y un acceso de datos complicado, echaría un vistazo a uno de mis frameworks preferidos.

Recuerda - haz que los frameworks trabajen para ti; no al revés. Sé inteligente cuando tomes estas decisiones.

YSlow

ySlowySlowySlow

YSlow es un maravilloso servicio que comprueba tu web para asegurar que es tan eficiente como sea posible. El equipo de Desarrolladores de Yahoo, no hace mucho tiempo, creó una guía con un conjunto de puntos sobre mejores prácticas que se deberían cumplir durante el desarrollo - muchas de las cuales se detallan en este artículo, de hecho.

Hay un fantástica vídeo guía de YSlow que demuestra innumerables técnicas para ahorrar tiempo. Recomiendo enormemente que lo veas cuando tengasoportunidad.

ySlowySlowySlow

Atajos de Teclado. ¡Apréndelos!

templatetemplatetemplate

Muchos diseñadores/desarrolladores experimentados estarán de acuerdo conmigo; si tuviese que ir al menú de la barra de herramientas cada vez que quisiese realizar un cambio en mi sitio o diseño, estaría perdido. He estado usando atajos de teclado por tanto tiempo que no sé ya la localización correcta de estos comandos. Solo sé que "Shift X" abre el panel correcto.

Al principio puede parecer que estás malgastando conocimiento. Pero, te aseguro que no es así. Te recomiendo que hagas una búsqueda en Google para "atajo de teclado para X " - donde X es el nombre de tus programa (p. ej. Photoshop). Imprime el gráfico y colócalo cerca de tu ordenador. Durante las siguientes semanas, practica tocando tu ratón lo menos posible. Esto es algo que distingue a los expertos de los aficionados.

Crea una Plantilla para una "Nueva Web"

templatetemplatetemplate

Afrontémoslo; no todos los sitios web necesitan ser una inmensa y complicada aplicación. Algunas veces, simplemente queremos mostrar nuestro portafolio - ¡la mayoría de las veces para algunos!  En estos casos, porque no crear simplemente una "plantilla" que contenga todo lo necesario para empezar.

Dentro de mi carpeta de plantillas, tengo dos subcarpetas, "JS" y "CSS".

  • La primera contiene my archivo "DD_belatedPNG.js" (añade 24 bits de transparencia a los PNGs en IE6).
  • El último simplemente contiene un archivo en blanco "default.css", y mi propio archivo de reseteado personalizado.

Además, tengo un archivo "index.html(php)" que contiene algunos fragmentos de código (snippets) que uso en la mayoría de mis proyectos. No es nada extraordinario, ¡pero me ahorra tiempo!

Como puedes ver, hago referencia a mis archivos CSS y Javascript, enlace al archivo jQuery de Google, creo la función document.ready() jQuery, y abro el "contenedor" estándar div.

Es un poco simplista, pero AHORRA TIEMPO. Así que cada vez que crees una nueva web, simplemente copia tu carpeta "plantilla" y busca.

Inline o Externo

inline and externalinline and externalinline and external

Generalmente hablando, todo tu CSS y Javascript debería eliminarse de la página y colocarse en sus respectivos archivos externos.

¿Por Qué Deberíamos Hacer Esto?

  • Código Más Limpio
  • Separar el contenido de la presentación es crucial.
  • Usando archivos externos, la información será almacenada en la cache para futuros usos. Esto reduce el peso de los archivos HTML sin causar ninguna petición HTTP adicional - debido a su memorización en la cache.

Si solo tienes unos pocos estilos básicos, podrías hacer una excepción. En estas, y solo en estas ocasiones, sería preferible incluirlos en la página HTML.

Determinar si un Script PHP Ha Sido Solicitado Con Javascript

inline and externalinline and externalinline and external

AJAX está haciendo furor actualmente - en gran medida porque se ha transformado en algo más amigable para el usuario, gracias a las librerías Javascript. En algunos casos, necesitarás un medio para determinar si el script fue llamado mediante Javascript. Existen varias formas de conseguirlo.

Una sería añadir un único par Key-value con Javascript cuando enviamos el POST.  Después podrías usar PHP para determinar si esa Key particular existe. Si así fuese, sabríamos que Javascript está habilitado.

Un mejor método sería usar una función creada con PHP llamada "HTTP_X_REQUESTED_WITH". Para ilustrarlo…

Enlaza con el CDN de Google

link to googlelink to googlelink to google

No hace mucho, Google comenzó a alojar scripts populares como jQuery. Si estás usando una librería de este tipo, es muy recomendable que enlaces al CDN de Google a que uses tu propio script. 

API de las Librerías AJAX

¿Cómo Se hace?

  1. Cachear: ¡Cabe la posibilidad de que tus usuarios no necesiten descargar en absoluto el script! Cuando el navegador detecta una solicitud de archivo que ya ha sido descargado al ordenador del usuario, lo reconoce y devuelve una respuesta "304" (NO MODIFICADO). Por ejemplo, vamos a imaginar que un usuario visita 30 sitios que enlazan al CDN de Google. En este ejemplo, ¡el usuario solo descargaría jQuery una vez!
  2. Paralelismo Mejorado: Ya hablé sobre esto en un consejo anterior. Eliminando esta petición extra, el navegador del usuario puede descargar más contenido en paralelo.

Adopta Las Extensiones de Firefox

embrace firefox extensionsembrace firefox extensionsembrace firefox extensions

Soy un gran fan de Google Chrome. Abre extremadamente rápido y procesa Javascrip con más velocidad que cualquier otro navegador - al menos por ahora (creo que la última versión de Firefox podría sacarle ventaja).

De cualquier forma, no me verás dejando Firefox pronto. El número de plugins útiles disponibles para el navegador es alucinante. Aquí va una lista con mis favoritos.

embrace firefox extensions

Cuando Sirva de Ayuda, Usa un IDE

use an ideuse an ideuse an ide

De la misma forma que ahora parece guay odiar a Microsoft, parece que es popular actualmente entre la gente atacar a aquellos que usan IDEs (Integrated Developmente Environment) durante el desarrollo. Esto es simplemente estúpido.

En muchos casos, el uso de un IDE avanzado primordial - especialmente cuando trabajas con lenguajes OOP (del inglés Object Oriented Programming, programación orientada a objetos). Ahora, si estás creando simplemente una pequeña plantilla HTML. programas como Notepad++ y Coda serán suficiente. De hecho yo recomendaría su uso en estos casos. No te complique más de lo necesario. Pero, cuando desarrolles aplicaciones avanzadas, aprovecha las ventajas de un IDE. 

¡Esto Es Todo Amigos!

Esto te será muy útil de momento. Espero que algunos de estos consejos (quizá todos) te ayuden a mejorar como diseñador o desarrollador.  ¡Cuáles son tus atajos favoritos? ¡Cuéntanoslo dejando un comentario abajo!


Please subscribePlease subscribePlease subscribe


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.