Credit image

¿Navegador lento? Guía para acelerar Chrome

¿Chrome va muy lento? ¿Tienes problemas con el navegador? En este artículo damos un repaso a una serie de consejos para mejorar su rendimiento.

Si te hicieran la pregunta «¿Cuál es el programa que utilizas con más frecuencia?», muy probablemente la respuesta sería el navegador web. Aunque Mozilla Firefox le suele seguir en el segundo puesto, Google Chrome es el navegador más utilizado con gran diferencia.

Las razones suelen ser muy variadas: funcionalidades, velocidad, estabilidad, implementación y actualización constante con mejoras y características técnicas, gran comunidad de extensiones, facilidad de uso e integración con servicios web y un largo etcétera.

¿Navegador muy lento? Guía para acelerar Google Chrome

De hecho, si también preguntáramos cuál es el principal problema de Google Chrome, es muy probable que obtuvieramos la misma respuesta: su alto consumo de memoria RAM. Lejos quedaron los días en los que los navegadores eran sencillas aplicaciones para mostrar una simple página web. Actualmente tienen soporte de pestañas para abrir múltiples páginas a la vez, extensiones que modifican el comportamiento del navegador (o de la página que visitas), posibilidad de reproducir audio y video nativamente, o incluso de generar contenido multimedia 3D para crear animaciones o juegos en los que se utiliza la tarjeta gráfica del sistema. Todo esto, se refleja en el consumo de recursos del sistema, por lo que podemos necesitar un equipo potente dependiendo del uso que le estemos dando.

Comportamiento habitual de Google Chrome

Resumiendo: una de las principales preocupaciones de los usuarios al utilizar Google Chrome es que el navegador puede ser bastante lento. En gran parte, esto es tarea de los desarrolladores de Chrome, aunque nosotros también podemos ajustar al máximo ciertos detalles del navegador para que funcione lo mejor posible. En este artículo hablaremos precisamente de eso: Cómo conseguir que nuestro Chrome sea más rápido.

Gestión de memoria: Chrome consume demasiado

Como habíamos mencionado, uno de los mayores problemas de Chrome suele ser que consume demasiada memoria RAM. Esto normalmente ocurre porque tenemos sobrecargado el navegador con muchas características que puede que no estemos utilizando. El primer paso debería ser analizar e investigar cuanto consume Google Chrome y que partes son las que más RAM están utilizando.

Pulsando CTRL+SHIFT+ESC, podemos acceder al Administrador de tareas de Windows (o usar el del sistema que estemos utilizando) y veremos lo que consume cada ventana del navegador (proceso chrome.exe), pero no cada parte individual. Sin embargo, Google Chrome tiene su propio administrador de tareas, donde se puede diferenciar y ver la memoria que está utilizando cada pestaña o página abierta y cada extensión cargada en el navegador.

Administrador de tareas de Google Chrome

Para ello, simplemente pulsamos SHIFT+ESC (o botón derecho sobre la barra de título del navegador y seleccionar Administrador de tareas). En esa ventana podemos ver el consumo de RAM (Memoria), el uso de procesador (CPU) o el uso de conexión (Red). También podemos pulsar con botón derecho sobre la cabecera y activar columnas como Memoria de Javascript, Memoria de la GPU o Caché de imagen entre otros, para saber cuanto están consumiendo en cada sección concreta, lo que puede ser especialmente útil para los desarrolladores.

Mediante este panel, podremos averiguar que páginas son las que más memoria consumen, ya que como podemos ver, no es lo mismo abrir Spotify que abrir Twitter. También podemos abrir una nueva pestaña y escribir el siguiente texto: chrome://memory-redirect. Esto no es más que una página interna especial de Chrome que nos muestra información técnica e incluso la opción de comparar la memoria que consumen otros navegadores, respecto a Google Chrome.

Deshabilitar extensiones prescindibles

El lector habrá llegado a la conclusión más evidente de esta guía, quitar extensiones que no utilice de Chrome. En el punto anterior, se reflejaban dichas extensiones y cuanta memoria RAM consumía cada una. Esto nos puede servir para detectar si existe alguna extensión que esté consumiendo demasiado, o simplemente para revisar y desactivar temporalmente.

Puedes desactivar temporalmente extensiones de Google Chrome

Podemos pulsar en el botón de las 3 líneas (hamburguesa) y seleccionar Más herramientas / Extensiones, o simplemente escribir chrome://extensions/ en una nueva pestaña. Con esto llegaremos a un panel de configuración donde podemos eliminar o deshabilitar temporalmente las extensiones, para que no consuman memoria RAM.

