Frikipandi – Web de Tecnología – Lo más Friki de la red. Web de Tecnología con las noticias más frikis de Internet. Noticias de gadgets, Hardware, Software, móviles e Internet. Frikipandi 
Las páginas web cada vez son más complejas y están creciendo en tamaño con estilos y javascript cada vez más complejos. Debemos intentar mejorar el tiempo de carga de una página y minimizar, ofuscar y desofuscar código Javascript Minify Javascript y Minify CSS nos ayudará en esta tarea.
Si una web no se carga rápidamente en Internet afecta negativamente al SEO ya que es un factor importante y a la navegación de los usuario. Nos producirá disminuciones en navegación, páginas vistas, tiempo de permanencia y si es un ecomerce en ventas e ingresos.También es muy imortante la navegación Web por móviles y tabletas que llegan ya al 40%.
Aquí es donde entra (Web Performance Optimization) (WPO) para mejorar el rendimiento, velocidad, experiencia de usuario y posicionamiento. Lo mejor es Minimizar, ofuscar y desofuscar código Javascript. Minify Javascript y Minify CSS
¿Que es el WPO?
Web Performance Optimization es lo mismo que las optimización de rendimiento web. Podríamos definirlo, como el estudio y posterior mejora del rendimiento de una página web. Debe mejorar el tiempo de carga.
Una de las cosas más sencillas es bajar el número de trazas HTTP y bajas el peso de los ficheros. Juntar todo el Javascript en un único archivo para evitar muchas trazas http y cargarlo de una vez. Pero al ser grande será muy pesado, así que deberemos minimizarlo o ofuscarlo.
Minimizar, ofuscar y desofuscar código Javascript nos ayudará en esta tarea. Reduciremos peticiones HTTP. Deberemos si es posible incluir los CSS en la parte superior (header) y los Javascript que cagan los usuarios en la parte inferior (footer).
Reducir las peticiones HTTP combinando los ficheros CSS o JS en uno solo y minimizar le HTML nos ayudara.
¿Qué es ofuscar el código Javascript? Minify Javascript
La técnica de ofuscación de código consiste en tomar un código JavaScript Y hacerlo más complicado de interpretar para un webmaster o programador. Se oculta la verdadera funcionalidad del código, aunque ya veremos que hy vualta atras.
Como no podemos evitar el uso de un script que hayamos programado (ya que estos son visibles en el código fuente), lo que sí podemos es complicar la tarea con la ofuscación de código.
El código ofuscado tiene la misma funcionalidad pero ahrootra tamño con la eliminación de espacios, saltos de línea y comentarios. Devuelven un resultado en una sola línea que contiene todo el Javascript lo que mejora el tempo de carga del script por el navegador del usuario.
Ventajas de ofuscar código Javascript:
- Mejora el WPO: Reduce los tiempos de carga.
- Ahorrar ancho de banda: A menos peso menor ancho de banda gastaremso , lo que se traduce en un ahorro.
- Dificultar la lectura por los usuarios Dificulta el entendimiento del código y es casi imposible leerlo si no tienes el algoritmo para darle la vuelta.
- Reduce el tamaño: Cuando se ofusca el tamaño es menor que el original. Por ejemplo si usas jQuery sus versiones ofuscadas o minified mejoran el rendimiento.
Minify CSS
Los navegadores bloquean los archivos CSS externos antes de que apliquen formatos al contenido de la pantalla. Esto conlleva latencia de red adicional y aumenta el tiempo de carga del contenido. Tener pocos ficheros CSS y minizarlos mejorar el rendimiento de la Web. Si tienes un CSS muy grande, tendrás que identificar e insertar en el HTML el CSS para el primer pantallazo de página y aplazar la carga de los otros estilos hasta después de que ese contenidos haya cargado. Nuestra recomendación sería tener CSS Reset y los estilos de la cabecera,menús y primer contenido en una hoja de estilos en el head o directamente en línea y el resto en otro CSS más grande. Eso si debe esta minimizados y optimizados pera mejorar el WPO de la página
Os dejo los mejores compresores o minimizadores de CSS
Por mi parte recomiendo CSSMin
Los mejores Ofuscadores de código JavaScript o Minify Javascript
Hay muchas herramientas para ofuscar código JavaScript o minimizarlo. Estas herramientas se conocen con el nombre de ofuscadores.
Os dejamos una serie de ofuscadores y herramientas para minimizar CSS, JS que podrás usar para mejorar tu web.
Por mi parte recomiendo Minify JS y Packer
¿Qué es desofuscar el código Javascript?
Hemos visto que ofuscar código JavaScript mejora nuestra web. Pero y si pierdes el archivo original. No hay que desesperar, ya que normalmente hay marcha atrás para volver a tener código legible si queremos volver a modificarlo para aumentar funcionalidades a nuestra página Web.Sería casi imposible interpretar el código ofuscado.
Desofuscar código Javascript consiste en aplicar algoritmo de ingeniería inversa al código ofuscado y volver a tenerlo en un formato entendible para el programador.
¿Cómo desofuscar código JavaScript?
Existen muchos desofuscadores de código JavaScript, pero para mi uno de los mejores es jsbeautifier.
Tomas código ofuscado y lo pegas en la web jsbeautifier y por arte casi de magia volvemos a tener el código desofuscado y es bastante parecido al original para modificarlo de nuevo.
En Internet todo ser copiado o mejorado. Para mi la razón de ofuscar código Javascript no es protegernos de la copia, ya hemos visto que hay march atras, sino mejorar nuestro WPO y que Google nos valore con mejor puntuación en Insights https://developers.google.com/speed/pagespeed/insights/.
. Leer artículo completo en Frikipandi Minimizar, ofuscar y desofuscar código Javascript. Minify Javascript y Minify CSS.
