Seo

Como perder peso en el navegador

Por : Jhons_1101
2016-06-18
Tags :
Los sitios lentos que provocan en una mala experiencia de usuario.

Hablaremos un poco de tips para mejorar este factor, con simple consejos puede conseguir resultados sorprendentes.
Veremos que cualquier elemento externo que se cargue en nuestro sitio web, hace que nuestra pagina tarde en cargar.

Hay 4 enfoques en donde debemos de centranos. Estos son .Javascript, Html, Css, Imagenes. Miremos cada una de ellas.

Si deseas mas información puedes pulsar el enlace para que le saques mayor provecho a este post.

como perder peso en el navegador
compartir en facebook compartir en Google compartir en Twitter compartir en Blogger compartir como código embebido compartir la url

Enfoque en el Javascript


  • Cargar contenido de terceros asíncronamente

  • Quién nunca ha cargado contenido de terceros para incrustar un video de YouTube o un botón de like/tweet?

    El gran problema es que esos códigos no son siempre distribuidos eficientemente. lo que lleva a una carga mas lenta o en el peor de los casos si el proveedor tiene problemas de servidor o conexión tu sitio web no cargaría a cabalidad.


  • Inspeccionar las longitudes de los arrays

  • El loop es sin duda una de las partes más importantes relacionadas con el rendimiento de JavaScript. Trata de optimizar la lógica dentro de un loop para que cada interacción sea hecha eficientemente.

    Una forma de hacer esto es almacenar el tamaño de la array sobre la que iteraremos, para que no tenga que ser recalculada cada iteración.

    
    <script>
    for (i = 0; i < arr.length; i++) {
      // Mal - arr.length necesita ser recalculado las (n) cantidad de veces
    }
    
    for (i = 0, len = arr.length; i < len; i++) {
      // Bien - arr.length es calculada sólo una vez y entonces es almacenada
    }
    </script>
    
    


  • Evita document.write y los Alert()

  • El uso de document.write hace que la página dependa de su valor de retorno para cargar completamente.
    Esta (mala) práctica ha sido evitada por los desarrolladores, pero aún hay casos donde es necesaria, como un fallback para algún archivo Javascript o para mostrar un mensaje del sistema que no podemos manipular.


  • Evita manipular el dom innecesariamente

  • Navegar por los elementos del DOM es costoso. Aunque los motores de JavaScript son cada vez más potentes y rápidos, siempre es preferible optimizar al máximo las consultas al DOM.

    Una de las alternativas más simples a adoptar es guardar un elemento en una variable cuando tiene que ser usado más de una vez, por lo que sólo se consulta al DOM una vez.

    
    <script>
    // fatal!
    for (var i = 0; i < 100; i++) {
      document.getElementById("mi-elemento").innerHTML += "" + i + "";
    }
    
    // Optimo.!
    var miLista = "";
    
    for (var i = 0; i < 100; i++) {
      miLista += "" + i + "";
    }
    
    document.getElementById("mi-elemento").innerHTML = miLista;
    </script>
    
    


  • Comprime tus scripts

  • Al igual que con el CSS, para mantener un código legible, es una buena idea escribir comentarios y usar indentación. Pero para el navegador, eso no importa. Por eso, recuerda siempre comprimir tu JavaScript mediante herramientas automatizadas. Mi recomendado http://jscompress.com/


    Si despues necesitas editar tu javascript, tienes dos opciones, la primera es tener una copia de respaldo en tu computadora (No recomendable). La segunda opción es descomprimir el código JavaScript mediante una herramienta. Mi recomendado http://jsbeautifier.org/




    Enfoque en el Html


  • Evita código en línea/incrustado

  • Hay tres formas básicas de incluir CSS o Javascript en tu página
    * En linea
    * Incrustado
    * Externo
    Las dos primeras opciones, pese a que reducen el número de solicitudes HTTP, aumentan el tamaño de tu documento HTML. Pero esto puede ser útil cuando tienes archivos pequeños y el costo de hacer una solicitud es mayor.

    La tercera opción nó solo mejora la organización de tu código, sino que también hace posible al navegador cachearlo. Esta opción suele ser la mejor en la mayoría de los casos, sobre todo cuando estás trabajando con archivos grandes y una gran cantidad de páginas.


  • Los estilos arriba, los scripts al fondo

  • Cuando ponemos hojas de estilo en el <head> permitimos a la página mostrarse progresivamente, lo que da la impresión a nuestros usuarios de que la página está cargando rápido.

    Pero si los ponemos al fondo de la página, la página se renderizará sin estilos hasta que el CSS se descargue y aplique.

    Por otro lado, cuando tratamos con JavaScript, es importante poner los scripts al fondo de la página ya que bloquean el renderizado mientras se están descargando y ejecutando.

    
    <html>
    	<head>
    	  <meta charset="UTF-8">
    	  <title>Browser Diet</title>
    
    	  <!-- CSS -->
    	  <link rel="stylesheet" href="style.css" media="all">
    	</head>
    	<body>
    	  <p>Lorem ipsum dolor sit amet.</p>
    
    	  <!-- JS -->
    	  <script src="script.js"></script>
    	</body>
    </html>
    
    


    Enfoque en el Css


  • Comprime tus hojas de estilo

  • Para mantener un código legible, es una buena idea escribir comentarios y usar indentación. Pero para el navegador, eso no importa. Por eso, recuerda siempre comprimir tu CSS mediante herramientas automatizadas. Esto quitará bytes al archivo, lo que resultará en un proceso de descarga, análisis y ejecución más rápido.
    Para los que usan preprocesadores como Sass, Less, y Stylus, es posible configurarlos para que la salida sea comprimida.


  • Combinando múltiples archivos css

  • Otra buena práctica para la organización y mantenimiento de tus estilos es separarlos en componentes modulares. Sin embargo, hace falta una solicitud HTTP para cada archivo. Así que combina tu CSS. Tener un menor número de archivos resultará en un menor número de solicitudes y una página más rápida.


    Enfoque en las imagenes


  • Usa sprites

  • ésta técnica es sobre agrupar varias imágenes en un sólo archivo. Y después posicinarlas con CSS.
    Como resultado, has reducido dramáticamente el número de solicitudes HTTP y evitado cualquier retraso potencial de otros recursos en tu página.

    Cuando estás usando tu sprite, evita dejar demasiado espacio en blanco entre imágenes. Esto no afectará al tamaño del archivo, pero tendrá efecto en el consumo de memoria.

    ejemplo sprite

  • No cambies el tamaño de las imágenes en el html

  • Siempre define el atributo width y height de una imagen. Esto ayudará a evitar repaints y reflows durante el renderizado.
    Sabiendo esto, Tú, como desarrollador que tienes una imagen de 700x700px decides usar esta técnica para mostrar la imágen como 50x50px.
    De lo que no te das cuenta es que se enviarán docenas de kilobytes innecesarios. Siempre ten en mente: sólo porque puedas definir el alto y el ancho de una imágen en HTML, no significa que debas usarlo para reducir el tamaño de imágenes grandes.

    No cambiar tamano imagen

  • Optimiza tus imágenes

  • Los archivos de imágenes contienen muchísima información inútil en la Web. Por ejemplo una foto JPEG puede tener metadatos Exif sobre la cámara (fecha, modelo de cámara, ubicación, etc.). Una imagen PNG contiene información sobre colores, metadatos, y a veces incluso una miniatura incrustada. Nada de esto es usado por el navegador y contribuye al aumento del tamaño del archivo.

    Hay herramientas para la optimización de imágenes que borrarán estos datos innecesarios y te darán un archivo más ligero sin afectar a la calidad. Decimos que hacen una compresión. Mi recomendado es https://compressor.io/




  • Usa WebFonts, Fuentes de imagenes

  • Es una nueva metodología para cargar familias de fuentes que su representación son imagenes como logos, iconos y demás. logrando una carga más rápida de nuestro sitio web, ya que se minimizaron las peticiones al servidor, puesto que sólo se llamo la libreria y la hoja de estilos.
    Existen diversos sitios web que nos ofrece esta posibilidad, Mi recomendado es https://icomoon.io/. por que tiene una alta gama de fuentes. en su versión gratuita.







    Si este contenido te fue útil, no olvides compartirlo en redes sociales, Considéralo. Puede ser la manera de agradecer!


    Agrega tu comentario...

    Puedes utilizar etiquetas <pre></pre>, <p></p>, <div></div>, + (Nombre usuario, para responderle a alguien)

    IWdHej3





    Este post no tiene comentarios, sé el primero en hacerlo
    Esta entrada no cuenta con imágenes adjuntas

    Unete al grupo de whatsApp +57 316 392 6456

    Sigue el grupo en facebook

    Siguenos.....