Cada usuario debe considerar las extensiones que son necesarias para sus hábitos de navegación y cuales puede desactivar temporalmente o eliminar por completo.

Y hablando de hábitos... Aunque no esté directamente relacionado con la velocidad del navegador, adquirir buenos hábitos con el método geek conseguirá aumentar nuestra productividad y ahorrar tiempo.

Desactivar pestañas inactivas

En este punto, el usuario podría pensar que cuantas más extensiones desactive o elimine, más memoria ahorrará. Y es cierto, salvo con una excepción: The Great Suspender. Si eres de los que tiene el hábito de dejar múltiples pestañas abiertas, probablemente para revisar después aunque al final no lo hagas por cuestiones de tiempo (no estás sólo, te entendemos), esta extensión te vendrá muy bien.

Se trata de una extensión que vigila nuestro navegador y suspende las pestañas que llevan más de cierto tiempo sin utilizarse. Cuanto más tiempo pasa, menos probable es que volvamos a esa extensión que tenemos pendiente en el navegador, por lo que con esta extensión seguimos teniendo las pestañas en nuestro navegador, pero no consumen memoria RAM en absoluto.

The Great Suspender: Suspende las pestañas que no estés utilizando

The Great Suspender | URL

La extensión es muy personalizable y nos permite reanudar la pestaña simplemente pulsando encima. También nos permite indicar una lista blanca de sitios que no queremos que se suspendan, especificar el tiempo para empezar a suspender pestañas, recuperar automáticamente pestañas cuando se pulse en ellas, suspender pestañas sólo cuando estés con una batería y muchas otras opciones más.

Si por alguna razón, esta extensión no te convence, tienes otras alternativas como Tab Hibernation, Tab Memory Purge o Tab Mem Free. También tienes Tabs Outliner, un poco más orientada a la organización de pestañas.

[...]

Queda el 60% del artículo
Leer artículo completo

CodePen: la mejor plataforma front-end

CodePen es, probablemente, la mejor herramienta/plataforma de front-end, donde puedes practicar con HTML5, CSS3, Javascript y muchas herramientas relacionadas. En este artículo les damos un repaso.

Este mes cumplo un año desde que comencé a dar clases de Diseño y Desarrollo web mediante la Oficina del Software Libre de la Universidad de La Laguna (divulgación de desarrollo web utilizando estándares abiertos desde equipos con GNU/Linux... un paraíso para un friki como yo). Después de más de 15 ediciones y más de 350 alumnos formados, tengo claro que CodePen es la mejor plataforma que pude haber elegido para comenzar a dar los cursos de front-end.

CodePen es una plataforma de desarrollo creada por Chris Coyier donde puedes publicar pequeñas páginas donde hacer ejemplos y trastear con fragmentos de código con una experiencia muy agradable. Suelo equipararlo a una «especie de Youtube para diseñadores y desarrolladores web», ya que puedes usarlo tanto para ver que han hecho miembros de la comunidad o para crear tu propia cuenta de usuario y hacer tus propias publicaciones.

Codepen, la mejor plataforma front-end (HTML5, Javascript, CSS3)

Lo bueno de CodePen es que es ideal para usuarios que están aprendiendo, pero a la misma vez es estupendo para usuarios que ya tienen experiencia, porque tiene una gran cantidad de características avanzadas a nuestra disposición, listas para utilizar de forma cómoda y práctica.

1. Separación de presentación, contenido y programación

La primera ventaja de CodePen (al igual que otras plataformas del mismo género) es la de marcar claramente la diferencia entre cada tecnología: HTML para contenido, CSS para presentación y Javascript para programación. Esto ayuda a los usuarios nóveles a diferenciar bien cada lenguaje y acostumbrarse a utilizarlo en una capa diferente de otra, sin mezclarlo.

Separación de presentación (CSS3), contenido (HTML5) y programación (JS)

A medida que vas escribiendo código, la plataforma actualiza automáticamente el contenido y lo va mostrando en la parte inferior (en blanco, en la imagen), donde se ven los resultados al combinar el HTML, CSS y Javascript escrito. Esto es lo que CodePen llama pen (equivale a los videos de Youtube).

2. Soporte de preprocesadores

Probablemente, una de las funcionalidades estrella por las que me encanta CodePen es su amplio abanico para utilizar los preprocesadores más famosos. Los preprocesadores son lenguajes independientes (generalmente, más amigables, potentes y prácticos) que son capaces de traducir el código al lenguaje de destino (HTML, CSS, Javascript...), que es el único lenguaje que el navegador es capaz de «entender» de forma nativa.

Actualmente, CodePen soporta preprocesadores de HTML enfocados a la programación como HAML, Jade (de mis preferidos), Slim o Markdown, este último más orientado a publicación rápida de contenidos. Por su parte, también soporta preprocesadores de CSS como LESS, SASS (tanto SASS como SCSS), Stylus o PostCSS, este último una auténtica navaja suiza para el preprocesado de estilos.

Soporte de preprocesadores

Por último, Codepen también admite seleccionar preprocesadores de Javascript como CoffeeScript, LiveScript o TypeScript, lenguajes más amigables que transforman en código Javascript válido, aunque quizás la mejor opción es Babel (antes conocido como 6to5) que permite escribir código Javascript ECMAScript6 y traducirlo a Javascript ECMAScript5 (el que soportan la mayoría de navegadores actualmente). De esta forma podemos escribir código con las últimas mejoras de Javascript y estar preparados para el futuro.

3. Características avanzadas

Al margen del soporte de los preprocesadores mayores comentados anteriormente, CodePen también va integrando herramientas muy útiles. Por ejemplo, una de ellas es un preprocesador menor llamado Autoprefixer, que se encarga de añadir (de forma transparente al usuario) los prefijos de las propiedades CSS que lo requieran en el momento de escribir el código. De esta forma no tenemos que preocuparnos de esos prefijos que son tan engorrosos (y difíciles de mantener).

Autoprefixer, añade prefijos CSS de forma transparente

Internamente, Autoprefixer se conecta a la base de datos de CanIUse y utiliza los prefijos oportunos según la situación actual de los navegadores. Actualmente, Autoprefixer forma parte de PostCSS donde puedes configurarlo y personalizarlo muy facilmente.

Por otra parte, también tenemos integrado Tidy, una herramienta que nos permite limpiar, indentar y organizar nuestro código HTML de una forma rápida y sencilla. Ojo, aunque esta característica es muy interesante, no es la solución mágica a todos nuestros problemas de organización, pero viene muy bien para usuarios que están aprendiendo. Además, en las opciones de CodePen puedes especificar si prefieres tabuladores o espacios.

Tidy, limpia el código HTML

Por último, en las capas de CSS y Javascript tenemos la opción de utilizar Linters (botones Analyze CSS o Analyze JS), que no son más que herramientas que analizan nuestro código e intentan darnos recomendaciones para mejorar nuestro estilo de codificación. A pesar de ser una gran herramienta, aconsejo utilizarlo con precaución y sólo por usuarios experimentados. Usuarios nóveles pueden encontrarse con dudas de conceptos, ya que muchas de estas herramientas dan consejos subjetivos o que dependen del contexto, y que podrían confundir al usuario.

[...]

Queda el 63% del artículo
Leer artículo completo

Guía: Programas imprescindibles para Windows 10

Listado de programas imprescindibles (la mayoría open source y/o multiplataforma) junto a varios consejos y trucos en el uso cotidiano de escritorio, ¿nos ayudas a completar la lista?

A lo largo de los años utilizando Windows, nos acostumbramos a utilizar ciertas aplicaciones que nos hacen la vida más fácil y cómoda. Aprovechando el reciente lanzamiento de Windows 10 quiero lanzar una sencilla pregunta a mis lectores: ¿Cuáles son tus aplicaciones imprescindibles al utilizar Windows?

¿Cuáles son tus programas imprescindibles para Windows?

En este artículo mostraré una gran lista de los programas que considero imprescindibles al trabajar en Windows. Algunos de ellos son multiplataforma u open source, pero todos son gratuitos (o tienen una versión gratuita). Insisto, es una lista subjetiva, bajo mi opinión, de los programas que elijo y porqué razón o que característica tienen para elegirlo, por lo que me gustaría que si encontráis algo útil en ella, también aportéis algo en los comentarios. ¡Vamos allá!

Nota: Si eres un usuario avanzado, salta directamente al último punto antes de leer los demás; doy un consejo bastante útil para la instalación de programas por parte de usuarios avanzados.

1. Personalización del sistema

Quizás, una de las razones más populares para no pasarse a nuevos Windows (como Windows 8 o Windows 10) es el repentino cambio a un nuevo y diferente menú de inicio, ya sea por costumbre, por pérdida de productividad o por gustos estéticos. ClassicShell es un fantástico programa que sustituye el nuevo menú de inicio por el clásico de Windows XP (en formato mini o ancho) o por el menú de inicio de Windows 7. Además, también permite reemplazar el icono del menú de inicio u otras opciones interesantes.

ClassicShell, utiliza los menús de inicio clásicos de Windows

URL | ClassicShell

Por otro lado, otra consulta popular es cómo modificar las horribles barras de título blancas de Windows 10. Existen vías complejas de cambiar temas o volver a los temas de Windows 8 en Windows 10, sin embargo, la opción más cómoda es descargar WinAero Tweaker, un programa mediante el cuál podremos ir a Appearance / Colored title bars y pulsar sobre Enabled colored title bars para activar esta funcionalidad cómodamente. Para modificar el color de las mismas, basta con pulsar la combinación de teclas Win+R y escribir lo siguiente:

C:\Windows\System32\rundll32.exe shell32.dll,Control_RunDLL desk.cpl,Advanced,@Advanced

Con esto accedemos a un menú oculto heredado, donde podemos cambiar dichos colores, intensidad o tonalidad. WinAero Tweaker tiene muchas opciones más, no sólo de apariencia sino también de comportamiento.

2. Compresores

Aunque Windows es capaz de abrir archivos comprimidos .ZIP, muchos formatos de compresión como .RAR o .7Z se quedan fuera del soporte integrado del sistema operativo. Uno de mis compresores favoritos es 7-Zip, que soporta la mayoría de formatos y comprime con el estupendo 7Z, con un ratio de compresión que mejora a muchos otros formatos.

No obstante, recomiendo instalar Easy 7-Zip (E7Z), que no es más que 7-Zip con una serie de mejoras que lo harán más cómodo: acciones en el menú contextual, opciones rápidas para borrar o abrir carpeta destino o descomprimir en background, entre otras.

Easy 7-Zip, un 7-Zip más cómodo

URL | Easy 7-Zip

En «La guía definitiva de formatos de compresión» hablo de todos los formatos de compresión existentes (si conoces alguno que no está en la lista, me sorprendería :P), así como tablas comparativas de formatos y algunos compresores no muy conocidos como BandiZip, PeaZip o FreeArc, este último ofreciendo muy buenos ratios de compresión.

3. Explorador de archivos alternativo

Aunque el Explorador de archivos de Windows 10 ha cambiado ligeramente a mejor, tiene varios problemas que lo convierten en una perdida de tiempo (al menos, personalmente). Nunca me acostumbré a Ribbon y hay características que echo mucho de menos como pestañas (al estilo de un navegador web) o calcular el tamaño de las carpetas (y no sólo de los ficheros). XYplorer Free es una alternativa más que válida que incorpora todas estas ventajas, junto a muchas más. El interfaz es compacto y muy elegante.

XYplorer Free, un explorador de archivos alternativo al que no le falta de nada

URL | XYplorer Free

No obstante, si no te convence este explorador de archivos, en el artículo 20 alternativas al explorador de archivos de Windows tienes varias opciones como Explorer++, Far Manager si te gustan los exploradores al estilo MSDOS o Total Commander si eres de la vieja escuela. Q-Dir es una opción gratuita que también gusta a muchos.

[...]

Queda el 84% del artículo
Leer artículo completo

Javascript Cheatsheet (Chuleta JS)

Chuleta o cheatsheet de Javascript (lenguaje de programación web) en formato PDF. Incluye chuleta adicional con características del navegador (BOM) y el documento (DOM).

Si eres desarrollador frontend, programador o simplemente te interesa el diseño de páginas webs, quizás esta chuleta (cheatsheet) te interese. Se trata de Lenguaje JS, un lenguaje de programación muy popular en la web, debido a que se integra e interpreta en los navegadores web, lo que lo hace ideal para incorporar junto a nuestras páginas webs, dotando así de potentes funcionalidades que quizás con HTML5 o CSS3 son imposibles o muy complejas de realizar.

Además, con el tiempo, Javascript ha pasado de ser un lenguaje del lado del cliente a funcionar también como lenguaje del lado del servidor (NodeJS, por ejemplo) o en otros ámbitos (archivos PDF, programas o aplicaciones, etc...)

Javascript Cheat Sheet (Programación web, chuleta JS)

Esta cheatsheet doble te será muy útil si estás aprendiendo, tienes mala memoria o quieres tener en un sólo lugar de consulta rápida los objetos, propiedades, métodos y otras características del lenguaje Javascript.

Contenido

En esta ocasión, y tras la chuleta CSS3, que se encarga del aspecto visual de una página web, y la chuleta HTML5, que incorpora las etiquetas del reciente lenguaje de marcado HTML5, nos encontraremos con una chuleta Javascript doble.

Primera página:

Javascript Cheatsheet. Página 1
  • Tipo de dato Number: Objetos numéricos
  • Tipo de dato String: Objetos de texto
  • Tipo de dato Boolean: Objetos de verdadero o falso
  • Tipo de dato Date: Fechas
  • Tipo de dato RegExp: Expresiones regulares
  • Tipo de dato Function: Funciones

Segunda página:

Javascript Cheatsheet. Página 2
  • Objeto estático de operaciones matemáticas: Math
  • Objetos genéricos (Tipo de dato Object).
  • Otros: Set, Map, WeakSet, WeakMap, Promises, Proxy, Symbols...
  • Consejos rápidos (var, let, const, function, string templates, etc...)

Tercera página:

Javascript Cheatsheet (BOM). Página 3
  • Browser Object Model (BOM)
  • Objeto Window (manipulación ventana actual del navegador)
  • Objeto Screen (manipulación de pantalla o resolución)
  • Objeto Console (utilización de la consola del navegador)
  • Objeto History (manipulación del historial de la ventana actual)
  • Objeto Location (manipulación de la URL actual)
  • Objeto WebStorage (acceso al LocalStorage o SessionStorage)
  • Objeto Performance (rendimiento de la página)
  • Objeto Navigator (características del navegador)
  • Tipos de eventos más populares.

Cuarta página:

Javascript Cheatsheet (DOM). Página 4
  • Document Object Model (DOM)
  • Objeto Document (creación/gestión del documento actual)
  • Objeto Element (creación/gestión de elementos del documento)
  • Objeto Attr (creación/gestión de atributos de un elemento)
  • Objeto Event (creación/gestión de eventos)
  • Objeto Node (creación/gestión de nodos del documento)

Leyenda

Los esquemas de colores tienen cierto significado, así como algunas características de las chuletas:

  • Cada bloque tiene las propiedades y métodos asociados a ese tipo de dato.
  • Casi todos los tipos de datos heredan propiedades/métodos de Object y Function.
  • El icono izquierdo de las propiedades/métodos es el tipo de dato que devuelve.
  • Los colores de los parámetros representan el tipo de dato de los mismos.
  • Las propiedades o métodos estáticos se simbolizan de forma circular.
  • Las características disponibles a partir de ECMAScript 6 (ES6) con fondo rojo.
  • Los parámetros subrayados son obligatorios, el resto opcionales.

Consideraciones

Se agradecerá cualquier tipo de sugerencia, difusión o apunte sobre la cheatsheet.

Descarga

He abandonado la opción de publicar esta cheatsheet bajo un formato de pago porque creo en otra forma de hacer las cosas. Confío en que todo el que sepa valorar el trabajo ajeno que ha supuesto la elaboración de esta chuleta realizará una donación con la cantidad que estime justa. Me gustaría seguir haciendo este trabajo en un formato libre, pero para ello necesito la ayuda de todos.

Agradezco toda difusión que se haga de esta chuleta. Por favor, si lo hacéis, utilizad el enlace de este artículo (o el de la propia página de la chuleta), no utilicen enlaces directos o que puedan hacer hotlinking. Si tienes cualquier tipo de problema con la descarga o donación, contacta conmigo y lo resolveré inmediatamente:

URL | LenguajeJS

Recuerda que también tienes LenguajeCSS.com y LenguajeHTML.com, donde encontrarás otras cheatsheets de frontend. También tienes otras chuletas anteriores que he realizado, como una cheat sheet de PHP o una cheat sheet de ModRewrite.

¿Quieres aprender a usar todo esto? Con la organización de la Oficina de Software Libre de la Universidad de La Laguna y de la Fundación General de la Universidad de La Laguna (Tenerife), imparto un curso de Programación web con Javascript en el que aprenderás a programar con Javascript utilizando las características de la cheatsheet.

Temario y enlaces de inscripción | Curso de Programación web con Javascript

1 2 3 4 5 ... 390 #